{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/KW0BDBr9hLF4u84A4OUh/ZOVEbYLrBKgR5cvWISqJ/Lightbox.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";export function CMSContentImageLightboxWithSmoothTransition(Component){return props=>{const[lightboxDisplay,setLightboxDisplay]=useState(false);const[selectedImage,setSelectedImage]=useState(\"\");const[opacity,setOpacity]=useState(0);const handleImageClick=src=>{setSelectedImage(src);setLightboxDisplay(true);};useEffect(()=>{if(lightboxDisplay){setTimeout(()=>setOpacity(1),10);}},[lightboxDisplay]);const closeLightbox=()=>{setOpacity(0);setTimeout(()=>setLightboxDisplay(false),300);};return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Component,{...props,onClick:e=>{if(e.target.tagName===\"IMG\"){handleImageClick(e.target.src);}},style:{cursor:\"pointer\"}}),/*#__PURE__*/_jsx(\"style\",{children:`\n                    .${props.className} img {\n                        cursor: zoom-in;\n                    }\n                    .lightbox-backdrop {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        width: 100vw;\n                        height: 100vh;\n                        background-color: rgba(0, 0, 0, 0.8);\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                        z-index: 1000;\n                        opacity: 0;\n                        transition: opacity 0.3s ease;\n                    }\n                    .lightbox-image {\n                        max-height: 90%;\n                        max-width: 90%;\n                    }\n                `}),lightboxDisplay&&/*#__PURE__*/_jsx(\"div\",{className:\"lightbox-backdrop\",onClick:closeLightbox,style:{opacity:opacity},children:/*#__PURE__*/_jsx(\"img\",{src:selectedImage,className:\"lightbox-image\",alt:\"Fullscreen\"})})]});};}\nexport const __FramerMetadata__ = {\"exports\":{\"CMSContentImageLightboxWithSmoothTransition\":{\"type\":\"reactHoc\",\"name\":\"CMSContentImageLightboxWithSmoothTransition\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Lightbox.map"],
  "mappings": "qEAA4H,SAASA,EAA4CC,EAAU,CAAC,OAAOC,GAAO,CAAC,GAAK,CAACC,EAAgBC,CAAkB,EAAEC,EAAS,EAAK,EAAO,CAACC,EAAcC,CAAgB,EAAEF,EAAS,EAAE,EAAO,CAACG,EAAQC,CAAU,EAAEJ,EAAS,CAAC,EAAQK,EAAiBC,GAAK,CAACJ,EAAiBI,CAAG,EAAEP,EAAmB,EAAI,CAAE,EAAEQ,EAAU,IAAI,CAAIT,GAAiB,WAAW,IAAIM,EAAW,CAAC,EAAE,EAAE,CAAG,EAAE,CAACN,CAAe,CAAC,EAAE,IAAMU,EAAc,IAAI,CAACJ,EAAW,CAAC,EAAE,WAAW,IAAIL,EAAmB,EAAK,EAAE,GAAG,CAAE,EAAE,OAAoBU,EAAMC,EAAU,CAAC,SAAS,CAAcC,EAAKf,EAAU,CAAC,GAAGC,EAAM,QAAQ,GAAG,CAAI,EAAE,OAAO,UAAU,OAAOQ,EAAiB,EAAE,OAAO,GAAG,CAAG,EAAE,MAAM,CAAC,OAAO,SAAS,CAAC,CAAC,EAAeM,EAAK,QAAQ,CAAC,SAAS;AAAA,uBACryBd,EAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAqBrB,CAAC,EAAEC,GAA8Ba,EAAK,MAAM,CAAC,UAAU,oBAAoB,QAAQH,EAAc,MAAM,CAAC,QAAQL,CAAO,EAAE,SAAsBQ,EAAK,MAAM,CAAC,IAAIV,EAAc,UAAU,iBAAiB,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAE",
  "names": ["CMSContentImageLightboxWithSmoothTransition", "Component", "props", "lightboxDisplay", "setLightboxDisplay", "ye", "selectedImage", "setSelectedImage", "opacity", "setOpacity", "handleImageClick", "src", "ue", "closeLightbox", "u", "l", "p"]
}