polpo 0.1.4 → 0.1.6

package/dist/{use-modal-in-container-DiNW1PE_.d.cts → use-modal-transition-C6mR_NZh.d.cts}

@@ -1,34 +1,32 @@
 import { RefObject } from 'react';
 import { P as PositionContainer } from './get-modal-position-drle0OjP.cjs';
 
-declare enum ModalState {
-    OPENING = "OPENING",
-    OPEN = "OPEN",
-    CLOSING = "CLOSING",
-    CLOSED = "CLOSED"
-}
-declare const useModalTransition: (transitionDuration?: number, onClose?: () => void) => {
-    isVisible: boolean;
-    closeModal: () => void;
-    openModal: () => void;
-    modalState: ModalState;
-};
-
 type UseModalInContainerParams<Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container> = {
     closeOnClickOutside?: boolean;
-    transitionDuration?: number;
     windowOffset?: number;
     offset?: number;
     position?: `${PositionContainer}`;
     modalRef: RefObject<Modal>;
     containerRef?: RefObject<Container>;
-    onClose?: () => void;
+    isOpen: boolean;
+    onClose: () => void;
+};
+declare const useModalInContainer: <Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container>({ closeOnClickOutside, offset, windowOffset, position, modalRef, containerRef, isOpen, onClose, }: UseModalInContainerParams<Container, Modal>) => void;
+
+declare enum ModalState {
+    OPENING = "OPENING",
+    OPEN = "OPEN",
+    CLOSING = "CLOSING",
+    CLOSED = "CLOSED"
+}
+type UseModalTransitionParams = {
+    transitionDuration?: number;
+    onClose: () => void;
+    isOpen: boolean;
 };
