{"version":3,"file":"ResponsiveFrame.D8-R_08W.mjs","names":["useRef","useState","useMemo","scaleRatio"],"sources":["https:/framerusercontent.com/modules/yVIaFTF9C8thvUaJGCwB/hcEJelQ44qCFhExB6eiM/ResponsiveFrame.js"],"sourcesContent":["// Component that scales a linked frame responsively while preserving its original appearance\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useMemo,useRef,useEffect,useState}from\"react\";/**\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 200\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ResponsiveFrame(props){const{linkedFrame,sourceWidth=300,sourceHeight=200,padding=0,overflowVisible=false,style}=props;const containerRef=useRef(null);const[containerWidth,setContainerWidth]=useState(300);// Get the actual container width\nuseEffect(()=>{const updateWidth=()=>{if(containerRef.current){const width=containerRef.current.offsetWidth;if(width>0){setContainerWidth(width);}}};updateWidth();if(typeof window!==\"undefined\"){window.addEventListener(\"resize\",updateWidth);return()=>window.removeEventListener(\"resize\",updateWidth);}},[]);// Calculate the scale factor and dimensions accounting for padding\nconst{scaledHeight,scaleRatio}=useMemo(()=>{const availableWidth=containerWidth-padding*2;const scaleRatio=availableWidth/sourceWidth;const scaledHeight=sourceHeight*scaleRatio+padding*2;return{scaledHeight,scaleRatio};},[containerWidth,sourceWidth,sourceHeight,padding]);if(!linkedFrame){return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:\"100%\",minWidth:\"300px\",minHeight:\"200px\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#f5f5f5\",border:\"2px dashed #ccc\",borderRadius:\"8px\",color:\"#666\",fontSize:\"14px\",fontFamily:\"system-ui, sans-serif\",padding:padding},children:\"Link a frame and set its original dimensions\"});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:scaledHeight,overflow:overflowVisible?\"visible\":\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:sourceWidth,height:sourceHeight,transform:`scale(${scaleRatio})`,transformOrigin:\"top left\",position:\"absolute\",top:padding,left:padding},children:linkedFrame})});}addPropertyControls(ResponsiveFrame,{linkedFrame:{type:ControlType.Slot,title:\"Linked Frame\",maxCount:1},sourceWidth:{type:ControlType.Number,title:\"Source Width\",defaultValue:300,min:1,max:2e3,step:1,unit:\"px\"},sourceHeight:{type:ControlType.Number,title:\"Source Height\",defaultValue:200,min:1,max:2e3,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:0,min:0,max:100,step:1,unit:\"px\"},overflowVisible:{type:ControlType.Boolean,title:\"Overflow Visible\",defaultValue:false,enabledTitle:\"Visible\",disabledTitle:\"Hidden\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ResponsiveFrame\",\"slots\":[\"linkedFrame\"],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"200\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"300\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ResponsiveFrame.map"],"mappings":"6MAMG,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,cAAY,cAAY,IAAI,eAAa,IAAI,UAAQ,EAAE,kBAAgB,GAAM,SAAO,EAAY,EAAaA,EAAO,KAAK,CAAM,CAAC,EAAe,GAAmBC,EAAS,IAAI,CACvO,MAAc,CAAC,IAAM,MAAgB,CAAC,GAAG,EAAa,QAAQ,CAAC,IAAM,EAAM,EAAa,QAAQ,YAAe,EAAM,GAAG,EAAkB,EAAM,GAAmB,GAAd,GAAa,CAAW,IAAS,OAA2D,OAA9C,EAAO,iBAAiB,SAAS,EAAY,KAAW,EAAO,oBAAoB,SAAS,EAAY,EAAI,EAAE,CAAC,CAClT,GAAK,CAAC,eAAa,cAAYC,MAAY,CAA+C,IAAMC,GAA/B,EAAe,EAAQ,GAAkC,EAAiE,MAAM,CAAC,aAAzC,EAAaA,EAAW,EAAQ,EAAsB,WAAA,EAAW,EAAG,CAAC,EAAe,EAAY,EAAa,EAAQ,CAAC,CAA8Z,OAAzZ,EAA6a,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,GAAG,EAAM,MAAM,OAAO,OAAO,EAAa,SAAS,EAAgB,UAAU,SAAS,SAAS,WAAW,CAAC,SAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,EAAY,OAAO,EAAa,UAAU,SAAS,EAAW,GAAG,gBAAgB,WAAW,SAAS,WAAW,IAAI,EAAQ,KAAK,EAAQ,CAAC,SAAS,EAAY,CAAC,CAAC,CAAC,CAA5uB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,GAAG,EAAM,MAAM,OAAO,OAAO,OAAO,SAAS,QAAQ,UAAU,QAAQ,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,gBAAgB,UAAU,OAAO,kBAAkB,aAAa,MAAM,MAAM,OAAO,SAAS,OAAO,WAAW,wBAAgC,UAAQ,CAAC,SAAS,+CAA+C,CAAC,sBAPhoB,IAAoD,IAAqD,CAO+4B,EAAoB,EAAgB,CAAC,YAAY,CAAC,KAAK,EAAY,KAAK,MAAM,eAAe,SAAS,EAAE,CAAC,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,IAAI,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,IAAI,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAY,QAAQ,MAAM,mBAAmB,aAAa,GAAM,aAAa,UAAU,cAAc,SAAS,CAAC,CAAC"}