@ahrowe/ui 0.28.0 → 0.29.1

package/dist/esm/common/hooks/useAnchorTracking.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchorTracking.mjs","names":[],"sources":["../../../../package/common/hooks/useAnchorTracking.ts"],"sourcesContent":["import { useLayoutEffect, useRef, type RefObject } from 'react';\nimport { getScrollableAncestors } from 'components/common/utils/scrollAncestors';\n\nexport interface UseAnchorTrackingArgs {\n  isOpen: boolean;\n  /** The element the popup is anchored to. Its scrollable ancestors are what get tracked. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /**\n   * Every element the positioning maths needs. Tracking starts only once all of them, plus the\n   * trigger, are mounted. Read fresh on each setup, so an inline array literal is fine.\n   */\n  elementRefs: RefObject<HTMLElement | null>[];\n  /**\n   * Positions the popup. Called once on setup and then on every scroll, resize and tracked size\n   * change. Reads the caller's own refs for everything beyond the two arguments.\n   */\n  update: (trigger: HTMLElement, ancestors: HTMLElement[]) => void;\n  /**\n   * Elements whose own size changes must re-run `update`: a popup whose content changes size\n   * while open (a filtered list shrinking, an async list loading in) otherwise keeps coordinates\n   * computed for its old height and ends up detached from the trigger. Re-read on every update,\n   * since a panel can mount a commit later than the element it hangs off.\n   */\n  resizeRefs?: RefObject<HTMLElement | null>[];\n  /** Hands the popup's elements back as they were found. Runs when tracking stops. */\n  teardown?: () => void;\n  /** Values that must restart tracking, and so re-run `update`, when they change. */\n  deps?: readonly unknown[];\n}\n\n/**\n * The lifecycle half of anchoring a portaled, `position: fixed` popup to a trigger: waits for the\n * elements to mount, resolves the trigger's scrolling ancestors once, and re-runs the caller's\n * positioning on every scroll, viewport resize and tracked size change until it closes.\n *\n * Callers supply only the geometry (`update`) and the inline styles to clear again (`teardown`);\n * `useFloatingPosition` and `usePopoverPosition` are both built on this.\n *\n * Position is deliberately written straight to the DOM by the caller rather than through React\n * state: going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useAnchorTracking({\n  isOpen, triggerRef, elementRefs, update, resizeRefs, teardown, deps = [],\n}: UseAnchorTrackingArgs) {\n  // Latest-value refs, so the effect restarts only for `deps` the caller names, never merely\n  // because these were passed as fresh array/function literals this render.\n  const latest = useRef({ elementRefs, update, resizeRefs, teardown });\n  latest.current = { elementRefs, update, resizeRefs, teardown };\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    let rafId: number | undefined;\n    let stop: (() => void) | undefined;\n\n    // The elements may not be mounted yet on the very first invocation of this effect: a portal\n    // target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on the initial render, in which\n    // case the portaled content — and its ref — commits one render later. Since refs never change\n    // identity, that later commit doesn't re-trigger this effect on its own, so retry each frame.\n    function trySetup() {\n      const trigger = triggerRef.current;\n      const elements = latest.current.elementRefs;\n      if (!trigger || elements.some((ref) => !ref.current)) {\n        rafId = requestAnimationFrame(trySetup);\n        return;\n      }\n      const ancestors = getScrollableAncestors(trigger);\n\n      const resizeObserver = new ResizeObserver(() => runUpdate());\n      const observed = new Set<Element>();\n\n      function runUpdate() {\n        latest.current.update(trigger!, ancestors);\n        // After the update, so an element that only mounts during it is picked up too. Once\n        // observed this is a handful of Set lookups, so it costs nothing on the scroll path.\n        latest.current.resizeRefs?.forEach(({ current }) => {\n          if (!current || observed.has(current)) return;\n          observed.add(current);\n          resizeObserver.observe(current);\n        });\n      }\n\n      runUpdate();\n\n      const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n      scrollTargets.forEach((t) => t.addEventListener('scroll', runUpdate, { passive: true }));\n      window.addEventListener('resize', runUpdate);\n      // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n      // does, and is what the callers' flip/clamp maths is measured against.\n      window.visualViewport?.addEventListener('resize', runUpdate);\n      window.visualViewport?.addEventListener('scroll', runUpdate);\n\n      stop = () => {\n        scrollTargets.forEach((t) => t.removeEventListener('scroll', runUpdate));\n        window.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('scroll', runUpdate);\n        resizeObserver.disconnect();\n        latest.current.teardown?.();\n      };\n    }\n\n    trySetup();\n\n    return () => {\n      if (rafId !== undefined) cancelAnimationFrame(rafId);\n      stop?.();\n    };\n    // Spread rather than listed: `deps` is the caller's own set of geometry inputs, and changing\n    // any of them has to restart tracking so the new values get applied immediately.\n  }, [isOpen, triggerRef, ...deps]);\n}\n"],"mappings":"0HA0CA,SAAgB,EAAkB,CAChC,SAAQ,aAAY,cAAa,SAAQ,aAAY,WAAU,OAAO,CAAC,GAC/C,CAGxB,IAAM,EAAS,EAAO,CAAE,cAAa,SAAQ,aAAY,UAAS,CAAC,EACnE,EAAO,QAAU,CAAE,cAAa,SAAQ,aAAY,UAAS,EAE7D,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAMJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAW,EAAO,QAAQ,YAChC,GAAI,CAAC,GAAW,EAAS,KAAM,GAAQ,CAAC,EAAI,OAAO,EAAG,CACpD,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAE1C,EAAiB,IAAI,mBAAqB,EAAU,CAAC,EACrD,EAAW,IAAI,IAErB,SAAS,GAAY,CACnB,EAAO,QAAQ,OAAO,EAAU,CAAS,EAGzC,EAAO,QAAQ,YAAY,SAAS,CAAE,aAAc,CAC9C,CAAC,GAAW,EAAS,IAAI,CAAO,IACpC,EAAS,IAAI,CAAO,EACpB,EAAe,QAAQ,CAAO,EAChC,CAAC,CACH,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAM,EAAE,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACvF,OAAO,iBAAiB,SAAU,CAAS,EAG3C,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAE3D,MAAa,CACX,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,EAAe,WAAW,EAC1B,EAAO,QAAQ,WAAW,CAC5B,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAO,CACT,CAGF,EAAG,CAAC,EAAQ,EAAY,GAAG,CAAI,CAAC,CAClC"}
+{"version":3,"file":"useAnchorTracking.mjs","names":[],"sources":["../../../../package/common/hooks/useAnchorTracking.ts"],"sourcesContent":["import { useLayoutEffect, useRef, type RefObject } from 'react';\nimport { getScrollableAncestors } from 'components/common/utils/scrollAncestors';\n\nexport interface UseAnchorTrackingArgs {\n  isOpen: boolean;\n  /** The element the popup is anchored to. Its scrollable ancestors are what get tracked. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /**\n   * Every element the positioning maths needs. Tracking starts only once all of them, plus the\n   * trigger, are mounted. Read fresh on each setup, so an inline array literal is fine.\n   */\n  elementRefs: RefObject<HTMLElement | null>[];\n  /**\n   * Positions the popup. Called once on setup and then on every scroll, resize and tracked size\n   * change. Reads the caller's own refs for everything beyond the two arguments.\n   */\n  update: (trigger: HTMLElement, ancestors: HTMLElement[]) => void;\n  /**\n   * Elements whose own size changes must re-run `update`: a popup whose content changes size\n   * while open (a filtered list shrinking, an async list loading in) otherwise keeps coordinates\n   * computed for its old height and ends up detached from the trigger. Re-read on every update,\n   * since a panel can mount a commit later than the element it hangs off.\n   */\n  resizeRefs?: RefObject<HTMLElement | null>[];\n  /** Hands the popup's elements back as they were found. Runs when tracking stops. */\n  teardown?: () => void;\n  /** Values that must restart tracking, and so re-run `update`, when they change. */\n  deps?: readonly unknown[];\n}\n\n/**\n * The lifecycle half of anchoring a portaled, `position: fixed` popup to a trigger: waits for the\n * elements to mount, resolves the trigger's scrolling ancestors once, and re-runs the caller's\n * positioning on every scroll, viewport resize and tracked size change until it closes.\n *\n * Callers supply only the geometry (`update`) and the inline styles to clear again (`teardown`);\n * `useFloatingPosition` and `usePopoverPosition` are both built on this.\n *\n * Position is deliberately written straight to the DOM by the caller rather than through React\n * state: going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useAnchorTracking({\n  isOpen,\n  triggerRef,\n  elementRefs,\n  update,\n  resizeRefs,\n  teardown,\n  deps = [],\n}: UseAnchorTrackingArgs) {\n  // Latest-value refs, so the effect restarts only for `deps` the caller names, never merely\n  // because these were passed as fresh array/function literals this render.\n  const latest = useRef({ elementRefs, update, resizeRefs, teardown });\n  latest.current = { elementRefs, update, resizeRefs, teardown };\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    let rafId: number | undefined;\n    let stop: (() => void) | undefined;\n\n    // The elements may not be mounted yet on the very first invocation of this effect: a portal\n    // target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on the initial render, in which\n    // case the portaled content — and its ref — commits one render later. Since refs never change\n    // identity, that later commit doesn't re-trigger this effect on its own, so retry each frame.\n    function trySetup() {\n      const trigger = triggerRef.current;\n      const elements = latest.current.elementRefs;\n      if (!trigger || elements.some((ref) => !ref.current)) {\n        rafId = requestAnimationFrame(trySetup);\n        return;\n      }\n      const ancestors = getScrollableAncestors(trigger);\n\n      const resizeObserver = new ResizeObserver(() => runUpdate());\n      const observed = new Set<Element>();\n\n      function runUpdate() {\n        latest.current.update(trigger!, ancestors);\n        // After the update, so an element that only mounts during it is picked up too. Once\n        // observed this is a handful of Set lookups, so it costs nothing on the scroll path.\n        latest.current.resizeRefs?.forEach(({ current }) => {\n          if (!current || observed.has(current)) return;\n          observed.add(current);\n          resizeObserver.observe(current);\n        });\n      }\n\n      runUpdate();\n\n      const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n      scrollTargets.forEach((t) => t.addEventListener('scroll', runUpdate, { passive: true }));\n      window.addEventListener('resize', runUpdate);\n      // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n      // does, and is what the callers' flip/clamp maths is measured against.\n      window.visualViewport?.addEventListener('resize', runUpdate);\n      window.visualViewport?.addEventListener('scroll', runUpdate);\n\n      stop = () => {\n        scrollTargets.forEach((t) => t.removeEventListener('scroll', runUpdate));\n        window.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('resize', runUpdate);\n        window.visualViewport?.removeEventListener('scroll', runUpdate);\n        resizeObserver.disconnect();\n        latest.current.teardown?.();\n      };\n    }\n\n    trySetup();\n\n    return () => {\n      if (rafId !== undefined) cancelAnimationFrame(rafId);\n      stop?.();\n    };\n    // Spread rather than listed: `deps` is the caller's own set of geometry inputs, and changing\n    // any of them has to restart tracking so the new values get applied immediately.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, triggerRef, ...deps]);\n}\n"],"mappings":"0HA0CA,SAAgB,EAAkB,CAChC,SACA,aACA,cACA,SACA,aACA,WACA,OAAO,CAAC,GACgB,CAGxB,IAAM,EAAS,EAAO,CAAE,cAAa,SAAQ,aAAY,UAAS,CAAC,EACnE,EAAO,QAAU,CAAE,cAAa,SAAQ,aAAY,UAAS,EAE7D,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAMJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAW,EAAO,QAAQ,YAChC,GAAI,CAAC,GAAW,EAAS,KAAM,GAAQ,CAAC,EAAI,OAAO,EAAG,CACpD,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAE1C,EAAiB,IAAI,mBAAqB,EAAU,CAAC,EACrD,EAAW,IAAI,IAErB,SAAS,GAAY,CACnB,EAAO,QAAQ,OAAO,EAAU,CAAS,EAGzC,EAAO,QAAQ,YAAY,SAAS,CAAE,aAAc,CAC7C,GAAW,GAAS,IAAI,CAAO,IACpC,EAAS,IAAI,CAAO,EACpB,EAAe,QAAQ,CAAO,EAChC,CAAC,CACH,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAM,EAAE,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACvF,OAAO,iBAAiB,SAAU,CAAS,EAG3C,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAE3D,MAAa,CACX,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,EAAe,WAAW,EAC1B,EAAO,QAAQ,WAAW,CAC5B,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAO,CACT,CAIF,EAAG,CAAC,EAAQ,EAAY,GAAG,CAAI,CAAC,CAClC"}

package/dist/esm/common/hooks/useCoarsePointer.mjs

@@ -1,2 +1,2 @@
-import e from"./useMediaQuery.mjs";function t(){return e(`(pointer: coarse)`)}export{t as default};
+import e from"./useMediaQuery.mjs";function t(){return e(`(pointer: coarse)`)}export{t as default,t as useCoarsePointer};
 //# sourceMappingURL=useCoarsePointer.mjs.map

package/dist/esm/common/hooks/useFocusBoundary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusBoundary.mjs","names":[],"sources":["../../../../package/common/hooks/useFocusBoundary.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\n/** Tabbable descendants of `root`, in DOM order. */\nexport function tabbablesIn(root: ParentNode | null): HTMLElement[] {\n  if (!root) return [];\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\nexport interface UseFocusBoundaryArgs {\n  /** The trigger element focus returns to on Escape / Shift+Tab out of the content's top. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /** The portaled content root — tabbables inside it define the Tab boundary. */\n  contentRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Focus helpers for content portaled to the end of the DOM (e.g. via BodyEnd), where Tab can't\n * reach it in visual document order on its own. Shared by FloatingMenu and Popover, which both\n * need to hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue\n * focus naturally past the trigger when Tab exits the bottom.\n */\nexport function useFocusBoundary({ triggerRef, contentRef }: UseFocusBoundaryArgs) {\n  function firstTriggerFocusable(): HTMLElement | null {\n    return tabbablesIn(triggerRef.current)[0] ?? triggerRef.current;\n  }\n\n  function restoreFocusToTrigger() {\n    firstTriggerFocusable()?.focus();\n  }\n\n  // Move focus to the tabbable element that follows the trigger in the document, skipping the\n  // portaled content — the \"natural next\" stop when Tab exits the bottom of the content.\n  function focusAfterTrigger() {\n    const all = tabbablesIn(document.body).filter((el) => !contentRef.current?.contains(el));\n    const trig = firstTriggerFocusable();\n    const idx = trig ? all.indexOf(trig) : -1;\n    if (idx >= 0) all[idx + 1]?.focus();\n  }\n\n  return { firstTriggerFocusable, restoreFocusToTrigger, focusAfterTrigger };\n}\n"],"mappings":"AAEA,IAAM,EAAqB,CACzB,UACA,aACA,yBACA,wBACA,yBACA,2BACA,kCACA,0BACF,EAAE,KAAK,GAAG,EAGV,SAAgB,EAAY,EAAwC,CAElE,OADK,EACE,MAAM,KAAK,EAAK,iBAA8B,CAAkB,CAAC,EADtD,CAAC,CAErB,CAeA,SAAgB,EAAiB,CAAE,aAAY,cAAoC,CACjF,SAAS,GAA4C,CACnD,OAAO,EAAY,EAAW,OAAO,EAAE,IAAM,EAAW,OAC1D,CAEA,SAAS,GAAwB,CAC/B,EAAsB,GAAG,MAAM,CACjC,CAIA,SAAS,GAAoB,CAC3B,IAAM,EAAM,EAAY,SAAS,IAAI,EAAE,OAAQ,GAAO,CAAC,EAAW,SAAS,SAAS,CAAE,CAAC,EACjF,EAAO,EAAsB,EAC7B,EAAM,EAAO,EAAI,QAAQ,CAAI,EAAI,GACnC,GAAO,GAAG,EAAI,EAAM,IAAI,MAAM,CACpC,CAEA,MAAO,CAAE,wBAAuB,wBAAuB,mBAAkB,CAC3E"}
+{"version":3,"file":"useFocusBoundary.mjs","names":[],"sources":["../../../../package/common/hooks/useFocusBoundary.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  '[contenteditable=\"true\"]',\n].join(',');\n\n/** Tabbable descendants of `root`, in DOM order. */\nexport function tabbablesIn(root: ParentNode | null): HTMLElement[] {\n  if (!root) return [];\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\nexport interface UseFocusBoundaryArgs {\n  /** The trigger element focus returns to on Escape / Shift+Tab out of the content's top. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /** The portaled content root — tabbables inside it define the Tab boundary. */\n  contentRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Focus helpers for content portaled to the end of the DOM (e.g. via BodyEnd), where Tab can't\n * reach it in visual document order on its own. Shared by FloatingMenu and Popover, which both\n * need to hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue\n * focus naturally past the trigger when Tab exits the bottom.\n */\nexport function useFocusBoundary({ triggerRef, contentRef }: UseFocusBoundaryArgs) {\n  function firstTriggerFocusable(): HTMLElement | null {\n    return tabbablesIn(triggerRef.current)[0] ?? triggerRef.current;\n  }\n\n  function restoreFocusToTrigger() {\n    firstTriggerFocusable()?.focus();\n  }\n\n  // Move focus to the tabbable element that follows the trigger in the document, skipping the\n  // portaled content — the \"natural next\" stop when Tab exits the bottom of the content.\n  function focusAfterTrigger() {\n    const all = tabbablesIn(document.body).filter((el) => !contentRef.current?.contains(el));\n    const trig = firstTriggerFocusable();\n    const idx = trig ? all.indexOf(trig) : -1;\n    if (idx >= 0) all[idx + 1]?.focus();\n  }\n\n  return { firstTriggerFocusable, restoreFocusToTrigger, focusAfterTrigger };\n}\n"],"mappings":"AAEA,IAAM,EAAqB,CACzB,UACA,aACA,yBACA,wBACA,yBACA,2BACA,kCACA,0BACF,CAAC,CAAC,KAAK,GAAG,EAGV,SAAgB,EAAY,EAAwC,CAElE,OADK,EACE,MAAM,KAAK,EAAK,iBAA8B,CAAkB,CAAC,EADtD,CAAC,CAErB,CAeA,SAAgB,EAAiB,CAAE,aAAY,cAAoC,CACjF,SAAS,GAA4C,CACnD,OAAO,EAAY,EAAW,OAAO,CAAC,CAAC,IAAM,EAAW,OAC1D,CAEA,SAAS,GAAwB,CAC/B,EAAsB,CAAC,EAAE,MAAM,CACjC,CAIA,SAAS,GAAoB,CAC3B,IAAM,EAAM,EAAY,SAAS,IAAI,CAAC,CAAC,OAAQ,GAAO,CAAC,EAAW,SAAS,SAAS,CAAE,CAAC,EACjF,EAAO,EAAsB,EAC7B,EAAM,EAAO,EAAI,QAAQ,CAAI,EAAI,GACnC,GAAO,GAAG,EAAI,EAAM,EAAE,EAAE,MAAM,CACpC,CAEA,MAAO,CAAE,wBAAuB,wBAAuB,mBAAkB,CAC3E"}

package/dist/esm/common/hooks/useMediaQuery.mjs

@@ -1,2 +1,2 @@
-import{useCallback as e,useSyncExternalStore as t}from"react";function n(){return typeof window<`u`&&typeof window.matchMedia==`function`}function r(r){return t(e(e=>{if(!n())return()=>{};let t=window.matchMedia(r);return t.addEventListener(`change`,e),()=>t.removeEventListener(`change`,e)},[r]),e(()=>n()&&window.matchMedia(r).matches,[r]),e(()=>!1,[]))}export{r as default};
+import{useCallback as e,useSyncExternalStore as t}from"react";function n(){return typeof window<`u`&&typeof window.matchMedia==`function`}function r(r){let i=e(e=>{if(!n())return()=>{};let t=window.matchMedia(r);return t.addEventListener(`change`,e),()=>t.removeEventListener(`change`,e)},[r]),a=e(()=>n()&&window.matchMedia(r).matches,[r]),o=e(()=>!1,[]);return t(i,a,o)}export{r as default,r as useMediaQuery};
 //# sourceMappingURL=useMediaQuery.mjs.map

package/dist/esm/common/hooks/useMediaQuery.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.mjs","names":[],"sources":["../../../../package/common/hooks/useMediaQuery.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\nfunction supported(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n}\n\n/**\n * `true` while `query` matches, kept current so a resize or an input-mode change re-renders.\n *\n * `useSyncExternalStore` rather than `useState` + `useEffect`: callers pick *markup* with this,\n * so hydration has to start from the server's answer. Reading `matchMedia` in a `useState`\n * initialiser makes the client's first render disagree with the server's HTML.\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback((onChange: () => void) => {\n    if (!supported()) return () => {};\n    const mql = window.matchMedia(query);\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, [query]);\n\n  const getSnapshot = useCallback(() => supported() && window.matchMedia(query).matches, [query]);\n\n  /** No media query exists on the server, so the tree renders as if nothing matched. */\n  const getServerSnapshot = useCallback(() => false, []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nexport default useMediaQuery;\n"],"mappings":"8DAEA,SAAS,GAAqB,CAC5B,OAAO,OAAO,OAAW,KAAe,OAAO,OAAO,YAAe,UACvE,CASA,SAAgB,EAAc,EAAwB,CAapD,OAAO,EAZW,EAAa,GAAyB,CACtD,GAAI,CAAC,EAAU,EAAG,UAAa,CAAC,EAChC,IAAM,EAAM,OAAO,WAAW,CAAK,EAEnC,OADA,EAAI,iBAAiB,SAAU,CAAQ,MAC1B,EAAI,oBAAoB,SAAU,CAAQ,CACzD,EAAG,CAAC,CAAK,CAOmB,EALR,MAAkB,EAAU,GAAK,OAAO,WAAW,CAAK,EAAE,QAAS,CAAC,CAAK,CAKtD,EAFb,MAAkB,GAAO,CAAC,CAEA,CAAiB,CACvE"}
+{"version":3,"file":"useMediaQuery.mjs","names":[],"sources":["../../../../package/common/hooks/useMediaQuery.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\nfunction supported(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n}\n\n/**\n * `true` while `query` matches, kept current so a resize or an input-mode change re-renders.\n *\n * `useSyncExternalStore` rather than `useState` + `useEffect`: callers pick *markup* with this,\n * so hydration has to start from the server's answer. Reading `matchMedia` in a `useState`\n * initialiser makes the client's first render disagree with the server's HTML.\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      if (!supported()) return () => {};\n      const mql = window.matchMedia(query);\n      mql.addEventListener('change', onChange);\n      return () => mql.removeEventListener('change', onChange);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(() => supported() && window.matchMedia(query).matches, [query]);\n\n  /** No media query exists on the server, so the tree renders as if nothing matched. */\n  const getServerSnapshot = useCallback(() => false, []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nexport default useMediaQuery;\n"],"mappings":"8DAEA,SAAS,GAAqB,CAC5B,OAAO,OAAO,OAAW,KAAe,OAAO,OAAO,YAAe,UACvE,CASA,SAAgB,EAAc,EAAwB,CACpD,IAAM,EAAY,EACf,GAAyB,CACxB,GAAI,CAAC,EAAU,EAAG,UAAa,CAAC,EAChC,IAAM,EAAM,OAAO,WAAW,CAAK,EAEnC,OADA,EAAI,iBAAiB,SAAU,CAAQ,MAC1B,EAAI,oBAAoB,SAAU,CAAQ,CACzD,EACA,CAAC,CAAK,CACR,EAEM,EAAc,MAAkB,EAAU,GAAK,OAAO,WAAW,CAAK,CAAC,CAAC,QAAS,CAAC,CAAK,CAAC,EAGxF,EAAoB,MAAkB,GAAO,CAAC,CAAC,EAErD,OAAO,EAAqB,EAAW,EAAa,CAAiB,CACvE"}

package/dist/esm/common/hooks/useOverlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlay.mjs","names":[],"sources":["../../../../package/common/hooks/useOverlay.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from 'react';\nimport { tabbablesIn } from './useFocusBoundary';\n\nexport interface UseOverlayArgs {\n  /** Whether the overlay is currently visible. Everything below is set up while this is true. */\n  isActive: boolean;\n  /** The overlay panel. Focus is trapped inside it and Escape is scoped to it. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** Called when Escape is pressed while this is the topmost overlay. Omit to not handle Escape. */\n  onEscape?: () => void;\n  /** Keep Tab inside the panel and restore focus to the previously focused element on close. */\n  trapFocus?: boolean;\n  /** Prevent the page behind the overlay from scrolling. */\n  lockScroll?: boolean;\n}\n\n/**\n * The three behaviours every blocking overlay needs: Escape to dismiss, a focus trap, and a\n * scroll lock on the page behind it.\n *\n * They share one module-level stack because they share one question: overlays nest (a\n * ConfirmModal opened from inside a Modal), every instance listens on `document`, and only the\n * innermost one may react. Without the stack, Escape would close every open layer at once and\n * the outer trap would yank focus out of the inner panel on the next Tab.\n *\n * The scroll lock is reference-counted for the same reason: the page stays locked until the last\n * overlay closes, and the body's original inline styles are restored rather than cleared.\n */\nexport function useOverlay({\n  isActive,\n  containerRef,\n  onEscape,\n  trapFocus = true,\n  lockScroll = true,\n}: UseOverlayArgs) {\n  const onEscapeRef = useRef(onEscape);\n  useEffect(() => { onEscapeRef.current = onEscape; });\n\n  // The layer's position in the stack is claimed during render, not in the effect below, because\n  // effects run child-first: an overlay opened from *inside* another one (a menu in a modal) has\n  // its effect run before its own parent's and would come out as the lower layer. Render runs\n  // parent-first, which is the order the layers are actually nested in. DOM order is no help\n  // either — React commits the inner portal ahead of the outer one.\n  const orderRef = useRef(0);\n  if (isActive && orderRef.current === 0) orderRef.current = nextLayerOrder++;\n  if (!isActive && orderRef.current !== 0) orderRef.current = 0;\n\n  useEffect(() => {\n    if (!isActive) return;\n\n    const order = orderRef.current;\n    activeLayers.add(order);\n    const isTopmost = () => order === Math.max(...activeLayers);\n\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    if (trapFocus) {\n      const container = containerRef.current;\n      (tabbablesIn(container)[0] ?? container)?.focus();\n    }\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (!isTopmost()) return;\n\n      if (event.key === 'Escape' && onEscapeRef.current) {\n        event.preventDefault();\n        onEscapeRef.current();\n        return;\n      }\n\n      if (event.key !== 'Tab' || !trapFocus) return;\n      const focusables = tabbablesIn(containerRef.current);\n      // Nothing to move to inside the panel, but Tab must still not escape it.\n      if (focusables.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n      if (!containerRef.current?.contains(active)) {\n        event.preventDefault();\n        first.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      } else if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      }\n    }\n\n    // `window`, not `document`: a key event on a focused element reaches both, but a synthetic\n    // one dispatched straight at `window` (as tests and some consumers do) never reaches\n    // `document`, since it sits above it in the propagation path.\n    window.addEventListener('keydown', onKeyDown);\n    if (lockScroll) acquireScrollLock();\n\n    return () => {\n      window.removeEventListener('keydown', onKeyDown);\n      if (lockScroll) releaseScrollLock();\n      activeLayers.delete(order);\n      if (trapFocus) previouslyFocused?.focus();\n    };\n  }, [isActive, trapFocus, lockScroll, containerRef]);\n}\n\n/** Monotonic, so a layer opened later always outranks one opened earlier. */\nlet nextLayerOrder = 1;\nconst activeLayers = new Set<number>();\n\nlet scrollLockCount = 0;\nlet previousOverflow = '';\nlet previousPaddingRight = '';\n\nfunction acquireScrollLock() {\n  const { body } = document;\n  if (scrollLockCount === 0) {\n    previousOverflow = body.style.overflow;\n    previousPaddingRight = body.style.paddingRight;\n    // Removing the page's scrollbar reclaims its width, so everything behind the overlay would\n    // shift right by that amount without the compensating padding.\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n    if (scrollbarWidth > 0) {\n      const current = parseFloat(window.getComputedStyle(body).paddingRight) || 0;\n      body.style.paddingRight = `${current + scrollbarWidth}px`;\n    }\n    body.style.overflow = 'hidden';\n  }\n  scrollLockCount += 1;\n}\n\nfunction releaseScrollLock() {\n  scrollLockCount -= 1;\n  if (scrollLockCount > 0) return;\n  scrollLockCount = 0;\n  document.body.style.overflow = previousOverflow;\n  document.body.style.paddingRight = previousPaddingRight;\n}\n"],"mappings":"mGA4BA,SAAgB,EAAW,CACzB,WACA,eACA,WACA,YAAY,GACZ,aAAa,IACI,CACjB,IAAM,EAAc,EAAO,CAAQ,EACnC,MAAgB,CAAE,EAAY,QAAU,CAAU,CAAC,EAOnD,IAAM,EAAW,EAAO,CAAC,EACrB,GAAY,EAAS,UAAY,IAAG,EAAS,QAAU,KACvD,CAAC,GAAY,EAAS,UAAY,IAAG,EAAS,QAAU,GAE5D,MAAgB,CACd,GAAI,CAAC,EAAU,OAEf,IAAM,EAAQ,EAAS,QACvB,EAAa,IAAI,CAAK,EACtB,IAAM,MAAkB,IAAU,KAAK,IAAI,GAAG,CAAY,EAEpD,EAAoB,SAAS,cACnC,GAAI,EAAW,CACb,IAAM,EAAY,EAAa,SAC9B,EAAY,CAAS,EAAE,IAAM,IAAY,MAAM,CAClD,CAEA,SAAS,EAAU,EAAsB,CACvC,GAAI,CAAC,EAAU,EAAG,OAElB,GAAI,EAAM,MAAQ,UAAY,EAAY,QAAS,CACjD,EAAM,eAAe,EACrB,EAAY,QAAQ,EACpB,MACF,CAEA,GAAI,EAAM,MAAQ,OAAS,CAAC,EAAW,OACvC,IAAM,EAAa,EAAY,EAAa,OAAO,EAEnD,GAAI,EAAW,SAAW,EAAG,CAC3B,EAAM,eAAe,EACrB,MACF,CACA,IAAM,EAAQ,EAAW,GACnB,EAAO,EAAW,EAAW,OAAS,GACtC,EAAS,SAAS,cACnB,EAAa,SAAS,SAAS,CAAM,EAG/B,CAAC,EAAM,UAAY,IAAW,GACvC,EAAM,eAAe,EACrB,EAAM,MAAM,GACH,EAAM,UAAY,IAAW,IACtC,EAAM,eAAe,EACrB,EAAK,MAAM,IAPX,EAAM,eAAe,EACrB,EAAM,MAAM,EAQhB,CAQA,OAHA,OAAO,iBAAiB,UAAW,CAAS,EACxC,GAAY,EAAkB,MAErB,CACX,OAAO,oBAAoB,UAAW,CAAS,EAC3C,GAAY,EAAkB,EAClC,EAAa,OAAO,CAAK,EACrB,GAAW,GAAmB,MAAM,CAC1C,CACF,EAAG,CAAC,EAAU,EAAW,EAAY,CAAY,CAAC,CACpD,CAGA,IAAI,EAAiB,EACf,EAAe,IAAI,IAErB,EAAkB,EAClB,EAAmB,GACnB,EAAuB,GAE3B,SAAS,GAAoB,CAC3B,GAAM,CAAE,QAAS,SACjB,GAAI,IAAoB,EAAG,CACzB,EAAmB,EAAK,MAAM,SAC9B,EAAuB,EAAK,MAAM,aAGlC,IAAM,EAAiB,OAAO,WAAa,SAAS,gBAAgB,YACpE,GAAI,EAAiB,EAAG,CACtB,IAAM,EAAU,WAAW,OAAO,iBAAiB,CAAI,EAAE,YAAY,GAAK,EAC1E,EAAK,MAAM,aAAe,GAAG,EAAU,EAAe,GACxD,CACA,EAAK,MAAM,SAAW,QACxB,CACA,GAAmB,CACrB,CAEA,SAAS,GAAoB,CAC3B,IACI,IAAkB,KACtB,EAAkB,EAClB,SAAS,KAAK,MAAM,SAAW,EAC/B,SAAS,KAAK,MAAM,aAAe,EACrC"}
+{"version":3,"file":"useOverlay.mjs","names":[],"sources":["../../../../package/common/hooks/useOverlay.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from 'react';\nimport { tabbablesIn } from './useFocusBoundary';\n\nexport interface UseOverlayArgs {\n  /** Whether the overlay is currently visible. Everything below is set up while this is true. */\n  isActive: boolean;\n  /** The overlay panel. Focus is trapped inside it and Escape is scoped to it. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** Called when Escape is pressed while this is the topmost overlay. Omit to not handle Escape. */\n  onEscape?: () => void;\n  /** Keep Tab inside the panel and restore focus to the previously focused element on close. */\n  trapFocus?: boolean;\n  /** Prevent the page behind the overlay from scrolling. */\n  lockScroll?: boolean;\n}\n\n/**\n * The three behaviours every blocking overlay needs: Escape to dismiss, a focus trap, and a\n * scroll lock on the page behind it.\n *\n * They share one module-level stack because they share one question: overlays nest (a\n * ConfirmModal opened from inside a Modal), every instance listens on `document`, and only the\n * innermost one may react. Without the stack, Escape would close every open layer at once and\n * the outer trap would yank focus out of the inner panel on the next Tab.\n *\n * The scroll lock is reference-counted for the same reason: the page stays locked until the last\n * overlay closes, and the body's original inline styles are restored rather than cleared.\n */\nexport function useOverlay({ isActive, containerRef, onEscape, trapFocus = true, lockScroll = true }: UseOverlayArgs) {\n  const onEscapeRef = useRef(onEscape);\n  useEffect(() => {\n    onEscapeRef.current = onEscape;\n  });\n\n  // The layer's position in the stack is claimed during render, not in the effect below, because\n  // effects run child-first: an overlay opened from *inside* another one (a menu in a modal) has\n  // its effect run before its own parent's and would come out as the lower layer. Render runs\n  // parent-first, which is the order the layers are actually nested in. DOM order is no help\n  // either — React commits the inner portal ahead of the outer one.\n  const orderRef = useRef(0);\n  if (isActive && orderRef.current === 0) orderRef.current = nextLayerOrder++;\n  if (!isActive && orderRef.current !== 0) orderRef.current = 0;\n\n  useEffect(() => {\n    if (!isActive) return;\n\n    const order = orderRef.current;\n    activeLayers.add(order);\n    const isTopmost = () => order === Math.max(...activeLayers);\n\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    if (trapFocus) {\n      const container = containerRef.current;\n      (tabbablesIn(container)[0] ?? container)?.focus();\n    }\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (!isTopmost()) return;\n\n      if (event.key === 'Escape' && onEscapeRef.current) {\n        event.preventDefault();\n        onEscapeRef.current();\n        return;\n      }\n\n      if (event.key !== 'Tab' || !trapFocus) return;\n      const focusables = tabbablesIn(containerRef.current);\n      // Nothing to move to inside the panel, but Tab must still not escape it.\n      if (focusables.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n      if (!containerRef.current?.contains(active)) {\n        event.preventDefault();\n        first.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      } else if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      }\n    }\n\n    // `window`, not `document`: a key event on a focused element reaches both, but a synthetic\n    // one dispatched straight at `window` (as tests and some consumers do) never reaches\n    // `document`, since it sits above it in the propagation path.\n    window.addEventListener('keydown', onKeyDown);\n    if (lockScroll) acquireScrollLock();\n\n    return () => {\n      window.removeEventListener('keydown', onKeyDown);\n      if (lockScroll) releaseScrollLock();\n      activeLayers.delete(order);\n      if (trapFocus) previouslyFocused?.focus();\n    };\n  }, [isActive, trapFocus, lockScroll, containerRef]);\n}\n\n/** Monotonic, so a layer opened later always outranks one opened earlier. */\nlet nextLayerOrder = 1;\nconst activeLayers = new Set<number>();\n\nlet scrollLockCount = 0;\nlet previousOverflow = '';\nlet previousPaddingRight = '';\n\nfunction acquireScrollLock() {\n  const { body } = document;\n  if (scrollLockCount === 0) {\n    previousOverflow = body.style.overflow;\n    previousPaddingRight = body.style.paddingRight;\n    // Removing the page's scrollbar reclaims its width, so everything behind the overlay would\n    // shift right by that amount without the compensating padding.\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n    if (scrollbarWidth > 0) {\n      const current = parseFloat(window.getComputedStyle(body).paddingRight) || 0;\n      body.style.paddingRight = `${current + scrollbarWidth}px`;\n    }\n    body.style.overflow = 'hidden';\n  }\n  scrollLockCount += 1;\n}\n\nfunction releaseScrollLock() {\n  scrollLockCount -= 1;\n  if (scrollLockCount > 0) return;\n  scrollLockCount = 0;\n  document.body.style.overflow = previousOverflow;\n  document.body.style.paddingRight = previousPaddingRight;\n}\n"],"mappings":"mGA4BA,SAAgB,EAAW,CAAE,WAAU,eAAc,WAAU,YAAY,GAAM,aAAa,IAAwB,CACpH,IAAM,EAAc,EAAO,CAAQ,EACnC,MAAgB,CACd,EAAY,QAAU,CACxB,CAAC,EAOD,IAAM,EAAW,EAAO,CAAC,EACrB,GAAY,EAAS,UAAY,IAAG,EAAS,QAAU,KACvD,CAAC,GAAY,EAAS,UAAY,IAAG,EAAS,QAAU,GAE5D,MAAgB,CACd,GAAI,CAAC,EAAU,OAEf,IAAM,EAAQ,EAAS,QACvB,EAAa,IAAI,CAAK,EACtB,IAAM,MAAkB,IAAU,KAAK,IAAI,GAAG,CAAY,EAEpD,EAAoB,SAAS,cACnC,GAAI,EAAW,CACb,IAAM,EAAY,EAAa,SAC9B,EAAY,CAAS,CAAC,CAAC,IAAM,EAAA,EAAY,MAAM,CAClD,CAEA,SAAS,EAAU,EAAsB,CACvC,GAAI,CAAC,EAAU,EAAG,OAElB,GAAI,EAAM,MAAQ,UAAY,EAAY,QAAS,CACjD,EAAM,eAAe,EACrB,EAAY,QAAQ,EACpB,MACF,CAEA,GAAI,EAAM,MAAQ,OAAS,CAAC,EAAW,OACvC,IAAM,EAAa,EAAY,EAAa,OAAO,EAEnD,GAAI,EAAW,SAAW,EAAG,CAC3B,EAAM,eAAe,EACrB,MACF,CACA,IAAM,EAAQ,EAAW,GACnB,EAAO,EAAW,EAAW,OAAS,GACtC,EAAS,SAAS,cACnB,EAAa,SAAS,SAAS,CAAM,EAG/B,CAAC,EAAM,UAAY,IAAW,GACvC,EAAM,eAAe,EACrB,EAAM,MAAM,GACH,EAAM,UAAY,IAAW,IACtC,EAAM,eAAe,EACrB,EAAK,MAAM,IAPX,EAAM,eAAe,EACrB,EAAM,MAAM,EAQhB,CAQA,OAHA,OAAO,iBAAiB,UAAW,CAAS,EACxC,GAAY,EAAkB,MAErB,CACX,OAAO,oBAAoB,UAAW,CAAS,EAC3C,GAAY,EAAkB,EAClC,EAAa,OAAO,CAAK,EACrB,GAAW,GAAmB,MAAM,CAC1C,CACF,EAAG,CAAC,EAAU,EAAW,EAAY,CAAY,CAAC,CACpD,CAGA,IAAI,EAAiB,EACf,EAAe,IAAI,IAErB,EAAkB,EAClB,EAAmB,GACnB,EAAuB,GAE3B,SAAS,GAAoB,CAC3B,GAAM,CAAE,QAAS,SACjB,GAAI,IAAoB,EAAG,CACzB,EAAmB,EAAK,MAAM,SAC9B,EAAuB,EAAK,MAAM,aAGlC,IAAM,EAAiB,OAAO,WAAa,SAAS,gBAAgB,YACpE,GAAI,EAAiB,EAAG,CACtB,IAAM,EAAU,WAAW,OAAO,iBAAiB,CAAI,CAAC,CAAC,YAAY,GAAK,EAC1E,EAAK,MAAM,aAAe,GAAG,EAAU,EAAe,GACxD,CACA,EAAK,MAAM,SAAW,QACxB,CACA,GAAmB,CACrB,CAEA,SAAS,GAAoB,CAC3B,IACI,IAAkB,KACtB,EAAkB,EAClB,SAAS,KAAK,MAAM,SAAW,EAC/B,SAAS,KAAK,MAAM,aAAe,EACrC"}

package/dist/esm/common/hooks/useSheet.mjs

@@ -1,2 +1,2 @@
-import{Presentation as e}from"../floatingMenu/floatingMenu.types.mjs";import t from"./useMediaQuery.mjs";import n from"./useCoarsePointer.mjs";import{useVisualViewportSize as r}from"./useVisualViewportSize.mjs";var i=`(max-width: 767px)`,a=8;function o(o=e.Default){let s=n(),c=t(i),{height:l,offsetTop:u}=r();return o===e.Sheet||o===e.Auto&&s&&c?{isSheet:!0,sheetStyle:{bottom:typeof window>`u`?0:Math.max(0,window.innerHeight-(u+l)),"--sheet-available-height":`${Math.max(0,l-a)}px`}}:{isSheet:!1,sheetStyle:void 0}}export{o as default};
+import{Presentation as e}from"../floatingMenu/floatingMenu.types.mjs";import t from"./useMediaQuery.mjs";import n from"./useCoarsePointer.mjs";import{useVisualViewportSize as r}from"./useVisualViewportSize.mjs";var i=`(max-width: 767px)`,a=8;function o(o=e.Default){let s=n(),c=t(i),{height:l,offsetTop:u}=r();return o===e.Sheet||o===e.Auto&&s&&c?{isSheet:!0,sheetStyle:{bottom:typeof window>`u`?0:Math.max(0,window.innerHeight-(u+l)),"--sheet-available-height":`${Math.max(0,l-a)}px`}}:{isSheet:!1,sheetStyle:void 0}}export{o as default,o as useSheet};
 //# sourceMappingURL=useSheet.mjs.map

package/dist/esm/common/hooks/useSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSheet.mjs","names":[],"sources":["../../../../package/common/hooks/useSheet.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport { useCoarsePointer } from './useCoarsePointer';\nimport { useMediaQuery } from './useMediaQuery';\nimport { useVisualViewportSize } from './useVisualViewportSize';\n\n/** Below this, `Presentation.Auto` switches a touch device over to a sheet. */\nconst SMALL_SCREEN_QUERY = '(max-width: 767px)';\n\n/** Sliver kept above a full-height sheet, so it still reads as a sheet rather than a full screen. */\nconst TOP_GAP = 8;\n\nexport interface Sheet {\n  /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */\n  isSheet: boolean;\n  /**\n   * Inline style for the sheet root: keeps it above an open on-screen keyboard, and hands the CSS\n   * the height actually left on screen as `--sheet-available-height`.\n   */\n  sheetStyle: CSSProperties | undefined;\n}\n\n/**\n * Resolves whether a popup presents as a bottom sheet.\n *\n * `Auto` asks for a coarse pointer *and* a small screen: pointer alone turns a touchscreen laptop\n * into a phone, and width alone turns a narrow desktop window into one.\n */\nexport function useSheet(presentation: Presentation = Presentation.Default): Sheet {\n  const isCoarsePointer = useCoarsePointer();\n  const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);\n  const { height: viewportHeight, offsetTop } = useVisualViewportSize();\n\n  const isSheet = presentation === Presentation.Sheet\n    || (presentation === Presentation.Auto && isCoarsePointer && isSmallScreen);\n\n  if (!isSheet) return { isSheet: false, sheetStyle: undefined };\n\n  // `position: fixed` resolves against the layout viewport, which an open keyboard doesn't\n  // shrink — so a sheet at `bottom: 0` sits behind the keyboard. Lift it by the difference.\n  const keyboardHeight = typeof window === 'undefined'\n    ? 0\n    : Math.max(0, window.innerHeight - (offsetTop + viewportHeight));\n\n  // Lifting the sheet is only half of it: it also has to *fit* in what's left. No viewport unit\n  // can express that, because `dvh` (like `vh`) measures the layout viewport, which the keyboard\n  // doesn't shrink either — so a tall sheet capped at, say, `90dvh` and lifted by the keyboard\n  // height ends up with its top edge above the screen, taking the header and the first part of\n  // the body with it, out of reach of the body's own scrolling. The visual viewport is the only\n  // thing that knows the real number, so it's measured here and handed to the CSS to clamp with.\n  const availableHeight = Math.max(0, viewportHeight - TOP_GAP);\n\n  const sheetStyle = {\n    bottom: keyboardHeight,\n    '--sheet-available-height': `${availableHeight}px`,\n  } as CSSProperties;\n\n  return { isSheet: true, sheetStyle };\n}\n\nexport default useSheet;\n"],"mappings":"mNAOA,IAAM,EAAqB,qBAGrB,EAAU,EAkBhB,SAAgB,EAAS,EAA6B,EAAa,QAAgB,CACjF,IAAM,EAAkB,EAAiB,EACnC,EAAgB,EAAc,CAAkB,EAChD,CAAE,OAAQ,EAAgB,aAAc,EAAsB,EA0BpE,OAxBgB,IAAiB,EAAa,OACxC,IAAiB,EAAa,MAAQ,GAAmB,EAuBxD,CAAE,QAAS,GAAM,WAAA,CAJtB,OAbqB,OAAO,OAAW,IACrC,EACA,KAAK,IAAI,EAAG,OAAO,aAAe,EAAY,EAAe,EAY/D,2BAA4B,GAJN,KAAK,IAAI,EAAG,EAAiB,CAIpB,EAAgB,GAGzB,CAAW,EArBd,CAAE,QAAS,GAAO,WAAY,IAAA,EAAU,CAsB/D"}
+{"version":3,"file":"useSheet.mjs","names":[],"sources":["../../../../package/common/hooks/useSheet.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport { useCoarsePointer } from './useCoarsePointer';\nimport { useMediaQuery } from './useMediaQuery';\nimport { useVisualViewportSize } from './useVisualViewportSize';\n\n/** Below this, `Presentation.Auto` switches a touch device over to a sheet. */\nconst SMALL_SCREEN_QUERY = '(max-width: 767px)';\n\n/** Sliver kept above a full-height sheet, so it still reads as a sheet rather than a full screen. */\nconst TOP_GAP = 8;\n\nexport interface Sheet {\n  /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */\n  isSheet: boolean;\n  /**\n   * Inline style for the sheet root: keeps it above an open on-screen keyboard, and hands the CSS\n   * the height actually left on screen as `--sheet-available-height`.\n   */\n  sheetStyle: CSSProperties | undefined;\n}\n\n/**\n * Resolves whether a popup presents as a bottom sheet.\n *\n * `Auto` asks for a coarse pointer *and* a small screen: pointer alone turns a touchscreen laptop\n * into a phone, and width alone turns a narrow desktop window into one.\n */\nexport function useSheet(presentation: Presentation = Presentation.Default): Sheet {\n  const isCoarsePointer = useCoarsePointer();\n  const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);\n  const { height: viewportHeight, offsetTop } = useVisualViewportSize();\n\n  const isSheet =\n    presentation === Presentation.Sheet || (presentation === Presentation.Auto && isCoarsePointer && isSmallScreen);\n\n  if (!isSheet) return { isSheet: false, sheetStyle: undefined };\n\n  // `position: fixed` resolves against the layout viewport, which an open keyboard doesn't\n  // shrink — so a sheet at `bottom: 0` sits behind the keyboard. Lift it by the difference.\n  const keyboardHeight =\n    typeof window === 'undefined' ? 0 : Math.max(0, window.innerHeight - (offsetTop + viewportHeight));\n\n  // Lifting the sheet is only half of it: it also has to *fit* in what's left. No viewport unit\n  // can express that, because `dvh` (like `vh`) measures the layout viewport, which the keyboard\n  // doesn't shrink either — so a tall sheet capped at, say, `90dvh` and lifted by the keyboard\n  // height ends up with its top edge above the screen, taking the header and the first part of\n  // the body with it, out of reach of the body's own scrolling. The visual viewport is the only\n  // thing that knows the real number, so it's measured here and handed to the CSS to clamp with.\n  const availableHeight = Math.max(0, viewportHeight - TOP_GAP);\n\n  const sheetStyle = {\n    bottom: keyboardHeight,\n    '--sheet-available-height': `${availableHeight}px`,\n  } as CSSProperties;\n\n  return { isSheet: true, sheetStyle };\n}\n\nexport default useSheet;\n"],"mappings":"mNAOA,IAAM,EAAqB,qBAGrB,EAAU,EAkBhB,SAAgB,EAAS,EAA6B,EAAa,QAAgB,CACjF,IAAM,EAAkB,EAAiB,EACnC,EAAgB,EAAc,CAAkB,EAChD,CAAE,OAAQ,EAAgB,aAAc,EAAsB,EAyBpE,OAtBE,IAAiB,EAAa,OAAU,IAAiB,EAAa,MAAQ,GAAmB,EAsB5F,CAAE,QAAS,GAAM,WAAA,CAJtB,OAXA,OAAO,OAAW,IAAc,EAAI,KAAK,IAAI,EAAG,OAAO,aAAe,EAAY,EAAe,EAYjG,2BAA4B,GAJN,KAAK,IAAI,EAAG,EAAiB,CAIpB,EAAgB,GAGzB,CAAW,EApBd,CAAE,QAAS,GAAO,WAAY,IAAA,EAAU,CAqB/D"}

package/dist/esm/common/hooks/useSwipeDismiss.mjs

@@ -1,2 +1,2 @@
-import e from"./useCoarsePointer.mjs";import{useEffect as t,useRef as n,useState as r}from"react";var i=180,a=10;function o({onDismiss:o,axis:s=`x`,distanceThreshold:c=80,velocityThreshold:l=.5,disabled:u=!1,mobileOnly:d=!0}){let f=n(null),[p,m]=r(!1),h=e(),g=u||d&&!h,_=n(null),v=n(o);return t(()=>{v.current=o}),t(()=>{let e=f.current;if(!e||g)return;function t(t,n){if(!e)return;n!==`none`&&e.offsetHeight;let r=s===`x`?`translateX(${t}px)`:`translateY(${t}px)`;e.style.transition=n,e.style.transform=r;let i=Math.max(0,1-Math.abs(t)/(c*2.5));e.style.opacity=String(i)}function n(e){let n=_.current;if(!n||e.pointerId!==n.pointerId)return;let r=e.clientX-n.startX,i=e.clientY-n.startY;if(!n.axisLocked){let e=s===`x`?r:i,t=s===`x`?i:r;if(Math.abs(e)<a&&Math.abs(t)<a)return;if(Math.abs(t)>Math.abs(e)){n.active=!1;return}n.axisLocked=!0,m(!0)}n.active&&(e.preventDefault(),n.offset=s===`x`?r:i,t(n.offset,`none`))}function r(){let a=_.current;if(_.current=null,window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r),!a||!a.active||!a.axisLocked){m(!1);return}let o=Math.max(1,Date.now()-a.startTime),s=a.offset/o;if(Math.abs(a.offset)>=c||Math.abs(s)>=l){let n=e?.getBoundingClientRect().width??0;t(Math.sign(a.offset||1)*(n+40),`transform ${i}ms ease-out, opacity ${i}ms ease-out`),setTimeout(()=>v.current(),i)}else t(0,`transform ${i}ms ease-out, opacity ${i}ms ease-out`);m(!1)}function o(t){_.current||!e||(e.style.animation=`none`,_.current={pointerId:t.pointerId,startX:t.clientX,startY:t.clientY,startTime:Date.now(),offset:0,axisLocked:!1,active:!0},window.addEventListener(`pointermove`,n,{passive:!1}),window.addEventListener(`pointerup`,r),window.addEventListener(`pointercancel`,r))}return e.addEventListener(`pointerdown`,o),()=>{e.removeEventListener(`pointerdown`,o),window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r)}},[s,c,l,g]),{ref:f,isDragging:p}}export{o as useSwipeDismiss};
+import e from"./useCoarsePointer.mjs";import{useEffect as t,useRef as n,useState as r}from"react";var i=180,a=10;function o({onDismiss:o,axis:s=`x`,distanceThreshold:c=80,velocityThreshold:l=.5,disabled:u=!1,mobileOnly:d=!0}){let f=n(null),[p,m]=r(!1),h=e(),g=u||d&&!h,_=n(null),v=n(o);return t(()=>{v.current=o}),t(()=>{let e=f.current;if(!e||g)return;function t(t,n){if(!e)return;n!==`none`&&e.offsetHeight;let r=s===`x`?`translateX(${t}px)`:`translateY(${t}px)`;e.style.transition=n,e.style.transform=r;let i=Math.max(0,1-Math.abs(t)/(c*2.5));e.style.opacity=String(i)}function n(e){let n=_.current;if(!n||e.pointerId!==n.pointerId)return;let r=e.clientX-n.startX,i=e.clientY-n.startY;if(!n.axisLocked){let e=s===`x`?r:i,t=s===`x`?i:r;if(Math.abs(e)<a&&Math.abs(t)<a)return;if(Math.abs(t)>Math.abs(e)){n.active=!1;return}n.axisLocked=!0,m(!0)}n.active&&(e.preventDefault(),n.offset=s===`x`?r:i,t(n.offset,`none`))}function r(){let a=_.current;if(_.current=null,window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r),!a||!a.active||!a.axisLocked){m(!1);return}let o=Math.max(1,Date.now()-a.startTime),s=a.offset/o;if(Math.abs(a.offset)>=c||Math.abs(s)>=l){let n=e?.getBoundingClientRect().width??0;t(Math.sign(a.offset||1)*(n+40),`transform ${i}ms ease-out, opacity ${i}ms ease-out`),setTimeout(()=>v.current(),i)}else t(0,`transform ${i}ms ease-out, opacity ${i}ms ease-out`);m(!1)}function o(t){!_.current&&e&&(e.style.animation=`none`,_.current={pointerId:t.pointerId,startX:t.clientX,startY:t.clientY,startTime:Date.now(),offset:0,axisLocked:!1,active:!0},window.addEventListener(`pointermove`,n,{passive:!1}),window.addEventListener(`pointerup`,r),window.addEventListener(`pointercancel`,r))}return e.addEventListener(`pointerdown`,o),()=>{e.removeEventListener(`pointerdown`,o),window.removeEventListener(`pointermove`,n),window.removeEventListener(`pointerup`,r),window.removeEventListener(`pointercancel`,r)}},[s,c,l,g]),{ref:f,isDragging:p}}export{o as useSwipeDismiss};
 //# sourceMappingURL=useSwipeDismiss.mjs.map

package/dist/esm/common/hooks/useSwipeDismiss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSwipeDismiss.mjs","names":[],"sources":["../../../../package/common/hooks/useSwipeDismiss.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useCoarsePointer } from './useCoarsePointer';\n\nexport interface UseSwipeDismissOptions {\n  /** Called once the swipe commits (past the threshold) — after the exit transition finishes,\n   * not the instant the pointer is released. */\n  onDismiss: () => void;\n  /** Which axis the drag tracks (default `'x'`, the natural direction for a toast/notification). */\n  axis?: 'x' | 'y';\n  /** Distance in px past which releasing counts as a commit, regardless of speed (default `80`). */\n  distanceThreshold?: number;\n  /** Speed in px/ms past which releasing counts as a commit, regardless of distance (default `0.5`) —\n   * lets a fast flick dismiss even if the pointer didn't travel very far. */\n  velocityThreshold?: number;\n  /** Disables the gesture entirely — no listeners are attached. */\n  disabled?: boolean;\n  /** Restricts the gesture to coarse (touch) pointers, auto-detected via `matchMedia`. On a\n   * mouse/trackpad device a drag is more likely to be a text selection than an intentional\n   * dismiss, and other affordances (a close button, auto-dismiss) typically already cover that\n   * case. Default `true`; set `false` to allow the gesture on any pointer type. */\n  mobileOnly?: boolean;\n}\n\nexport interface UseSwipeDismissResult<T extends HTMLElement> {\n  /** Attach to the element that should become draggable. The hook wires up its own pointer\n   * listeners on this node directly (no handlers to spread), so this is the only thing to attach. */\n  ref: React.RefObject<T | null>;\n  /** True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. */\n  isDragging: boolean;\n}\n\nconst EXIT_TRANSITION_MS = 180;\n// Below this many px of movement, direction intent isn't decided yet — lets a vertical scroll\n// gesture that merely starts on the element pass through instead of being hijacked as a swipe.\nconst AXIS_LOCK_THRESHOLD = 10;\n\n/**\n * Drag-to-dismiss on any pointer type (touch, mouse, pen) via the Pointer Events API. Applies the\n * drag offset and a fading opacity directly to the DOM node (bypassing React state) so the visual\n * tracks the pointer at native speed, then either springs back or animates fully off-screen and\n * calls `onDismiss` once that exit transition completes.\n */\nexport function useSwipeDismiss<T extends HTMLElement>({\n  onDismiss,\n  axis = 'x',\n  distanceThreshold = 80,\n  velocityThreshold = 0.5,\n  disabled = false,\n  mobileOnly = true,\n}: UseSwipeDismissOptions): UseSwipeDismissResult<T> {\n  const ref = useRef<T>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const isCoarsePointer = useCoarsePointer();\n\n  const effectiveDisabled = disabled || (mobileOnly && !isCoarsePointer);\n\n  // Mutable across the life of one drag; doesn't need to trigger re-renders.\n  const dragRef = useRef<{\n    pointerId: number;\n    startX: number;\n    startY: number;\n    startTime: number;\n    offset: number;\n    axisLocked: boolean;\n    active: boolean;\n  } | null>(null);\n\n  const onDismissRef = useRef(onDismiss);\n  useEffect(() => {\n    onDismissRef.current = onDismiss;\n  });\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || effectiveDisabled) return;\n\n    function applyTransform(offset: number, transition: string) {\n      if (!el) return;\n      if (transition !== 'none') {\n        // Switching straight from the live drag's `transition: none` to an animated one, in the\n        // same tick as the transform change, can get coalesced into a single frame with no\n        // animation in between — the element just jumps to its end state instead of sliding\n        // there. Forcing a layout read first commits the current (pre-transition) position as\n        // its own frame, so the transition below actually has something to animate from.\n        void el.offsetHeight;\n      }\n      const translate = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;\n      el.style.transition = transition;\n      el.style.transform = translate;\n      const fade = Math.max(0, 1 - Math.abs(offset) / (distanceThreshold * 2.5));\n      el.style.opacity = String(fade);\n    }\n\n    function onPointerMove(event: PointerEvent) {\n      const drag = dragRef.current;\n      if (!drag || event.pointerId !== drag.pointerId) return;\n\n      const deltaX = event.clientX - drag.startX;\n      const deltaY = event.clientY - drag.startY;\n\n      if (!drag.axisLocked) {\n        const primary = axis === 'x' ? deltaX : deltaY;\n        const cross = axis === 'x' ? deltaY : deltaX;\n        if (Math.abs(primary) < AXIS_LOCK_THRESHOLD && Math.abs(cross) < AXIS_LOCK_THRESHOLD) return;\n        if (Math.abs(cross) > Math.abs(primary)) {\n          // The gesture is mostly along the other axis (e.g. a page scroll) — hand it back.\n          drag.active = false;\n          return;\n        }\n        drag.axisLocked = true;\n        setIsDragging(true);\n      }\n\n      if (!drag.active) return;\n      event.preventDefault();\n      drag.offset = axis === 'x' ? deltaX : deltaY;\n      applyTransform(drag.offset, 'none');\n    }\n\n    function finishDrag() {\n      const drag = dragRef.current;\n      dragRef.current = null;\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n      if (!drag || !drag.active || !drag.axisLocked) {\n        setIsDragging(false);\n        return;\n      }\n\n      const elapsed = Math.max(1, Date.now() - drag.startTime);\n      const velocity = drag.offset / elapsed;\n      const committed =\n        Math.abs(drag.offset) >= distanceThreshold || Math.abs(velocity) >= velocityThreshold;\n\n      if (committed) {\n        const width = el?.getBoundingClientRect().width ?? 0;\n        const exitOffset = Math.sign(drag.offset || 1) * (width + 40);\n        applyTransform(exitOffset, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n        setTimeout(() => onDismissRef.current(), EXIT_TRANSITION_MS);\n      } else {\n        applyTransform(0, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n      }\n      setIsDragging(false);\n    }\n\n    function onPointerDown(event: PointerEvent) {\n      if (dragRef.current || !el) return;\n      // A still-\"forwards\"-filling CSS animation (e.g. the toast's entrance slide) wins the\n      // cascade over an inline style.transform, so the drag offset below would silently never\n      // show up on screen unless the animation is cleared first.\n      el.style.animation = 'none';\n      dragRef.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startY: event.clientY,\n        startTime: Date.now(),\n        offset: 0,\n        axisLocked: false,\n        active: true,\n      };\n      window.addEventListener('pointermove', onPointerMove, { passive: false });\n      window.addEventListener('pointerup', finishDrag);\n      window.addEventListener('pointercancel', finishDrag);\n    }\n\n    el.addEventListener('pointerdown', onPointerDown);\n    return () => {\n      el.removeEventListener('pointerdown', onPointerDown);\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n    };\n  }, [axis, distanceThreshold, velocityThreshold, effectiveDisabled]);\n\n  return { ref, isDragging };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useSwipeDismiss.mjs","names":[],"sources":["../../../../package/common/hooks/useSwipeDismiss.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useCoarsePointer } from './useCoarsePointer';\n\nexport interface UseSwipeDismissOptions {\n  /** Called once the swipe commits (past the threshold) — after the exit transition finishes,\n   * not the instant the pointer is released. */\n  onDismiss: () => void;\n  /** Which axis the drag tracks (default `'x'`, the natural direction for a toast/notification). */\n  axis?: 'x' | 'y';\n  /** Distance in px past which releasing counts as a commit, regardless of speed (default `80`). */\n  distanceThreshold?: number;\n  /** Speed in px/ms past which releasing counts as a commit, regardless of distance (default `0.5`) —\n   * lets a fast flick dismiss even if the pointer didn't travel very far. */\n  velocityThreshold?: number;\n  /** Disables the gesture entirely — no listeners are attached. */\n  disabled?: boolean;\n  /** Restricts the gesture to coarse (touch) pointers, auto-detected via `matchMedia`. On a\n   * mouse/trackpad device a drag is more likely to be a text selection than an intentional\n   * dismiss, and other affordances (a close button, auto-dismiss) typically already cover that\n   * case. Default `true`; set `false` to allow the gesture on any pointer type. */\n  mobileOnly?: boolean;\n}\n\nexport interface UseSwipeDismissResult<T extends HTMLElement> {\n  /** Attach to the element that should become draggable. The hook wires up its own pointer\n   * listeners on this node directly (no handlers to spread), so this is the only thing to attach. */\n  ref: React.RefObject<T | null>;\n  /** True for the duration of an active drag — e.g. use it to pause an auto-dismiss timer. */\n  isDragging: boolean;\n}\n\nconst EXIT_TRANSITION_MS = 180;\n// Below this many px of movement, direction intent isn't decided yet — lets a vertical scroll\n// gesture that merely starts on the element pass through instead of being hijacked as a swipe.\nconst AXIS_LOCK_THRESHOLD = 10;\n\n/**\n * Drag-to-dismiss on any pointer type (touch, mouse, pen) via the Pointer Events API. Applies the\n * drag offset and a fading opacity directly to the DOM node (bypassing React state) so the visual\n * tracks the pointer at native speed, then either springs back or animates fully off-screen and\n * calls `onDismiss` once that exit transition completes.\n */\nexport function useSwipeDismiss<T extends HTMLElement>({\n  onDismiss,\n  axis = 'x',\n  distanceThreshold = 80,\n  velocityThreshold = 0.5,\n  disabled = false,\n  mobileOnly = true,\n}: UseSwipeDismissOptions): UseSwipeDismissResult<T> {\n  const ref = useRef<T>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const isCoarsePointer = useCoarsePointer();\n\n  const effectiveDisabled = disabled || (mobileOnly && !isCoarsePointer);\n\n  // Mutable across the life of one drag; doesn't need to trigger re-renders.\n  const dragRef = useRef<{\n    pointerId: number;\n    startX: number;\n    startY: number;\n    startTime: number;\n    offset: number;\n    axisLocked: boolean;\n    active: boolean;\n  } | null>(null);\n\n  const onDismissRef = useRef(onDismiss);\n  useEffect(() => {\n    onDismissRef.current = onDismiss;\n  });\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || effectiveDisabled) return;\n\n    function applyTransform(offset: number, transition: string) {\n      if (!el) return;\n      if (transition !== 'none') {\n        // Switching straight from the live drag's `transition: none` to an animated one, in the\n        // same tick as the transform change, can get coalesced into a single frame with no\n        // animation in between — the element just jumps to its end state instead of sliding\n        // there. Forcing a layout read first commits the current (pre-transition) position as\n        // its own frame, so the transition below actually has something to animate from.\n        void el.offsetHeight;\n      }\n      const translate = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;\n      el.style.transition = transition;\n      el.style.transform = translate;\n      const fade = Math.max(0, 1 - Math.abs(offset) / (distanceThreshold * 2.5));\n      el.style.opacity = String(fade);\n    }\n\n    function onPointerMove(event: PointerEvent) {\n      const drag = dragRef.current;\n      if (!drag || event.pointerId !== drag.pointerId) return;\n\n      const deltaX = event.clientX - drag.startX;\n      const deltaY = event.clientY - drag.startY;\n\n      if (!drag.axisLocked) {\n        const primary = axis === 'x' ? deltaX : deltaY;\n        const cross = axis === 'x' ? deltaY : deltaX;\n        if (Math.abs(primary) < AXIS_LOCK_THRESHOLD && Math.abs(cross) < AXIS_LOCK_THRESHOLD) return;\n        if (Math.abs(cross) > Math.abs(primary)) {\n          // The gesture is mostly along the other axis (e.g. a page scroll) — hand it back.\n          drag.active = false;\n          return;\n        }\n        drag.axisLocked = true;\n        setIsDragging(true);\n      }\n\n      if (!drag.active) return;\n      event.preventDefault();\n      drag.offset = axis === 'x' ? deltaX : deltaY;\n      applyTransform(drag.offset, 'none');\n    }\n\n    function finishDrag() {\n      const drag = dragRef.current;\n      dragRef.current = null;\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n      if (!drag || !drag.active || !drag.axisLocked) {\n        setIsDragging(false);\n        return;\n      }\n\n      const elapsed = Math.max(1, Date.now() - drag.startTime);\n      const velocity = drag.offset / elapsed;\n      const committed = Math.abs(drag.offset) >= distanceThreshold || Math.abs(velocity) >= velocityThreshold;\n\n      if (committed) {\n        const width = el?.getBoundingClientRect().width ?? 0;\n        const exitOffset = Math.sign(drag.offset || 1) * (width + 40);\n        applyTransform(\n          exitOffset,\n          `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`,\n        );\n        setTimeout(() => onDismissRef.current(), EXIT_TRANSITION_MS);\n      } else {\n        applyTransform(0, `transform ${EXIT_TRANSITION_MS}ms ease-out, opacity ${EXIT_TRANSITION_MS}ms ease-out`);\n      }\n      setIsDragging(false);\n    }\n\n    function onPointerDown(event: PointerEvent) {\n      if (dragRef.current || !el) return;\n      // A still-\"forwards\"-filling CSS animation (e.g. the toast's entrance slide) wins the\n      // cascade over an inline style.transform, so the drag offset below would silently never\n      // show up on screen unless the animation is cleared first.\n      el.style.animation = 'none';\n      dragRef.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startY: event.clientY,\n        startTime: Date.now(),\n        offset: 0,\n        axisLocked: false,\n        active: true,\n      };\n      window.addEventListener('pointermove', onPointerMove, { passive: false });\n      window.addEventListener('pointerup', finishDrag);\n      window.addEventListener('pointercancel', finishDrag);\n    }\n\n    el.addEventListener('pointerdown', onPointerDown);\n    return () => {\n      el.removeEventListener('pointerdown', onPointerDown);\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', finishDrag);\n      window.removeEventListener('pointercancel', finishDrag);\n    };\n  }, [axis, distanceThreshold, velocityThreshold, effectiveDisabled]);\n\n  return { ref, isDragging };\n}\n"],"mappings":"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"}

