{"version":3,"file":"withLightbox.1SitzPTA.mjs","names":["useState","React","Children","_Fragment"],"sources":["https:/framerusercontent.com/modules/NqlnHLQOldIVyfJDWpcM/KIEusviTItf5G1kBKkY9/withLightbox.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{forwardRef}from\"react\";import{motion,AnimatePresence}from\"framer-motion\";import React,{useEffect,useState,Children}from\"react\";import{createPortal}from\"react-dom\";/**\n * A lightbox code override for Framer.\n *\n * Apply the `withLightbox` override to a frame that contains 2 children.\n * 1. First child = trigger (what user clicks)\n * 2. Second child = lightbox content (what shows in modal)\n *\n * IMPORTANT: Keep both children visible:true in Framer.\n * The override will handle showing and hiding the modal.\n *\n * @param Component The component to wrap with lightbox functionality.\n * @returns A component with lightbox functionality.\n */export function withLightbox(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const[isOpen,setIsOpen]=useState(false);const containerRef=React.useRef(null);// Extract trigger and content from children\n// Framer's Layers panel order is reversed relative to DOM order.\n// Reverse the array so top-to-bottom in the Layers panel matches array order.\nconst childArray=Children.toArray(props.children).reverse();// First (top layer) = trigger\n// Second (below it) = content\nconst triggerChild=childArray[0];const modalChild=childArray[1]||childArray[0];// Clone modal child and force visibility + full size for the portal\n// Only prepare this when the lightbox is actually open\nconst visibleModalChild=isOpen&&/*#__PURE__*/React.isValidElement(modalChild)?/*#__PURE__*/React.cloneElement(modalChild,{style:{...modalChild.props?.style,visibility:\"visible\",position:\"relative\",opacity:1}}):null;const handleContainerClick=e=>{// Since we're only rendering the trigger, any click on it should open the lightbox\ne.stopPropagation();setIsOpen(true);};const handleOverlayClick=e=>{// Only close if clicking the overlay itself, not the content\nif(e.target===e.currentTarget){setIsOpen(false);}};const handleKeyDown=e=>{if(e.key===\"Escape\"){setIsOpen(false);}};// Prevent body scroll when open\nuseEffect(()=>{if(!isOpen)return;const prev=document.body.style.overflow;document.body.style.overflow=\"hidden\";return()=>{document.body.style.overflow=prev;};},[isOpen]);// Add escape key listener\nuseEffect(()=>{if(!isOpen)return;window.addEventListener(\"keydown\",handleKeyDown);return()=>{window.removeEventListener(\"keydown\",handleKeyDown);};},[isOpen]);// Add cursor to trigger element\nuseEffect(()=>{if(!containerRef.current)return;const lightboxFrame=containerRef.current.firstElementChild;if(!lightboxFrame)return;// Since we're only rendering the trigger now, it should be the only child\nconst triggerElement=lightboxFrame.firstElementChild;if(triggerElement)triggerElement.style.cursor=\"pointer\";},[]);// Always only pass the trigger child to Component\n// The modal child should only ever appear in the portal\nreturn /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{ref:containerRef,onClick:handleContainerClick,style:{display:\"contents\"},children:/*#__PURE__*/_jsx(Component,{ref:ref,...props,children:triggerChild})}),/*#__PURE__*/_jsx(\"style\",{children:`\n                        .lightbox-content {\n                            position: relative !important;\n                        }\n\n                        .lightbox-content > div {\n                            position: relative !important;\n                        }\n                      \n                        .lightbox-content > div > div {\n                            position: relative !important;\n                        }\n \n                        .lightbox-content > div:has(div > div > div > iframe) {\n                            width: 90vw !important;\n                            aspect-ratio: 16 / 9 !important;\n                            /* height: 90vh !important; */\n                        }\n\n                        .lightbox-content img {\n                            width: min(90vw, 800px) !important;\n                            height: 100% !important;\n                            /*\n                              width: revert-layer !important;\n                              height: revert-layer !important;\n                              max-width: 100% !important;\n                              max-height: fit-content !important;\n                            */\n                        }\n                    `}),isOpen&&visibleModalChild&&/*#__PURE__*/createPortal(/*#__PURE__*/_jsx(AnimatePresence,{children:/*#__PURE__*/_jsx(motion.div,{role:\"dialog\",\"aria-modal\":\"true\",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:handleOverlayClick,style:styles.overlay,children:/*#__PURE__*/_jsx(motion.div,{initial:{scale:.9,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.9,opacity:0},transition:{type:\"spring\",damping:22,stiffness:280},onClick:e=>e.stopPropagation(),style:styles.modal,children:/*#__PURE__*/_jsx(\"div\",{style:styles.outer,children:/*#__PURE__*/_jsx(\"div\",{className:\"lightbox-content\",style:styles.inner,children:visibleModalChild})})})})}),document.body)]});});}const styles={overlay:{position:\"fixed\",inset:0,width:\"100vw\",height:\"100vh\",backgroundColor:\"rgba(0, 0, 0, 0.8)\",zIndex:2147483647,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",cursor:\"default\",transform:\"none\",contain:\"size layout style paint\"},modal:{// width: \"90vw\",\n// height: \"90vh\",\nmaxWidth:\"90vw\",maxHeight:\"90vh\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"hidden\",background:\"transparent\",flexShrink:0},outer:{position:\"relative\",width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"hidden\"},inner:{display:\"block\",maxWidth:\"100%\",maxHeight:\"100%\",width:\"100%\",height:\"100%\"}};// Default component for testing in preview mode\nconst TestLightbox=withLightbox(\"div\");export default function LightboxPreview(){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100vw\",height:\"100vh\",padding:40},children:/*#__PURE__*/_jsx(TestLightbox,{style:{width:\"100%\",height:\"fit-content\",display:\"flex\",gap:20},children:[\"Lightbox\",\"Button\"].map(letter=>/*#__PURE__*/_jsx(\"div\",{style:{width:300,height:300,flexShrink:0,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#f0f0f0\",border:\"5px solid #ff0000\",fontSize:48,fontWeight:\"bold\"},children:letter},letter))})});}\nexport const __FramerMetadata__ = {\"exports\":{\"withLightbox\":{\"type\":\"reactHoc\",\"name\":\"withLightbox\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"LightboxPreview\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./withLightbox.map"],"mappings":"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"}