-declare const useModalInContainer: <Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container>({ closeOnClickOutside, offset, windowOffset, position, transitionDuration, modalRef, containerRef, onClose, }: UseModalInContainerParams<Container, Modal>) => {
+declare const useModalTransition: ({ transitionDuration, onClose, isOpen }: UseModalTransitionParams) => {
     isVisible: boolean;
-    closeModal: () => void;
-    openModal: () => void;
     modalState: ModalState;
 };
 
-export { ModalState as M, type UseModalInContainerParams as U, useModalTransition as a, useModalInContainer as u };
+export { ModalState as M, type UseModalTransitionParams as U, type UseModalInContainerParams as a, useModalTransition as b, useModalInContainer as u };

package/dist/{use-modal-in-container-neGo-kMk.d.ts → use-modal-transition-DBAyFSqW.d.ts}

@@ -1,34 +1,32 @@
 import { RefObject } from 'react';
 import { P as PositionContainer } from './get-modal-position-drle0OjP.js';
 
-declare enum ModalState {
-    OPENING = "OPENING",
-    OPEN = "OPEN",
-    CLOSING = "CLOSING",
-    CLOSED = "CLOSED"
-}
-declare const useModalTransition: (transitionDuration?: number, onClose?: () => void) => {
-    isVisible: boolean;
-    closeModal: () => void;
-    openModal: () => void;
-    modalState: ModalState;
-};
-
 type UseModalInContainerParams<Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container> = {
     closeOnClickOutside?: boolean;
-    transitionDuration?: number;
     windowOffset?: number;
     offset?: number;
     position?: `${PositionContainer}`;
     modalRef: RefObject<Modal>;
     containerRef?: RefObject<Container>;
-    onClose?: () => void;
+    isOpen: boolean;
+    onClose: () => void;
+};
+declare const useModalInContainer: <Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container>({ closeOnClickOutside, offset, windowOffset, position, modalRef, containerRef, isOpen, onClose, }: UseModalInContainerParams<Container, Modal>) => void;
+
+declare enum ModalState {
+    OPENING = "OPENING",
+    OPEN = "OPEN",
+    CLOSING = "CLOSING",
+    CLOSED = "CLOSED"
+}
+type UseModalTransitionParams = {
+    transitionDuration?: number;
+    onClose: () => void;
+    isOpen: boolean;
 };
-declare const useModalInContainer: <Container extends HTMLElement = HTMLElement, Modal extends HTMLElement = Container>({ closeOnClickOutside, offset, windowOffset, position, transitionDuration, modalRef, containerRef, onClose, }: UseModalInContainerParams<Container, Modal>) => {
+declare const useModalTransition: ({ transitionDuration, onClose, isOpen }: UseModalTransitionParams) => {
     isVisible: boolean;
-    closeModal: () => void;
-    openModal: () => void;
     modalState: ModalState;
 };
 
-export { ModalState as M, type UseModalInContainerParams as U, useModalTransition as a, useModalInContainer as u };
+export { ModalState as M, type UseModalTransitionParams as U, type UseModalInContainerParams as a, useModalTransition as b, useModalInContainer as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polpo",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "sideEffects": false,
   "license": "MIT",
   "type": "module",
@@ -41,8 +41,9 @@
     "build": "yarn clean && tsup",
     "publish-package": "yarn lint && yarn build && yarn publish --no-git-tag-version",
     "transform-svgs": "svg-to-react && yarn lint:fix",
-    "dev": "storybook dev -p 6006 --quiet",
-    "build-storybook": "storybook build"
+    "dev": "storybook dev -p 6006 --quiet --debug hmr",
+    "build-storybook": "storybook build",
+    "debug": "storybook doctor"
   },
   "devDependencies": {
     "@juanmsl/eslint-config": "*",

package/src/components/form/checkbox/checkbox.style.ts

@@ -82,7 +82,6 @@ export const CheckboxContainerStyle = styled.section<CheckboxContainerStyleProps
   ${CheckboxStyle}:hover,
   &:has(.checkbox-label:hover) ${CheckboxStyle} {
     box-shadow: 0 0 0 0.3em ${props => props.$color}88;
-    padding: 2px;
 
     ${CheckboxFillStyle} {
       width: 20%;
@@ -106,6 +105,5 @@ export const CheckboxContainerStyle = styled.section<CheckboxContainerStyleProps
   &:has(.checkbox-input:focus) ${CheckboxStyle},
   &:has(.checkbox-label:focus) ${CheckboxStyle} {
     box-shadow: 0 0 0 0.3em ${props => props.$color}88;
-    padding: 2px;
   }
 `;

package/src/components/form/input-color/input-color.tsx

@@ -85,7 +85,13 @@ export const InputColor = ({
 
   return (
     <Field id={id} error={error} isFocus={isFocus} {...fieldProps}>
-      <InputColorStyle onClick={() => setIsOpen(true)} ref={containerRef}>
+      <InputColorStyle
+        onClick={e => {
+          e.stopPropagation();
+          setIsOpen(true);
+        }}
+        ref={containerRef}
+      >
         <InputColorBoxStyle
           className={className}
           style={{

package/src/components/form/select/options.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 
-import { Menu } from '../../modals';
+import { Menu } from '../../modals/menu';
 
 import { OptionsHeaderStyle, OptionsMenuStyle } from './select.style';
 import { OptionsProps, SelectItem } from './select.types';
@@ -29,6 +29,8 @@ export const Options = <T extends SelectItem>({
   maxHeight = 400,
 }: OptionsProps<T>) => {
   const theme = useTheme();
+  const optionsGroupRef = useRef<HTMLUListElement>(null);
+  const modalRef = useRef<HTMLElement>(null);
   const modalContainerRef = useRef<HTMLElement>(null);
   const isMobile = useMediaQuery(`(max-width: ${theme.constants.breakpoints.mobileL})`);
   const [internalSearchQuery, setInternalSearchQuery] = useState('');
@@ -123,14 +125,20 @@ export const Options = <T extends SelectItem>({
   );
 
   const [height, setHeight] = useState<string>('400px');
+  const [minHeight, setMinHeight] = useState<string | undefined>(undefined);
 
   const getHeight = useCallback(() => {
     const containerBottom = containerRef.current?.getBoundingClientRect().bottom ?? 0;
+    const modalHeight = modalRef.current?.getBoundingClientRect().height ?? 0;
+    const optionsHeight = optionsGroupRef.current?.scrollHeight ?? 0;
 
     const height = Math.min(window.innerHeight - containerBottom - 20, maxHeight);
+    const minHeight =
+      options.length <= 3 ? modalHeight : optionsHeight > height ? Math.min(150, window.innerHeight - 20) : 0;
 
     setHeight(`${Math.round(height)}px`);
-  }, [containerRef, maxHeight]);
+    setMinHeight(`${Math.round(minHeight)}px`);
+  }, [containerRef, maxHeight, options.length]);
 
   useResizeObserver(containerRef, getHeight);
   useEventListener('resize', getHeight);
@@ -144,10 +152,12 @@ export const Options = <T extends SelectItem>({
       id='form-select'
       isOpen={isOpen}
       onClose={onClose}
-      backdrop={isMobile ? 'blur' : 'opaque'}
+      backdrop={isMobile ? 'blur' : 'transparent'}
       opacity={isMobile ? 0.8 : 0.4}
       position={isMobile ? 'center' : 'bottom'}
       offset={5}
+      windowOffset={10}
+      modalRef={modalRef}
       transitionDuration={200}
       containerRef={isMobile ? undefined : containerRef}
       className={menuClassName}
@@ -158,8 +168,8 @@ export const Options = <T extends SelectItem>({
               width: window.innerWidth - 100,
             }
           : {
+              minHeight,
               maxHeight: height,
-              minHeight: '200px',
               width: containerRef.current?.offsetWidth ?? 'auto',
             }
       }
@@ -186,6 +196,7 @@ export const Options = <T extends SelectItem>({
         data={options}
         renderItem={renderInternalOption}
         emptyMessage={emptyMessage}
+        ref={optionsGroupRef}
       />
     </OptionsMenuStyle>
   );

package/src/components/modals/menu/menu.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { ForwardedRef, forwardRef, ReactElement, useCallback, useMemo } from 'react';
 
 import { Checkbox } from '../../form';
 import { Icon, IconNameT } from '../../icon';
@@ -128,12 +128,17 @@ type MenuOptionsGroupProps<T> = InfinityScrollProps<T> & {
   style?: React.CSSProperties;
 };
 
-const MenuOptionsGroup = <T,>({ className = '', style = {}, ...infinityScrollProps }: MenuOptionsGroupProps<T>) => {
+const MenuOptionsGroup = <T,>(
+  { className = '', style = {}, ...infinityScrollProps }: MenuOptionsGroupProps<T>,
+  ref: ForwardedRef<HTMLUListElement>,
+) => {
   return (
-    <ul className={`menu-content ${className}`} role='listbox' style={style}>
+    <ul className={`menu-content ${className}`} role='listbox' style={style} ref={ref}>
       <InfinityScroll {...infinityScrollProps} />
     </ul>
   );
 };
 
-Menu.OptionsGroup = MenuOptionsGroup;
+Menu.OptionsGroup = forwardRef(MenuOptionsGroup) as <T>(
+  p: MenuOptionsGroupProps<T> & { ref?: ForwardedRef<HTMLUListElement> },
+) => ReactElement;

package/src/components/modals/modal/modal.tsx

@@ -1,18 +1,24 @@
-import React, { CSSProperties, useLayoutEffect, useRef } from 'react';
+import React, { CSSProperties, useMemo, useRef } from 'react';
 
 import { Portal } from '../portal';
 
 import { Backdrop, BackdropProps } from './backdrop';
 import { ModalContentStyle, ModalStyle } from './modal.style';
 
-import { ModalState, useClassNames, useModalInContainer, UseModalInContainerParams } from '@polpo/hooks';
+import {
+  ModalState,
+  useClassNames,
+  useModalInContainer,
+  UseModalInContainerParams,
+  useModalTransition,
+  UseModalTransitionParams,
+} from '@polpo/hooks';
 
 export type ModalProps = Omit<BackdropProps, 'modalState'> &
-  Omit<UseModalInContainerParams, 'modalRef' | 'onClose'> & {
+  UseModalTransitionParams &
+  Omit<UseModalInContainerParams, 'modalRef'> & {
     id: string;
     children: React.ReactNode;
-    isOpen: boolean;
-    onClose: () => void;
     className?: string;
     style?: React.CSSProperties;
     rootStyle?: CSSProperties;
@@ -41,15 +47,21 @@ export const Modal = ({
   zIndex = 1000,
   ...backdropProps
 }: ModalProps) => {
+  const uuid = useMemo(() => crypto.randomUUID(), []);
   const modalRef = useRef<HTMLElement>(null);
-  const { openModal, closeModal, modalState, isVisible } = useModalInContainer({
+  const { modalState, isVisible } = useModalTransition({
+    transitionDuration,
+    onClose,
+    isOpen,
+  });
+  useModalInContainer({
     modalRef: modalRefProp ?? modalRef,
     containerRef,
     closeOnClickOutside,
     offset,
     windowOffset,
     position,
-    transitionDuration,
+    isOpen: isVisible,
     onClose,
   });
 
@@ -59,20 +71,12 @@ export const Modal = ({
     [closeAnimationClassName]: modalState === ModalState.CLOSING || modalState === ModalState.CLOSED,
   });
 
-  useLayoutEffect(() => {
-    if (modalState === ModalState.CLOSED && isOpen) {
-      openModal();
-    } else if (modalState === ModalState.OPEN && !isOpen) {
-      closeModal();
-    }
-  }, [isOpen, openModal, closeModal, modalState]);
-
   if (!isVisible) {
     return null;
   }
 
   return (
-    <Portal id={`modal-${id}`}>
+    <Portal id={`modal-${id}-${uuid}`}>
       <Backdrop {...backdropProps} modalState={modalState} zIndex={zIndex} />
       <ModalStyle
         ref={modalRefProp ?? modalRef}

package/src/components/modals/portal/portal.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode, useMemo } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useDomContainer } from '@polpo/hooks';
@@ -9,8 +9,7 @@ type PortalProps = {
 };
 
 const PortalComponent = ({ children, id }: PortalProps) => {
-  const uuid = useMemo(() => crypto.randomUUID(), []);
-  const root = useDomContainer(`${id}-${uuid}`);
+  const root = useDomContainer(id);
 
   if (root === null) {
     return null;

package/src/hooks/use-dom-container.ts

@@ -1,28 +1,35 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useState } from 'react';
+
+const createContainer = (containerID: string) => {
+  let domContainer = document.getElementById(containerID);
+
+  if (domContainer === null) {
+    domContainer = document.createElement('div');
+    domContainer.setAttribute('id', containerID);
+    document.body.appendChild(domContainer);
+  }
+
+  return domContainer;
+};
 
 export const useDomContainer = (containerID: string) => {
+  const [container, setContainer] = useState<HTMLElement | null>(() => createContainer(containerID));
+
   useEffect(() => {
     const domContainer = document.getElementById(containerID);
 
-    if (domContainer === null) {
-      return () => {
-        if (domContainer) {
-          document.body.removeChild(domContainer);
-        }
-      };
-    }
-  }, [containerID]);
-
-  return useMemo(() => {
-    let domContainer = document.getElementById(containerID);
+    if (container === null || domContainer === null) {
+      const domContainer = createContainer(containerID);
 
-    if (domContainer === null) {
-      domContainer = document.createElement('div');
-      domContainer.setAttribute('id', containerID);
-
-      document.body.appendChild(domContainer);
+      setContainer(domContainer);
     }
 
-    return domContainer;
-  }, [containerID]);
+    return () => {
+      if (container && container.parentNode) {
+        //document.body.removeChild(container);
+      }
+    };
+  }, [container, containerID]);
+
+  return container;
 };

package/src/hooks/use-modal-in-container.ts

@@ -2,7 +2,6 @@ import { RefObject, useCallback, useLayoutEffect, useRef } from 'react';
 
 import { useClickOutside } from './use-click-outside';
 import { useEventListener } from './use-event-listener';
-import { useModalTransition } from './use-modal-transition';
 import { useResizeObserver } from './use-resize-observer';
 
 import {
@@ -26,13 +25,13 @@ export type UseModalInContainerParams<
   Modal extends HTMLElement = Container,
 > = {
   closeOnClickOutside?: boolean;
-  transitionDuration?: number;
   windowOffset?: number;
   offset?: number;
   position?: `${PositionContainer}`;
   modalRef: RefObject<Modal>;
   containerRef?: RefObject<Container>;
-  onClose?: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 };
 
 export const useModalInContainer = <
@@ -43,19 +42,16 @@ export const useModalInContainer = <
   offset = 0,
   windowOffset = 0,
   position = PositionContainer.BOTTOM,
-  transitionDuration = 0,
   modalRef,
   containerRef,
+  isOpen,
   onClose,
 }: UseModalInContainerParams<Container, Modal>) => {
   const containerTemporalRef = useRef<Container>(null);
-  const modalState = useModalTransition(transitionDuration, onClose);
-
-  const { isVisible, closeModal } = modalState;
 
   useClickOutside<Modal>(modalRef, () => {
-    if (isVisible && closeOnClickOutside) {
-      closeModal();
+    if (isOpen && closeOnClickOutside) {
+      onClose();
     }
   });
 
@@ -86,10 +82,10 @@ export const useModalInContainer = <
   );
 
   const callback = useCallback(() => {
-    if (isVisible) {
+    if (isOpen) {
       getPosition(modalRef, containerRef ?? containerTemporalRef);
     }
-  }, [getPosition, isVisible, containerRef, modalRef]);
+  }, [getPosition, isOpen, containerRef, modalRef]);
 
   useLayoutEffect(callback, [callback]);
 
@@ -97,6 +93,4 @@ export const useModalInContainer = <
   useResizeObserver<Modal>(modalRef, callback);
   useEventListener('resize', callback);
   useEventListener('scroll', callback, modalRef);
-
-  return modalState;
 };

package/src/hooks/use-modal-transition.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 
 export enum ModalState {
   OPENING = 'OPENING',
@@ -7,7 +7,13 @@ export enum ModalState {
   CLOSED = 'CLOSED',
 }
 
-export const useModalTransition = (transitionDuration: number = 0, onClose: () => void = () => null) => {
+export type UseModalTransitionParams = {
+  transitionDuration?: number;
+  onClose: () => void;
+  isOpen: boolean;
+};
+
+export const useModalTransition = ({ transitionDuration = 0, onClose, isOpen }: UseModalTransitionParams) => {
   const [modalState, setModalState] = React.useState<ModalState>(ModalState.CLOSED);
 
   const isVisible = useMemo(() => {
@@ -45,10 +51,16 @@ export const useModalTransition = (transitionDuration: number = 0, onClose: () =
     }
   }, [modalState, transitionDuration]);
 
+  useLayoutEffect(() => {
+    if (modalState === ModalState.CLOSED && isOpen) {
+      openModal();
+    } else if (modalState === ModalState.OPEN && !isOpen) {
+      closeModal();
+    }
+  }, [isOpen, openModal, closeModal, modalState]);
+
   return {
     isVisible,
-    closeModal,
-    openModal,
     modalState,
   };
 };

package/dist/chunk-LWUSFVRE.js

@@ -1,3 +0,0 @@
-"use client";
-import{a as R,h as O,i as S}from"./chunk-MAWW6AA7.js";import{useCallback as p,useMemo as $,useReducer as X}from"react";import{useCallback as z,useLayoutEffect as F,useRef as V}from"react";var C=e=>{let t=V(!1);return F(()=>(t.current=!0,()=>{t.current=!1}),[]),z((...o)=>{t.current&&e(...o)},[e])};var Y=(e,t)=>{switch(t.type){case"pending":return{status:"pending",data:null,error:null};case"resolved":return{status:"resolved",data:t.data,error:null};case"rejected":return{status:"rejected",data:null,error:t.error};default:throw new Error(`Unhandled action: ${JSON.stringify(t)}`)}},_e=e=>{let[t,o]=X(Y,{status:"idle",data:null,error:null,...e}),n=C(o),r=p(a=>{n({type:"pending"}),a.then(c=>{n({type:"resolved",data:c})},c=>{n({type:"rejected",error:c})})},[n]),s=p(a=>n({type:"resolved",data:a}),[n]),i=p(a=>n({type:"rejected",error:a}),[n]);return $(()=>({setData:s,setError:i,run:r,...t}),[t,r,s,i])};import{useMemo as Q}from"react";var Ze=e=>Q(()=>Object.entries(e).reduce((t,[o,n])=>n?[...t,o]:t,[]).join(" "),[e]);import{useEffect as W,useLayoutEffect as B,useRef as J}from"react";function l(e,t,o,n){let r=J(t);W(()=>{r.current=t},[t]),B(()=>{let s=o?.current??window;if(!(s&&s.addEventListener))return;let i=a=>r.current(a);return s.addEventListener(e,i,n),()=>{s.removeEventListener(e,i,n)}},[e,o,n])}var _=(e,t)=>e.current&&!e.current.contains(t),h=(e,t)=>{l("keydown",o=>{o.key==="Escape"&&t()}),l("mousedown",o=>{let n=o.target;if(!n?.isConnected)return;(Array.isArray(e)?e:[e]).every(s=>_(s,n))&&t()})};import{useState as q}from"react";var at=e=>q(e)[0];import{useState as K,useCallback as L}from"react";var Z=e=>{let t=[];if(e.expires instanceof Date)t.push(`expires=${e.expires.toUTCString()}`);else if(typeof e.days=="number"){let o=new Date;o.setTime(o.getTime()+e.days*24*60*60*1e3),t.push(`expires=${o.toUTCString()}`)}return typeof e.maxAge=="number"&&t.push(`max-age=${e.maxAge}`),t.push(`path=${e.path??"/"}`),e.domain&&t.push(`domain=${e.domain}`),e.secure&&t.push("secure"),e.sameSite&&t.push(`SameSite=${e.sameSite}`),t.length>0?`; ${t.join("; ")}`:""},A=(e,t,o={})=>{if(typeof document>"u")return;let n=encodeURIComponent(t),r=Z(o);document.cookie=`${e}=${n}${r}`},ee=e=>{if(typeof document>"u")return null;let t=`${e}=`,o=document.cookie?document.cookie.split(";"):[];for(let n of o){let r=n.trim();if(r.indexOf(t)===0)return decodeURIComponent(r.substring(t.length))}return null},te=(e,t={})=>{typeof document>"u"||A(e,"",{...t,days:-1})},lt=(e,t,o={})=>{let[n,r]=K(()=>{let a=ee(e);if(a!==null)try{return JSON.parse(a)}catch{return t}return t}),s=L((a,c={})=>{let u={...o,...c},m=JSON.stringify(a);A(e,m,u),r(a)},[e,o]),i=L(()=>{te(e,o),r(t)},[e,t,o]);return[n,s,i]};import{useEffect as ne,useState as oe}from"react";var ft=(e,t=500)=>{let[o,n]=oe(e);return ne(()=>{let r=setTimeout(()=>n(e),t);return()=>{clearTimeout(r)}},[e,t]),o};import{useState as se}from"react";import{useEffect as re}from"react";var f=(e,t)=>{re(()=>{let o=Array.isArray(e)?e:[e],n=new ResizeObserver(t);return o.forEach(r=>r.current&&n.observe(r.current)),()=>{n.disconnect()}},[e,t])};var bt=e=>{let[t,o]=se({width:0,height:0});return f(e,([n])=>{if((n?.borderBoxSize??[])[0]){let{inlineSize:r,blockSize:s}=n.borderBoxSize[0];o({width:r,height:s})}else if(n.contentRect){let{width:r,height:s}=n.contentRect;o({width:r,height:s})}}),t};import{useEffect as ie,useMemo as ae}from"react";var Rt=e=>(ie(()=>{let t=document.getElementById(e);if(t===null)return()=>{t&&document.body.removeChild(t)}},[e]),ae(()=>{let t=document.getElementById(e);return t===null&&(t=document.createElement("div"),t.setAttribute("id",e),document.body.appendChild(t)),t},[e]));import{useEffect as ce,useState as ue}from"react";var le=(o=>(o.PNG="image/png",o.PDF="application/pdf",o))(le||{}),ht=e=>{let[t,o]=ue([]);return ce(()=>{let n=[],r=!1;if(!Array.isArray(e)||e.length===0)o([]);else{let s=e.map(i=>new Promise((a,c)=>{let u=new FileReader;n.push(u),u.onload=m=>{m.target?.result&&a({name:i.name,size:i.size,formatSize:R(i.size),type:i.type,url:m.target.result})},u.onabort=()=>{c(new Error("File reading aborted"))},u.onerror=()=>{c(new Error("Failed to read file"))},u.readAsDataURL(i)}));Promise.all(s).then(i=>{r||o(i)})}return()=>{r=!0,n.forEach(s=>{s.abort()})}},[e]),t};import{useEffect as me,useRef as de,useState as E}from"react";var Pt=()=>{let[e,t]=E(null),[o,n]=E(null),[r,s]=E(!0),i=de(null);return me(()=>{if(!navigator.geolocation){n({code:0,message:"Geolocation is not supported by your browser."}),s(!1);return}let a=u=>{t({...u.coords,timestamp:u.timestamp}),s(!1)},c=u=>{n({code:u.code,message:u.message}),s(!1)};return navigator.geolocation.getCurrentPosition(a,c),i.current=navigator.geolocation.watchPosition(a,c),()=>{i.current!==null&&navigator.geolocation.clearWatch(i.current)}},[]),{data:e,error:o,isLoading:r}};import{useCallback as P,useRef as fe,useState as pe}from"react";var Dt=()=>{let[e,t]=pe(!1),o=fe(null),n=P(()=>t(!0),[]),r=P(()=>t(!1),[]);return l("mouseenter",n,o),l("mouseleave",r,o),e};import{useRef as ve,useState as Te}from"react";import{useEffect as Ee}from"react";var k=(e,t,o={})=>{Ee(()=>{let n=Array.isArray(e)?e:[e],r=new IntersectionObserver(t,o);return n.forEach(s=>s.current&&r.observe(s.current)),()=>{r.disconnect()}},[t,o,e])};var Ft=(e={})=>{let[t,o]=Te(!1),n=ve(null);return k(n,([r])=>{o(r.isIntersecting)},e),{ref:n,inView:t}};import{useCallback as v,useState as ye}from"react";var Yt=({onBlur:e,onFocus:t,onChange:o}={})=>{let[n,r]=ye(!1),s=v(c=>{r(!0),t&&t(c)},[t]),i=v(c=>{r(!1),e&&e(c)},[e]),a=v(c=>{o&&o(c)},[o]);return{isFocus:n,handlers:{onFocus:s,onBlur:i,onChange:a}}};import{useEffect as ge,useState as be}from"react";var Bt=e=>{let[t,o]=be(!1);return ge(()=>{let n=window.matchMedia(e);n.matches!==t&&o(n.matches);let r=()=>{o(n.matches)};return n.addEventListener("change",r),()=>{n.removeEventListener("change",r)}},[t,e]),t};import{useRef as xe,useState as Me}from"react";var qt=()=>{let e=xe(null),[t,o]=Me(!1);return{containerRef:e,isOpen:t,openModal:()=>{o(!0)},closeModal:()=>{o(!1)}}};import{useCallback as D,useLayoutEffect as he,useRef as Le}from"react";import Re,{useCallback as w,useEffect as Oe,useMemo as Se}from"react";var Ce=(r=>(r.OPENING="OPENING",r.OPEN="OPEN",r.CLOSING="CLOSING",r.CLOSED="CLOSED",r))(Ce||{}),N=(e=0,t=()=>null)=>{let[o,n]=Re.useState("CLOSED"),r=Se(()=>o!=="CLOSED",[o]);Oe(()=>{document.documentElement.style.overflow=r?"hidden":"auto"},[r]);let s=w(()=>{["OPENING","OPEN"].includes(o)&&(e>0?(n("CLOSING"),setTimeout(()=>{n("CLOSED"),t()},e)):n("CLOSED"))},[t,o,e]),i=w(()=>{["CLOSING","CLOSED"].includes(o)&&(e>0?(n("OPENING"),setTimeout(()=>{n("OPEN")},e)):n("OPEN"))},[o,e]);return{isVisible:r,closeModal:s,openModal:i,modalState:o}};var I=e=>({x:e.x,y:e.y,w:e.width,h:e.height,top:e.top,left:e.left}),mn=({closeOnClickOutside:e=!0,offset:t=0,windowOffset:o=0,position:n="bottom",transitionDuration:r=0,modalRef:s,containerRef:i,onClose:a})=>{let c=Le(null),u=N(r,a),{isVisible:m,closeModal:G}=u;h(s,()=>{m&&e&&G()});let T=D((y,U)=>{let g=y.current?.getClientRects()[0],b=U.current?.getClientRects()[0];if(!g)return;let x=b?O({c:I(b),m:I(g),offset:t,windowOffset:o,position:n}):S({position:n,windowOffset:o});Object.keys(x).forEach(M=>{y.current?.style.setProperty(M,x[M])})},[n,o,t]),d=D(()=>{m&&T(s,i??c)},[T,m,i,s]);return he(d,[d]),f(i??c,d),f(s,d),l("resize",d),l("scroll",d,s),u};import{useRef as Ae,useState as Pe}from"react";var H=(e,t)=>{let{left:o,top:n}=e,r=o+window.scrollX,s=n+window.scrollY,i=t.pageX-r,a=t.pageY-s;return{x:t.pageX,y:t.pageY,elementX:i,elementY:a,elementPositionX:r,elementPositionY:s}},vn=e=>{let t=Ae(null),[o,n]=Pe({x:null,y:null,elementX:null,elementY:null,elementPositionX:null,elementPositionY:null});return l("mousemove",s=>{let{clientX:i,clientY:a}=s;if(n(c=>({...c,x:i,y:a})),e?.current instanceof Element){let c=H(e.current.getBoundingClientRect(),s);n(u=>({...u,...c}))}else if(t.current instanceof Element){let c=H(t.current.getBoundingClientRect(),s);n(u=>({...u,...c}))}}),{...o,ref:t}};import{useState as ke}from"react";var bn=()=>{let[e,t]=ke(navigator.onLine);return l("online",()=>t(navigator.onLine)),l("offline",()=>t(navigator.onLine)),e};import{useEffect as we,useRef as Ne}from"react";var Rn=()=>{let e=Ne(1);return we(()=>{e.current++}),e.current};import{useEffect as De,useRef as Ie,useState as He}from"react";var Cn=()=>{let e=Ie(null),[t,o]=He([0,0]);return De(()=>{let n=e.current,r=()=>{n&&o([n.scrollLeft,n.scrollTop])};return n&&n.addEventListener("scroll",r),()=>{n&&n.removeEventListener("scroll",r)}},[]),{ref:e,position:t}};import{useEffect as je,useState as j}from"react";function kn(e){let[t,o]=j(e),[n,r]=j([]);return je(()=>{t!==void 0&&r(s=>[...s,t])},[t]),[t,o,n]}import{useCallback as Ge,useState as Ue}from"react";var Dn=(e=!1)=>{let[t,o]=Ue(e),n=Ge(()=>{o(r=>!r)},[]);return[t,n,o]};import{useCallback as ze,useState as Fe}from"react";var jn=(e,t=0)=>{let[o,n]=Fe(t),r=ze(s=>{n(s!==void 0?s:i=>(i+1)%e.length)},[e.length]);return[e[o],r]};import{useEffect as Ve,useState as $e}from"react";var Fn=()=>{let e=()=>{let{innerWidth:n,innerHeight:r}=window;return{width:n,height:r,orientation:n>r?"landscape":"portrait"}},[t,o]=$e(e);return l("resize",()=>{o(e())}),Ve(()=>{o(e())},[]),t};export{C as a,_e as b,Ze as c,l as d,h as e,at as f,lt as g,ft as h,f as i,bt as j,Rt as k,le as l,ht as m,Pt as n,Dt as o,k as p,Ft as q,Yt as r,Bt as s,qt as t,Ce as u,N as v,mn as w,vn as x,bn as y,Rn as z,Cn as A,kn as B,Dn as C,jn as D,Fn as E};
-//# sourceMappingURL=chunk-LWUSFVRE.js.map