package/dist/esm/common/iconPicker/iconPicker.mjs

@@ -1,2 +1,2 @@
-import e from"../ripple/ripple.mjs";import t from"./iconPicker.module.mjs";import{useRef as n}from"react";import r from"classnames";import{FontAwesomeIcon as i}from"@fortawesome/react-fontawesome";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(e){let{formValidator:t}=e;return t?t.touched&&t.hasError():!1}function c(e){let{isRequired:t,formValidator:n}=e;return!!(t||n?.validators.find(e=>e.validatorId===`required`))}function l({data:l=[],selectedId:u=null,label:d=``,onChange:f,formValidator:p=null,isRequired:m,className:h,style:g,classNames:_,styles:v,...y}){let b=p?p.value??null:u,x=s({formValidator:p,isRequired:m}),S=c({formValidator:p,isRequired:m}),C=n([]),w=n([]),T=l.findIndex(e=>e.id===b),E=T>=0?T:0;function D(e){p&&p.set(e),f?.(e)}function O(e,t){if(l.length===0)return;let n=(t+e+l.length)%l.length;C.current[n]?.focus(),D(l[n].id)}function k(e,t,n){switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),O(1,t);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),O(-1,t);break;case` `:case`Enter`:e.preventDefault(),w.current[t]?.addRipple(),D(n);break;default:break}}return o(`div`,{...y,className:r(t.iconPicker,{[t.iconPickerError]:x},_?.root,h),style:{...v?.root,...g},children:[d&&o(`div`,{className:r(t.iconPickerLabel,_?.label),style:v?.label,children:[d,S&&` *`]}),a(`div`,{role:`radiogroup`,"aria-label":d||void 0,className:r(t.iconPickerItemContainer,_?.itemContainer),style:v?.itemContainer,children:l.map(({id:n,label:s,icon:c,customIcon:l},u)=>{let d=b===n;return o(`div`,{ref:e=>{C.current[u]=e},className:r(t.iconPickerItem,{[t.iconPickerItemSelected]:d},_?.item),style:v?.item,title:s,tabIndex:u===E?0:-1,role:`radio`,"aria-checked":d,onClick:()=>D(n),onKeyDown:e=>k(e,u,n),children:[c&&a(i,{icon:c}),l??null,a(e,{ref:e=>{w.current[u]=e}})]},n)})})]})}export{l as default};
+import e from"../ripple/ripple.mjs";import t from"./iconPicker.module.mjs";import{useRef as n}from"react";import r from"classnames";import{FontAwesomeIcon as i}from"@fortawesome/react-fontawesome";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(e){let{formValidator:t}=e;return t?t.touched&&t.hasError():!1}function c(e){let{isRequired:t,formValidator:n}=e;return!!(t||n?.validators.find(e=>e.validatorId===`required`))}function l({data:l=[],selectedId:u=null,label:d=``,onChange:f,formValidator:p=null,isRequired:m,className:h,style:g,classNames:_,styles:v,...y}){let b=p?p.value??null:u,x=s({formValidator:p,isRequired:m}),S=c({formValidator:p,isRequired:m}),C=n([]),w=n([]),T=l.findIndex(e=>e.id===b),E=T>=0?T:0;function D(e){p&&p.set(e),f?.(e)}function O(e,t){if(l.length===0)return;let n=(t+e+l.length)%l.length;C.current[n]?.focus(),D(l[n].id)}function k(e,t,n){switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),O(1,t);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),O(-1,t);break;case` `:case`Enter`:e.preventDefault(),w.current[t]?.addRipple(),D(n)}}return o(`div`,{...y,className:r(t.iconPicker,{[t.iconPickerError]:x},_?.root,h),style:{...v?.root,...g},children:[d&&o(`div`,{className:r(t.iconPickerLabel,_?.label),style:v?.label,children:[d,S&&` *`]}),a(`div`,{role:`radiogroup`,"aria-label":d||void 0,className:r(t.iconPickerItemContainer,_?.itemContainer),style:v?.itemContainer,children:l.map(({id:n,label:s,icon:c,customIcon:l},u)=>{let d=b===n;return o(`div`,{ref:e=>{C.current[u]=e},className:r(t.iconPickerItem,{[t.iconPickerItemSelected]:d},_?.item),style:v?.item,title:s,tabIndex:u===E?0:-1,role:`radio`,"aria-checked":d,onClick:()=>D(n),onKeyDown:e=>k(e,u,n),children:[c&&a(i,{icon:c}),l??null,a(e,{ref:e=>{w.current[u]=e}})]},n)})})]})}export{l as default};
 //# sourceMappingURL=iconPicker.mjs.map

