import{jsx as n,jsxs as e}from"react/jsx-runtime";import{useState as o,useEffect as t}from"react";import{createPortal as a}from"react-dom";function i(){return n("svg",{stroke:"currentColor",fill:"none","stroke-width":"0",viewBox:"0 0 15 15",height:"20",width:"20",xmlns:"http://www.w3.org/2000/svg",children:n("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",fill:"currentColor"})})}function r(r){const{open:d,toggle:l,onClose:s,onOpenChange:c,title:p,footer:f,header:m,children:u,hideIcon:h,position:_,className:y,wrapperClassName:x,...g}=r,[w,b]=o(!d);function v(){l&&l(),s&&s(),c&&c(!1)}if(t((()=>(document.body.style.overflow=d?"hidden":"auto",()=>{document.body.style.overflow="auto"})),[d]),t((()=>{if(d)return b(!1);const n=setTimeout((()=>{b(!0)}),500);return()=>clearTimeout(n)}),[d]),"undefined"==typeof window||!d&&w)return null;const C=["modal"];d&&C.push("modal__open"),_&&C.push(`modal__position-${_}`),x&&C.push(x);const k=["modal__popup"];y&&k.push(y);const N=!h||p?e("header",{className:"modal__header",children:[m||n("h3",{className:"modal__title",children:p}),h?null:n("button",{onClick:v,className:"modal__close-button",children:n(i,{})})]}):null,L=e("div",{className:C.join(" "),children:[n("div",{onClick:v,className:"modal__backdrop"}),e("div",{className:k.join(" "),...g,children:[N,n("div",{className:"modal__body",children:u}),!!f&&n("footer",{children:f})]})]});return a(L,document.body)}function d(n=!1){const[e,t]=o(n);return[e,function(){t(!e)}]}!function(n,e){void 0===e&&(e={});var o=e.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}("@keyframes fade-in {\n   0% {\n      opacity: 0;\n   }\n   100% {\n      opacity: 1;\n   }\n}\n\n@keyframes fade-out {\n   0% {\n      opacity: 1;\n   }\n   100% {\n      opacity: 0;\n   }\n}\n\n@keyframes fade-in-slide-down {\n   0% {\n      opacity: 0;\n      transform: translateY(-15px);\n   }\n   100% {\n      opacity: 1;\n      transform: translateY(0);\n   }\n}\n\n@keyframes fade-out-slide-up {\n   0% {\n      opacity: 1;\n      transform: translateY(0);\n   }\n   100% {\n      opacity: 0;\n      transform: translateY(15px);\n   }\n}\n\n.modal {\n   position: fixed;\n   width: 100vw;\n   height: 100dvh;\n   top: 0;\n   left: 0;\n   display: flex;\n   flex-wrap: wrap;\n   flex-direction: column;\n   align-content: center;\n   z-index: 9999;\n   justify-content: center;\n}\n.modal__position-top {\n   justify-content: flex-start;\n}\n\n.modal__backdrop {\n   background-color: rgba(0, 0, 0, 0.2);\n   position: fixed;\n   top: 0;\n   left: 0;\n   width: 100%;\n   height: 100%;\n   z-index: 9999;\n   opacity: 0;\n   animation: fade-out 0.5s forwards;\n}\n\n.modal__open .modal__backdrop {\n   animation: fade-in 0.5s forwards;\n}\n\n.modal__popup {\n   padding: 20px;\n   border-radius: 18px;\n   width: 90%;\n   max-height: 75vh;\n   border: 1px solid #ddd;\n   background: #fff;\n   z-index: 99999;\n   opacity: 0;\n   display: flex;\n   flex-direction: column;\n   transform: translateY(-15px);\n   max-width: 550px;\n   animation: fade-out-slide-up 0.5s ease-out forwards;\n   overflow: hidden;\n}\n\n.modal__open .modal__popup {\n   animation: fade-in-slide-down 0.5s ease-out forwards;\n}\n\n.modal__header {\n   display: flex;\n   justify-content: space-between;\n   align-items: flex-start;\n}\n\n.modal__title {\n   color: #000000c9;\n   margin: 0 0 12px;\n   font-weight: 600;\n   font-size: 22px;\n}\n\n.modal__body {\n   height: 100%;\n   overflow-y: auto;\n   flex-grow: 1;\n}\n\n.modal__close-button {\n   cursor: pointer;\n   border-radius: 50%;\n   border: none;\n   color: rgb(233 30 99);\n   height: 32px;\n   width: 32px;\n   overflow: hidden;\n   display: flex;\n   justify-content: center;\n   align-items: center;\n   margin: -4px 0 0;\n   background: #fff !important;\n   transition-property: all;\n   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n   transition-duration: 0.2s;\n}\n.modal__close-button:hover {\n   background: rgba(0, 121, 211, 0.1) !important;\n}\n",{insertAt:"top"});export{r as Modal,r as default,d as useToggle};
