{"version":3,"file":"LightboxButton.DxHNOaAP.mjs","names":["createRoot","_Fragment"],"sources":["https:/framerusercontent.com/modules/JEiObb61obHjmfsis3Ss/erm8ke3uGgOHWRB3GEYK/LightboxButton.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{createRoot}from\"react-dom/client\";import{addPropertyControls,ControlType}from\"framer\";export default function LightboxButton({label,normalColor,hoverColor,video}){const handleClick=()=>{const lightbox=document.createElement(\"div\");lightbox.classList.add(\"lightbox\");lightbox.innerHTML=`\n            <div class=\"lightbox__pane\">\n                <div class=\"lightbox__wrap\">\n                    <button class=\"close-btn\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                            <title>Schlie\\xdfen / Close</title>\n                            <path fill=\"currentColor\" d=\"M21.0509 19.7792L4.08032 2.80859L2.66611 4.22281L19.6367 21.1934L21.0509 19.7792Z\"></path>\n                            <path fill=\"currentColor\" d=\"M19.9195 2.80678L2.94897 19.7773L4.36319 21.1916L21.3338 4.22099L19.9195 2.80678Z\"></path>\n                        </svg>\n                    </button>\n                <div class=\"lightbox__portal\"></div>\n            </div>\n        `;const portal=lightbox.querySelector(\".lightbox__portal\");const root=createRoot(portal);root.render(video);const close=lightbox.querySelector(\".close-btn\");close.addEventListener(\"click\",()=>{lightbox.classList.remove(\"is-open\");setTimeout(()=>{root.unmount();lightbox.remove();},250);});document.body.append(lightbox);requestAnimationFrame(()=>{requestAnimationFrame(()=>{lightbox.classList.add(\"is-open\");});});};const styles={\"--_normal-color\":normalColor,\"--_hover-color\":hoverColor};return /*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs(\"button\",{style:styles,className:\"lightbox-button\",onClick:handleClick,children:[/*#__PURE__*/_jsx(\"svg\",{width:\"16\",height:\"16\",viewBox:\"0 0 16 16\",fill:\"none\",children:/*#__PURE__*/_jsx(\"path\",{\"fill-rule\":\"evenodd\",\"clip-rule\":\"evenodd\",d:\"M1.59961 0L14.3996 8L1.59961 16V0ZM3.2172 2.91989V13.0801L11.3469 8L3.2172 2.91989Z\",fill:\"currentColor\"})}),/*#__PURE__*/_jsx(\"span\",{children:label})]})});}addPropertyControls(LightboxButton,{video:{title:\"Video\",type:ControlType.Slot},label:{type:ControlType.String,title:\"Button Label\",defaultValue:\"Popup!\"},normalColor:{type:ControlType.Color,title:\"Normal Color\",defaultValue:\"#000\"},hoverColor:{type:ControlType.Color,title:\"Hover Color\",defaultValue:\"#000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LightboxButton\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LightboxButton.map"],"mappings":"wLAA4K,SAAwB,EAAe,CAAC,QAAM,cAAY,aAAW,SAAO,CAAC,IAAM,MAAgB,CAAC,IAAM,EAAS,SAAS,cAAc,MAAM,CAAC,EAAS,UAAU,IAAI,WAAW,CAAC,EAAS,UAAU;;;;;;;;;;;;UAYhT,IAAM,EAAKA,EAAvD,EAAS,cAAc,oBAAoB,CAA8B,CAAC,EAAK,OAAO,EAAM,CAAa,EAAS,cAAc,aAAa,CAAO,iBAAiB,YAAY,CAAC,EAAS,UAAU,OAAO,UAAU,CAAC,eAAe,CAAC,EAAK,SAAS,CAAC,EAAS,QAAQ,EAAG,IAAI,EAAG,CAAC,SAAS,KAAK,OAAO,EAAS,CAAC,0BAA0B,CAAC,0BAA0B,CAAC,EAAS,UAAU,IAAI,UAAU,EAAG,EAAG,EAA4E,OAAoB,EAAKC,EAAU,CAAC,SAAsB,EAAM,SAAS,CAAC,MAAtI,CAAC,kBAAkB,EAAY,iBAAiB,EAAW,CAAwF,UAAU,kBAAkB,QAAQ,EAAY,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,SAAsB,EAAK,OAAO,CAAC,YAAY,UAAU,YAAY,UAAU,EAAE,sFAAsF,KAAK,eAAe,CAAC,CAAC,CAAC,CAAc,EAAK,OAAO,CAAC,SAAS,EAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAZj3B,IAAyC,IAAoD,CAYsxB,EAAoB,EAAe,CAAC,MAAM,CAAC,MAAM,QAAQ,KAAK,EAAY,KAAK,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,SAAS,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,OAAO,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,OAAO,CAAC,CAAC"}