package/dist/esm/common/iconPicker/iconPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"iconPicker.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './iconPicker.module.pcss';\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport type { IconPickerItem, IconPickerProps } from './iconPicker.types';\n\nfunction hasError(props: IconPickerProps): boolean {\n  const { formValidator } = props;\n  return formValidator ? (formValidator.touched && formValidator.hasError()) : false;\n}\n\nfunction isRequired(props: IconPickerProps): boolean {\n  const { isRequired: reqProp, formValidator } = props;\n  return !!(reqProp || formValidator?.validators.find(\n    (v) => (v as { validatorId?: string }).validatorId === 'required'\n  ));\n}\n\nexport default function IconPicker({\n  data = [],\n  selectedId = null,\n  label = '',\n  onChange,\n  formValidator = null,\n  isRequired: _isRequired,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: IconPickerProps) {\n  const currentValue = formValidator ? (formValidator.value as string) ?? null : selectedId;\n  const showError = hasError({ formValidator, isRequired: _isRequired });\n  const required = isRequired({ formValidator, isRequired: _isRequired });\n\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const rippleRefs = useRef<(RippleHandle | null)[]>([]);\n  const selectedIndex = data.findIndex((item) => item.id === currentValue);\n  const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n  function handleSelect(id: string) {\n    if (formValidator) formValidator.set(id);\n    onChange?.(id);\n  }\n\n  function moveTo(step: 1 | -1, fromIndex: number) {\n    if (data.length === 0) return;\n    const next = (fromIndex + step + data.length) % data.length;\n    itemRefs.current[next]?.focus();\n    handleSelect(data[next].id);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent, index: number, id: string) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        moveTo(1, index);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        moveTo(-1, index);\n        break;\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        // No DOM click is dispatched here, so Ripple's own listener never sees the activation.\n        rippleRefs.current[index]?.addRipple();\n        handleSelect(id);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.iconPicker, { [styles.iconPickerError]: showError }, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n    >\n      {label && (\n        <div className={cx(styles.iconPickerLabel, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {required && ' *'}\n        </div>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={label || undefined}\n        className={cx(styles.iconPickerItemContainer, classNames?.itemContainer)}\n        style={slotStyles?.itemContainer}\n      >\n        {data.map(({ id, label: itemLabel, icon, customIcon }: IconPickerItem, index) => {\n          const checked = currentValue === id;\n          return (\n            <div\n              key={id}\n              ref={(el) => { itemRefs.current[index] = el; }}\n              className={cx(\n                styles.iconPickerItem,\n                { [styles.iconPickerItemSelected]: checked },\n                classNames?.item\n              )}\n              style={slotStyles?.item}\n              title={itemLabel}\n              tabIndex={index === rovingIndex ? 0 : -1}\n              role=\"radio\"\n              aria-checked={checked}\n              onClick={() => handleSelect(id)}\n              onKeyDown={(event) => handleKeyDown(event, index, id)}\n            >\n              {icon && <FontAwesomeIcon icon={icon} />}\n              {customIcon ?? null}\n              <Ripple ref={(el) => { rippleRefs.current[index] = el; }} />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"uPAQA,SAAS,EAAS,EAAiC,CACjD,GAAM,CAAE,iBAAkB,EAC1B,OAAO,EAAiB,EAAc,SAAW,EAAc,SAAS,EAAK,EAC/E,CAEA,SAAS,EAAW,EAAiC,CACnD,GAAM,CAAE,WAAY,EAAS,iBAAkB,EAC/C,MAAO,CAAC,EAAE,GAAW,GAAe,WAAW,KAC5C,GAAO,EAA+B,cAAgB,UACzD,EACF,CAEA,SAAwB,EAAW,CACjC,OAAO,CAAC,EACR,aAAa,KACb,QAAQ,GACR,WACA,gBAAgB,KAChB,WAAY,EACZ,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACe,CAClB,IAAM,EAAe,EAAiB,EAAc,OAAoB,KAAO,EACzE,EAAY,EAAS,CAAE,gBAAe,WAAY,CAAY,CAAC,EAC/D,EAAW,EAAW,CAAE,gBAAe,WAAY,CAAY,CAAC,EAEhE,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAa,EAAgC,CAAC,CAAC,EAC/C,EAAgB,EAAK,UAAW,GAAS,EAAK,KAAO,CAAY,EACjE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAa,EAAY,CAC5B,GAAe,EAAc,IAAI,CAAE,EACvC,IAAW,CAAE,CACf,CAEA,SAAS,EAAO,EAAc,EAAmB,CAC/C,GAAI,EAAK,SAAW,EAAG,OACvB,IAAM,GAAQ,EAAY,EAAO,EAAK,QAAU,EAAK,OACrD,EAAS,QAAQ,IAAO,MAAM,EAC9B,EAAa,EAAK,GAAM,EAAE,CAC5B,CAEA,SAAS,EAAc,EAA4B,EAAe,EAAY,CAC5E,OAAQ,EAAM,IAAd,CACE,IAAK,YACL,IAAK,aACH,EAAM,eAAe,EACrB,EAAO,EAAG,CAAK,EACf,MACF,IAAK,UACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,GAAI,CAAK,EAChB,MACF,IAAK,IACL,IAAK,QACH,EAAM,eAAe,EAErB,EAAW,QAAQ,IAAQ,UAAU,EACrC,EAAa,CAAE,EACf,MACF,QACE,KACJ,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,WAAY,EAAG,EAAO,iBAAkB,CAAU,EAAG,GAAY,KAAM,CAAS,EACrG,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,WAHzC,CAKG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,KAAK,EAAG,MAAO,GAAY,eAAlF,CACG,EACA,GAAY,IACV,IAEP,EAAC,MAAD,CACE,KAAK,aACL,aAAY,GAAS,IAAA,GACrB,UAAW,EAAG,EAAO,wBAAyB,GAAY,aAAa,EACvE,MAAO,GAAY,uBAElB,EAAK,KAAK,CAAE,KAAI,MAAO,EAAW,OAAM,cAA8B,IAAU,CAC/E,IAAM,EAAU,IAAiB,EACjC,OACE,EAAC,MAAD,CAEE,IAAM,GAAO,CAAE,EAAS,QAAQ,GAAS,CAAI,EAC7C,UAAW,EACT,EAAO,eACP,EAAG,EAAO,wBAAyB,CAAQ,EAC3C,GAAY,IACd,EACA,MAAO,GAAY,KACnB,MAAO,EACP,SAAU,IAAU,EAAc,EAAI,GACtC,KAAK,QACL,eAAc,EACd,YAAe,EAAa,CAAE,EAC9B,UAAY,GAAU,EAAc,EAAO,EAAO,CAAE,WAdtD,CAgBG,GAAQ,EAAC,EAAD,CAAuB,MAAO,CAAA,EACtC,GAAc,KACf,EAAC,EAAD,CAAQ,IAAM,GAAO,CAAE,EAAW,QAAQ,GAAS,CAAI,CAAI,CAAA,CACxD,GAlBE,CAkBF,CAET,CAAC,CACE,CAAA,CACF,GAET"}
+{"version":3,"file":"iconPicker.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './iconPicker.module.pcss';\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport type { IconPickerItem, IconPickerProps } from './iconPicker.types';\n\nfunction hasError(props: IconPickerProps): boolean {\n  const { formValidator } = props;\n  return formValidator ? formValidator.touched && formValidator.hasError() : false;\n}\n\nfunction isRequired(props: IconPickerProps): boolean {\n  const { isRequired: reqProp, formValidator } = props;\n  return !!(\n    reqProp || formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required')\n  );\n}\n\nexport default function IconPicker({\n  data = [],\n  selectedId = null,\n  label = '',\n  onChange,\n  formValidator = null,\n  isRequired: _isRequired,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: IconPickerProps) {\n  const currentValue = formValidator ? ((formValidator.value as string) ?? null) : selectedId;\n  const showError = hasError({ formValidator, isRequired: _isRequired });\n  const required = isRequired({ formValidator, isRequired: _isRequired });\n\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const rippleRefs = useRef<(RippleHandle | null)[]>([]);\n  const selectedIndex = data.findIndex((item) => item.id === currentValue);\n  const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n  function handleSelect(id: string) {\n    if (formValidator) formValidator.set(id);\n    onChange?.(id);\n  }\n\n  function moveTo(step: 1 | -1, fromIndex: number) {\n    if (data.length === 0) return;\n    const next = (fromIndex + step + data.length) % data.length;\n    itemRefs.current[next]?.focus();\n    handleSelect(data[next].id);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent, index: number, id: string) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        moveTo(1, index);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        moveTo(-1, index);\n        break;\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        // No DOM click is dispatched here, so Ripple's own listener never sees the activation.\n        rippleRefs.current[index]?.addRipple();\n        handleSelect(id);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cx(styles.iconPicker, { [styles.iconPickerError]: showError }, classNames?.root, className)}\n      style={{ ...slotStyles?.root, ...style }}\n    >\n      {label && (\n        <div className={cx(styles.iconPickerLabel, classNames?.label)} style={slotStyles?.label}>\n          {label}\n          {required && ' *'}\n        </div>\n      )}\n      <div\n        role='radiogroup'\n        aria-label={label || undefined}\n        className={cx(styles.iconPickerItemContainer, classNames?.itemContainer)}\n        style={slotStyles?.itemContainer}\n      >\n        {data.map(({ id, label: itemLabel, icon, customIcon }: IconPickerItem, index) => {\n          const checked = currentValue === id;\n          return (\n            <div\n              key={id}\n              ref={(el) => {\n                itemRefs.current[index] = el;\n              }}\n              className={cx(styles.iconPickerItem, { [styles.iconPickerItemSelected]: checked }, classNames?.item)}\n              style={slotStyles?.item}\n              title={itemLabel}\n              tabIndex={index === rovingIndex ? 0 : -1}\n              role='radio'\n              aria-checked={checked}\n              onClick={() => handleSelect(id)}\n              onKeyDown={(event) => handleKeyDown(event, index, id)}\n            >\n              {icon && <FontAwesomeIcon icon={icon} />}\n              {customIcon ?? null}\n              <Ripple\n                ref={(el) => {\n                  rippleRefs.current[index] = el;\n                }}\n              />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"uPAQA,SAAS,EAAS,EAAiC,CACjD,GAAM,CAAE,iBAAkB,EAC1B,OAAO,EAAgB,EAAc,SAAW,EAAc,SAAS,EAAI,EAC7E,CAEA,SAAS,EAAW,EAAiC,CACnD,GAAM,CAAE,WAAY,EAAS,iBAAkB,EAC/C,MAAO,CAAC,EACN,GAAW,GAAe,WAAW,KAAM,GAAO,EAA+B,cAAgB,UAAU,EAE/G,CAEA,SAAwB,EAAW,CACjC,OAAO,CAAC,EACR,aAAa,KACb,QAAQ,GACR,WACA,gBAAgB,KAChB,WAAY,EACZ,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACe,CAClB,IAAM,EAAe,EAAkB,EAAc,OAAoB,KAAQ,EAC3E,EAAY,EAAS,CAAE,gBAAe,WAAY,CAAY,CAAC,EAC/D,EAAW,EAAW,CAAE,gBAAe,WAAY,CAAY,CAAC,EAEhE,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAa,EAAgC,CAAC,CAAC,EAC/C,EAAgB,EAAK,UAAW,GAAS,EAAK,KAAO,CAAY,EACjE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAa,EAAY,CAC5B,GAAe,EAAc,IAAI,CAAE,EACvC,IAAW,CAAE,CACf,CAEA,SAAS,EAAO,EAAc,EAAmB,CAC/C,GAAI,EAAK,SAAW,EAAG,OACvB,IAAM,GAAQ,EAAY,EAAO,EAAK,QAAU,EAAK,OACrD,EAAS,QAAQ,EAAK,EAAE,MAAM,EAC9B,EAAa,EAAK,EAAK,CAAC,EAAE,CAC5B,CAEA,SAAS,EAAc,EAA4B,EAAe,EAAY,CAC5E,OAAQ,EAAM,IAAd,CACE,IAAK,YACL,IAAK,aACH,EAAM,eAAe,EACrB,EAAO,EAAG,CAAK,EACf,MACF,IAAK,UACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,GAAI,CAAK,EAChB,MACF,IAAK,IACL,IAAK,QACH,EAAM,eAAe,EAErB,EAAW,QAAQ,EAAM,EAAE,UAAU,EACrC,EAAa,CAAE,CAInB,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,WAAY,EAAG,EAAO,iBAAkB,CAAU,EAAG,GAAY,KAAM,CAAS,EACrG,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,EAHzC,SAAA,CAKG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,KAAK,EAAG,MAAO,GAAY,MAAlF,SAAA,CACG,EACA,GAAY,IACV,CAEP,CAAA,EAAA,EAAC,MAAD,CACE,KAAK,aACL,aAAY,GAAS,IAAA,GACrB,UAAW,EAAG,EAAO,wBAAyB,GAAY,aAAa,EACvE,MAAO,GAAY,cAElB,SAAA,EAAK,KAAK,CAAE,KAAI,MAAO,EAAW,OAAM,cAA8B,IAAU,CAC/E,IAAM,EAAU,IAAiB,EACjC,OACE,EAAC,MAAD,CAEE,IAAM,GAAO,CACX,EAAS,QAAQ,GAAS,CAC5B,EACA,UAAW,EAAG,EAAO,eAAgB,EAAG,EAAO,wBAAyB,CAAQ,EAAG,GAAY,IAAI,EACnG,MAAO,GAAY,KACnB,MAAO,EACP,SAAU,IAAU,EAAc,EAAI,GACtC,KAAK,QACL,eAAc,EACd,YAAe,EAAa,CAAE,EAC9B,UAAY,GAAU,EAAc,EAAO,EAAO,CAAE,EAZtD,SAAA,CAcG,GAAQ,EAAC,EAAD,CAAuB,MAAO,CAAA,EACtC,GAAc,KACf,EAAC,EAAD,CACE,IAAM,GAAO,CACX,EAAW,QAAQ,GAAS,CAC9B,CACD,CAAA,CACE,CApBE,EAAA,CAoBF,CAET,CAAC,CACE,CAAA,CACF,GAET"}

package/dist/esm/common/iconPicker/iconPicker.module.mjs

@@ -1,2 +1,2 @@
-var e={iconPicker:`iconPicker_xJJmG`,"iconPicker-label":`iconPicker-label_VEB2X`,iconPickerLabel:`iconPicker-label_VEB2X`,"iconPicker-item":`iconPicker-item_iJWDN`,iconPickerItem:`iconPicker-item_iJWDN`,"iconPicker-item-container":`iconPicker-item-container_-1WT5`,iconPickerItemContainer:`iconPicker-item-container_-1WT5`,"iconPicker-item-selected":`iconPicker-item-selected_GQ-I1`,iconPickerItemSelected:`iconPicker-item-selected_GQ-I1`,"iconPicker-error":`iconPicker-error_23m9v`,iconPickerError:`iconPicker-error_23m9v`};export{e as default};
+var e=`iconPicker_xJJmG`,t=`iconPicker-label_VEB2X`,n=`iconPicker-item_iJWDN`,r=`iconPicker-item-container_-1WT5`,i=`iconPicker-item-selected_GQ-I1`,a=`iconPicker-error_23m9v`,o={iconPicker:e,"iconPicker-label":`iconPicker-label_VEB2X`,iconPickerLabel:t,"iconPicker-item":`iconPicker-item_iJWDN`,iconPickerItem:n,"iconPicker-item-container":`iconPicker-item-container_-1WT5`,iconPickerItemContainer:r,"iconPicker-item-selected":`iconPicker-item-selected_GQ-I1`,iconPickerItemSelected:i,"iconPicker-error":`iconPicker-error_23m9v`,iconPickerError:a};export{o as default,e as iconPicker,a as iconPickerError,n as iconPickerItem,r as iconPickerItemContainer,i as iconPickerItemSelected,t as iconPickerLabel};
 //# sourceMappingURL=iconPicker.module.mjs.map

package/dist/esm/common/idleManager/idleManager.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"idleManager.mjs","names":[],"sources":["../../../../package/common/idleManager/idleManager.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react';\nimport type { IdleManagerProps } from './idleManager.types';\n\nconst ACTIVITY_EVENTS = ['click', 'mousemove', 'keydown', 'scroll', 'touchstart'] as const;\n\nfunction IdleManager({\n  children = null,\n  idleAfterSeconds = 600,\n  renderCondition = true,\n}: IdleManagerProps) {\n  const [isIdleContentShown, setIsIdleContentShown] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleIdleTimeout = useCallback(() => {\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      setIsIdleContentShown(true);\n    }, idleAfterSeconds * 1000);\n  }, [idleAfterSeconds]);\n\n  // Only activity hides idle content again. Kept out of the effect below so that mounting, or a\n  // change of `idleAfterSeconds`, restarts the countdown without dismissing what is on screen.\n  const resetIdleTimeout = useCallback(() => {\n    setIsIdleContentShown(false);\n    scheduleIdleTimeout();\n  }, [scheduleIdleTimeout]);\n\n  useEffect(() => {\n    scheduleIdleTimeout();\n  }, [scheduleIdleTimeout]);\n\n  // Register / unregister activity listeners\n  useEffect(() => {\n    for (const event of ACTIVITY_EVENTS) {\n      document.addEventListener(event, resetIdleTimeout);\n    }\n    return () => {\n      for (const event of ACTIVITY_EVENTS) {\n        document.removeEventListener(event, resetIdleTimeout);\n      }\n      // Clear any pending timeout on unmount so it never fires after we're gone\n      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    };\n  }, [resetIdleTimeout]);\n\n  return <>{renderCondition && isIdleContentShown && children}</>;\n}\n\nexport default IdleManager;\n"],"mappings":"mIAGA,IAAM,EAAkB,CAAC,QAAS,YAAa,UAAW,SAAU,YAAY,EAEhF,SAAS,EAAY,CACnB,WAAW,KACX,mBAAmB,IACnB,kBAAkB,IACC,CACnB,GAAM,CAAC,EAAoB,GAAyB,EAAS,EAAK,EAC5D,EAAa,EAA6C,IAAI,EAE9D,EAAsB,MAAkB,CACxC,EAAW,UAAY,MAAM,aAAa,EAAW,OAAO,EAChE,EAAW,QAAU,eAAiB,CACpC,EAAsB,EAAI,CAC5B,EAAG,EAAmB,GAAI,CAC5B,EAAG,CAAC,CAAgB,CAAC,EAIf,EAAmB,MAAkB,CACzC,EAAsB,EAAK,EAC3B,EAAoB,CACtB,EAAG,CAAC,CAAmB,CAAC,EAoBxB,OAlBA,MAAgB,CACd,EAAoB,CACtB,EAAG,CAAC,CAAmB,CAAC,EAGxB,MAAgB,CACd,IAAK,IAAM,KAAS,EAClB,SAAS,iBAAiB,EAAO,CAAgB,EAEnD,UAAa,CACX,IAAK,IAAM,KAAS,EAClB,SAAS,oBAAoB,EAAO,CAAgB,EAGlD,EAAW,UAAY,MAAM,aAAa,EAAW,OAAO,CAClE,CACF,EAAG,CAAC,CAAgB,CAAC,EAEd,EAAA,EAAA,CAAA,SAAG,GAAmB,GAAsB,CAAW,CAAA,CAChE"}
+{"version":3,"file":"idleManager.mjs","names":[],"sources":["../../../../package/common/idleManager/idleManager.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react';\nimport type { IdleManagerProps } from './idleManager.types';\n\nconst ACTIVITY_EVENTS = ['click', 'mousemove', 'keydown', 'scroll', 'touchstart'] as const;\n\nfunction IdleManager({ children = null, idleAfterSeconds = 600, renderCondition = true }: IdleManagerProps) {\n  const [isIdleContentShown, setIsIdleContentShown] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleIdleTimeout = useCallback(() => {\n    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      setIsIdleContentShown(true);\n    }, idleAfterSeconds * 1000);\n  }, [idleAfterSeconds]);\n\n  // Only activity hides idle content again. Kept out of the effect below so that mounting, or a\n  // change of `idleAfterSeconds`, restarts the countdown without dismissing what is on screen.\n  const resetIdleTimeout = useCallback(() => {\n    setIsIdleContentShown(false);\n    scheduleIdleTimeout();\n  }, [scheduleIdleTimeout]);\n\n  useEffect(() => {\n    scheduleIdleTimeout();\n  }, [scheduleIdleTimeout]);\n\n  // Register / unregister activity listeners\n  useEffect(() => {\n    for (const event of ACTIVITY_EVENTS) {\n      document.addEventListener(event, resetIdleTimeout);\n    }\n    return () => {\n      for (const event of ACTIVITY_EVENTS) {\n        document.removeEventListener(event, resetIdleTimeout);\n      }\n      // Clear any pending timeout on unmount so it never fires after we're gone\n      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);\n    };\n  }, [resetIdleTimeout]);\n\n  return <>{renderCondition && isIdleContentShown && children}</>;\n}\n\nexport default IdleManager;\n"],"mappings":"mIAGA,IAAM,EAAkB,CAAC,QAAS,YAAa,UAAW,SAAU,YAAY,EAEhF,SAAS,EAAY,CAAE,WAAW,KAAM,mBAAmB,IAAK,kBAAkB,IAA0B,CAC1G,GAAM,CAAC,EAAoB,GAAyB,EAAS,EAAK,EAC5D,EAAa,EAA6C,IAAI,EAE9D,EAAsB,MAAkB,CACxC,EAAW,UAAY,MAAM,aAAa,EAAW,OAAO,EAChE,EAAW,QAAU,eAAiB,CACpC,EAAsB,EAAI,CAC5B,EAAG,EAAmB,GAAI,CAC5B,EAAG,CAAC,CAAgB,CAAC,EAIf,EAAmB,MAAkB,CACzC,EAAsB,EAAK,EAC3B,EAAoB,CACtB,EAAG,CAAC,CAAmB,CAAC,EAoBxB,OAlBA,MAAgB,CACd,EAAoB,CACtB,EAAG,CAAC,CAAmB,CAAC,EAGxB,MAAgB,CACd,IAAK,IAAM,KAAS,EAClB,SAAS,iBAAiB,EAAO,CAAgB,EAEnD,UAAa,CACX,IAAK,IAAM,KAAS,EAClB,SAAS,oBAAoB,EAAO,CAAgB,EAGlD,EAAW,UAAY,MAAM,aAAa,EAAW,OAAO,CAClE,CACF,EAAG,CAAC,CAAgB,CAAC,EAEd,EAAA,EAAA,CAAA,SAAG,GAAmB,GAAsB,CAAW,CAAA,CAChE"}

