{"version":3,"file":"Image_Code_Component_Notes.BFlrd5Xf.mjs","names":["React.useState"],"sources":["https:/framerusercontent.com/modules/oAepcvUtm4kG60cbuu0U/2J5I3e4o7P5JgpEwbmve/Image_Code_Component_Notes.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export function ResponsiveImage({image}){const[aspectRatio,setAspectRatio]=React.useState(1);React.useEffect(()=>{if(!image)return;const img=new Image;img.src=image;img.onload=()=>{const ratio=img.naturalWidth/img.naturalHeight;setAspectRatio(ratio);};},[image]);const paddingBottom=`${100/aspectRatio}%`;return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\",paddingBottom,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"img\",{src:image,loading:\"lazy\"// 👈 Lazy loading enabled here\n,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"contain\"}})});}addPropertyControls(ResponsiveImage,{image:{type:ControlType.Image,title:\"Image\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"ResponsiveImage\":{\"type\":\"reactComponent\",\"name\":\"ResponsiveImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Image_Code_Component_Notes.map"],"mappings":"iLAA2H,SAAgB,EAAgB,CAAC,SAAO,CAAC,GAAK,CAAC,EAAY,GAAgBA,EAAe,EAAE,CAAqN,OAApN,MAAoB,CAAC,GAAG,CAAC,EAAM,OAAO,IAAM,EAAI,IAAI,MAAM,EAAI,IAAI,EAAM,EAAI,WAAW,CAAgD,EAAnC,EAAI,aAAa,EAAI,cAAmC,GAAK,CAAC,EAAM,CAAC,CAA+D,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,cAA9F,GAAG,IAAI,EAAY,GAAyF,SAAS,SAAS,CAAC,SAAsB,EAAK,MAAM,CAAC,IAAI,EAAM,QAAQ,OACxkB,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,UAAU,CAAC,CAAC,CAAC,CAAC,kBADjD,IAA4B,IAAoD,CAC7B,EAAoB,EAAgB,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,CAAC,CAAC"}