{"version":3,"file":"ExternalImage.wfZ0wiHB.mjs","names":["useState","useMemo","useCallback","p"],"sources":["https:/framerusercontent.com/modules/ulM6c76GhuJS4oFMV7zy/AIPsqXdABuy6BYqekT3D/ExternalImage.js"],"sourcesContent":["// Instructions: Create an image component that takes in externally hosted links and maintains the aspect ratio (scale according to the size of the linked image).\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{startTransition,useCallback,useEffect,useMemo,useState}from\"react\";/**\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ExternalImage(props){const{imageUrl=\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt=\"\",fit=\"cover\",align=\"center\",zoom=1,background=\"#FFFFFF\",borderRadius=\"0px\",showLoader=true,loaderColor=\"#CCCCCC\",tile=false,tileWidth=200,style}=props;const resolvedUrl=imageUrl;const resolvedAlt=alt;const isStatic=useIsStaticRenderer();const[natural,setNatural]=useState(null);const[loaded,setLoaded]=useState(false);const[errored,setErrored]=useState(false);useEffect(()=>{startTransition(()=>{setLoaded(false);setErrored(false);setNatural(null);});},[resolvedUrl]);const objectPosition=useMemo(()=>{switch(align){case\"top\":return\"50% 0%\";case\"bottom\":return\"50% 100%\";case\"left\":return\"0% 50%\";case\"right\":return\"100% 50%\";case\"center\":default:return\"50% 50%\";}},[align]);const transformOrigin=useMemo(()=>{switch(align){case\"top\":return\"50% 0%\";case\"bottom\":return\"50% 100%\";case\"left\":return\"0% 50%\";case\"right\":return\"100% 50%\";case\"center\":default:return\"50% 50%\";}},[align]);const onLoad=useCallback(e=>{const img=e.currentTarget;const w=img.naturalWidth||0;const h=img.naturalHeight||0;startTransition(()=>{setLoaded(true);setErrored(false);if(w>0&&h>0)setNatural({w,h});});},[]);const onError=useCallback(()=>{startTransition(()=>{setLoaded(false);setErrored(true);setNatural(null);});},[]);const widthIsFill=style?.width===\"100%\";const heightIsFill=style?.height===\"100%\";const aspectRatio=useMemo(()=>{if(!natural)return undefined;return`${natural.w} / ${natural.h}`;},[natural]);const outerStyle=useMemo(()=>{const base={position:\"relative\",width:\"100%\",height:\"100%\",minWidth:5,minHeight:5,overflow:\"hidden\",background,borderRadius};// Only enforce aspect ratio when the layer isn't stretching both axes.\n// This keeps the component freely resizable in the canvas while still\n// maintaining ratio for intrinsic/one-axis sizing.\nif(aspectRatio&&(!widthIsFill||!heightIsFill)){base.aspectRatio=aspectRatio;}return base;},[aspectRatio,background,borderRadius,heightIsFill,widthIsFill]);const imgStyle=useMemo(()=>({position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:zoom!==1?\"cover\":fit,objectPosition,display:\"block\",borderRadius,transform:zoom!==1?`scale(${Math.max(1,zoom)})`:undefined,transformOrigin:zoom!==1?transformOrigin:undefined}),[borderRadius,fit,objectPosition,transformOrigin,zoom]);const tileStyle=useMemo(()=>({position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",backgroundImage:resolvedUrl?`url(${resolvedUrl})`:undefined,backgroundRepeat:\"repeat\",backgroundPosition:objectPosition,backgroundSize:`${Math.max(1,tileWidth)}px auto`,borderRadius}),[borderRadius,objectPosition,resolvedUrl,tileWidth]);const showSpinner=showLoader&&!isStatic&&!loaded&&!errored&&Boolean(resolvedUrl);return /*#__PURE__*/_jsxs(\"div\",{style:{...outerStyle,...style||{}},\"aria-busy\":showSpinner,\"aria-live\":\"polite\",children:[showSpinner&&/*#__PURE__*/_jsxs(\"div\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",inset:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:18,height:18,borderRadius:999,border:`2px solid ${loaderColor}`,borderTopColor:\"transparent\",boxSizing:\"border-box\",animation:\"external-image-spin 800ms linear infinite\"}}),/*#__PURE__*/_jsx(\"style\",{children:`@keyframes external-image-spin { to { transform: rotate(360deg); } }`})]}),errored&&/*#__PURE__*/_jsx(\"div\",{role:\"img\",\"aria-label\":resolvedAlt||\"Image failed to load\",style:{position:\"absolute\",inset:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",color:\"#000\",background,opacity:.6,fontSize:12,padding:10,textAlign:\"center\"},children:\"Failed to load image\"}),tile?/*#__PURE__*/_jsx(\"div\",{\"aria-label\":resolvedAlt,role:resolvedAlt?\"img\":undefined,style:tileStyle}):/*#__PURE__*/_jsx(\"img\",{src:resolvedUrl,alt:resolvedAlt,style:imgStyle,onLoad:onLoad,onError:onError,draggable:false}),tile&&/*#__PURE__*/_jsx(\"img\",{src:resolvedUrl,alt:\"\",style:{position:\"absolute\",width:1,height:1,opacity:0,pointerEvents:\"none\"},onLoad:onLoad,onError:onError,draggable:false})]});}addPropertyControls(ExternalImage,{imageUrl:{type:ControlType.String,title:\"Image URL\",defaultValue:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",placeholder:\"https://…\"},alt:{type:ControlType.String,title:\"Alt\",defaultValue:\"\",placeholder:\"Description (optional)\"},fit:{type:ControlType.Enum,title:\"Fit\",options:[\"contain\",\"cover\"],optionTitles:[\"Contain\",\"Cover\"],defaultValue:\"cover\",displaySegmentedControl:true,hidden:p=>p.tile||(p.zoom??1)!==1},align:{type:ControlType.Enum,title:\"Align\",options:[\"center\",\"top\",\"bottom\",\"left\",\"right\"],optionTitles:[\"Center\",\"Top\",\"Bottom\",\"Left\",\"Right\"],defaultValue:\"center\"},zoom:{type:ControlType.Number,title:\"Zoom\",defaultValue:1,min:1,max:4,step:.01,hidden:p=>p.tile},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},borderRadius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"0px\"},tile:{type:ControlType.Boolean,title:\"Tile\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},tileWidth:{type:ControlType.Number,title:\"Tile Width\",defaultValue:200,min:1,max:2e3,step:1,unit:\"px\",hidden:p=>!p.tile},showLoader:{type:ControlType.Boolean,title:\"Loader\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},loaderColor:{type:ControlType.Color,title:\"Loader Color\",defaultValue:\"#CCCCCC\",hidden:p=>!p.showLoader}});ExternalImage.displayName=\"External Image\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ExternalImage\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"300\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"400\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ExternalImage.map"],"mappings":"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"}