package/dist/esm/common/infiniteBlock/infiniteBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"infiniteBlock.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './infiniteBlock.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport type { InfiniteBlockProps } from './infiniteBlock.types';\n\n// Flattens a React node down to the text it renders, so keyboard type-ahead can match\n// against whatever a child actually displays — a plain string, a number, or something\n// wrapped in nested elements/fragments/arrays (e.g. an icon + label pair).\nfunction getNodeText(node: React.ReactNode): string {\n  if (node === null || node === undefined || typeof node === 'boolean') return '';\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getNodeText).join('');\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n  return '';\n}\n\n// Cycles the index by `change`, wrapping directly from last to first (and first to last) —\n// no \"nothing highlighted\" stop in between, in either direction. `-1` means nothing is\n// highlighted yet: ArrowDown from there starts at the first item, ArrowUp at the last.\nfunction clampIndex(index: number, change: number, length: number): number {\n  if (index === -1) return change > 0 ? 0 : length - 1;\n  return (index + change + length) % length;\n}\n\n// Loads more items once a sentinel element at the end of the list scrolls into view.\n// IntersectionObserver only fires on a change of intersection state, so if a page of\n// freshly-loaded items still doesn't fill the container, the sentinel stays visible and\n// we have to re-arm the observer ourselves to pick up the next page.\nfunction useInfiniteScroll(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  onScroll: () => Promise<void>,\n  disabled: boolean\n) {\n  const [isLoading, setIsLoading] = useState(false);\n  const isLoadingRef = useRef(false);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  // Kept in a ref so a caller passing a fresh onScroll function each render doesn't\n  // tear down and recreate the observer every time.\n  const onScrollRef = useRef(onScroll);\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  });\n\n  useEffect(() => {\n    const root = containerRef.current;\n    const sentinel = sentinelRef.current;\n    if (disabled || !root || !sentinel) return undefined;\n\n    let cancelled = false;\n\n    const loadMore = () => {\n      if (isLoadingRef.current) return;\n      isLoadingRef.current = true;\n      setIsLoading(true);\n\n      onScrollRef\n        .current()\n        .catch(() => null)\n        .finally(() => {\n          if (cancelled) return;\n          isLoadingRef.current = false;\n          setIsLoading(false);\n          observer.unobserve(sentinel);\n          observer.observe(sentinel);\n        });\n    };\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) loadMore();\n      },\n      { root }\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      cancelled = true;\n      observer.disconnect();\n    };\n  }, [containerRef, disabled]);\n\n  return { isLoading, sentinelRef };\n}\n\n// Arrow-key navigation plus type-ahead: pressing a character key jumps to the next child\n// whose text starts with it, cycling through repeats and wrapping at the end of the list.\nfunction useTypeaheadNav(\n  children: React.ReactNode,\n  setHighlightedIndex: (index: number) => void\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const indexRef = useRef(-1);\n  const lastKeyRef = useRef<string | null>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const childArray = React.Children.toArray(children);\n      if (childArray.length === 0) return;\n\n      let index = indexRef.current;\n\n      if (event.key === 'ArrowDown') {\n        // Without this, the browser's own native \"scroll a focused scrollable element on\n        // arrow keys\" behavior fires alongside our scrollIntoView math below, stacking an\n        // extra native scroll on top of ours on every press until the highlighted item is\n        // pushed out of view entirely.\n        event.preventDefault();\n        index = clampIndex(index, 1, childArray.length);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        index = clampIndex(index, -1, childArray.length);\n      } else if (event.key.length === 1) {\n        const key = event.key.toLowerCase();\n        const repeatingKey = lastKeyRef.current === event.key;\n        const searchStart = repeatingKey ? index + 1 : 0;\n        const startsWithKey = (child: React.ReactNode) =>\n          getNodeText(child).toLowerCase().startsWith(key);\n\n        const afterCurrent = childArray.slice(searchStart).findIndex(startsWithKey);\n        const match =\n          afterCurrent !== -1\n            ? searchStart + afterCurrent\n            : childArray.slice(0, searchStart).findIndex(startsWithKey);\n\n        lastKeyRef.current = event.key;\n        if (match === -1) return;\n        index = match;\n      } else {\n        return;\n      }\n\n      lastKeyRef.current = event.key;\n      indexRef.current = index;\n\n      const child = container.children[index] as HTMLElement | undefined;\n      if (child) {\n        const childTop = child.offsetTop;\n        const childBottom = childTop + child.offsetHeight;\n        if (childTop < container.scrollTop) {\n          container.scrollTop = childTop;\n        } else if (childBottom > container.scrollTop + container.clientHeight) {\n          container.scrollTop = childBottom - container.clientHeight;\n        }\n      }\n      setHighlightedIndex(index);\n    },\n    [children, setHighlightedIndex]\n  );\n\n  return { containerRef, onKeyDown };\n}\n\nfunction InfiniteBlock({\n  children,\n  onScroll,\n  className = '',\n  isDataLoading = false,\n  setHighlightedIndex = () => null,\n}: InfiniteBlockProps) {\n  const { containerRef, onKeyDown } = useTypeaheadNav(children, setHighlightedIndex);\n  const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(\n    containerRef,\n    onScroll,\n    isDataLoading\n  );\n\n  return (\n    <div\n      className={cx(styles.infiniteBlock, className)}\n      onKeyDown={onKeyDown}\n      tabIndex={0}\n      ref={containerRef}\n    >\n      {isDataLoading ? (\n        <div className={styles.spinnerWrapper}>\n          <SpinnerLoading className={styles.spinner} />\n        </div>\n      ) : (\n        <>\n          {children}\n          <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" />\n          {showScrollSpinner && (\n            <div className={styles.spinnerWrapper}>\n              <SpinnerLoading className={styles.spinner} />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default InfiniteBlock;\n"],"mappings":"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"}
+{"version":3,"file":"infiniteBlock.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './infiniteBlock.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport type { InfiniteBlockProps } from './infiniteBlock.types';\n\n// Flattens a React node down to the text it renders, so keyboard type-ahead can match\n// against whatever a child actually displays — a plain string, a number, or something\n// wrapped in nested elements/fragments/arrays (e.g. an icon + label pair).\nfunction getNodeText(node: React.ReactNode): string {\n  if (node === null || node === undefined || typeof node === 'boolean') return '';\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getNodeText).join('');\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n  return '';\n}\n\n// Cycles the index by `change`, wrapping directly from last to first (and first to last) —\n// no \"nothing highlighted\" stop in between, in either direction. `-1` means nothing is\n// highlighted yet: ArrowDown from there starts at the first item, ArrowUp at the last.\nfunction clampIndex(index: number, change: number, length: number): number {\n  if (index === -1) return change > 0 ? 0 : length - 1;\n  return (index + change + length) % length;\n}\n\n// Loads more items once a sentinel element at the end of the list scrolls into view.\n// IntersectionObserver only fires on a change of intersection state, so if a page of\n// freshly-loaded items still doesn't fill the container, the sentinel stays visible and\n// we have to re-arm the observer ourselves to pick up the next page.\nfunction useInfiniteScroll(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  onScroll: () => Promise<void>,\n  disabled: boolean,\n) {\n  const [isLoading, setIsLoading] = useState(false);\n  const isLoadingRef = useRef(false);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  // Kept in a ref so a caller passing a fresh onScroll function each render doesn't\n  // tear down and recreate the observer every time.\n  const onScrollRef = useRef(onScroll);\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  });\n\n  useEffect(() => {\n    const root = containerRef.current;\n    const sentinel = sentinelRef.current;\n    if (disabled || !root || !sentinel) return undefined;\n\n    let cancelled = false;\n\n    const loadMore = () => {\n      if (isLoadingRef.current) return;\n      isLoadingRef.current = true;\n      setIsLoading(true);\n\n      onScrollRef\n        .current()\n        .catch(() => null)\n        .finally(() => {\n          if (cancelled) return;\n          isLoadingRef.current = false;\n          setIsLoading(false);\n          observer.unobserve(sentinel);\n          observer.observe(sentinel);\n        });\n    };\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) loadMore();\n      },\n      { root },\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      cancelled = true;\n      observer.disconnect();\n    };\n  }, [containerRef, disabled]);\n\n  return { isLoading, sentinelRef };\n}\n\n// Arrow-key navigation plus type-ahead: pressing a character key jumps to the next child\n// whose text starts with it, cycling through repeats and wrapping at the end of the list.\nfunction useTypeaheadNav(children: React.ReactNode, setHighlightedIndex: (index: number) => void) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const indexRef = useRef(-1);\n  const lastKeyRef = useRef<string | null>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const childArray = React.Children.toArray(children);\n      if (childArray.length === 0) return;\n\n      let index = indexRef.current;\n\n      if (event.key === 'ArrowDown') {\n        // Without this, the browser's own native \"scroll a focused scrollable element on\n        // arrow keys\" behavior fires alongside our scrollIntoView math below, stacking an\n        // extra native scroll on top of ours on every press until the highlighted item is\n        // pushed out of view entirely.\n        event.preventDefault();\n        index = clampIndex(index, 1, childArray.length);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        index = clampIndex(index, -1, childArray.length);\n      } else if (event.key.length === 1) {\n        const key = event.key.toLowerCase();\n        const repeatingKey = lastKeyRef.current === event.key;\n        const searchStart = repeatingKey ? index + 1 : 0;\n        const startsWithKey = (child: React.ReactNode) => getNodeText(child).toLowerCase().startsWith(key);\n\n        const afterCurrent = childArray.slice(searchStart).findIndex(startsWithKey);\n        const match =\n          afterCurrent !== -1 ? searchStart + afterCurrent : childArray.slice(0, searchStart).findIndex(startsWithKey);\n\n        lastKeyRef.current = event.key;\n        if (match === -1) return;\n        index = match;\n      } else {\n        return;\n      }\n\n      lastKeyRef.current = event.key;\n      indexRef.current = index;\n\n      const child = container.children[index] as HTMLElement | undefined;\n      if (child) {\n        const childTop = child.offsetTop;\n        const childBottom = childTop + child.offsetHeight;\n        if (childTop < container.scrollTop) {\n          container.scrollTop = childTop;\n        } else if (childBottom > container.scrollTop + container.clientHeight) {\n          container.scrollTop = childBottom - container.clientHeight;\n        }\n      }\n      setHighlightedIndex(index);\n    },\n    [children, setHighlightedIndex],\n  );\n\n  return { containerRef, onKeyDown };\n}\n\nfunction InfiniteBlock({\n  children,\n  onScroll,\n  className = '',\n  isDataLoading = false,\n  setHighlightedIndex = () => null,\n}: InfiniteBlockProps) {\n  const { containerRef, onKeyDown } = useTypeaheadNav(children, setHighlightedIndex);\n  const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(containerRef, onScroll, isDataLoading);\n\n  return (\n    <div className={cx(styles.infiniteBlock, className)} onKeyDown={onKeyDown} tabIndex={0} ref={containerRef}>\n      {isDataLoading ? (\n        <div className={styles.spinnerWrapper}>\n          <SpinnerLoading className={styles.spinner} />\n        </div>\n      ) : (\n        <>\n          {children}\n          <div ref={sentinelRef} className={styles.sentinel} aria-hidden='true' />\n          {showScrollSpinner && (\n            <div className={styles.spinnerWrapper}>\n              <SpinnerLoading className={styles.spinner} />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default InfiniteBlock;\n"],"mappings":"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"}

package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs

@@ -1,2 +1,2 @@
-var e={infiniteBlock:`infiniteBlock_dFv-h`,sentinel:`sentinel_n-Zie`,"spinner-wrapper":`spinner-wrapper_hsgWz`,spinnerWrapper:`spinner-wrapper_hsgWz`,spinner:`spinner_VjUS2`};export{e as default};
+var e=`infiniteBlock_dFv-h`,t=`sentinel_n-Zie`,n=`spinner-wrapper_hsgWz`,r=`spinner_VjUS2`,i={infiniteBlock:e,sentinel:t,"spinner-wrapper":`spinner-wrapper_hsgWz`,spinnerWrapper:n,spinner:r};export{i as default,e as infiniteBlock,t as sentinel,r as spinner,n as spinnerWrapper};
 //# sourceMappingURL=infiniteBlock.module.mjs.map

package/dist/esm/common/input/input.mjs

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import n from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import ee,{useCallback as te,useEffect as o,useId as ne,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEnvelope as re,faEye as ie,faEyeSlash as ae,faPen as oe,faPhone as se,faSearch as ce,faXmark as le}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";function p(e){if(e)return{role:`button`,tabIndex:0,onKeyDown:t=>{t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),e(t))}}}function m(m){let{name:ue=``,id:de,label:h=``,errorMessage:fe=``,isValid:pe=!0,className:me=``,style:he,value:ge=``,icon:_e=null,iconPosition:ve,onChange:g=()=>{},onFocus:_=null,onBlur:v=null,onMouseEnter:y=null,onMouseLeave:ye=null,isUppercase:be=!1,isRequired:xe=!1,tabIndex:Se=0,type:b=void 0,isRow:Ce=!1,onIconClick:x=null,parse:we=null,formValidator:S=null,autoFocus:Te=!1,suffix:Ee=null,upperRightLabel:De=null,labelInBorder:Oe=!1,showCancel:ke=!1,onClearClicked:Ae,min:je=null,max:Me=null,placeholder:C=``,useMatLabelStyle:w=!0,alwaysFloatLabel:Ne=!1,autoComplete:Pe=null,onClick:Fe=()=>null,readOnly:T=!1,customInput:E,alwaysShowCancel:Ie=!1,multiline:D=!1,rows:Le,autoResize:O=!1,classNames:k,styles:A,disabled:Re=!1,...j}=e(`Input`,m),[M,ze]=c(!1),[Be,N]=c(!1),[P,F]=c(!1),[,Ve]=c(0),I=s(null),L=s(S),He=ne(),R=de||ue||He,z=S?S.value:ge,B=s(!1),V=te(()=>{let e=I.current;if(e){if(!O){B.current&&=(e.style.height=``,!1);return}e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`,B.current=!0}},[O]);o(()=>{V()},[V,z]),o(()=>{Te&&I.current&&setTimeout(()=>{I.current?.focus()},1)},[Te]),o(()=>{L.current=S;let e=L.current;if(!e)return;e.label=h??``,e.validate();let t=()=>Ve(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[S,h]);let Ue=()=>S?S.touched&&S.hasError():!pe||!!fe,We=()=>!!(xe||S&&S.validators.find(e=>e.validatorId===`required`)),Ge=e=>{N(!0),y&&y(e)},Ke=e=>{N(!1),ye&&ye(e)},qe=e=>{ze(!0),_&&_(e)},Je=e=>{L.current&&(L.current.touched=!0),ze(!1),v&&v(e)},Ye=e=>{let t,n;typeof e==`string`?n=e:(t=e,n=e.target.value),we&&(n=we(n)),S&&S.set(n),g&&g(n,t),V()},Xe=()=>{if(b!==a.Email)return b===a.Phone?`tel`:b===a.Search?`search`:b===`password`&&P?`text`:b},Ze=()=>{if(b===a.Email)return`email`;if(b===a.Phone)return`tel`;if(b===a.Search)return`search`},Qe=b&&b!==a.Date&&b!==a.Iban&&b!==a.HasNoIcon,$e=b===a.Search||b===a.Password,H=!!_e,et=H&&!$e,tt=b===a.Email||b===a.Phone||b===a.Search,U=(ve??(!w&&tt?i.Left:i.Right))===i.Left,W={className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!x,[r.inputFieldIconLeft]:U}),onClick:x??void 0,...p(x)},G=_e,K=x??G?.props.onClick,nt=et&&G?ee.cloneElement(G,{className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!K,[r.inputFieldIconLeft]:U},G.props.className),onClick:K,...p(K)}):null,rt=(Qe||H)&&U,it={className:l(r.inputFieldIcon,r.inputFieldIconPassword,{[r.inputFieldIconLeft]:U}),onClick:()=>F(!P),...p(()=>F(!P)),"aria-label":P?`Hide password`:`Show password`},q=Ue(),J=h;J&&We()&&(J=`${J} *`);let at=We()?d(`span`,{className:r.requiredMark,children:`*`}):null,Y=M&&!T,X=w&&(Ne||Y||z||b===a.Date),Z=b===a.Search&&!!z,Q=E?.props;function $(){S&&S.set(``),g?.(``),Ae?.()}return f(`div`,{className:l(r.input,{[r.inputIconLeft]:rt},me),style:he,children:[f(`label`,{htmlFor:R,className:l(r.inputLabel,k?.label,{[r.inputLabelColumn]:!Ce,[r.inputLabelInBorder]:Oe}),style:A?.label,children:[h&&!w?f(`span`,{className:r.inputLabelText,children:[h,at]}):null,De&&d(`div`,{className:l(r.inputUpperRightLabel,k?.upperRightLabel),style:A?.upperRightLabel,children:De}),f(`div`,{className:l(r.inputContainer,{[r.inputContainerMultiline]:D},k?.container),style:A?.container,onMouseEnter:Ge,onMouseLeave:Ke,children:[nt,ee.cloneElement(E||d(D?`textarea`:`input`,{}),{...j,className:l(r.inputField,{[r.inputFieldUppercase]:be,[r.inputFieldDate]:b===a.Date,[r.inputFieldDefault]:b!==a.Date,[r.inputFieldWithIcon]:Qe||H,[r.inputFieldWithIconLeft]:rt,[r.inputFieldMultiline]:D,[r.inputFieldMultilineAutoResize]:D&&O,[r.inputFieldReadOnly]:T&&!Re},k?.input,Q?.className),style:Q?.style||A?.input?{...Q?.style,...A?.input}:void 0,name:ue,id:R,value:z,tabIndex:Se,ref:E?void 0:I,onChange:Ye,onFocus:qe,onBlur:Je,placeholder:w?``:C,autoComplete:Pe,onClick:Fe,readOnly:T,disabled:Re,...!D&&{type:Xe(),inputMode:j.inputMode??Ze(),min:je,max:Me},...D&&Le!==void 0&&{rows:Le}}),Ee&&d(`div`,{className:l(r.inputFieldSuffix,k?.suffix),style:A?.suffix,children:Ee})]}),d(`fieldset`,{className:l(r.inputFieldset,k?.fieldset,{[r.inputFieldsetNoNotch]:!h,[r.inputContainerBorderFocused]:Y,[r.inputContainerBorderSearchFocused]:b===a.Search&&(Y||!!z),[r.inputContainerBorderInvalid]:q,[r.inputContainerBorderError]:q}),style:A?.fieldset,children:d(`legend`,{className:l(r.inputFieldsetLegend,{[r.inputFieldsetLegendActive]:X}),children:d(`span`,{children:J})})}),w&&h&&f(`div`,{className:l(r.inputMatLabel,{[r.inputMatLabelFloating]:X,[r.inputMatLabelMultiline]:D&&!X}),children:[h,at]}),w&&C&&d(`div`,{className:l(r.inputPlaceholder,Y&&!z&&r.inputPlaceholderShown,D&&r.inputPlaceholderMultiline),children:C}),d(t,{variant:`error`,message:S?S.getCurrentErrorMessage():fe||``,isVisible:q&&(M||Be)})]}),b===a.Phone&&!H&&d(u,{icon:se,...W}),b===a.Email&&!H&&d(u,{icon:re,...W}),b===a.Edit&&!H&&d(u,{icon:oe,...W}),b===a.Search&&d(n,{icon:Z?le:ce,className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!Z,[r.inputFieldIconLeft]:U}),onClick:Z?$:void 0,...p(Z?$:void 0),"aria-label":Z?`Clear search`:void 0}),b===a.Password&&d(u,{icon:P?ae:ie,...it}),(ke&&z&&(M||Be)||Ie)&&b!==a.Search&&d(u,{icon:le,className:r.inputFieldIcon,onClick:$,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),...p($),"aria-label":`Clear`})]})}export{m as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import n from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import ee,{useCallback as te,useEffect as o,useId as ne,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEnvelope as re,faEye as ie,faEyeSlash as ae,faPen as oe,faPhone as se,faSearch as ce,faXmark as le}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";function p(e){if(e)return{role:`button`,tabIndex:0,onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),e(t))}}}function m(m){let{name:ue=``,id:de,label:h=``,errorMessage:fe=``,isValid:pe=!0,className:me=``,style:he,value:ge=``,icon:_e=null,iconPosition:ve,onChange:g=()=>{},onFocus:_=null,onBlur:v=null,onMouseEnter:y=null,onMouseLeave:ye=null,isUppercase:be=!1,isRequired:xe=!1,tabIndex:Se=0,type:b=void 0,isRow:Ce=!1,onIconClick:x=null,parse:we=null,formValidator:S=null,autoFocus:Te=!1,suffix:Ee=null,upperRightLabel:De=null,labelInBorder:Oe=!1,showCancel:ke=!1,onClearClicked:Ae,min:je=null,max:Me=null,placeholder:C=``,useMatLabelStyle:w=!0,alwaysFloatLabel:Ne=!1,autoComplete:Pe=null,onClick:Fe=()=>null,readOnly:T=!1,customInput:E,alwaysShowCancel:Ie=!1,multiline:D=!1,rows:Le,autoResize:O=!1,classNames:k,styles:A,disabled:Re=!1,...j}=e(`Input`,m),[M,ze]=c(!1),[Be,N]=c(!1),[P,F]=c(!1),[,Ve]=c(0),I=s(null),L=s(S),He=ne(),R=de||ue||He,z=S?S.value:ge,B=s(!1),V=te(()=>{let e=I.current;if(e){if(!O){B.current&&=(e.style.height=``,!1);return}e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`,B.current=!0}},[O]);o(()=>{V()},[V,z]),o(()=>{Te&&I.current&&setTimeout(()=>{I.current?.focus()},1)},[Te]),o(()=>{L.current=S;let e=L.current;if(!e)return;e.label=h??``,e.validate();let t=()=>Ve(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[S,h]);let Ue=()=>S?S.touched&&S.hasError():!pe||!!fe,We=()=>!!(xe||S&&S.validators.find(e=>e.validatorId===`required`)),Ge=e=>{N(!0),y&&y(e)},Ke=e=>{N(!1),ye&&ye(e)},qe=e=>{ze(!0),_&&_(e)},Je=e=>{L.current&&(L.current.touched=!0),ze(!1),v&&v(e)},Ye=e=>{let t,n;typeof e==`string`?n=e:(t=e,n=e.target.value),we&&(n=we(n)),S&&S.set(n),g&&g(n,t),V()},Xe=()=>{if(b!==a.Email)return b===a.Phone?`tel`:b===a.Search?`search`:b===`password`&&P?`text`:b},Ze=()=>{if(b===a.Email)return`email`;if(b===a.Phone)return`tel`;if(b===a.Search)return`search`},Qe=b&&b!==a.Date&&b!==a.Iban&&b!==a.HasNoIcon,$e=b===a.Search||b===a.Password,H=!!_e,et=H&&!$e,tt=b===a.Email||b===a.Phone||b===a.Search,U=(ve??(!w&&tt?i.Left:i.Right))===i.Left,W={className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!x,[r.inputFieldIconLeft]:U}),onClick:x??void 0,...p(x)},G=_e,K=x??G?.props.onClick,nt=et&&G?ee.cloneElement(G,{className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!K,[r.inputFieldIconLeft]:U},G.props.className),onClick:K,...p(K)}):null,rt=(Qe||H)&&U,it={className:l(r.inputFieldIcon,r.inputFieldIconPassword,{[r.inputFieldIconLeft]:U}),onClick:()=>F(!P),...p(()=>F(!P)),"aria-label":P?`Hide password`:`Show password`},q=Ue(),J=h;J&&We()&&(J=`${J} *`);let at=We()?d(`span`,{className:r.requiredMark,children:`*`}):null,Y=M&&!T,X=w&&(Ne||Y||z||b===a.Date),Z=b===a.Search&&!!z,Q=E?.props;function $(){S&&S.set(``),g?.(``),Ae?.()}return f(`div`,{className:l(r.input,{[r.inputIconLeft]:rt},me),style:he,children:[f(`label`,{htmlFor:R,className:l(r.inputLabel,k?.label,{[r.inputLabelColumn]:!Ce,[r.inputLabelInBorder]:Oe}),style:A?.label,children:[h&&!w?f(`span`,{className:r.inputLabelText,children:[h,at]}):null,De&&d(`div`,{className:l(r.inputUpperRightLabel,k?.upperRightLabel),style:A?.upperRightLabel,children:De}),f(`div`,{className:l(r.inputContainer,{[r.inputContainerMultiline]:D},k?.container),style:A?.container,onMouseEnter:Ge,onMouseLeave:Ke,children:[nt,ee.cloneElement(E||d(D?`textarea`:`input`,{}),{...j,className:l(r.inputField,{[r.inputFieldUppercase]:be,[r.inputFieldDate]:b===a.Date,[r.inputFieldDefault]:b!==a.Date,[r.inputFieldWithIcon]:Qe||H,[r.inputFieldWithIconLeft]:rt,[r.inputFieldMultiline]:D,[r.inputFieldMultilineAutoResize]:D&&O,[r.inputFieldReadOnly]:T&&!Re},k?.input,Q?.className),style:Q?.style||A?.input?{...Q?.style,...A?.input}:void 0,name:ue,id:R,value:z,tabIndex:Se,ref:E?void 0:I,onChange:Ye,onFocus:qe,onBlur:Je,placeholder:w?``:C,autoComplete:Pe,onClick:Fe,readOnly:T,disabled:Re,...!D&&{type:Xe(),inputMode:j.inputMode??Ze(),min:je,max:Me},...D&&Le!==void 0&&{rows:Le}}),Ee&&d(`div`,{className:l(r.inputFieldSuffix,k?.suffix),style:A?.suffix,children:Ee})]}),d(`fieldset`,{className:l(r.inputFieldset,k?.fieldset,{[r.inputFieldsetNoNotch]:!h,[r.inputContainerBorderFocused]:Y,[r.inputContainerBorderSearchFocused]:b===a.Search&&(Y||!!z),[r.inputContainerBorderInvalid]:q,[r.inputContainerBorderError]:q}),style:A?.fieldset,children:d(`legend`,{className:l(r.inputFieldsetLegend,{[r.inputFieldsetLegendActive]:X}),children:d(`span`,{children:J})})}),w&&h&&f(`div`,{className:l(r.inputMatLabel,{[r.inputMatLabelFloating]:X,[r.inputMatLabelMultiline]:D&&!X}),children:[h,at]}),w&&C&&d(`div`,{className:l(r.inputPlaceholder,Y&&!z&&r.inputPlaceholderShown,D&&r.inputPlaceholderMultiline),children:C}),d(t,{variant:`error`,message:S?S.getCurrentErrorMessage():fe||``,isVisible:q&&(M||Be)})]}),b===a.Phone&&!H&&d(u,{icon:se,...W}),b===a.Email&&!H&&d(u,{icon:re,...W}),b===a.Edit&&!H&&d(u,{icon:oe,...W}),b===a.Search&&d(n,{icon:Z?le:ce,className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!Z,[r.inputFieldIconLeft]:U}),onClick:Z?$:void 0,...p(Z?$:void 0),"aria-label":Z?`Clear search`:void 0}),b===a.Password&&d(u,{icon:P?ae:ie,...it}),(ke&&z&&(M||Be)||Ie)&&b!==a.Search&&d(u,{icon:le,className:r.inputFieldIcon,onClick:$,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),...p($),"aria-label":`Clear`})]})}export{m as default};
 //# sourceMappingURL=input.mjs.map

package/dist/esm/common/input/input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  faPhone,\n  faPen,\n  faEnvelope,\n  faSearch,\n  faXmark,\n  faEye as passwordHiddenIcon,\n  faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) | null) {\n  if (!onActivate) return undefined;\n  return {\n    role: 'button' as const,\n    tabIndex: 0,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      onActivate(event);\n    },\n  };\n}\n\nfunction Input(props: InputProps) {\n  const {\n  name = '',\n  id,\n  label = '',\n  errorMessage = '',\n  isValid = true,\n  className = '',\n  style,\n  value = '',\n  icon = null,\n  iconPosition,\n  onChange = () => {},\n  onFocus: onFocusProp = null,\n  onBlur: onBlurProp = null,\n  onMouseEnter: onMouseEnterProp = null,\n  onMouseLeave: onMouseLeaveProp = null,\n  isUppercase = false,\n  isRequired = false,\n  tabIndex = 0,\n  type = undefined,\n  isRow = false,\n  onIconClick = null,\n  parse = null,\n  formValidator = null,\n  autoFocus = false,\n  suffix = null,\n  upperRightLabel = null,\n  labelInBorder = false,\n  showCancel = false,\n  onClearClicked,\n  min = null,\n  max = null,\n  placeholder = '',\n  useMatLabelStyle = true,\n  alwaysFloatLabel = false,\n  autoComplete = null,\n  onClick = () => null,\n  readOnly = false,\n  customInput,\n  alwaysShowCancel = false,\n  multiline = false,\n  rows,\n  autoResize = false,\n  classNames,\n  styles: slotStyles,\n  disabled = false,\n  ...rest\n  } = useComponentDefaults('Input', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPasswordShown, setIsPasswordShown] = useState(false);\n  const [, forceUpdate] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  const fvRef = useRef(formValidator);\n\n  const generatedId = useId();\n  const inputId = id || name || generatedId;\n\n  const currVal = formValidator ? formValidator.value : value;\n  const didSetAutoHeightRef = useRef(false);\n\n  const resizeTextarea = useCallback(() => {\n    const el = inputRef.current;\n    if (!el) return;\n    if (!autoResize) {\n      // Only undo a height this set, so an explicit one from `styles.input` survives.\n      if (didSetAutoHeightRef.current) {\n        el.style.height = '';\n        didSetAutoHeightRef.current = false;\n      }\n      return;\n    }\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n    didSetAutoHeightRef.current = true;\n  }, [autoResize]);\n\n  // `currVal` is a dependency because the value can change without passing through\n  // `onChangeHandler`: the clear button, a parent resetting it, or `formValidator.set` elsewhere.\n  useEffect(() => {\n    resizeTextarea();\n  }, [resizeTextarea, currVal]);\n\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      setTimeout(() => { inputRef.current?.focus(); }, 1);\n    }\n  }, [autoFocus]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label ?? '';\n    fv.validate();\n    const listener = () => forceUpdate(n => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => { fv.removeOnUpdateListener(listener); };\n  }, [formValidator, label]);\n\n  const hasError = (): boolean => {\n    return formValidator\n      ? (formValidator.touched && formValidator.hasError())\n      : (!isValid || !!errorMessage);\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(isRequired || (formValidator && formValidator.validators.find(\n      (v) => (v as { validatorId?: string }).validatorId === 'required'\n    )));\n  };\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    if (onMouseEnterProp) onMouseEnterProp(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    if (onMouseLeaveProp) onMouseLeaveProp(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    if (onFocusProp) onFocusProp(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    if (onBlurProp) onBlurProp(event);\n  };\n\n  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n    let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n    let val: string;\n\n    if (typeof event !== 'string') {\n      parsedEvent = event;\n      val = event.target.value;\n    } else {\n      val = event;\n    }\n\n    if (parse) val = parse(val);\n    if (formValidator) formValidator.set(val);\n    if (onChange) onChange(val, parsedEvent);\n    resizeTextarea();\n  };\n\n  const getInputType = (): string | undefined => {\n    if (type === InputType.Email) return undefined;\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    if (type === 'password' && isPasswordShown) return 'text';\n    return type;\n  };\n\n  const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n    if (type === InputType.Email) return 'email';\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    return undefined;\n  };\n\n  const hasIcon =\n    type &&\n    type !== InputType.Date &&\n    type !== InputType.Iban &&\n    type !== InputType.HasNoIcon;\n\n  const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n  const hasCustomIcon = !!icon;\n  const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n  const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n  const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n  const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n  const iconProps = {\n    className: cx(styles.inputFieldIcon, {\n      [styles.inputFieldIconNotClickable]: !onIconClick,\n      [styles.inputFieldIconLeft]: iconIsLeft,\n    }),\n    onClick: onIconClick ?? undefined,\n    ...keyboardActivationProps(onIconClick),\n  };\n\n  const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n  const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n  const renderedIcon = customIconApplies && customIcon\n    ? React.cloneElement(customIcon, {\n        className: cx(\n          styles.inputFieldIcon,\n          {\n            [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          },\n          customIcon.props.className,\n        ),\n        onClick: resolvedCustomIconClick,\n        ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) | undefined),\n      })\n    : null;\n\n  const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n  const passwordIconProps = {\n    className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n    onClick: () => setIsPasswordShown(!isPasswordShown),\n    ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n    'aria-label': isPasswordShown ? 'Hide password' : 'Show password',\n  };\n\n  const hasErr = hasError();\n\n  let editedLabel = label;\n  if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n  const showFocus = isFocused && !readOnly;\n  const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n  const isSearchCleared = type === InputType.Search && !!currVal;\n\n  const customInputProps = customInput?.props as\n    | { className?: string; style?: React.CSSProperties }\n    | undefined;\n\n  function handleClear() {\n    if (formValidator) formValidator.set('');\n    onChange?.('');\n    onClearClicked?.();\n  }\n\n  return (\n    <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n      <label\n        htmlFor={inputId}\n        className={cx(styles.inputLabel, classNames?.label, {\n          [styles.inputLabelColumn]: !isRow,\n          [styles.inputLabelInBorder]: labelInBorder,\n        })}\n        style={slotStyles?.label}\n      >\n        {label && !useMatLabelStyle ? (\n          <span className={styles.inputLabelText}>\n            {label}\n            {requiredMark}\n          </span>\n        ) : null}\n        {upperRightLabel && (\n          <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n            {upperRightLabel}\n          </div>\n        )}\n        <div\n          className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n          style={slotStyles?.container}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n        >\n          {renderedIcon}\n          {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n            ...rest,\n            className: cx(\n              styles.inputField,\n              {\n                [styles.inputFieldUppercase]: isUppercase,\n                [styles.inputFieldDate]: type === InputType.Date,\n                [styles.inputFieldDefault]: type !== InputType.Date,\n                [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n                [styles.inputFieldWithIconLeft]: hasLeftIcon,\n                [styles.inputFieldMultiline]: multiline,\n                [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n                [styles.inputFieldReadOnly]: readOnly && !disabled,\n              },\n              classNames?.input,\n              customInputProps?.className,\n            ),\n            style: customInputProps?.style || slotStyles?.input\n              ? { ...customInputProps?.style, ...slotStyles?.input }\n              : undefined,\n            name,\n            id: inputId,\n            value: currVal,\n            tabIndex,\n            ref: customInput ? undefined : inputRef,\n            onChange: onChangeHandler,\n            onFocus: onFocusHandler,\n            onBlur: onBlurHandler,\n            placeholder: !useMatLabelStyle ? placeholder : '',\n            autoComplete,\n            onClick,\n            readOnly,\n            disabled,\n            ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n            ...(multiline && rows !== undefined && { rows }),\n          })}\n          {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n        </div>\n        <fieldset\n          className={cx(styles.inputFieldset, classNames?.fieldset, {\n            [styles.inputFieldsetNoNotch]: !label,\n            [styles.inputContainerBorderFocused]: showFocus,\n            [styles.inputContainerBorderSearchFocused]:\n              type === InputType.Search && (showFocus || !!currVal),\n            [styles.inputContainerBorderInvalid]: hasErr,\n            [styles.inputContainerBorderError]: hasErr,\n          })}\n          style={slotStyles?.fieldset}\n        >\n          <legend\n            className={cx(styles.inputFieldsetLegend, {\n              [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n            })}\n          >\n            <span>{editedLabel}</span>\n          </legend>\n        </fieldset>\n        {useMatLabelStyle && label && (\n          <div\n            className={cx(styles.inputMatLabel, {\n              [styles.inputMatLabelFloating]: shouldFloatLabel,\n              [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n            })}\n          >\n            {label}\n            {requiredMark}\n          </div>\n        )}\n        {useMatLabelStyle && placeholder && (\n          <div\n            className={cx(\n              styles.inputPlaceholder,\n              showFocus && !currVal && styles.inputPlaceholderShown,\n              multiline && styles.inputPlaceholderMultiline,\n            )}\n          >\n            {placeholder}\n          </div>\n        )}\n        <Tooltip\n          variant=\"error\"\n          message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n          isVisible={hasErr && (isFocused || isHovered)}\n        />\n      </label>\n\n      {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n      {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n      {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n      {type === InputType.Search && (\n        <AnimatedIcon\n          icon={isSearchCleared ? faXmark : faSearch}\n          className={cx(styles.inputFieldIcon, {\n            [styles.inputFieldIconNotClickable]: !isSearchCleared,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          })}\n          onClick={isSearchCleared ? handleClear : undefined}\n          {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n          aria-label={isSearchCleared ? 'Clear search' : undefined}\n        />\n      )}\n      {type === InputType.Password && (\n        <FontAwesomeIcon\n          icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n          {...passwordIconProps}\n        />\n      )}\n\n      {((showCancel && currVal && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n        <FontAwesomeIcon\n          icon={faXmark}\n          className={styles.inputFieldIcon}\n          onClick={handleClear}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          {...keyboardActivationProps(handleClear)}\n          aria-label=\"Clear\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  faPhone,\n  faPen,\n  faEnvelope,\n  faSearch,\n  faXmark,\n  faEye as passwordHiddenIcon,\n  faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) | null) {\n  if (!onActivate) return undefined;\n  return {\n    role: 'button' as const,\n    tabIndex: 0,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      onActivate(event);\n    },\n  };\n}\n\nfunction Input(props: InputProps) {\n  const {\n    name = '',\n    id,\n    label = '',\n    errorMessage = '',\n    isValid = true,\n    className = '',\n    style,\n    value = '',\n    icon = null,\n    iconPosition,\n    onChange = () => {},\n    onFocus: onFocusProp = null,\n    onBlur: onBlurProp = null,\n    onMouseEnter: onMouseEnterProp = null,\n    onMouseLeave: onMouseLeaveProp = null,\n    isUppercase = false,\n    isRequired = false,\n    tabIndex = 0,\n    type = undefined,\n    isRow = false,\n    onIconClick = null,\n    parse = null,\n    formValidator = null,\n    autoFocus = false,\n    suffix = null,\n    upperRightLabel = null,\n    labelInBorder = false,\n    showCancel = false,\n    onClearClicked,\n    min = null,\n    max = null,\n    placeholder = '',\n    useMatLabelStyle = true,\n    alwaysFloatLabel = false,\n    autoComplete = null,\n    onClick = () => null,\n    readOnly = false,\n    customInput,\n    alwaysShowCancel = false,\n    multiline = false,\n    rows,\n    autoResize = false,\n    classNames,\n    styles: slotStyles,\n    disabled = false,\n    ...rest\n  } = useComponentDefaults('Input', props);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isPasswordShown, setIsPasswordShown] = useState(false);\n  const [, forceUpdate] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n  const fvRef = useRef(formValidator);\n\n  const generatedId = useId();\n  const inputId = id || name || generatedId;\n\n  const currVal = formValidator ? formValidator.value : value;\n  const didSetAutoHeightRef = useRef(false);\n\n  const resizeTextarea = useCallback(() => {\n    const el = inputRef.current;\n    if (!el) return;\n    if (!autoResize) {\n      // Only undo a height this set, so an explicit one from `styles.input` survives.\n      if (didSetAutoHeightRef.current) {\n        el.style.height = '';\n        didSetAutoHeightRef.current = false;\n      }\n      return;\n    }\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n    didSetAutoHeightRef.current = true;\n  }, [autoResize]);\n\n  // `currVal` is a dependency because the value can change without passing through\n  // `onChangeHandler`: the clear button, a parent resetting it, or `formValidator.set` elsewhere.\n  useEffect(() => {\n    resizeTextarea();\n  }, [resizeTextarea, currVal]);\n\n  useEffect(() => {\n    if (autoFocus && inputRef.current) {\n      setTimeout(() => {\n        inputRef.current?.focus();\n      }, 1);\n    }\n  }, [autoFocus]);\n\n  useEffect(() => {\n    fvRef.current = formValidator;\n    const fv = fvRef.current;\n    if (!fv) return;\n    fv.label = label ?? '';\n    fv.validate();\n    const listener = () => forceUpdate((n) => n + 1);\n    fv.registerOnUpdateListener(listener);\n    return () => {\n      fv.removeOnUpdateListener(listener);\n    };\n  }, [formValidator, label]);\n\n  const hasError = (): boolean => {\n    return formValidator ? formValidator.touched && formValidator.hasError() : !isValid || !!errorMessage;\n  };\n\n  const computedIsRequired = (): boolean => {\n    return !!(\n      isRequired ||\n      (formValidator &&\n        formValidator.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required'))\n    );\n  };\n\n  const onMouseEnterHandler = (event: React.MouseEvent) => {\n    setIsHovered(true);\n    if (onMouseEnterProp) onMouseEnterProp(event);\n  };\n\n  const onMouseLeaveHandler = (event: React.MouseEvent) => {\n    setIsHovered(false);\n    if (onMouseLeaveProp) onMouseLeaveProp(event);\n  };\n\n  const onFocusHandler = (event: React.FocusEvent) => {\n    setIsFocused(true);\n    if (onFocusProp) onFocusProp(event);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    if (fvRef.current) fvRef.current.touched = true;\n    setIsFocused(false);\n    if (onBlurProp) onBlurProp(event);\n  };\n\n  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string): void => {\n    let parsedEvent: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined;\n    let val: string;\n\n    if (typeof event !== 'string') {\n      parsedEvent = event;\n      val = event.target.value;\n    } else {\n      val = event;\n    }\n\n    if (parse) val = parse(val);\n    if (formValidator) formValidator.set(val);\n    if (onChange) onChange(val, parsedEvent);\n    resizeTextarea();\n  };\n\n  const getInputType = (): string | undefined => {\n    if (type === InputType.Email) return undefined;\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    if (type === 'password' && isPasswordShown) return 'text';\n    return type;\n  };\n\n  const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n    if (type === InputType.Email) return 'email';\n    if (type === InputType.Phone) return 'tel';\n    if (type === InputType.Search) return 'search';\n    return undefined;\n  };\n\n  const hasIcon = type && type !== InputType.Date && type !== InputType.Iban && type !== InputType.HasNoIcon;\n\n  const isFunctionalIconType = type === InputType.Search || type === InputType.Password;\n  const hasCustomIcon = !!icon;\n  const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n  const defaultsLeftWithoutMatLabel = type === InputType.Email || type === InputType.Phone || type === InputType.Search;\n  const resolvedIconPosition =\n    iconPosition ??\n    (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n  const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n  const iconProps = {\n    className: cx(styles.inputFieldIcon, {\n      [styles.inputFieldIconNotClickable]: !onIconClick,\n      [styles.inputFieldIconLeft]: iconIsLeft,\n    }),\n    onClick: onIconClick ?? undefined,\n    ...keyboardActivationProps(onIconClick),\n  };\n\n  const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> | null;\n  const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n  const renderedIcon =\n    customIconApplies && customIcon\n      ? React.cloneElement(customIcon, {\n          className: cx(\n            styles.inputFieldIcon,\n            {\n              [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n              [styles.inputFieldIconLeft]: iconIsLeft,\n            },\n            customIcon.props.className,\n          ),\n          onClick: resolvedCustomIconClick,\n          ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) | undefined),\n        })\n      : null;\n\n  const hasLeftIcon = (hasIcon || hasCustomIcon) && iconIsLeft;\n\n  const passwordIconProps = {\n    className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n    onClick: () => setIsPasswordShown(!isPasswordShown),\n    ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n    'aria-label': isPasswordShown ? 'Hide password' : 'Show password',\n  };\n\n  const hasErr = hasError();\n\n  let editedLabel = label;\n  if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} *`;\n  const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}>*</span> : null;\n\n  const showFocus = isFocused && !readOnly;\n  const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel || showFocus || currVal || type === InputType.Date);\n\n  const isSearchCleared = type === InputType.Search && !!currVal;\n\n  const customInputProps = customInput?.props as { className?: string; style?: React.CSSProperties } | undefined;\n\n  function handleClear() {\n    if (formValidator) formValidator.set('');\n    onChange?.('');\n    onClearClicked?.();\n  }\n\n  return (\n    <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n      <label\n        htmlFor={inputId}\n        className={cx(styles.inputLabel, classNames?.label, {\n          [styles.inputLabelColumn]: !isRow,\n          [styles.inputLabelInBorder]: labelInBorder,\n        })}\n        style={slotStyles?.label}\n      >\n        {label && !useMatLabelStyle ? (\n          <span className={styles.inputLabelText}>\n            {label}\n            {requiredMark}\n          </span>\n        ) : null}\n        {upperRightLabel && (\n          <div\n            className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)}\n            style={slotStyles?.upperRightLabel}\n          >\n            {upperRightLabel}\n          </div>\n        )}\n        <div\n          className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n          style={slotStyles?.container}\n          onMouseEnter={onMouseEnterHandler}\n          onMouseLeave={onMouseLeaveHandler}\n        >\n          {renderedIcon}\n          {React.cloneElement(customInput || (multiline ? <textarea /> : <input />), {\n            ...rest,\n            className: cx(\n              styles.inputField,\n              {\n                [styles.inputFieldUppercase]: isUppercase,\n                [styles.inputFieldDate]: type === InputType.Date,\n                [styles.inputFieldDefault]: type !== InputType.Date,\n                [styles.inputFieldWithIcon]: hasIcon || hasCustomIcon,\n                [styles.inputFieldWithIconLeft]: hasLeftIcon,\n                [styles.inputFieldMultiline]: multiline,\n                [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n                [styles.inputFieldReadOnly]: readOnly && !disabled,\n              },\n              classNames?.input,\n              customInputProps?.className,\n            ),\n            style:\n              customInputProps?.style || slotStyles?.input\n                ? { ...customInputProps?.style, ...slotStyles?.input }\n                : undefined,\n            name,\n            id: inputId,\n            value: currVal,\n            tabIndex,\n            ref: customInput ? undefined : inputRef,\n            onChange: onChangeHandler,\n            onFocus: onFocusHandler,\n            onBlur: onBlurHandler,\n            placeholder: !useMatLabelStyle ? placeholder : '',\n            autoComplete,\n            onClick,\n            readOnly,\n            disabled,\n            ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n            ...(multiline && rows !== undefined && { rows }),\n          })}\n          {suffix && (\n            <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>\n              {suffix}\n            </div>\n          )}\n        </div>\n        <fieldset\n          className={cx(styles.inputFieldset, classNames?.fieldset, {\n            [styles.inputFieldsetNoNotch]: !label,\n            [styles.inputContainerBorderFocused]: showFocus,\n            [styles.inputContainerBorderSearchFocused]: type === InputType.Search && (showFocus || !!currVal),\n            [styles.inputContainerBorderInvalid]: hasErr,\n            [styles.inputContainerBorderError]: hasErr,\n          })}\n          style={slotStyles?.fieldset}\n        >\n          <legend\n            className={cx(styles.inputFieldsetLegend, {\n              [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n            })}\n          >\n            <span>{editedLabel}</span>\n          </legend>\n        </fieldset>\n        {useMatLabelStyle && label && (\n          <div\n            className={cx(styles.inputMatLabel, {\n              [styles.inputMatLabelFloating]: shouldFloatLabel,\n              [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n            })}\n          >\n            {label}\n            {requiredMark}\n          </div>\n        )}\n        {useMatLabelStyle && placeholder && (\n          <div\n            className={cx(\n              styles.inputPlaceholder,\n              showFocus && !currVal && styles.inputPlaceholderShown,\n              multiline && styles.inputPlaceholderMultiline,\n            )}\n          >\n            {placeholder}\n          </div>\n        )}\n        <Tooltip\n          variant='error'\n          message={formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || ''}\n          isVisible={hasErr && (isFocused || isHovered)}\n        />\n      </label>\n\n      {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n      {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n      {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n      {type === InputType.Search && (\n        <AnimatedIcon\n          icon={isSearchCleared ? faXmark : faSearch}\n          className={cx(styles.inputFieldIcon, {\n            [styles.inputFieldIconNotClickable]: !isSearchCleared,\n            [styles.inputFieldIconLeft]: iconIsLeft,\n          })}\n          onClick={isSearchCleared ? handleClear : undefined}\n          {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n          aria-label={isSearchCleared ? 'Clear search' : undefined}\n        />\n      )}\n      {type === InputType.Password && (\n        <FontAwesomeIcon icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon} {...passwordIconProps} />\n      )}\n\n      {((showCancel && currVal && (isFocused || isHovered)) || alwaysShowCancel) && type !== InputType.Search && (\n        <FontAwesomeIcon\n          icon={faXmark}\n          className={styles.inputFieldIcon}\n          onClick={handleClear}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          {...keyboardActivationProps(handleClear)}\n          aria-label='Clear'\n        />\n      )}\n    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"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"}

package/dist/esm/common/input/input.module.mjs

@@ -1,2 +1,2 @@
-var e={"required-mark":`required-mark_xGJdX`,requiredMark:`required-mark_xGJdX`,input:`input_VKNCE`,"input-placeholder":`input-placeholder_IZH-l`,inputPlaceholder:`input-placeholder_IZH-l`,"input-placeholder-shown":`input-placeholder-shown_mm35e`,inputPlaceholderShown:`input-placeholder-shown_mm35e`,fadeIn:`fadeIn_kmX3i`,"input-placeholder-multiline":`input-placeholder-multiline_tLHAl`,inputPlaceholderMultiline:`input-placeholder-multiline_tLHAl`,"input-matLabel":`input-matLabel_-05ey`,inputMatLabel:`input-matLabel_-05ey`,"input-matLabel-floating":`input-matLabel-floating_1P2YE`,inputMatLabelFloating:`input-matLabel-floating_1P2YE`,"input-matLabel-multiline":`input-matLabel-multiline_miIZJ`,inputMatLabelMultiline:`input-matLabel-multiline_miIZJ`,"input-fieldset":`input-fieldset_XCibg`,inputFieldset:`input-fieldset_XCibg`,"input-fieldset-no-notch":`input-fieldset-no-notch_re-Fw`,inputFieldsetNoNotch:`input-fieldset-no-notch_re-Fw`,"input-fieldset-legend":`input-fieldset-legend_X23zp`,inputFieldsetLegend:`input-fieldset-legend_X23zp`,"input-fieldset-legend-active":`input-fieldset-legend-active_t-9hu`,inputFieldsetLegendActive:`input-fieldset-legend-active_t-9hu`,"input-iconLeft":`input-iconLeft_itIuo`,inputIconLeft:`input-iconLeft_itIuo`,"input-container":`input-container_M1RoG`,inputContainer:`input-container_M1RoG`,"input-container-multiline":`input-container-multiline_eLw7h`,inputContainerMultiline:`input-container-multiline_eLw7h`,"input-container-border":`input-container-border_l131I`,inputContainerBorder:`input-container-border_l131I`,"input-container-border-focused":`input-container-border-focused_ct6oY`,inputContainerBorderFocused:`input-container-border-focused_ct6oY`,"input-container-border-searchFocused":`input-container-border-searchFocused_lq088`,inputContainerBorderSearchFocused:`input-container-border-searchFocused_lq088`,"input-container-border-invalid":`input-container-border-invalid_Wdbq2`,inputContainerBorderInvalid:`input-container-border-invalid_Wdbq2`,"input-container-border-error":`input-container-border-error_gzfPG`,inputContainerBorderError:`input-container-border-error_gzfPG`,"input-label":`input-label_w1hMR`,inputLabel:`input-label_w1hMR`,"input-label-column":`input-label-column_qBFPC`,inputLabelColumn:`input-label-column_qBFPC`,"input-label-text":`input-label-text_-J5qQ`,inputLabelText:`input-label-text_-J5qQ`,"input-upper-right-label":`input-upper-right-label_I-WG3`,inputUpperRightLabel:`input-upper-right-label_I-WG3`,"input-field":`input-field_pmDvZ`,inputField:`input-field_pmDvZ`,"input-field-withIcon":`input-field-withIcon_VpfmK`,inputFieldWithIcon:`input-field-withIcon_VpfmK`,"input-field-withIcon-left":`input-field-withIcon-left_Io7lU`,inputFieldWithIconLeft:`input-field-withIcon-left_Io7lU`,"input-field-suffix":`input-field-suffix_NZpXp`,inputFieldSuffix:`input-field-suffix_NZpXp`,"input-field-date":`input-field-date_UHJEZ`,inputFieldDate:`input-field-date_UHJEZ`,"input-field-default":`input-field-default_TKipA`,inputFieldDefault:`input-field-default_TKipA`,"input-field-readOnly":`input-field-readOnly_Eut34`,inputFieldReadOnly:`input-field-readOnly_Eut34`,"input-field-uppercase":`input-field-uppercase_UV6f1`,inputFieldUppercase:`input-field-uppercase_UV6f1`,"input-field-multiline":`input-field-multiline_al3V1`,inputFieldMultiline:`input-field-multiline_al3V1`,"input-field-multiline-autoResize":`input-field-multiline-autoResize_nK33P`,inputFieldMultilineAutoResize:`input-field-multiline-autoResize_nK33P`,"input-field-icon":`input-field-icon_YyJIr`,inputFieldIcon:`input-field-icon_YyJIr`,"input-field-icon-left":`input-field-icon-left_m2XB1`,inputFieldIconLeft:`input-field-icon-left_m2XB1`,"input-field-icon-notClickable":`input-field-icon-notClickable_7j24I`,inputFieldIconNotClickable:`input-field-icon-notClickable_7j24I`,"input-error":`input-error_LIG23`,inputError:`input-error_LIG23`};export{e as default};
+var e=`required-mark_xGJdX`,t=`input_VKNCE`,n=`input-placeholder_IZH-l`,r=`input-placeholder-shown_mm35e`,i=`fadeIn_kmX3i`,a=`input-placeholder-multiline_tLHAl`,o=`input-matLabel_-05ey`,s=`input-matLabel-floating_1P2YE`,c=`input-matLabel-multiline_miIZJ`,l=`input-fieldset_XCibg`,u=`input-fieldset-no-notch_re-Fw`,d=`input-fieldset-legend_X23zp`,f=`input-fieldset-legend-active_t-9hu`,p=`input-iconLeft_itIuo`,m=`input-container_M1RoG`,h=`input-container-multiline_eLw7h`,g=`input-container-border_l131I`,_=`input-container-border-focused_ct6oY`,v=`input-container-border-searchFocused_lq088`,y=`input-container-border-invalid_Wdbq2`,b=`input-container-border-error_gzfPG`,x=`input-label_w1hMR`,S=`input-label-column_qBFPC`,C=`input-label-text_-J5qQ`,w=`input-upper-right-label_I-WG3`,T=`input-field_pmDvZ`,E=`input-field-withIcon_VpfmK`,D=`input-field-withIcon-left_Io7lU`,O=`input-field-suffix_NZpXp`,k=`input-field-date_UHJEZ`,A=`input-field-default_TKipA`,j=`input-field-readOnly_Eut34`,M=`input-field-uppercase_UV6f1`,N=`input-field-multiline_al3V1`,P=`input-field-multiline-autoResize_nK33P`,F=`input-field-icon_YyJIr`,I=`input-field-icon-left_m2XB1`,L=`input-field-icon-notClickable_7j24I`,R=`input-error_LIG23`,z={"required-mark":`required-mark_xGJdX`,requiredMark:e,input:t,"input-placeholder":`input-placeholder_IZH-l`,inputPlaceholder:n,"input-placeholder-shown":`input-placeholder-shown_mm35e`,inputPlaceholderShown:r,fadeIn:i,"input-placeholder-multiline":`input-placeholder-multiline_tLHAl`,inputPlaceholderMultiline:a,"input-matLabel":`input-matLabel_-05ey`,inputMatLabel:o,"input-matLabel-floating":`input-matLabel-floating_1P2YE`,inputMatLabelFloating:s,"input-matLabel-multiline":`input-matLabel-multiline_miIZJ`,inputMatLabelMultiline:c,"input-fieldset":`input-fieldset_XCibg`,inputFieldset:l,"input-fieldset-no-notch":`input-fieldset-no-notch_re-Fw`,inputFieldsetNoNotch:u,"input-fieldset-legend":`input-fieldset-legend_X23zp`,inputFieldsetLegend:d,"input-fieldset-legend-active":`input-fieldset-legend-active_t-9hu`,inputFieldsetLegendActive:f,"input-iconLeft":`input-iconLeft_itIuo`,inputIconLeft:p,"input-container":`input-container_M1RoG`,inputContainer:m,"input-container-multiline":`input-container-multiline_eLw7h`,inputContainerMultiline:h,"input-container-border":`input-container-border_l131I`,inputContainerBorder:g,"input-container-border-focused":`input-container-border-focused_ct6oY`,inputContainerBorderFocused:_,"input-container-border-searchFocused":`input-container-border-searchFocused_lq088`,inputContainerBorderSearchFocused:v,"input-container-border-invalid":`input-container-border-invalid_Wdbq2`,inputContainerBorderInvalid:y,"input-container-border-error":`input-container-border-error_gzfPG`,inputContainerBorderError:b,"input-label":`input-label_w1hMR`,inputLabel:x,"input-label-column":`input-label-column_qBFPC`,inputLabelColumn:S,"input-label-text":`input-label-text_-J5qQ`,inputLabelText:C,"input-upper-right-label":`input-upper-right-label_I-WG3`,inputUpperRightLabel:w,"input-field":`input-field_pmDvZ`,inputField:T,"input-field-withIcon":`input-field-withIcon_VpfmK`,inputFieldWithIcon:E,"input-field-withIcon-left":`input-field-withIcon-left_Io7lU`,inputFieldWithIconLeft:D,"input-field-suffix":`input-field-suffix_NZpXp`,inputFieldSuffix:O,"input-field-date":`input-field-date_UHJEZ`,inputFieldDate:k,"input-field-default":`input-field-default_TKipA`,inputFieldDefault:A,"input-field-readOnly":`input-field-readOnly_Eut34`,inputFieldReadOnly:j,"input-field-uppercase":`input-field-uppercase_UV6f1`,inputFieldUppercase:M,"input-field-multiline":`input-field-multiline_al3V1`,inputFieldMultiline:N,"input-field-multiline-autoResize":`input-field-multiline-autoResize_nK33P`,inputFieldMultilineAutoResize:P,"input-field-icon":`input-field-icon_YyJIr`,inputFieldIcon:F,"input-field-icon-left":`input-field-icon-left_m2XB1`,inputFieldIconLeft:I,"input-field-icon-notClickable":`input-field-icon-notClickable_7j24I`,inputFieldIconNotClickable:L,"input-error":`input-error_LIG23`,inputError:R};export{z as default,i as fadeIn,t as input,m as inputContainer,g as inputContainerBorder,b as inputContainerBorderError,_ as inputContainerBorderFocused,y as inputContainerBorderInvalid,v as inputContainerBorderSearchFocused,h as inputContainerMultiline,R as inputError,T as inputField,k as inputFieldDate,A as inputFieldDefault,F as inputFieldIcon,I as inputFieldIconLeft,L as inputFieldIconNotClickable,N as inputFieldMultiline,P as inputFieldMultilineAutoResize,j as inputFieldReadOnly,O as inputFieldSuffix,M as inputFieldUppercase,E as inputFieldWithIcon,D as inputFieldWithIconLeft,l as inputFieldset,d as inputFieldsetLegend,f as inputFieldsetLegendActive,u as inputFieldsetNoNotch,p as inputIconLeft,x as inputLabel,S as inputLabelColumn,C as inputLabelText,o as inputMatLabel,s as inputMatLabelFloating,c as inputMatLabelMultiline,n as inputPlaceholder,a as inputPlaceholderMultiline,r as inputPlaceholderShown,w as inputUpperRightLabel,e as requiredMark};
 //# sourceMappingURL=input.module.mjs.map

package/dist/esm/common/input/input.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n  padding: 0px 0px 0px 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n  position: relative;\n  width: 100%;\n  --input-notch-height: 1.75em;\n  --input-icon-size: 1.2em;\n  --input-icon-offset: 0.6em;\n  --input-icon-gutter: 2.2em;\n  /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n     `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n     (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n     unlike border-radius itself they inherit through any nesting depth, so they reach these\n     descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n  --input-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n    user-select: none;\n    pointer-events: none;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      top: 0;\n      bottom: auto;\n      left: 14px;\n      right: 0;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n    box-sizing: border-box;\n    border-radius: var(--input-radius);\n    font-size: 0.8em;\n    inset: calc(var(--input-notch-height) / -2) 0 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-no-notch {\n      /* Only Firefox actually renders the reserved notch space as a visible overlap on\n         label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n         layout like the sidebar search box); Chrome's rendering was never broken, just\n         consistently sized with every other input. @supports (-moz-appearance: none) is a\n         reliable Firefox-only feature query, so this scopes the fix to where it's needed\n         instead of changing every browser's sizing. */\n      @supports (-moz-appearance: none) {\n        inset: 0;\n      }\n    }\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--input-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-iconLeft {\n    .input-matLabel {\n      left: var(--input-icon-gutter);\n\n      &-floating {\n        left: calc(var(--input-icon-gutter) + 0.5em);\n      }\n    }\n\n    .input-placeholder {\n      left: var(--input-icon-gutter);\n    }\n\n    .input-fieldset {\n      padding-left: var(--input-icon-gutter);\n    }\n  }\n\n  &-container {\n    display: flex;\n    align-items: center;\n    border-radius: var(--input-radius);\n    background-color: var(--input-background);\n    transition: border-color;\n    cursor: text;\n    height: 100%;\n\n    &-multiline {\n      overflow: hidden;\n      padding-top: 10px;\n      align-items: flex-start;\n    }\n\n    &-border {\n      outline: 1px solid var(--border-color);\n      transition: border-color;\n      background-color: var(--input-background);\n      outline: none;\n\n      &-focused {\n        outline-color: var(--focus-border-color, var(--primary-color));\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n\n      &-searchFocused {\n        outline-color: var(--search-input-color);\n        outline-width: 2px;\n        border-color: var(--search-input-color);\n      }\n\n      &-invalid {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-invalid:hover {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-error {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n    }\n  }\n\n  &-label {\n    display: flex;\n    color: var(--text-color);\n    height: 100%;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      white-space: nowrap;\n      margin-right: 5px;\n      margin-bottom: 6px;\n      display: flex;\n      align-items: center;\n      color: color(var(--border-color) lightness(40%));\n      background-color: transparent;\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n      white-space: nowrap;\n    }\n  }\n\n  &-upper-right-label {\n    position: absolute;\n    transform: translateY(calc(-100% - 1.5px));\n    right: 8px;\n    min-height: 12px;\n    font-size: 12px;\n    color: color(var(--border-color) lightness(40%));\n  }\n\n  &-field {\n    appearance: none;\n    -webkit-appearance: none;\n    font-family: inherit;\n    font-size: inherit;\n    box-sizing: border-box;\n    resize: none;\n    width: 100%;\n    border: none;\n    border-radius: var(--default-border-radius);\n    overflow: hidden;\n    line-height: 1.25;\n    color: var(--text-color);\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--text-light);\n    }\n\n    /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n       themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n      appearance: none;\n      display: none;\n    }\n\n    &-withIcon {\n      padding-right: var(--input-icon-gutter) !important;\n\n      &-left {\n        padding-right: 0.643em !important;\n        padding-left: var(--input-icon-gutter) !important;\n      }\n    }\n\n    &-suffix {\n      padding-right: 9px;\n    }\n\n    &-date {\n      padding: 6px 9px;\n      color-scheme: dark;\n\n      svg {\n        color: white;\n      }\n    }\n\n    &-default {\n      padding: 8px 7.5px 6px;\n    }\n\n    &[disabled] {\n      background-color: var(--disabled-input-color);\n      color: var(--disabled-font-color);\n      -webkit-text-fill-color: var(--disabled-font-color);\n      opacity: 1;\n\n      &::placeholder {\n        color: var(--disabled-font-color);\n        -webkit-text-fill-color: var(--disabled-font-color);\n      }\n    }\n\n    &-readOnly {\n      cursor: default;\n      color: var(--text-dark);\n      -webkit-text-fill-color: var(--text-dark);\n    }\n\n    &-uppercase {\n      text-transform: uppercase;\n    }\n\n    &-multiline {\n      overflow-y: auto;\n      resize: vertical;\n      padding-top: 4px;\n      min-height: 30px;\n\n      &-autoResize {\n        resize: none;\n        overflow: hidden;\n      }\n    }\n\n    &-icon {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      border: none;\n      position: absolute;\n      outline: none;\n      right: var(--input-icon-offset);\n      color: var(--input-icon-color);\n      width: var(--input-icon-size) !important;\n      height: var(--input-icon-size) !important;\n      user-select: none;\n      top: 50%;\n      transform: translateY(-50%);\n\n      &:focus-visible {\n        outline: 1px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: 2px;\n      }\n\n      &-left {\n        left: var(--input-icon-offset);\n      }\n\n      &-notClickable {\n        pointer-events: none;\n      }\n    }\n  }\n\n  &-error {\n    height: 1em;\n    padding-top: 3px;\n    color: var(--error-font-color);\n    font-size: 11px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 0.5;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":[".required-mark {\n  padding: 0 0 0 4px;\n  color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n  position: relative;\n  width: 100%;\n\n  --input-notch-height: 1.75em;\n  --input-icon-size: 1.2em;\n  --input-icon-offset: 0.6em;\n  --input-icon-gutter: 2.2em;\n\n  /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n     `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n     (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n     unlike border-radius itself they inherit through any nesting depth, so they reach these\n     descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n  --input-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-placeholder {\n    position: absolute;\n    top: 50%;\n    left: 7px;\n    transform: translateY(-50%);\n    transition: all 0.2s;\n    opacity: 0;\n    user-select: none;\n    pointer-events: none;\n\n    &-shown {\n      animation: 0.2s fadeIn 0.3s forwards;\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-matLabel {\n    position: absolute;\n    transition: all 0.3s;\n    left: 7px;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1em;\n    color: var(--input-label-resting-color, var(--text-light));\n    pointer-events: none;\n    user-select: none;\n\n    &-floating {\n      inset: 0 0 auto 14px;\n      font-size: 0.8em;\n      color: var(--input-label-floating-color, var(--text-color));\n      transform: translateY(-50%);\n    }\n\n    &-multiline {\n      top: 14px;\n      transform: translateY(0);\n    }\n  }\n\n  &-fieldset {\n    position: absolute;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n    box-sizing: border-box;\n    border-radius: var(--input-radius);\n    font-size: 0.8em;\n    inset: calc(var(--input-notch-height) / -2) 0 0;\n    padding-left: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border-color);\n    pointer-events: none;\n    user-select: none;\n\n    &-no-notch {\n      /* Only Firefox actually renders the reserved notch space as a visible overlap on\n         label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n         layout like the sidebar search box); Chrome's rendering was never broken, just\n         consistently sized with every other input. @supports (-moz-appearance: none) is a\n         reliable Firefox-only feature query, so this scopes the fix to where it's needed\n         instead of changing every browser's sizing. */\n      @supports (-moz-appearance: none) {\n        inset: 0;\n      }\n    }\n\n    &-legend {\n      display: block;\n      max-width: 0;\n      transition: max-width 0.2s;\n      white-space: nowrap;\n      padding: 0;\n\n      &-active {\n        max-width: 300px;\n      }\n\n      span {\n        line-height: var(--input-notch-height);\n        padding: 0 5px;\n        opacity: 0;\n      }\n\n      span:empty {\n        padding: 0.000001px;\n      }\n    }\n  }\n\n  &-iconLeft {\n    .input-matLabel {\n      left: var(--input-icon-gutter);\n\n      &-floating {\n        left: calc(var(--input-icon-gutter) + 0.5em);\n      }\n    }\n\n    .input-placeholder {\n      left: var(--input-icon-gutter);\n    }\n\n    .input-fieldset {\n      padding-left: var(--input-icon-gutter);\n    }\n  }\n\n  &-container {\n    display: flex;\n    align-items: center;\n    border-radius: var(--input-radius);\n    background-color: var(--input-background);\n    transition: border-color;\n    cursor: text;\n    height: 100%;\n\n    &-multiline {\n      overflow: hidden;\n      padding-top: 10px;\n      align-items: flex-start;\n    }\n\n    &-border {\n      transition: border-color;\n      background-color: var(--input-background);\n      outline: none;\n\n      &-focused {\n        outline-color: var(--focus-border-color, var(--primary-color));\n        border-color: var(--focus-border-color, var(--primary-color));\n      }\n\n      &-searchFocused {\n        outline-color: var(--search-input-color);\n        outline-width: 2px;\n        border-color: var(--search-input-color);\n      }\n\n      &-invalid {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-invalid:hover {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n\n      &-error {\n        outline-color: var(--error-border-color);\n        border-color: var(--error-border-color);\n      }\n    }\n  }\n\n  &-label {\n    display: flex;\n    color: var(--text-color);\n    height: 100%;\n\n    &-column {\n      flex-direction: column;\n    }\n\n    &-text {\n      margin-right: 5px;\n      margin-bottom: 6px;\n      display: flex;\n      align-items: center;\n      color: color(var(--border-color) lightness(40%));\n      background-color: transparent;\n      font-size: 12px;\n      position: absolute;\n      top: -15px;\n      white-space: nowrap;\n    }\n  }\n\n  &-upper-right-label {\n    position: absolute;\n    transform: translateY(calc(-100% - 1.5px));\n    right: 8px;\n    min-height: 12px;\n    font-size: 12px;\n    color: color(var(--border-color) lightness(40%));\n  }\n\n  &-field {\n    appearance: none;\n    -webkit-appearance: none;\n    font-family: inherit;\n    font-size: inherit;\n    box-sizing: border-box;\n    resize: none;\n    width: 100%;\n    border: none;\n    border-radius: var(--default-border-radius);\n    overflow: hidden;\n    line-height: 1.25;\n    color: var(--text-color);\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--text-light);\n    }\n\n    /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n       themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n      appearance: none;\n      display: none;\n    }\n\n    &-withIcon {\n      padding-right: var(--input-icon-gutter) !important;\n\n      &-left {\n        padding-right: 0.643em !important;\n        padding-left: var(--input-icon-gutter) !important;\n      }\n    }\n\n    &-suffix {\n      padding-right: 9px;\n    }\n\n    &-date {\n      padding: 6px 9px;\n      color-scheme: dark;\n\n      svg {\n        color: white;\n      }\n    }\n\n    &-default {\n      padding: 8px 7.5px 6px;\n    }\n\n    &[disabled] {\n      background-color: var(--disabled-input-color);\n      color: var(--disabled-font-color);\n      -webkit-text-fill-color: var(--disabled-font-color);\n      opacity: 1;\n\n      &::placeholder {\n        color: var(--disabled-font-color);\n        -webkit-text-fill-color: var(--disabled-font-color);\n      }\n    }\n\n    &-readOnly {\n      cursor: default;\n      color: var(--text-dark);\n      -webkit-text-fill-color: var(--text-dark);\n    }\n\n    &-uppercase {\n      text-transform: uppercase;\n    }\n\n    &-multiline {\n      overflow-y: auto;\n      resize: vertical;\n      padding-top: 4px;\n      min-height: 30px;\n\n      &-autoResize {\n        resize: none;\n        overflow: hidden;\n      }\n    }\n\n    &-icon {\n      appearance: none;\n      -webkit-appearance: none;\n      box-sizing: border-box;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      border: none;\n      position: absolute;\n      outline: none;\n      right: var(--input-icon-offset);\n      color: var(--input-icon-color);\n      width: var(--input-icon-size) !important;\n      height: var(--input-icon-size) !important;\n      user-select: none;\n      top: 50%;\n      transform: translateY(-50%);\n\n      &:focus-visible {\n        outline: 1px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: 2px;\n      }\n\n      &-left {\n        left: var(--input-icon-offset);\n      }\n\n      &-notClickable {\n        pointer-events: none;\n      }\n    }\n  }\n\n  &-error {\n    height: 1em;\n    padding-top: 3px;\n    color: var(--error-font-color);\n    font-size: 11px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 0.5;\n    }\n  }\n}\n"],"mappings":""}