{"version":3,"file":"ImageAspectRatio_Prod.B4fIBDPJ.mjs","names":["ImgFramer","useId","useState"],"sources":["https:/framerusercontent.com/modules/sZfbaLFMvrbGxPuX8Lnu/jSRrU5elKcpeaigpOM7p/ImageAspectRatio_Prod.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,Image as ImgFramer,RenderTarget}from\"framer\";import{useId,useState,useEffect}from\"react\";import{ComponentMessage}from\"https://framer.com/m/Utils-FINc.js\";// ------------------------------------------------------------ //\n// PROPERTY CONTROLS\n// ------------------------------------------------------------ //\naddPropertyControls(AspectRatioImage,{image:{type:ControlType.ResponsiveImage},radius:{// @ts-expect-error - BorderRadius is not a in this NPM version\ntype:ControlType.BorderRadius,defaultValue:\"0px\"},border:{// @ts-expect-error - Border is not a in this NPM version\ntype:ControlType.Border,optional:true},shadows:{// @ts-expect-error - Shadows is not a in this NPM version\ntype:ControlType.BoxShadow},draggable:{type:ControlType.Boolean,defaultValue:false,description:\"More components at [Framer University](https://frameruni.link/cc).\"}});// ------------------------------------------------------------ //\n// MAIN COMPONENT\n// ------------------------------------------------------------ //\n/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 200\n * @framerDisableUnlink\n */export default function AspectRatioImage(props){const isOnFramerCanvas=RenderTarget.current()===RenderTarget.canvas;const id=useInstanceId();const{width,height,aspectRatio,isLoading,error}=useImageDimensions(props.image?.src||\"\");const styleCanvas=`\n  #${id} div div[data-framer-background-image-wrapper] { position: relative !important; }\n  #${id} div div[data-framer-background-image-wrapper] img:last-of-type { position: relative !important; }\n  `;const style=`\n  #${id} div div[data-framer-background-image-wrapper] { position: relative !important; }\n  `;// Optional: Log dimensions for debugging\n// useEffect(() => {\n//   if (!isLoading && !error) {\n//     console.log(\n//       `Image dimensions: ${width}x${height}, Aspect Ratio: ${aspectRatio}`\n//     );\n//   }\n// }, [width, height, aspectRatio, isLoading, error]);\nif(!(\"image\"in props)||!props.image){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsx(ComponentMessage,{title:\"Image Aspect Ratio\",subtitle:\"Set up the component by adding image to the component properties.\"})});}return /*#__PURE__*/_jsxs(\"div\",{\"data-frameruni\":true,id:id,style:{overflow:\"hidden\",aspectRatio:aspectRatio,width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(ImgFramer,{background:props.image,draggable:props.draggable,style:{boxShadow:props.shadows,borderRadius:props.radius}}),isOnFramerCanvas?/*#__PURE__*/_jsx(\"style\",{children:styleCanvas}):/*#__PURE__*/_jsx(\"style\",{children:style}),props.border&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,borderWidth:props.border.borderWidth,borderStyle:props.border.borderStyle,borderColor:props.border.borderColor,borderRadius:props.radius,pointerEvents:\"none\"}})]});}const useInstanceId=()=>{const id=useId();const cleanId=id.replace(/:/g,\"\");const instanceId=`frameruni-${cleanId}`;return instanceId;};// ------------------------------------------------------------ //\n// HELPER HOOKS\n// ------------------------------------------------------------ //\nconst useImageDimensions=src=>{const[dimensions,setDimensions]=useState({width:0,height:0,aspectRatio:0,isLoading:true,error:null});useEffect(()=>{if(!src){setDimensions(prev=>({...prev,error:\"No image source provided\",isLoading:false}));return;}const img=new Image;img.onload=()=>{const{naturalWidth,naturalHeight}=img;setDimensions({width:naturalWidth,height:naturalHeight,aspectRatio:naturalWidth/naturalHeight,isLoading:false,error:null});};img.onerror=()=>{setDimensions(prev=>({...prev,error:\"Failed to load image\",isLoading:false}));};img.src=src;return()=>{img.onload=null;img.onerror=null;};},[src]);return dimensions;};AspectRatioImage.displayName=\"Image Aspect Ratio\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AspectRatioImage\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"\",\"framerIntrinsicHeight\":\"200\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageAspectRatio_Prod.map"],"mappings":"mQAeG,SAAwB,EAAiB,EAAM,CAAC,IAAM,EAAiB,EAAa,SAAS,GAAG,EAAa,OAAa,EAAG,GAAe,CAAM,CAAC,QAAM,SAAO,cAAY,YAAU,SAAO,EAAmB,EAAM,OAAO,KAAK,GAAG,CAAO,EAAY;KACtP,EAAG;KACH,EAAG;IACE,EAAM;KACX,EAAG;IAS0P,MAA/P,EAAE,UAAU,IAAQ,CAAC,EAAM,MAA2B,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,CAAC,SAAsB,EAAK,EAAiB,CAAC,MAAM,qBAAqB,SAAS,oEAAoE,CAAC,CAAC,CAAC,CAAsB,EAAM,MAAM,CAAC,iBAAiB,GAAQ,KAAG,MAAM,CAAC,SAAS,SAAqB,cAAY,MAAM,OAAO,OAAO,OAAO,CAAC,SAAS,CAAc,EAAKA,EAAU,CAAC,WAAW,EAAM,MAAM,UAAU,EAAM,UAAU,MAAM,CAAC,UAAU,EAAM,QAAQ,aAAa,EAAM,OAAO,CAAC,CAAC,CAAC,EAA8B,EAAK,QAAQ,CAAC,SAAS,EAAY,CAAC,CAAc,EAAK,QAAQ,CAAC,SAAS,EAAM,CAAC,CAAC,EAAM,QAAqB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,YAAY,EAAM,OAAO,YAAY,YAAY,EAAM,OAAO,YAAY,YAAY,EAAM,OAAO,YAAY,aAAa,EAAM,OAAO,cAAc,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,sBA5Bn0B,IAAoF,IAA4C,IAAiE,CAG1P,EAAoB,EAAiB,CAAC,MAAM,CAAC,KAAK,EAAY,gBAAgB,CAAC,OAAO,CACtF,KAAK,EAAY,aAAa,aAAa,MAAM,CAAC,OAAO,CACzD,KAAK,EAAY,OAAO,SAAS,GAAK,CAAC,QAAQ,CAC/C,KAAK,EAAY,UAAU,CAAC,UAAU,CAAC,KAAK,EAAY,QAAQ,aAAa,GAAM,YAAY,qEAAqE,CAAC,CAAC,CAsB8tB,MAAuF,aAA3DC,GAAO,CAAkB,QAAQ,KAAK,GAAG,GAGn8B,EAAmB,GAAK,CAAC,GAAK,CAAC,EAAW,GAAeC,EAAS,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,GAAK,MAAM,KAAK,CAAC,CAA8d,OAA7d,MAAc,CAAC,GAAG,CAAC,EAAI,CAAC,EAAc,IAAO,CAAC,GAAG,EAAK,MAAM,2BAA2B,UAAU,GAAM,EAAE,CAAC,OAAQ,IAAM,EAAI,IAAI,MAAsS,MAAhS,GAAI,WAAW,CAAC,GAAK,CAAC,eAAa,iBAAe,EAAI,EAAc,CAAC,MAAM,EAAa,OAAO,EAAc,YAAY,EAAa,EAAc,UAAU,GAAM,MAAM,KAAK,CAAC,EAAG,EAAI,YAAY,CAAC,EAAc,IAAO,CAAC,GAAG,EAAK,MAAM,uBAAuB,UAAU,GAAM,EAAE,EAAG,EAAI,IAAI,MAAc,CAAC,EAAI,OAAO,KAAK,EAAI,QAAQ,OAAS,CAAC,EAAI,CAAC,CAAQ,GAAa,EAAiB,YAAY"}