@uva-glass/component-library 3.55.5 → 3.55.7

package/dist/components/WeekSelector/components/WeekSelectorOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeekSelectorOption.js","names":[],"sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n  periodIndex: string;\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  selectedOption: number | null;\r\n  disabled?: boolean;\r\n  setSelectedOption: (weekNumber: number) => void;\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n  periodIndex,\r\n  weeks,\r\n  selectedOption,\r\n  disabled,\r\n  setSelectedOption,\r\n  onSelectWeek,\r\n  setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n    const current = event.currentTarget;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight': {\r\n        event.preventDefault();\r\n        let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n        while (nextElement && nextElement.disabled) {\r\n          nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n        }\r\n        nextElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowLeft': {\r\n        event.preventDefault();\r\n        let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n        while (prevElement && prevElement.disabled) {\r\n          prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n        }\r\n        prevElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n        while (nextRow) {\r\n          const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n        while (prevRow) {\r\n          const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        setIsOpen(false);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n  return (\r\n    <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n      {weeks[periodIndex].map((week) => (\r\n        <button\r\n          key={week.weekNumber}\r\n          type=\"button\"\r\n          className={clsx(styles['week-selector-option-week'], [\r\n            selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n          ])}\r\n          disabled={week.isBlocked || disabled}\r\n          onKeyDown={handleKeyDown}\r\n          onClick={() => {\r\n            if (!week.isBlocked) {\r\n              setSelectedOption(week.calendarWeekNumber);\r\n              onSelectWeek(week.calendarWeekNumber);\r\n              setIsOpen(false);\r\n            }\r\n          }}\r\n          autoFocus={selectedOption === week.calendarWeekNumber}\r\n        >\r\n          {week.calendarWeekNumber}\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;AAgBA,IAAa,KAAsB,EACjC,gBACA,UACA,mBACA,aACA,sBACA,iBACA,mBAC6B;CAC7B,IAAM,KAAiB,MAA4C;EACjE,IAAM,IAAU,EAAM;AAEtB,UAAQ,EAAM,KAAd;GACE,KAAK,cAAc;AACjB,MAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;AAC1B,WAAO,KAAe,EAAY,UAChC,KAAc,EAAY;AAE5B,OAAa,OAAO;AACpB;;GAEF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;AAC1B,WAAO,KAAe,EAAY,UAChC,KAAc,EAAY;AAE5B,OAAa,OAAO;AACpB;;GAEF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;AACrC,WAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;AACnC,SAAI,KAAa,CAAC,EAAU,UAAU;AACpC,QAAU,OAAO;AACjB;;AAEF,SAAU,EAAQ;;AAEpB;;GAEF,KAAK,WAAW;AACd,MAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;AACrC,WAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;AACnC,SAAI,KAAa,CAAC,EAAU,UAAU;AACpC,QAAU,OAAO;AACjB;;AAEF,SAAU,EAAQ;;AAEpB;;GAEF,KAAK;AACH,MAAU,GAAM;AAChB;GACF,QACE;;;AAGN,QACE,kBAAC,OAAD;EAAuB,WAAW,EAAO;YACtC,EAAM,GAAa,KAAK,MACvB,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CACnD,MAAmB,EAAK,sBAAsB,EAAO,uCACtD,CAAC;GACF,UAAU,EAAK,aAAa;GAC5B,WAAW;GACX,eAAe;AACb,IAAK,EAAK,cACR,EAAkB,EAAK,mBAAmB,EAC1C,EAAa,EAAK,mBAAmB,EACrC,EAAU,GAAM;;GAGpB,WAAW,MAAmB,EAAK;aAElC,EAAK;GACC,EAjBF,EAAK,WAiBH,CACT;EACE,EAtBI,EAsBJ"}
+{"version":3,"file":"WeekSelectorOption.js","names":[],"sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n  periodIndex: string;\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  selectedOption: number | null;\r\n  disabled?: boolean;\r\n  setSelectedOption: (weekNumber: number) => void;\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n  periodIndex,\r\n  weeks,\r\n  selectedOption,\r\n  disabled,\r\n  setSelectedOption,\r\n  onSelectWeek,\r\n  setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n    const current = event.currentTarget;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight': {\r\n        event.preventDefault();\r\n        let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n        while (nextElement && nextElement.disabled) {\r\n          nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n        }\r\n        nextElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowLeft': {\r\n        event.preventDefault();\r\n        let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n        while (prevElement && prevElement.disabled) {\r\n          prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n        }\r\n        prevElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n        while (nextRow) {\r\n          const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n        while (prevRow) {\r\n          const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        setIsOpen(false);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n  return (\r\n    <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n      {weeks[periodIndex].map((week) => (\r\n        <button\r\n          key={week.weekNumber}\r\n          type=\"button\"\r\n          className={clsx(styles['week-selector-option-week'], [\r\n            selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n          ])}\r\n          disabled={week.isBlocked || disabled}\r\n          onKeyDown={handleKeyDown}\r\n          onClick={() => {\r\n            if (!week.isBlocked) {\r\n              setSelectedOption(week.calendarWeekNumber);\r\n              onSelectWeek(week.calendarWeekNumber);\r\n              setIsOpen(false);\r\n            }\r\n          }}\r\n          autoFocus={selectedOption === week.calendarWeekNumber}\r\n        >\r\n          {week.calendarWeekNumber}\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;AAgBA,IAAa,KAAsB,EACjC,gBACA,UACA,mBACA,aACA,sBACA,iBACA,mBAC6B;CAC7B,IAAM,KAAiB,MAA4C;EACjE,IAAM,IAAU,EAAM;EAEtB,QAAQ,EAAM,KAAd;GACE,KAAK,cAAc;IACjB,EAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,OAAO;IACpB;;GAEF,KAAK,aAAa;IAChB,EAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,OAAO;IACpB;;GAEF,KAAK,aAAa;IAChB,EAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,OAAO;MACjB;;KAEF,IAAU,EAAQ;;IAEpB;;GAEF,KAAK,WAAW;IACd,EAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,OAAO;MACjB;;KAEF,IAAU,EAAQ;;IAEpB;;GAEF,KAAK;IACH,EAAU,GAAM;IAChB;GACF,SACE;;;CAGN,OACE,kBAAC,OAAD;EAAuB,WAAW,EAAO;YACtC,EAAM,GAAa,KAAK,MACvB,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CACnD,MAAmB,EAAK,sBAAsB,EAAO,uCACtD,CAAC;GACF,UAAU,EAAK,aAAa;GAC5B,WAAW;GACX,eAAe;IACb,AAAK,EAAK,cACR,EAAkB,EAAK,mBAAmB,EAC1C,EAAa,EAAK,mBAAmB,EACrC,EAAU,GAAM;;GAGpB,WAAW,MAAmB,EAAK;aAElC,EAAK;GACC,EAjBF,EAAK,WAiBH,CACT;EACE,EAtBI,EAsBJ"}

package/dist/components/hooks/useDebounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDebounce.js","names":[],"sources":["../../../src/components/hooks/useDebounce.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\ntype Timer = ReturnType<typeof setTimeout>;\ntype SomeFunction = (...args: unknown[]) => void;\n\nconst DELAY = 200;\n\nexport function useDebounce<Func extends SomeFunction>(callBack: Func, delay = DELAY) {\n  const timer = useRef<Timer>(undefined);\n\n  useEffect(() => {\n    return () => {\n      if (!timer.current) return;\n      clearTimeout(timer.current);\n    };\n  }, []);\n\n  const debouncedFunction = ((...args) => {\n    const newTimer = setTimeout(() => {\n      callBack(...args);\n    }, delay);\n    clearTimeout(timer.current);\n    timer.current = newTimer;\n  }) as Func;\n\n  return debouncedFunction;\n}\n"],"mappings":";;AAKA,IAAM,IAAQ;AAEd,SAAgB,EAAuC,GAAgB,IAAQ,GAAO;CACpF,IAAM,IAAQ,EAAc,KAAA,EAAU;AAiBtC,QAfA,cACe;AACN,IAAM,WACX,aAAa,EAAM,QAAQ;IAE5B,EAAE,CAAC,IAEsB,GAAG,MAAS;EACtC,IAAM,IAAW,iBAAiB;AAChC,KAAS,GAAG,EAAK;KAChB,EAAM;AAET,EADA,aAAa,EAAM,QAAQ,EAC3B,EAAM,UAAU"}
+{"version":3,"file":"useDebounce.js","names":[],"sources":["../../../src/components/hooks/useDebounce.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\ntype Timer = ReturnType<typeof setTimeout>;\ntype SomeFunction = (...args: unknown[]) => void;\n\nconst DELAY = 200;\n\nexport function useDebounce<Func extends SomeFunction>(callBack: Func, delay = DELAY) {\n  const timer = useRef<Timer>(undefined);\n\n  useEffect(() => {\n    return () => {\n      if (!timer.current) return;\n      clearTimeout(timer.current);\n    };\n  }, []);\n\n  const debouncedFunction = ((...args) => {\n    const newTimer = setTimeout(() => {\n      callBack(...args);\n    }, delay);\n    clearTimeout(timer.current);\n    timer.current = newTimer;\n  }) as Func;\n\n  return debouncedFunction;\n}\n"],"mappings":";;AAKA,IAAM,IAAQ;AAEd,SAAgB,EAAuC,GAAgB,IAAQ,GAAO;CACpF,IAAM,IAAQ,EAAc,KAAA,EAAU;CAiBtC,OAfA,cACe;EACN,EAAM,WACX,aAAa,EAAM,QAAQ;IAE5B,EAAE,CAAC,IAEsB,GAAG,MAAS;EACtC,IAAM,IAAW,iBAAiB;GAChC,EAAS,GAAG,EAAK;KAChB,EAAM;EAET,AADA,aAAa,EAAM,QAAQ,EAC3B,EAAM,UAAU"}

package/dist/components/hooks/useOnClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","names":[],"sources":["../../../src/components/hooks/useOnClickOutside.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ntype Handler = (event: MouseEvent | TouchEvent | KeyboardEvent) => void;\n\nexport const useOnClickOutside = <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler): void => {\n  useEffect(() => {\n    const listener = (\n      event:\n        | (MouseEvent & { target: HTMLElement | null })\n        | (TouchEvent & { target: HTMLElement | null })\n        | (KeyboardEvent & { target: HTMLElement | null })\n    ): void => {\n      if (!ref.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n      handler(event as MouseEvent | TouchEvent | KeyboardEvent);\n    };\n    document.addEventListener('mousedown', listener as EventListener);\n    document.addEventListener('touchstart', listener as EventListener);\n    return () => {\n      document.removeEventListener('mousedown', listener as EventListener);\n      document.removeEventListener('touchstart', listener as EventListener);\n    };\n  }, [ref, handler]);\n};\n"],"mappings":";;AAIA,IAAa,KAA0D,GAAmB,MAA2B;AACnH,SAAgB;EACd,IAAM,KACJ,MAIS;AACL,IAAC,EAAI,WAAW,EAAI,QAAQ,SAAS,EAAM,OAAe,IAG9D,EAAQ,EAAiD;;AAI3D,SAFA,SAAS,iBAAiB,aAAa,EAA0B,EACjE,SAAS,iBAAiB,cAAc,EAA0B,QACrD;AAEX,GADA,SAAS,oBAAoB,aAAa,EAA0B,EACpE,SAAS,oBAAoB,cAAc,EAA0B;;IAEtE,CAAC,GAAK,EAAQ,CAAC"}
+{"version":3,"file":"useOnClickOutside.js","names":[],"sources":["../../../src/components/hooks/useOnClickOutside.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ntype Handler = (event: MouseEvent | TouchEvent | KeyboardEvent) => void;\n\nexport const useOnClickOutside = <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler): void => {\n  useEffect(() => {\n    const listener = (\n      event:\n        | (MouseEvent & { target: HTMLElement | null })\n        | (TouchEvent & { target: HTMLElement | null })\n        | (KeyboardEvent & { target: HTMLElement | null })\n    ): void => {\n      if (!ref.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n      handler(event as MouseEvent | TouchEvent | KeyboardEvent);\n    };\n    document.addEventListener('mousedown', listener as EventListener);\n    document.addEventListener('touchstart', listener as EventListener);\n    return () => {\n      document.removeEventListener('mousedown', listener as EventListener);\n      document.removeEventListener('touchstart', listener as EventListener);\n    };\n  }, [ref, handler]);\n};\n"],"mappings":";;AAIA,IAAa,KAA0D,GAAmB,MAA2B;CACnH,QAAgB;EACd,IAAM,KACJ,MAIS;GACL,CAAC,EAAI,WAAW,EAAI,QAAQ,SAAS,EAAM,OAAe,IAG9D,EAAQ,EAAiD;;EAI3D,OAFA,SAAS,iBAAiB,aAAa,EAA0B,EACjE,SAAS,iBAAiB,cAAc,EAA0B,QACrD;GAEX,AADA,SAAS,oBAAoB,aAAa,EAA0B,EACpE,SAAS,oBAAoB,cAAc,EAA0B;;IAEtE,CAAC,GAAK,EAAQ,CAAC"}

package/dist/components/hooks/usePositionedFloaters.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePositionedFloaters.js","names":[],"sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  status: boolean;\n  updatePosition: () => void;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 90;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    minWidth: MIN_WIDTH,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n    if (isMobile) {\n      return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n    } else {\n      return `${refRect.left}px`;\n    }\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    const isMobile = window.matchMedia(\n      `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n    ).matches;\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (\n      (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n      !isMobile\n    ) {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      minWidth: options.fullWidth ? referenceRect.width : MIN_WIDTH,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setTimeout(() => {\n        setStyle((prevStyle) => ({\n          ...prevStyle,\n          ...calcPosition(),\n        }));\n      }, 0);\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', debouncedUpdatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', debouncedUpdatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    status,\n    updatePosition,\n  };\n}\n"],"mappings":";;;AAwBA,IAAM,IAAe,IACf,IAAa,IACb,IAAY,KACZ,IAAiB,GACjB,IAAoB,KACpB,IAAO;AAEb,SAAgB,EACd,GACA,GACA,GACe;CACf,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAe;EACnB,OAAO;EACP,SAAS;EACT,WAAW;EACX,UAAU;EACV,UAAU;EACV,WAAW;EACX,WAAW;EACX,QAAQ;EACT,EAEK,CAAC,GAAO,KAAY,EAAS,EAAa,EAE1C,KAAY,MAA6C;EAC7D,IAAM,IAAe,WAAW,iBAAiB,SAAS,gBAAgB,CAAC,SAAS;AACpF,SAAO,EAAK,QAAQ,MAAM,KAAK,KAAuC,WAAW,EAAK,GAAlD,WAAW,EAAK,GAAG;IAGnD,KAAa,GAAkB,MAAwB;AAC3D,MAAI,CAAC,EAAS,QAAO;EAErB,IAAM,IACJ,MAAQ,WACJ,OAAO,cAAc,EAAQ,SAAS,EAAQ,SAAS,IACvD,EAAQ,MAAM,EAAQ,SAAS;AAErC,SAAO,CAAC,EAAQ,kBAAkB,EAAS,EAAQ,eAAe,GAAG,IACjE,IACA,EAAS,EAAQ,eAAe;IAGhC,KAAY,GAAkB,MAAwB;AAC1D,MAAI,CAAC,EAAS,QAAO;EAErB,IAAM,IACJ,MAAQ,SAAS,OAAO,aAAa,EAAQ,OAAO,IAAe,EAAQ,QAAQ;AAErF,SAAO,KAAmB,IAAY,IAAY;IAG9C,KAAW,GAAkB,GAAkB,MAC/C,IACK,GAAG,EAAQ,OAAO,KAAK,IAAI,EAAQ,QAAQ,EAAQ,MAAM,GAAG,EAAK,MAEjE,GAAG,EAAQ,KAAK,KAIrB,UAA0C;EAC9C,IAAM,IAAkB,GAA0C,uBAAuB,EACnF,IAAiB,GAAyC,uBAAuB,EACnF,IAAO,UACP,IAAO,QAEL,IAAW,OAAO,WACtB,eAAe,EAAQ,mBAAmB,EAAS,EAAQ,iBAAiB,GAAG,EAAkB,KAClG,CAAC;AAiBF,SAfI,CAAC,KAAiB,CAAC,IACd,KAGL,OAAO,cAAc,EAAc,SAAS,IAAe,MAC7D,IAAO,SAIN,OAAO,aAAa,EAAc,OAAO,IAAe,KAAa,EAAQ,uBAAuB,YACrG,CAAC,MAED,IAAO,UAGF;GACL,OAAO,GAAG,MAAS,WAAW,EAAc,KAAQ,OAAO,OAAO;gBACxD,MAAS,UAAU,OAAO,aAAa,EAAc,KAAQ,OAAO,OAAO;gBAC3E,MAAS,QAAQ,OAAO,cAAc,EAAc,KAAQ,OAAO,OAAO;gBAC1E,MAAS,SAAS,EAAQ,GAAe,GAAgB,EAAS,GAAG;GAC/E,WAAW,GAAG,EAAU,GAAe,EAAK,CAAC;GAC7C,UAAU,GAAG,EAAS,GAAe,EAAK,CAAC;GAC3C,UAAU,EAAQ,YAAY,EAAc,QAAQ;GACpD,WAAW;GACX,WAAW;GACX,SAAS;GACT,QAAQ,GAAG,EAAQ,OAAO;GAC3B;IAGG,UAA+B;AAKnC,EAJA,EAAS;GACP,GAAG;GACH,GAAG,GAAc;GAClB,CAAC,EACF,EAAU,GAAK;IAGX,UAA6B;AACjC,EAAI,KACF,iBAAiB;AACf,MAAU,OAAe;IACvB,GAAG;IACH,GAAG,GAAc;IAClB,EAAE;KACF,EAAE;IAIH,KAAsB,MAAqB;AAE7C,GAAC,KACA,EAA4C,SAAS,EAAI,OAAe,IACzE,CAAC,KACA,EAA6C,SAAS,EAAI,OAAe;IAMxE,IAA0B,EAAY,GAAgB,EAAe;AAoC3E,QAlCA,SACM,MAAqB,SACnB,EAAQ,eAAe,UAExB,EAA4C,iBAAiB,SAAS,EAAiB,IAGvF,EAA4C,iBAAiB,cAAc,EAAiB,EAE5F,EAA4C,iBAAiB,cAAc,EAAmB,GAEjG,SAAS,iBAAiB,aAAa,EAAmB,EAC1D,SAAS,iBAAiB,cAAc,EAAmB,EAC3D,OAAO,iBAAiB,UAAU,EAAwB,SAG/C;AACX,EAAI,MAAqB,SACnB,EAAQ,eAAe,UAExB,EAA4C,oBAAoB,SAAS,EAAiB,IAG1F,EAA4C,oBAAoB,cAAc,EAAiB,EAE/F,EAA4C,oBAAoB,cAAc,EAAmB,GAEpG,SAAS,oBAAoB,aAAa,EAAmB,EAC7D,SAAS,oBAAoB,cAAc,EAAmB,EAC9D,OAAO,oBAAoB,UAAU,EAAwB;IAGjE,EAEK;EACL,OAAO,EACL,UACD;EACD;EACA;EACD"}
+{"version":3,"file":"usePositionedFloaters.js","names":[],"sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  status: boolean;\n  updatePosition: () => void;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 90;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    minWidth: MIN_WIDTH,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n    if (isMobile) {\n      return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n    } else {\n      return `${refRect.left}px`;\n    }\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    const isMobile = window.matchMedia(\n      `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n    ).matches;\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (\n      (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n      !isMobile\n    ) {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      minWidth: options.fullWidth ? referenceRect.width : MIN_WIDTH,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setTimeout(() => {\n        setStyle((prevStyle) => ({\n          ...prevStyle,\n          ...calcPosition(),\n        }));\n      }, 0);\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', debouncedUpdatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', debouncedUpdatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    status,\n    updatePosition,\n  };\n}\n"],"mappings":"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"}

package/dist/components/hooks/useResponsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsive.js","names":[],"sources":["../../../src/components/hooks/useResponsive.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst BREAKPOINTS = {\n  xs: 375,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1400,\n};\n\ntype BreakpointState = Record<keyof typeof BREAKPOINTS, boolean>;\ntype InitialBreakpoints = keyof typeof BREAKPOINTS | '_initial';\ntype Orientation = 'portrait' | 'landscape' | null;\ntype ResponsiveState = {\n  greaterThan: BreakpointState;\n  lessThan: BreakpointState;\n  orientation: Orientation;\n  mediaType: InitialBreakpoints;\n};\n\nexport const useResponsive = (): ResponsiveState => {\n  const getMediaQuery = (size: number, greater: boolean): string => {\n    return greater ? `(min-width: ${size}px)` : `(max-width: ${size - 1}px)`;\n  };\n\n  const getMatches = (query: string) => {\n    if (typeof window !== 'undefined') {\n      return window.matchMedia(query).matches;\n    }\n    return false;\n  };\n\n  const createResponsiveObject = () => {\n    const initialBreakpointState: BreakpointState = {\n      xs: false,\n      sm: false,\n      md: false,\n      lg: false,\n      xl: false,\n      xxl: false,\n    };\n\n    const greaterThan = { ...initialBreakpointState };\n    const lessThan = { ...initialBreakpointState };\n\n    Object.entries(BREAKPOINTS).forEach(([key, size]) => {\n      greaterThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, true));\n      lessThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, false));\n    });\n\n    const orientation: Orientation = getMatches('(orientation: portrait)')\n      ? 'portrait'\n      : getMatches('(orientation: landscape)')\n        ? 'landscape'\n        : null;\n\n    const mediaType = (Object.keys(greaterThan).findLast((key) => greaterThan[key as keyof typeof greaterThan]) ||\n      '_initial') as InitialBreakpoints;\n\n    return { greaterThan, lessThan, orientation, mediaType };\n  };\n\n  const [responsive, setResponsive] = useState(createResponsiveObject());\n\n  useEffect(() => {\n    const handleChange = () => setResponsive(createResponsiveObject());\n\n    window.addEventListener('resize', handleChange);\n\n    return () => window.removeEventListener('resize', handleChange);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return responsive;\n};\n"],"mappings":";;AAEA,IAAM,IAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACN,EAYY,UAAuC;CAClD,IAAM,KAAiB,GAAc,MAC5B,IAAU,eAAe,EAAK,OAAO,eAAe,IAAO,EAAE,MAGhE,KAAc,MACd,OAAO,SAAW,MACb,OAAO,WAAW,EAAM,CAAC,UAE3B,IAGH,UAA+B;EACnC,IAAM,IAA0C;GAC9C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACN,EAEK,IAAc,EAAE,GAAG,GAAwB,EAC3C,IAAW,EAAE,GAAG,GAAwB;AAgB9C,SAdA,OAAO,QAAQ,EAAY,CAAC,SAAS,CAAC,GAAK,OAAU;AAEnD,GADA,EAAY,KAAmC,EAAW,EAAc,GAAM,GAAK,CAAC,EACpF,EAAS,KAAmC,EAAW,EAAc,GAAM,GAAM,CAAC;IAClF,EAWK;GAAE;GAAa;GAAU,aATC,EAAW,0BAA0B,GAClE,aACA,EAAW,2BAA2B,GACpC,cACA;GAKuC,WAH1B,OAAO,KAAK,EAAY,CAAC,UAAU,MAAQ,EAAY,GAAiC,IACzG;GAEsD;IAGpD,CAAC,GAAY,KAAiB,EAAS,GAAwB,CAAC;AAWtE,QATA,QAAgB;EACd,IAAM,UAAqB,EAAc,GAAwB,CAAC;AAIlE,SAFA,OAAO,iBAAiB,UAAU,EAAa,QAElC,OAAO,oBAAoB,UAAU,EAAa;IAE9D,EAAE,CAAC,EAEC"}
+{"version":3,"file":"useResponsive.js","names":[],"sources":["../../../src/components/hooks/useResponsive.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst BREAKPOINTS = {\n  xs: 375,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1400,\n};\n\ntype BreakpointState = Record<keyof typeof BREAKPOINTS, boolean>;\ntype InitialBreakpoints = keyof typeof BREAKPOINTS | '_initial';\ntype Orientation = 'portrait' | 'landscape' | null;\ntype ResponsiveState = {\n  greaterThan: BreakpointState;\n  lessThan: BreakpointState;\n  orientation: Orientation;\n  mediaType: InitialBreakpoints;\n};\n\nexport const useResponsive = (): ResponsiveState => {\n  const getMediaQuery = (size: number, greater: boolean): string => {\n    return greater ? `(min-width: ${size}px)` : `(max-width: ${size - 1}px)`;\n  };\n\n  const getMatches = (query: string) => {\n    if (typeof window !== 'undefined') {\n      return window.matchMedia(query).matches;\n    }\n    return false;\n  };\n\n  const createResponsiveObject = () => {\n    const initialBreakpointState: BreakpointState = {\n      xs: false,\n      sm: false,\n      md: false,\n      lg: false,\n      xl: false,\n      xxl: false,\n    };\n\n    const greaterThan = { ...initialBreakpointState };\n    const lessThan = { ...initialBreakpointState };\n\n    Object.entries(BREAKPOINTS).forEach(([key, size]) => {\n      greaterThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, true));\n      lessThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, false));\n    });\n\n    const orientation: Orientation = getMatches('(orientation: portrait)')\n      ? 'portrait'\n      : getMatches('(orientation: landscape)')\n        ? 'landscape'\n        : null;\n\n    const mediaType = (Object.keys(greaterThan).findLast((key) => greaterThan[key as keyof typeof greaterThan]) ||\n      '_initial') as InitialBreakpoints;\n\n    return { greaterThan, lessThan, orientation, mediaType };\n  };\n\n  const [responsive, setResponsive] = useState(createResponsiveObject());\n\n  useEffect(() => {\n    const handleChange = () => setResponsive(createResponsiveObject());\n\n    window.addEventListener('resize', handleChange);\n\n    return () => window.removeEventListener('resize', handleChange);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return responsive;\n};\n"],"mappings":";;AAEA,IAAM,IAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACN,EAYY,UAAuC;CAClD,IAAM,KAAiB,GAAc,MAC5B,IAAU,eAAe,EAAK,OAAO,eAAe,IAAO,EAAE,MAGhE,KAAc,MACd,OAAO,SAAW,MACb,OAAO,WAAW,EAAM,CAAC,UAE3B,IAGH,UAA+B;EACnC,IAAM,IAA0C;GAC9C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACN,EAEK,IAAc,EAAE,GAAG,GAAwB,EAC3C,IAAW,EAAE,GAAG,GAAwB;EAgB9C,OAdA,OAAO,QAAQ,EAAY,CAAC,SAAS,CAAC,GAAK,OAAU;GAEnD,AADA,EAAY,KAAmC,EAAW,EAAc,GAAM,GAAK,CAAC,EACpF,EAAS,KAAmC,EAAW,EAAc,GAAM,GAAM,CAAC;IAClF,EAWK;GAAE;GAAa;GAAU,aATC,EAAW,0BAA0B,GAClE,aACA,EAAW,2BAA2B,GACpC,cACA;GAKuC,WAH1B,OAAO,KAAK,EAAY,CAAC,UAAU,MAAQ,EAAY,GAAiC,IACzG;GAEsD;IAGpD,CAAC,GAAY,KAAiB,EAAS,GAAwB,CAAC;CAWtE,OATA,QAAgB;EACd,IAAM,UAAqB,EAAc,GAAwB,CAAC;EAIlE,OAFA,OAAO,iBAAiB,UAAU,EAAa,QAElC,OAAO,oBAAoB,UAAU,EAAa;IAE9D,EAAE,CAAC,EAEC"}

package/dist/components/index.js

@@ -16,7 +16,7 @@ import { t as m } from "../CheckboxButtonBar-5UMIFMKH.js";
 import { t as h } from "../Label-o0BcWTUS.js";
 import { t as g } from "../FeedbackBox-Bu7uB9DP.js";
 import { t as _ } from "../ControlsButton-B1XRpMUM.js";
-import { d as v, f as y, h as b, m as x, n as S, t as C, u as w } from "../components-DAwjkky5.js";
+import { d as v, f as y, h as b, m as x, n as S, t as C, u as w } from "../components-BzxAULjf.js";
 import { t as T } from "../Chip-DJHvFToV.js";
 import { t as E } from "../CopyableText-DkyhZ6wk.js";
 import { t as D } from "../Drawer-e7UFHVg9.js";