@techzyapp/ui-library 1.0.27 → 1.0.29

package/dist/FloatingPanel-CeSOtE_D.js

@@ -0,0 +1,135 @@
+import { jsx as O } from "react/jsx-runtime";
+import { useRef as S, useState as g, useCallback as W, useLayoutEffect as z, useEffect as K, forwardRef as B } from "react";
+import { createPortal as _ } from "react-dom";
+import { clsx as q } from "clsx";
+import { u as T } from "./useLockBodyScroll-DwBILLPK.js";
+const l = 8, P = 6;
+function I({
+  open: a,
+  triggerRef: s,
+  align: p = "start",
+  onClose: b
+}) {
+  const c = S(null), [D, v] = g(null), [H, y] = g(!1);
+  T(a);
+  const d = W(() => {
+    const r = s.current, n = c.current;
+    if (!r || !n) return;
+    const e = r.getBoundingClientRect(), u = n.offsetHeight, f = window.innerHeight, m = window.innerWidth, o = f - e.bottom - P - l, h = e.top - P - l;
+    let t = "bottom";
+    u > o && h > o && (t = "top");
+    const x = Math.max(0, t === "bottom" ? o : h), E = Math.min(u, x);
+    let w = t === "bottom" ? e.bottom + P : e.top - P - E;
+    w = Math.min(
+      Math.max(w, l),
+      Math.max(l, f - l - E)
+    );
+    const L = n.offsetWidth, i = p === "end" ? e.right - L : e.left, F = Math.min(
+      Math.max(i, l),
+      Math.max(l, m - l - L)
+    );
+    v({ top: w, left: F, width: e.width, side: t, maxHeight: x });
+  }, [s, p]);
+  return z(() => {
+    if (!a) {
+      y(!1);
+      return;
+    }
+    d();
+  }, [a, d]), K(() => {
+    if (!a) return;
+    const r = requestAnimationFrame(() => y(!0)), n = () => d();
+    window.addEventListener("resize", n), window.addEventListener("scroll", n, !0);
+    let e;
+    return typeof ResizeObserver < "u" && (e = new ResizeObserver(n), c.current && e.observe(c.current), s.current && e.observe(s.current)), () => {
+      cancelAnimationFrame(r), window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0), e == null || e.disconnect();
+    };
+  }, [a, d, s]), K(() => {
+    if (!a) return;
+    const r = (e) => {
+      var f, m, o;
+      const u = e.target;
+      (f = s.current) != null && f.contains(u) || (m = c.current) != null && m.contains(u) || b(!!((o = c.current) != null && o.contains(document.activeElement)));
+    }, n = (e) => {
+      e.key === "Escape" && b(!0);
+    };
+    return document.addEventListener("pointerdown", r, !0), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("pointerdown", r, !0), document.removeEventListener("keydown", n);
+    };
+  }, [a, b, s]), { popoverRef: c, position: D, visible: H, reposition: d };
+}
+const N = "_panel_1cr9q_5", V = {
+  panel: N
+}, j = 'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]):not(:disabled), input:not([tabindex="-1"]):not(:disabled), select:not([tabindex="-1"]):not(:disabled), textarea:not([tabindex="-1"]):not(:disabled), [tabindex="0"]', Q = B(function({
+  open: s,
+  triggerRef: p,
+  align: b,
+  onClose: c,
+  id: D,
+  role: v,
+  ariaLabel: H,
+  ariaLabelledBy: y,
+  ariaDescribedBy: d,
+  trapFocus: r = !1,
+  matchTriggerWidth: n = !1,
+  width: e,
+  className: u,
+  style: f,
+  children: m
+}, o) {
+  const {
+    popoverRef: h,
+    position: t,
+    visible: x
+  } = I({
+    open: s,
+    triggerRef: p,
+    align: b,
+    onClose: c
+  }), E = (i) => {
+    h.current = i, typeof o == "function" ? o(i) : o && (o.current = i);
+  }, w = (i) => {
+    if (i.key !== "Tab") return;
+    const F = h.current;
+    if (!F) return;
+    const M = F.querySelectorAll(j);
+    if (M.length === 0) return;
+    const k = M[0], A = M[M.length - 1];
+    i.shiftKey && document.activeElement === k ? (i.preventDefault(), A.focus()) : !i.shiftKey && document.activeElement === A && (i.preventDefault(), k.focus());
+  };
+  if (!s) return null;
+  const L = e ?? (n ? t == null ? void 0 : t.width : void 0);
+  return _(
+    /* @__PURE__ */ O(
+      "div",
+      {
+        ref: E,
+        id: D,
+        className: q(V.panel, u),
+        role: v,
+        "aria-modal": (v === "dialog" || v === "alertdialog") && r ? !0 : void 0,
+        "aria-label": H,
+        "aria-labelledby": y,
+        "aria-describedby": d,
+        "data-open": x ? "true" : "false",
+        "data-side": (t == null ? void 0 : t.side) ?? "bottom",
+        onKeyDown: r ? w : void 0,
+        style: {
+          position: "fixed",
+          top: (t == null ? void 0 : t.top) ?? 0,
+          left: (t == null ? void 0 : t.left) ?? 0,
+          width: L,
+          maxHeight: t == null ? void 0 : t.maxHeight,
+          visibility: t ? "visible" : "hidden",
+          ...f
+        },
+        children: m
+      }
+    ),
+    document.body
+  );
+});
+export {
+  Q as F
+};
+//# sourceMappingURL=FloatingPanel-CeSOtE_D.js.map

package/dist/FloatingPanel-CeSOtE_D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel-CeSOtE_D.js","sources":["../src/hooks/useFloatingPanel.ts","../src/components/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'\nimport { useLockBodyScroll } from './useLockBodyScroll'\n\n/** Geometry computed for a floating panel anchored to a trigger. */\nexport interface FloatingPanelPosition {\n  top: number\n  left: number\n  width: number\n  side: 'top' | 'bottom'\n  maxHeight: number\n}\n\nconst VIEWPORT_PADDING = 8\nconst OFFSET = 6\n\nexport interface UseFloatingPanelOptions {\n  /** Whether the panel is open. */\n  open: boolean\n  /** Ref to the anchor/trigger element. */\n  triggerRef: RefObject<HTMLElement | null>\n  /**\n   * Horizontal alignment to the trigger: `start` (panel's left edge at the trigger's left — grows\n   * right, the default) or `end` (panel's right edge at the trigger's right — grows left).\n   */\n  align?: 'start' | 'end'\n  /**\n   * Dismiss request. Outside-pointerdown passes whether focus was parked inside the panel (so the\n   * consumer can restore focus to the trigger); Escape passes `true`.\n   */\n  onClose: (refocus: boolean) => void\n}\n\nexport interface UseFloatingPanelResult {\n  /** Attach to the portaled panel element. */\n  popoverRef: RefObject<HTMLDivElement | null>\n  /** Computed geometry (null until first measured). */\n  position: FloatingPanelPosition | null\n  /** Enter-animation flag (rAF-driven once open). */\n  visible: boolean\n  /** Force a re-measure (rarely needed — scroll/resize/ResizeObserver already drive it). */\n  reposition: () => void\n}\n\n/**\n * Shared floating-panel plumbing — a `<body>`-portaled panel that opens below its trigger (flips above\n * only when it would overflow), exposes the trigger width (for select-like matching), clamps to the\n * viewport, re-positions on scroll/resize (+ `ResizeObserver`), locks page scroll while open, and\n * dismisses on outside-pointerdown / `Escape`. The consumer owns the trigger ref, the `open` state, and\n * the `onClose` cleanup; this hook owns the panel ref, geometry, the enter-animation flag, and the\n * listeners. Wrapped by the internal `FloatingPanel` component, which every popover in the library\n * (`Select` / `MultiSelect`, the date/time pickers, `ColorPicker`) renders. Internal (not public).\n */\nexport function useFloatingPanel({\n  open,\n  triggerRef,\n  align = 'start',\n  onClose,\n}: UseFloatingPanelOptions): UseFloatingPanelResult {\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [position, setPosition] = useState<FloatingPanelPosition | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open)\n\n  const reposition = useCallback(() => {\n    const trigger = triggerRef.current\n    const panel = popoverRef.current\n    if (!trigger || !panel) return\n    const rect = trigger.getBoundingClientRect()\n    const panelH = panel.offsetHeight\n    const vh = window.innerHeight\n    const vw = window.innerWidth\n\n    const spaceBelow = vh - rect.bottom - OFFSET - VIEWPORT_PADDING\n    const spaceAbove = rect.top - OFFSET - VIEWPORT_PADDING\n    // prefer below; flip up only when below can't fit AND above has more room\n    let side: 'top' | 'bottom' = 'bottom'\n    if (panelH > spaceBelow && spaceAbove > spaceBelow) side = 'top'\n\n    const maxHeight = Math.max(0, side === 'bottom' ? spaceBelow : spaceAbove)\n    const usedH = Math.min(panelH, maxHeight)\n    let top = side === 'bottom' ? rect.bottom + OFFSET : rect.top - OFFSET - usedH\n    top = Math.min(\n      Math.max(top, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vh - VIEWPORT_PADDING - usedH),\n    )\n    // clamp using the panel's actual width (a panel can be wider than its trigger, e.g. a calendar);\n    // `width` returns the trigger width for consumers that match it (Select/MultiSelect).\n    const panelW = panel.offsetWidth\n    // `end` pins the panel's right edge to the trigger's right (grows left); `start` pins left (grows right)\n    const baseLeft = align === 'end' ? rect.right - panelW : rect.left\n    const left = Math.min(\n      Math.max(baseLeft, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vw - VIEWPORT_PADDING - panelW),\n    )\n    setPosition({ top, left, width: rect.width, side, maxHeight })\n  }, [triggerRef, align])\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    reposition()\n  }, [open, reposition])\n\n  useEffect(() => {\n    if (!open) return\n    const raf = requestAnimationFrame(() => setVisible(true))\n    const onReposition = () => reposition()\n    window.addEventListener('resize', onReposition)\n    window.addEventListener('scroll', onReposition, true)\n    let ro: ResizeObserver | undefined\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(onReposition)\n      if (popoverRef.current) ro.observe(popoverRef.current)\n      if (triggerRef.current) ro.observe(triggerRef.current)\n    }\n    return () => {\n      cancelAnimationFrame(raf)\n      window.removeEventListener('resize', onReposition)\n      window.removeEventListener('scroll', onReposition, true)\n      ro?.disconnect()\n    }\n  }, [open, reposition, triggerRef])\n\n  useEffect(() => {\n    if (!open) return\n    const onPointerDown = (e: PointerEvent) => {\n      const t = e.target as Node\n      if (triggerRef.current?.contains(t) || popoverRef.current?.contains(t)) return\n      // restore focus to the trigger only if it was parked inside the panel (e.g. a search box)\n      onClose(!!popoverRef.current?.contains(document.activeElement))\n    }\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose(true)\n    }\n    document.addEventListener('pointerdown', onPointerDown, true)\n    document.addEventListener('keydown', onKey)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown, true)\n      document.removeEventListener('keydown', onKey)\n    }\n  }, [open, onClose, triggerRef])\n\n  return { popoverRef, position, visible, reposition }\n}\n","import {\n  forwardRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useFloatingPanel } from '../../hooks/useFloatingPanel'\nimport styles from './FloatingPanel.module.css'\n\nexport interface FloatingPanelProps {\n  /** Whether the panel is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Ref to the anchor/trigger element the panel is positioned against. */\n  triggerRef: RefObject<HTMLElement | null>\n  /** Horizontal alignment to the trigger: `start` (default, grows right) or `end` (grows left). */\n  align?: 'start' | 'end'\n  /** Dismiss request: outside-pointerdown (arg = restore focus to the trigger?) or Escape (`true`). */\n  onClose: (refocus: boolean) => void\n  /** `id` for the panel element — pair with the trigger's `aria-controls`. */\n  id?: string\n  /** ARIA role for the panel element (e.g. `'dialog'`). Omit for a plain wrapper (e.g. around a listbox). */\n  role?: string\n  /** Accessible label, paired with `role`. */\n  ariaLabel?: string\n  /** `id` of the element that labels the panel (instead of `ariaLabel`). */\n  ariaLabelledBy?: string\n  /** `id` of the element that describes the panel. */\n  ariaDescribedBy?: string\n  /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */\n  trapFocus?: boolean\n  /** Constrain the panel to the trigger's width (select-like). */\n  matchTriggerWidth?: boolean\n  /** Fixed panel width (px number or any CSS width). Wins over `matchTriggerWidth`. */\n  width?: number | string\n  /** Class(es) for the panel element, merged after the shared chrome (layout overrides live here). */\n  className?: string\n  /** Inline style merged onto the panel (e.g. a custom CSS var). */\n  style?: CSSProperties\n  /** Panel content. */\n  children: ReactNode\n}\n\n/** Focusable descendants used by the optional focus trap. */\n// include inputs/selects/textareas/links — picker panels (DatePicker/ColorPicker/…) contain text\n// inputs, and a button-only selector let Shift+Tab escape the trap into the scroll-locked page\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not([tabindex=\"-1\"]):not(:disabled), input:not([tabindex=\"-1\"]):not(:disabled), select:not([tabindex=\"-1\"]):not(:disabled), textarea:not([tabindex=\"-1\"]):not(:disabled), [tabindex=\"0\"]'\n\n/**\n * The shared floating popover used across the library — `Select` / `MultiSelect`, the date/time\n * pickers, `ColorPicker`, and the public `Popover`. Wraps `useFloatingPanel` and renders a `<body>`-portaled, viewport-clamped\n * panel that opens below its trigger (flips above only when it would overflow), locks page scroll while\n * open, animates in (opacity + translate, keyed off `data-open`/`data-side`), and dismisses on\n * outside-pointerdown / `Escape`. Optionally **traps Tab focus** (`trapFocus`, for modal dialogs — also\n * sets `aria-modal`). The forwarded ref points at the panel element, so a consumer can still read it for\n * blur/focus bookkeeping. Internal (not part of the public component surface).\n */\nexport const FloatingPanel = forwardRef<HTMLDivElement, FloatingPanelProps>(function FloatingPanel(\n  {\n    open,\n    triggerRef,\n    align,\n    onClose,\n    id,\n    role,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    trapFocus = false,\n    matchTriggerWidth = false,\n    width,\n    className,\n    style,\n    children,\n  },\n  forwardedRef,\n) {\n  const {\n    popoverRef,\n    position: pos,\n    visible,\n  } = useFloatingPanel({\n    open,\n    triggerRef,\n    align,\n    onClose,\n  })\n\n  // attach the panel node to both the hook's ref (for positioning) and the forwarded ref (for the\n  // consumer's blur/focus bookkeeping)\n  const setRef = (node: HTMLDivElement | null) => {\n    popoverRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // trap Tab within the dialog so focus can't strand on the scroll-locked page behind it\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const panel = popoverRef.current\n    if (!panel) return\n    const focusables = panel.querySelectorAll<HTMLElement>(FOCUSABLE)\n    if (focusables.length === 0) return\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  const resolvedWidth = width ?? (matchTriggerWidth ? pos?.width : undefined)\n\n  return createPortal(\n    <div\n      ref={setRef}\n      id={id}\n      className={clsx(styles.panel, className)}\n      role={role}\n      aria-modal={(role === 'dialog' || role === 'alertdialog') && trapFocus ? true : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-open={visible ? 'true' : 'false'}\n      data-side={pos?.side ?? 'bottom'}\n      onKeyDown={trapFocus ? handleKeyDown : undefined}\n      style={{\n        position: 'fixed',\n        top: pos?.top ?? 0,\n        left: pos?.left ?? 0,\n        width: resolvedWidth,\n        maxHeight: pos?.maxHeight,\n        visibility: pos ? 'visible' : 'hidden',\n        ...style,\n      }}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n"],"names":["VIEWPORT_PADDING","OFFSET","useFloatingPanel","open","triggerRef","align","onClose","popoverRef","useRef","position","setPosition","useState","visible","setVisible","useLockBodyScroll","reposition","useCallback","trigger","panel","rect","panelH","vh","vw","spaceBelow","spaceAbove","side","maxHeight","usedH","top","panelW","baseLeft","left","useLayoutEffect","useEffect","raf","onReposition","ro","onPointerDown","t","_a","_b","_c","onKey","FOCUSABLE","FloatingPanel","forwardRef","id","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","trapFocus","matchTriggerWidth","width","className","style","children","forwardedRef","pos","setRef","node","handleKeyDown","event","focusables","first","last","resolvedWidth","createPortal","jsx","clsx","styles"],"mappings":"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"}

package/dist/{FullscreenToggle-HZQOIa21.js → FullscreenToggle-2IYIS5KF.js}

@@ -1,8 +1,8 @@
 import { jsx as u } from "react/jsx-runtime";
 import { forwardRef as F, useState as s, useEffect as h } from "react";
 import { I as E } from "./Icon-DaTvzLBu.js";
-import { I } from "./IconButton-CBp8QuTO.js";
-import { a as v } from "./ConfigProvider-DL9fylMo.js";
+import { I } from "./IconButton-GU3Ud4Zg.js";
+import { a as v } from "./ConfigProvider-BbsI15b-.js";
 const w = F(
   function({ variant: m = "outlined", ...t }, i) {
     const [a] = s(
@@ -39,4 +39,4 @@ const w = F(
 export {
   w as F
 };
-//# sourceMappingURL=FullscreenToggle-HZQOIa21.js.map
+//# sourceMappingURL=FullscreenToggle-2IYIS5KF.js.map

package/dist/{FullscreenToggle-HZQOIa21.js.map → FullscreenToggle-2IYIS5KF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FullscreenToggle-HZQOIa21.js","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":";;;;;AAgBO,MAAMA,IAAmBC;AAAA,EAC9B,SAA0B,EAAE,SAAAC,IAAU,YAAY,GAAGC,EAAA,GAASC,GAAK;AAGjE,UAAM,CAACC,CAAS,IAAIC;AAAA,MAClB,MACE,OAAO,WAAa,OACpB,OAAO,SAAS,gBAAgB,qBAAsB;AAAA,IAAA,GAEpD,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAK,GAChDG,IAAIC,EAAA;AASV,QAPAC,EAAU,MAAM;AACd,YAAMC,IAAO,MAAMJ,EAAgB,SAAS,qBAAqB,IAAI;AACrE,aAAAI,EAAA,GACA,SAAS,iBAAiB,oBAAoBA,CAAI,GAC3C,MAAM,SAAS,oBAAoB,oBAAoBA,CAAI;AAAA,IACpE,GAAG,CAAA,CAAE,GAED,CAACP,EAAW,QAAO;AAEvB,UAAMQ,IAAS,MAAM;;AAEnB,MAAI,SAAS,qBACXC,KAAAC,IAAA,SAAS,mBAAT,gBAAAA,EAAA,2BAAAD,EAA6B,MAAM,MAAM;AAAA,MAAC,MAE1CE,KAAAC,KAAAC,IAAA,SAAS,iBAAgB,sBAAzB,gBAAAD,EAAA,KAAAC,OAAA,QAAAF,EAAgD,MAAM,MAAM;AAAA,MAAC;AAAA,IAEjE;AAEA,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,SAAAF;AAAA,QACA,MAAK;AAAA,QACL,gBAAcK;AAAA,QACd,cAAYE,EAAE,wBAAwB;AAAA,QACrC,GAAGN;AAAA,QACJ,SAAS,CAACkB,MAAU;;AAClB,WAAAN,IAAAZ,EAAM,YAAN,QAAAY,EAAA,KAAAZ,GAAgBkB,IAChBR,EAAA;AAAA,QACF;AAAA,QAEA,UAAA,gBAAAM,EAACG,GAAA,EAAK,MAAK,aAAY,OAAOf,IAAe,EAAE,WAAW,iBAAA,IAAqB,OAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhG;AACF;"}
+{"version":3,"file":"FullscreenToggle-2IYIS5KF.js","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":";;;;;AAgBO,MAAMA,IAAmBC;AAAA,EAC9B,SAA0B,EAAE,SAAAC,IAAU,YAAY,GAAGC,EAAA,GAASC,GAAK;AAGjE,UAAM,CAACC,CAAS,IAAIC;AAAA,MAClB,MACE,OAAO,WAAa,OACpB,OAAO,SAAS,gBAAgB,qBAAsB;AAAA,IAAA,GAEpD,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAK,GAChDG,IAAIC,EAAA;AASV,QAPAC,EAAU,MAAM;AACd,YAAMC,IAAO,MAAMJ,EAAgB,SAAS,qBAAqB,IAAI;AACrE,aAAAI,EAAA,GACA,SAAS,iBAAiB,oBAAoBA,CAAI,GAC3C,MAAM,SAAS,oBAAoB,oBAAoBA,CAAI;AAAA,IACpE,GAAG,CAAA,CAAE,GAED,CAACP,EAAW,QAAO;AAEvB,UAAMQ,IAAS,MAAM;;AAEnB,MAAI,SAAS,qBACXC,KAAAC,IAAA,SAAS,mBAAT,gBAAAA,EAAA,2BAAAD,EAA6B,MAAM,MAAM;AAAA,MAAC,MAE1CE,KAAAC,KAAAC,IAAA,SAAS,iBAAgB,sBAAzB,gBAAAD,EAAA,KAAAC,OAAA,QAAAF,EAAgD,MAAM,MAAM;AAAA,MAAC;AAAA,IAEjE;AAEA,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,SAAAF;AAAA,QACA,MAAK;AAAA,QACL,gBAAcK;AAAA,QACd,cAAYE,EAAE,wBAAwB;AAAA,QACrC,GAAGN;AAAA,QACJ,SAAS,CAACkB,MAAU;;AAClB,WAAAN,IAAAZ,EAAM,YAAN,QAAAY,EAAA,KAAAZ,GAAgBkB,IAChBR,EAAA;AAAA,QACF;AAAA,QAEA,UAAA,gBAAAM,EAACG,GAAA,EAAK,MAAK,aAAY,OAAOf,IAAe,EAAE,WAAW,iBAAA,IAAqB,OAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhG;AACF;"}

package/dist/{FullscreenToggle-BL0nBrsL.cjs → FullscreenToggle-CeGgw3z1.cjs}

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),c=require("react"),F=require("./Icon-BVULqOJD.cjs"),h=require("./IconButton-B87ipBK3.cjs"),q=require("./ConfigProvider-BicoaBLj.cjs"),E=c.forwardRef(function({variant:i="outlined",...t},d){const[a]=c.useState(()=>typeof document<"u"&&typeof document.documentElement.requestFullscreen=="function"),[l,f]=c.useState(!1),m=q.useT();if(c.useEffect(()=>{const e=()=>f(document.fullscreenElement!=null);return e(),document.addEventListener("fullscreenchange",e),()=>document.removeEventListener("fullscreenchange",e)},[]),!a)return null;const g=()=>{var e,n,u,o,r;document.fullscreenElement?(n=(e=document.exitFullscreen)==null?void 0:e.call(document))==null||n.catch(()=>{}):(r=(o=(u=document.documentElement).requestFullscreen)==null?void 0:o.call(u))==null||r.catch(()=>{})};return s.jsx(h.IconButton,{ref:d,variant:i,role:"switch","aria-checked":l,"aria-label":m("fullscreenToggle.label"),...t,onClick:e=>{var n;(n=t.onClick)==null||n.call(t,e),g()},children:s.jsx(F.Icon,{name:"Maximize3",style:l?{transform:"rotate(180deg)"}:void 0})})});exports.FullscreenToggle=E;
-//# sourceMappingURL=FullscreenToggle-BL0nBrsL.cjs.map
+"use strict";const s=require("react/jsx-runtime"),c=require("react"),F=require("./Icon-BVULqOJD.cjs"),h=require("./IconButton-BNa0yLcv.cjs"),q=require("./ConfigProvider-ByLHqXpv.cjs"),E=c.forwardRef(function({variant:i="outlined",...t},d){const[a]=c.useState(()=>typeof document<"u"&&typeof document.documentElement.requestFullscreen=="function"),[l,f]=c.useState(!1),m=q.useT();if(c.useEffect(()=>{const e=()=>f(document.fullscreenElement!=null);return e(),document.addEventListener("fullscreenchange",e),()=>document.removeEventListener("fullscreenchange",e)},[]),!a)return null;const g=()=>{var e,n,u,o,r;document.fullscreenElement?(n=(e=document.exitFullscreen)==null?void 0:e.call(document))==null||n.catch(()=>{}):(r=(o=(u=document.documentElement).requestFullscreen)==null?void 0:o.call(u))==null||r.catch(()=>{})};return s.jsx(h.IconButton,{ref:d,variant:i,role:"switch","aria-checked":l,"aria-label":m("fullscreenToggle.label"),...t,onClick:e=>{var n;(n=t.onClick)==null||n.call(t,e),g()},children:s.jsx(F.Icon,{name:"Maximize3",style:l?{transform:"rotate(180deg)"}:void 0})})});exports.FullscreenToggle=E;
+//# sourceMappingURL=FullscreenToggle-CeGgw3z1.cjs.map

package/dist/{FullscreenToggle-BL0nBrsL.cjs.map → FullscreenToggle-CeGgw3z1.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FullscreenToggle-BL0nBrsL.cjs","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":"wLAgBaA,EAAmBC,EAAAA,WAC9B,SAA0B,CAAE,QAAAC,EAAU,WAAY,GAAGC,CAAA,EAASC,EAAK,CAGjE,KAAM,CAACC,CAAS,EAAIC,EAAAA,SAClB,IACE,OAAO,SAAa,KACpB,OAAO,SAAS,gBAAgB,mBAAsB,UAAA,EAEpD,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAAS,EAAK,EAChDG,EAAIC,EAAAA,KAAA,EASV,GAPAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAMJ,EAAgB,SAAS,mBAAqB,IAAI,EACrE,OAAAI,EAAA,EACA,SAAS,iBAAiB,mBAAoBA,CAAI,EAC3C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAI,CACpE,EAAG,CAAA,CAAE,EAED,CAACP,EAAW,OAAO,KAEvB,MAAMQ,EAAS,IAAM,eAEf,SAAS,mBACXC,GAAAC,EAAA,SAAS,iBAAT,YAAAA,EAAA,uBAAAD,EAA6B,MAAM,IAAM,CAAC,IAE1CE,GAAAC,GAAAC,EAAA,SAAS,iBAAgB,oBAAzB,YAAAD,EAAA,KAAAC,KAAA,MAAAF,EAAgD,MAAM,IAAM,CAAC,EAEjE,EAEA,OACEG,EAAAA,IAACC,EAAAA,WAAA,CACC,IAAAhB,EACA,QAAAF,EACA,KAAK,SACL,eAAcK,EACd,aAAYE,EAAE,wBAAwB,EACrC,GAAGN,EACJ,QAAUkB,GAAU,QAClBN,EAAAZ,EAAM,UAAN,MAAAY,EAAA,KAAAZ,EAAgBkB,GAChBR,EAAA,CACF,EAEA,SAAAM,EAAAA,IAACG,OAAA,CAAK,KAAK,YAAY,MAAOf,EAAe,CAAE,UAAW,gBAAA,EAAqB,MAAA,CAAW,CAAA,CAAA,CAGhG,CACF"}
+{"version":3,"file":"FullscreenToggle-CeGgw3z1.cjs","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":"wLAgBaA,EAAmBC,EAAAA,WAC9B,SAA0B,CAAE,QAAAC,EAAU,WAAY,GAAGC,CAAA,EAASC,EAAK,CAGjE,KAAM,CAACC,CAAS,EAAIC,EAAAA,SAClB,IACE,OAAO,SAAa,KACpB,OAAO,SAAS,gBAAgB,mBAAsB,UAAA,EAEpD,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAAS,EAAK,EAChDG,EAAIC,EAAAA,KAAA,EASV,GAPAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAMJ,EAAgB,SAAS,mBAAqB,IAAI,EACrE,OAAAI,EAAA,EACA,SAAS,iBAAiB,mBAAoBA,CAAI,EAC3C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAI,CACpE,EAAG,CAAA,CAAE,EAED,CAACP,EAAW,OAAO,KAEvB,MAAMQ,EAAS,IAAM,eAEf,SAAS,mBACXC,GAAAC,EAAA,SAAS,iBAAT,YAAAA,EAAA,uBAAAD,EAA6B,MAAM,IAAM,CAAC,IAE1CE,GAAAC,GAAAC,EAAA,SAAS,iBAAgB,oBAAzB,YAAAD,EAAA,KAAAC,KAAA,MAAAF,EAAgD,MAAM,IAAM,CAAC,EAEjE,EAEA,OACEG,EAAAA,IAACC,EAAAA,WAAA,CACC,IAAAhB,EACA,QAAAF,EACA,KAAK,SACL,eAAcK,EACd,aAAYE,EAAE,wBAAwB,EACrC,GAAGN,EACJ,QAAUkB,GAAU,QAClBN,EAAAZ,EAAM,UAAN,MAAAY,EAAA,KAAAZ,EAAgBkB,GAChBR,EAAA,CACF,EAEA,SAAAM,EAAAA,IAACG,OAAA,CAAK,KAAK,YAAY,MAAOf,EAAe,CAAE,UAAW,gBAAA,EAAqB,MAAA,CAAW,CAAA,CAAA,CAGhG,CACF"}

package/dist/{IconButton-B87ipBK3.cjs → IconButton-BNa0yLcv.cjs}

@@ -1,2 +1,2 @@
-"use strict";const i=require("react/jsx-runtime"),c=require("react"),g=require("clsx"),q=require("./Loader-0Imnbael.cjs"),v="_iconButton_10018_1",z="_sm_10018_22",I="_md_10018_27",j="_lg_10018_32",y="_contained_10018_38",k="_filled_10018_48",p="_outlined_10018_57",C="_text_10018_68",E="_rounded_10018_78",L="_disabled_10018_86",R="_loading_10018_90",$="_nonClickable_10018_95",t={iconButton:v,sm:z,md:I,lg:j,contained:y,filled:k,outlined:p,text:C,rounded:E,disabled:L,loading:R,nonClickable:$},w=c.forwardRef(function({variant:a="contained",color:d="accent",size:e="md",loading:n=!1,rounded:l=!1,disabled:_=!1,nonClickable:s=!1,className:r,style:u,type:b="button",tabIndex:f,children:o,...m},x){const B=c.isValidElement(o)&&!n?c.cloneElement(o,{size:o.props.size??e}):o;return i.jsx("button",{ref:x,type:b,disabled:_||n,"aria-busy":n||void 0,"aria-disabled":s||void 0,tabIndex:s?-1:f,className:g.clsx(t.iconButton,t[a],t[e],l&&t.rounded,n&&t.loading,_&&t.disabled,s&&t.nonClickable,r),style:{"--tz-btn-rgb":`var(--tz-color-${d}-rgb)`,"--tz-btn-on":`var(--tz-color-${d}-contrast, #fff)`,...u},...m,children:n?i.jsx(q.Loader,{size:e,"aria-hidden":"true"}):B})});exports.IconButton=w;
-//# sourceMappingURL=IconButton-B87ipBK3.cjs.map
+"use strict";const i=require("react/jsx-runtime"),c=require("react"),g=require("clsx"),q=require("./Loader-Cpr9-OOZ.cjs"),v="_iconButton_10018_1",z="_sm_10018_22",I="_md_10018_27",j="_lg_10018_32",y="_contained_10018_38",k="_filled_10018_48",p="_outlined_10018_57",C="_text_10018_68",E="_rounded_10018_78",L="_disabled_10018_86",R="_loading_10018_90",$="_nonClickable_10018_95",t={iconButton:v,sm:z,md:I,lg:j,contained:y,filled:k,outlined:p,text:C,rounded:E,disabled:L,loading:R,nonClickable:$},w=c.forwardRef(function({variant:a="contained",color:d="accent",size:e="md",loading:n=!1,rounded:l=!1,disabled:_=!1,nonClickable:s=!1,className:r,style:u,type:b="button",tabIndex:f,children:o,...m},x){const B=c.isValidElement(o)&&!n?c.cloneElement(o,{size:o.props.size??e}):o;return i.jsx("button",{ref:x,type:b,disabled:_||n,"aria-busy":n||void 0,"aria-disabled":s||void 0,tabIndex:s?-1:f,className:g.clsx(t.iconButton,t[a],t[e],l&&t.rounded,n&&t.loading,_&&t.disabled,s&&t.nonClickable,r),style:{"--tz-btn-rgb":`var(--tz-color-${d}-rgb)`,"--tz-btn-on":`var(--tz-color-${d}-contrast, #fff)`,...u},...m,children:n?i.jsx(q.Loader,{size:e,"aria-hidden":"true"}):B})});exports.IconButton=w;
+//# sourceMappingURL=IconButton-BNa0yLcv.cjs.map

package/dist/{IconButton-B87ipBK3.cjs.map → IconButton-BNa0yLcv.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"IconButton-B87ipBK3.cjs","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":"+eAyCaA,EAAaC,EAAAA,WAA+C,SACvE,CACE,QAAAC,EAAU,YACV,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,UAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,SACP,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CAEA,MAAMC,EACJC,EAAAA,eAAeJ,CAAQ,GAAK,CAACR,EACzBa,EAAAA,aAAaL,EAAqD,CAChE,KAAOA,EAAS,MAAoC,MAAQT,CAAA,CAC7D,EACDS,EAEN,OACEM,EAAAA,IAAC,SAAA,CACC,IAAAJ,EACA,KAAAJ,EACA,SAAUJ,GAAYF,EACtB,YAAWA,GAAW,OACtB,gBAAeG,GAAgB,OAC/B,SAAUA,EAAe,GAAKI,EAC9B,UAAWQ,EAAAA,KACTC,EAAO,WACPA,EAAOnB,CAAO,EACdmB,EAAOjB,CAAI,EACXE,GAAWe,EAAO,QAClBhB,GAAWgB,EAAO,QAClBd,GAAYc,EAAO,SACnBb,GAAgBa,EAAO,aACvBZ,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBN,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGO,CAAA,EAGN,GAAGI,EAEH,WAAUK,EAAAA,IAACG,EAAAA,OAAA,CAAO,KAAAlB,EAAY,cAAY,OAAO,EAAKY,CAAA,CAAA,CAG7D,CAAC"}
+{"version":3,"file":"IconButton-BNa0yLcv.cjs","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":"+eAyCaA,EAAaC,EAAAA,WAA+C,SACvE,CACE,QAAAC,EAAU,YACV,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,UAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,SACP,SAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CAEA,MAAMC,EACJC,EAAAA,eAAeJ,CAAQ,GAAK,CAACR,EACzBa,EAAAA,aAAaL,EAAqD,CAChE,KAAOA,EAAS,MAAoC,MAAQT,CAAA,CAC7D,EACDS,EAEN,OACEM,EAAAA,IAAC,SAAA,CACC,IAAAJ,EACA,KAAAJ,EACA,SAAUJ,GAAYF,EACtB,YAAWA,GAAW,OACtB,gBAAeG,GAAgB,OAC/B,SAAUA,EAAe,GAAKI,EAC9B,UAAWQ,EAAAA,KACTC,EAAO,WACPA,EAAOnB,CAAO,EACdmB,EAAOjB,CAAI,EACXE,GAAWe,EAAO,QAClBhB,GAAWgB,EAAO,QAClBd,GAAYc,EAAO,SACnBb,GAAgBa,EAAO,aACvBZ,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBN,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGO,CAAA,EAGN,GAAGI,EAEH,WAAUK,EAAAA,IAACG,EAAAA,OAAA,CAAO,KAAAlB,EAAY,cAAY,OAAO,EAAKY,CAAA,CAAA,CAG7D,CAAC"}

package/dist/{IconButton-CBp8QuTO.js → IconButton-GU3Ud4Zg.js}

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { forwardRef as x, isValidElement as B, cloneElement as g } from "react";
 import { clsx as v } from "clsx";
-import { L as z } from "./Loader-fffFnQqS.js";
+import { L as z } from "./Loader-C1uaCtx6.js";
 const I = "_iconButton_10018_1", y = "_sm_10018_22", k = "_md_10018_27", C = "_lg_10018_32", E = "_contained_10018_38", L = "_filled_10018_48", $ = "_outlined_10018_57", j = "_text_10018_68", w = "_rounded_10018_78", N = "_disabled_10018_86", R = "_loading_10018_90", V = "_nonClickable_10018_95", t = {
   iconButton: I,
   sm: y,
@@ -65,4 +65,4 @@ const I = "_iconButton_10018_1", y = "_sm_10018_22", k = "_md_10018_27", C = "_l
 export {
   H as I
 };
-//# sourceMappingURL=IconButton-CBp8QuTO.js.map
+//# sourceMappingURL=IconButton-GU3Ud4Zg.js.map

package/dist/{IconButton-CBp8QuTO.js.map → IconButton-GU3Ud4Zg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"IconButton-CBp8QuTO.js","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":";;;;;;;;;;;;;;;;;GAyCaA,IAAaC,EAA+C,SACvE;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IACJC,EAAeJ,CAAQ,KAAK,CAACR,IACzBa,EAAaL,GAAqD;AAAA,IAChE,MAAOA,EAAS,MAAoC,QAAQT;AAAA,EAAA,CAC7D,IACDS;AAEN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,MAAAJ;AAAA,MACA,UAAUJ,KAAYF;AAAA,MACtB,aAAWA,KAAW;AAAA,MACtB,iBAAeG,KAAgB;AAAA,MAC/B,UAAUA,IAAe,KAAKI;AAAA,MAC9B,WAAWQ;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOnB,CAAO;AAAA,QACdmB,EAAOjB,CAAI;AAAA,QACXE,KAAWe,EAAO;AAAA,QAClBhB,KAAWgB,EAAO;AAAA,QAClBd,KAAYc,EAAO;AAAA,QACnBb,KAAgBa,EAAO;AAAA,QACvBZ;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBN,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGO;AAAA,MAAA;AAAA,MAGN,GAAGI;AAAA,MAEH,cAAU,gBAAAK,EAACG,GAAA,EAAO,MAAAlB,GAAY,eAAY,QAAO,IAAKY;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
+{"version":3,"file":"IconButton-GU3Ud4Zg.js","sources":["../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport type { ThemeColor } from '../../theme'\nimport { Loader } from '../Loader'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonVariant = 'contained' | 'filled' | 'outlined' | 'text'\nexport type IconButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /** Visual style. `contained` solid · `filled` soft tint · `outlined` border · `text` bare. */\n  variant?: IconButtonVariant\n  /** Theme palette token that tints the button. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — square: width === height === `--tz-control-height-*` (matches `Button` heights). */\n  size?: IconButtonSize\n  /** Shows the loader in the icon's place and blocks interaction (also sets the native `disabled`). */\n  loading?: boolean\n  /** Circular shape instead of the default rounded square. */\n  rounded?: boolean\n  /** Ignores all interaction (no clicks, hover or focus) while keeping the normal look — unlike `disabled`, it's not dimmed. */\n  nonClickable?: boolean\n  /** The icon to render — typically an `<Icon />`. Swapped for the loader while `loading`. */\n  children?: ReactNode\n}\n\n/**\n * A square, text-less button for a single icon. Shares `Button`'s variants,\n * colors and sizing, but its width equals its height (the matching\n * `--tz-control-height-*`). Pass an `<Icon />` (or any node) as the child;\n * while `loading` it's replaced by the `Loader`. Provide an `aria-label` since\n * there's no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    variant = 'contained',\n    color = 'accent',\n    size = 'md',\n    loading = false,\n    rounded = false,\n    disabled = false,\n    nonClickable = false,\n    className,\n    style,\n    type = 'button',\n    tabIndex,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // size the icon child to match the button (an explicit icon `size` still wins)\n  const icon =\n    isValidElement(children) && !loading\n      ? cloneElement(children as ReactElement<{ size?: IconButtonSize }>, {\n          size: (children.props as { size?: IconButtonSize }).size ?? size,\n        })\n      : children\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      aria-disabled={nonClickable || undefined}\n      tabIndex={nonClickable ? -1 : tabIndex}\n      className={clsx(\n        styles.iconButton,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        loading && styles.loading,\n        disabled && styles.disabled,\n        nonClickable && styles.nonClickable,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {loading ? <Loader size={size} aria-hidden=\"true\" /> : icon}\n    </button>\n  )\n})\n"],"names":["IconButton","forwardRef","variant","color","size","loading","rounded","disabled","nonClickable","className","style","type","tabIndex","children","props","ref","icon","isValidElement","cloneElement","jsx","clsx","styles","Loader"],"mappings":";;;;;;;;;;;;;;;;;GAyCaA,IAAaC,EAA+C,SACvE;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IACJC,EAAeJ,CAAQ,KAAK,CAACR,IACzBa,EAAaL,GAAqD;AAAA,IAChE,MAAOA,EAAS,MAAoC,QAAQT;AAAA,EAAA,CAC7D,IACDS;AAEN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,MAAAJ;AAAA,MACA,UAAUJ,KAAYF;AAAA,MACtB,aAAWA,KAAW;AAAA,MACtB,iBAAeG,KAAgB;AAAA,MAC/B,UAAUA,IAAe,KAAKI;AAAA,MAC9B,WAAWQ;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOnB,CAAO;AAAA,QACdmB,EAAOjB,CAAI;AAAA,QACXE,KAAWe,EAAO;AAAA,QAClBhB,KAAWgB,EAAO;AAAA,QAClBd,KAAYc,EAAO;AAAA,QACnBb,KAAgBa,EAAO;AAAA,QACvBZ;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBN,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGO;AAAA,MAAA;AAAA,MAGN,GAAGI;AAAA,MAEH,cAAU,gBAAAK,EAACG,GAAA,EAAO,MAAAlB,GAAY,eAAY,QAAO,IAAKY;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

package/dist/List-9lUjapQ5.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),u=require("react"),C=require("./Flex-C6tHC8n7.cjs"),j=require("./Skeleton-DK0lAjS9.cjs"),E=require("clsx"),O=require("./Icon-BVULqOJD.cjs"),D=require("./names-BJnFU_5m.cjs"),N=u.createContext({}),R=()=>u.useContext(N),A="_item_16twt_3",M="_sm_16twt_25",B="_md_16twt_31",F="_lg_16twt_36",P="_flush_16twt_43",Z="_itemIcon_16twt_49",$="_itemText_16twt_57",G="_itemLabel_16twt_65",H="_itemDescription_16twt_72",J="_itemTrailing_16twt_82",Q="_clickable_16twt_92",U="_selected_16twt_109",V="_disabled_16twt_130",e={item:A,sm:M,md:B,lg:F,flush:P,itemIcon:Z,itemText:$,itemLabel:G,itemDescription:H,itemTrailing:J,clickable:Q,selected:U,disabled:V},W=new Set(D.ICON_NAMES),X={sm:"sm",md:"md",lg:"md"},v=u.forwardRef(function({icon:n,description:o,trailing:d,selected:x=!1,clickable:l=!1,disabled:s=!1,size:i,flush:f,color:h="primary",as:c,className:p,style:w,children:r,onClick:I,onKeyDown:a,...m},T){const L=R(),g=i??L.size??"md",S=f??L.flush??!1,q=c??"div",b=l&&!(c==="a"||c==="button"||typeof c=="function"||typeof c=="object"),k=n==null?null:typeof n=="string"&&W.has(n)?t.jsx(O.Icon,{name:n,size:X[g]}):n,z=_=>{b&&!s&&(_.key==="Enter"||_.key===" ")&&(_.preventDefault(),_.currentTarget.click()),a==null||a(_)};return t.jsxs(q,{ref:T,className:E.clsx(e.item,e[g],S&&e.flush,x&&e.selected,l&&e.clickable,s&&e.disabled,p),style:{"--tz-btn-rgb":`var(--tz-color-${h}-rgb)`,...w},role:b?"button":void 0,tabIndex:b?s?-1:0:void 0,"aria-disabled":s||void 0,"aria-current":x||void 0,onClick:s?void 0:I,onKeyDown:l?z:a,...m,children:[k!=null&&t.jsx("span",{className:e.itemIcon,children:k}),(r!=null||o!=null)&&t.jsxs("span",{className:e.itemText,children:[r!=null&&t.jsx("span",{className:e.itemLabel,children:r}),o!=null&&t.jsx("span",{className:e.itemDescription,children:o})]}),d!=null&&t.jsx("span",{className:e.itemTrailing,children:d})]})}),Y=u.forwardRef(function({as:n,gap:o=2,padding:d,role:x="list",size:l,flush:s,loading:i=!1,style:f,children:h,...c},p){const w=n??"div",r=u.useMemo(()=>({size:l,flush:s}),[l,s]),I=typeof i=="number"?i:i?3:0;return t.jsx(w,{ref:p,role:x,"aria-busy":i?!0:void 0,style:{display:"flex",flexDirection:"column",gap:C.space(o),padding:C.space(d),...f},...c,children:t.jsx(N.Provider,{value:r,children:i?Array.from({length:I},(a,m)=>t.jsx(v,{"aria-hidden":"true",icon:t.jsx(j.Skeleton,{variant:"circle",height:"1.25em"}),description:t.jsx(j.Skeleton,{width:m%2?"45%":"60%"}),children:t.jsx(j.Skeleton,{width:m%2?"30%":"40%"})},m)):h})})});exports.List=Y;exports.ListItem=v;
+//# sourceMappingURL=List-9lUjapQ5.cjs.map

package/dist/List-9lUjapQ5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"List-9lUjapQ5.cjs","sources":["../src/components/List/listContext.ts","../src/components/List/ListItem.tsx","../src/components/List/List.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ListItemSize } from './ListItem'\n\n/** Defaults a `List` hands to its `ListItem`s — an explicit item prop still wins. */\nexport interface ListContextValue {\n  size?: ListItemSize\n  flush?: boolean\n}\n\nexport const ListContext = createContext<ListContextValue>({})\n\n/** Read the defaults provided by a surrounding `List`, if any. */\nexport const useListContext = (): ListContextValue => useContext(ListContext)\n\n/** @deprecated internal — use `useListContext().size`. Kept so older call sites keep compiling. */\nexport const useListSize = (): ListItemSize | undefined => useListContext().size\n","import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { Icon } from '../Icon'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useListContext } from './listContext'\nimport styles from './List.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ListItemSize = 'sm' | 'md' | 'lg'\n\n/** Leading `<Icon>` size per row size. */\nconst ICON_SIZE: Record<ListItemSize, 'sm' | 'md'> = { sm: 'sm', md: 'md', lg: 'md' }\n\nexport interface ListItemProps\n  extends\n    Omit<HTMLAttributes<HTMLElement>, 'color'>,\n    Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'> {\n  /** Leading element — a known `IconName` (rendered as `<Icon>`) or any node (e.g. an `Avatar`). */\n  icon?: IconName | ReactNode\n  /** Secondary muted line shown under the label. */\n  description?: ReactNode\n  /** Trailing content pinned to the right (icon, `Badge`, shortcut text, chevron, …). */\n  trailing?: ReactNode\n  /** Highlights the row as selected/active (menu selection, current nav route). */\n  selected?: boolean\n  /** Makes the row interactive (hover + cursor; adds `role`/`tabIndex`/keyboard when rendered plain). */\n  clickable?: boolean\n  /** Dims and inerts the row. */\n  disabled?: boolean\n  /** Row size — height / padding / font. Defaults to `md`. */\n  size?: ListItemSize\n  /**\n   * Drops the row's left / right padding so it sits flush with its container's edges (vertical padding\n   * and min-height stay). Defaults to `false`; a surrounding `List flush` sets the default for all its rows.\n   */\n  flush?: boolean\n  /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */\n  as?: ElementType\n  /** Primary label / content. */\n  children?: ReactNode\n}\n\n/**\n * A flexible, reusable list row: leading `icon`, a label (`children`) with optional `description`, and\n * a `trailing` slot. `clickable` turns it interactive (hover + keyboard when rendered as a plain\n * element), `selected` highlights it, `disabled` inerts it. Render as a link/button/router `Link` via\n * `as`. Designed to compose inside `List` — for menus, the sidebar, or a standalone styled list.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    icon,\n    description,\n    trailing,\n    selected = false,\n    clickable = false,\n    disabled = false,\n    size: sizeProp,\n    flush: flushProp,\n    color = 'primary',\n    as,\n    className,\n    style,\n    children,\n    onClick,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  // explicit props win; otherwise inherit the surrounding `List`'s defaults (size falls back to `md`)\n  const listCtx = useListContext()\n  const size = sizeProp ?? listCtx.size ?? 'md'\n  const flush = flushProp ?? listCtx.flush ?? false\n  const Component = (as ?? 'div') as ElementType\n  // Anchors, buttons, and custom components (e.g. a router Link) carry their own click + keyboard\n  // semantics — only a plain element needs the button role/tabIndex/Enter-Space shim.\n  const handlesOwnInteraction =\n    as === 'a' || as === 'button' || typeof as === 'function' || typeof as === 'object'\n  const isDivButton = clickable && !handlesOwnInteraction\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={ICON_SIZE[size]} />\n    ) : (\n      icon\n    )\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (isDivButton && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(\n        styles.item,\n        styles[size],\n        flush && styles.flush,\n        selected && styles.selected,\n        clickable && styles.clickable,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`, ...style } as CSSProperties}\n      role={isDivButton ? 'button' : undefined}\n      tabIndex={isDivButton ? (disabled ? -1 : 0) : undefined}\n      aria-disabled={disabled || undefined}\n      aria-current={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={clickable ? handleKeyDown : onKeyDown}\n      {...props}\n    >\n      {renderedIcon != null && <span className={styles.itemIcon}>{renderedIcon}</span>}\n      {(children != null || description != null) && (\n        <span className={styles.itemText}>\n          {children != null && <span className={styles.itemLabel}>{children}</span>}\n          {description != null && <span className={styles.itemDescription}>{description}</span>}\n        </span>\n      )}\n      {trailing != null && <span className={styles.itemTrailing}>{trailing}</span>}\n    </Component>\n  )\n})\n","import {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\nimport { Skeleton } from '../Skeleton'\nimport { ListContext } from './listContext'\nimport { ListItem, type ListItemSize } from './ListItem'\n\nexport interface ListProps extends HTMLAttributes<HTMLElement> {\n  /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */\n  as?: ElementType\n  /** Gap between items (token key, px number, or CSS value). Defaults to `2px`. */\n  gap?: Spacing\n  /** Padding around the list (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** Default size for the contained `ListItem`s — each item can still override its own `size`. */\n  size?: ListItemSize\n  /**\n   * Default `flush` for the contained `ListItem`s — drops their left / right padding so rows sit flush with\n   * the list's edges (e.g. inside a padded `Card`). Each item can still override its own `flush`.\n   */\n  flush?: boolean\n  /**\n   * Render skeleton rows instead of `children` — `true` shows 3, a number sets the count. Each row is a\n   * `ListItem` with an icon disc, a label line and a description line. Defaults to `false`.\n   */\n  loading?: boolean | number\n  children?: ReactNode\n}\n\n/**\n * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`\n * and `role=\"list\"` (override `role` to `\"menu\"` for a dropdown, etc.). `size` and `flush` set defaults\n * for all contained `ListItem`s (an explicit item prop wins). `loading` swaps the items for skeleton rows. Layout is set via inline style, matching the `Flex`/`Grid` primitives.\n */\nexport const List = forwardRef<HTMLElement, ListProps>(function List(\n  { as, gap = 2, padding, role = 'list', size, flush, loading = false, style, children, ...props },\n  ref,\n) {\n  const Component = (as ?? 'div') as ElementType\n  // one stable object per (size, flush) so items don't re-render on every List render\n  const ctx = useMemo(() => ({ size, flush }), [size, flush])\n  const skeletonRows = typeof loading === 'number' ? loading : loading ? 3 : 0\n  return (\n    <Component\n      ref={ref}\n      role={role}\n      aria-busy={loading ? true : undefined}\n      style={\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: space(gap),\n          padding: space(padding),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <ListContext.Provider value={ctx}>\n        {loading\n          ? Array.from({ length: skeletonRows }, (_, i) => (\n              <ListItem\n                key={i}\n                aria-hidden=\"true\"\n                icon={<Skeleton variant=\"circle\" height=\"1.25em\" />}\n                description={<Skeleton width={i % 2 ? '45%' : '60%'} />}\n              >\n                <Skeleton width={i % 2 ? '30%' : '40%'} />\n              </ListItem>\n            ))\n          : children}\n      </ListContext.Provider>\n    </Component>\n  )\n})\n"],"names":["ListContext","createContext","useListContext","useContext","ICON_NAME_SET","ICON_NAMES","ICON_SIZE","ListItem","forwardRef","icon","description","trailing","selected","clickable","disabled","sizeProp","flushProp","color","as","className","style","children","onClick","onKeyDown","props","ref","listCtx","size","flush","Component","isDivButton","renderedIcon","jsx","Icon","handleKeyDown","event","jsxs","clsx","styles","List","gap","padding","role","loading","ctx","useMemo","skeletonRows","space","_","i","Skeleton"],"mappings":"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"}

package/dist/List-CZwNGxuP.js

@@ -0,0 +1,107 @@
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+import { createContext as D, useContext as j, forwardRef as y, useMemo as A } from "react";
+import { s as v } from "./Flex-BFn4P1tJ.js";
+import { S as I } from "./Skeleton-_-uGax2j.js";
+import { clsx as M } from "clsx";
+import { I as R } from "./Icon-DaTvzLBu.js";
+import { a as B } from "./names-r21QPjcU.js";
+const T = D({}), P = () => j(T), Z = "_item_16twt_3", $ = "_sm_16twt_25", q = "_md_16twt_31", F = "_lg_16twt_36", G = "_flush_16twt_43", H = "_itemIcon_16twt_49", J = "_itemText_16twt_57", Q = "_itemLabel_16twt_65", U = "_itemDescription_16twt_72", V = "_itemTrailing_16twt_82", W = "_clickable_16twt_92", X = "_selected_16twt_109", Y = "_disabled_16twt_130", t = {
+  item: Z,
+  sm: $,
+  md: q,
+  lg: F,
+  flush: G,
+  itemIcon: H,
+  itemText: J,
+  itemLabel: Q,
+  itemDescription: U,
+  itemTrailing: V,
+  clickable: W,
+  selected: X,
+  disabled: Y
+}, K = new Set(B), tt = { sm: "sm", md: "md", lg: "md" }, et = y(function({
+  icon: n,
+  description: c,
+  trailing: d,
+  selected: u = !1,
+  clickable: l = !1,
+  disabled: s = !1,
+  size: i,
+  flush: f,
+  color: p = "primary",
+  as: o,
+  className: h,
+  style: w,
+  children: r,
+  onClick: x,
+  onKeyDown: m,
+  ...a
+}, S) {
+  const g = P(), C = i ?? g.size ?? "md", z = f ?? g.flush ?? !1, E = o ?? "div", b = l && !(o === "a" || o === "button" || typeof o == "function" || typeof o == "object"), L = n == null ? null : typeof n == "string" && K.has(n) ? /* @__PURE__ */ e(R, { name: n, size: tt[C] }) : n, O = (_) => {
+    b && !s && (_.key === "Enter" || _.key === " ") && (_.preventDefault(), _.currentTarget.click()), m == null || m(_);
+  };
+  return /* @__PURE__ */ N(
+    E,
+    {
+      ref: S,
+      className: M(
+        t.item,
+        t[C],
+        z && t.flush,
+        u && t.selected,
+        l && t.clickable,
+        s && t.disabled,
+        h
+      ),
+      style: { "--tz-btn-rgb": `var(--tz-color-${p}-rgb)`, ...w },
+      role: b ? "button" : void 0,
+      tabIndex: b ? s ? -1 : 0 : void 0,
+      "aria-disabled": s || void 0,
+      "aria-current": u || void 0,
+      onClick: s ? void 0 : x,
+      onKeyDown: l ? O : m,
+      ...a,
+      children: [
+        L != null && /* @__PURE__ */ e("span", { className: t.itemIcon, children: L }),
+        (r != null || c != null) && /* @__PURE__ */ N("span", { className: t.itemText, children: [
+          r != null && /* @__PURE__ */ e("span", { className: t.itemLabel, children: r }),
+          c != null && /* @__PURE__ */ e("span", { className: t.itemDescription, children: c })
+        ] }),
+        d != null && /* @__PURE__ */ e("span", { className: t.itemTrailing, children: d })
+      ]
+    }
+  );
+}), at = y(function({ as: n, gap: c = 2, padding: d, role: u = "list", size: l, flush: s, loading: i = !1, style: f, children: p, ...o }, h) {
+  const w = n ?? "div", r = A(() => ({ size: l, flush: s }), [l, s]), x = typeof i == "number" ? i : i ? 3 : 0;
+  return /* @__PURE__ */ e(
+    w,
+    {
+      ref: h,
+      role: u,
+      "aria-busy": i ? !0 : void 0,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: v(c),
+        padding: v(d),
+        ...f
+      },
+      ...o,
+      children: /* @__PURE__ */ e(T.Provider, { value: r, children: i ? Array.from({ length: x }, (m, a) => /* @__PURE__ */ e(
+        et,
+        {
+          "aria-hidden": "true",
+          icon: /* @__PURE__ */ e(I, { variant: "circle", height: "1.25em" }),
+          description: /* @__PURE__ */ e(I, { width: a % 2 ? "45%" : "60%" }),
+          children: /* @__PURE__ */ e(I, { width: a % 2 ? "30%" : "40%" })
+        },
+        a
+      )) : p })
+    }
+  );
+});
+export {
+  at as L,
+  et as a
+};
+//# sourceMappingURL=List-CZwNGxuP.js.map

package/dist/List-CZwNGxuP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List-CZwNGxuP.js","sources":["../src/components/List/listContext.ts","../src/components/List/ListItem.tsx","../src/components/List/List.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ListItemSize } from './ListItem'\n\n/** Defaults a `List` hands to its `ListItem`s — an explicit item prop still wins. */\nexport interface ListContextValue {\n  size?: ListItemSize\n  flush?: boolean\n}\n\nexport const ListContext = createContext<ListContextValue>({})\n\n/** Read the defaults provided by a surrounding `List`, if any. */\nexport const useListContext = (): ListContextValue => useContext(ListContext)\n\n/** @deprecated internal — use `useListContext().size`. Kept so older call sites keep compiling. */\nexport const useListSize = (): ListItemSize | undefined => useListContext().size\n","import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { Icon } from '../Icon'\nimport type { ThemeColor } from '../../theme'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useListContext } from './listContext'\nimport styles from './List.module.css'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\nexport type ListItemSize = 'sm' | 'md' | 'lg'\n\n/** Leading `<Icon>` size per row size. */\nconst ICON_SIZE: Record<ListItemSize, 'sm' | 'md'> = { sm: 'sm', md: 'md', lg: 'md' }\n\nexport interface ListItemProps\n  extends\n    Omit<HTMLAttributes<HTMLElement>, 'color'>,\n    Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'rel' | 'download'> {\n  /** Leading element — a known `IconName` (rendered as `<Icon>`) or any node (e.g. an `Avatar`). */\n  icon?: IconName | ReactNode\n  /** Secondary muted line shown under the label. */\n  description?: ReactNode\n  /** Trailing content pinned to the right (icon, `Badge`, shortcut text, chevron, …). */\n  trailing?: ReactNode\n  /** Highlights the row as selected/active (menu selection, current nav route). */\n  selected?: boolean\n  /** Makes the row interactive (hover + cursor; adds `role`/`tabIndex`/keyboard when rendered plain). */\n  clickable?: boolean\n  /** Dims and inerts the row. */\n  disabled?: boolean\n  /** Row size — height / padding / font. Defaults to `md`. */\n  size?: ListItemSize\n  /**\n   * Drops the row's left / right padding so it sits flush with its container's edges (vertical padding\n   * and min-height stay). Defaults to `false`; a surrounding `List flush` sets the default for all its rows.\n   */\n  flush?: boolean\n  /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */\n  color?: ThemeColor\n  /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */\n  as?: ElementType\n  /** Primary label / content. */\n  children?: ReactNode\n}\n\n/**\n * A flexible, reusable list row: leading `icon`, a label (`children`) with optional `description`, and\n * a `trailing` slot. `clickable` turns it interactive (hover + keyboard when rendered as a plain\n * element), `selected` highlights it, `disabled` inerts it. Render as a link/button/router `Link` via\n * `as`. Designed to compose inside `List` — for menus, the sidebar, or a standalone styled list.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    icon,\n    description,\n    trailing,\n    selected = false,\n    clickable = false,\n    disabled = false,\n    size: sizeProp,\n    flush: flushProp,\n    color = 'primary',\n    as,\n    className,\n    style,\n    children,\n    onClick,\n    onKeyDown,\n    ...props\n  },\n  ref,\n) {\n  // explicit props win; otherwise inherit the surrounding `List`'s defaults (size falls back to `md`)\n  const listCtx = useListContext()\n  const size = sizeProp ?? listCtx.size ?? 'md'\n  const flush = flushProp ?? listCtx.flush ?? false\n  const Component = (as ?? 'div') as ElementType\n  // Anchors, buttons, and custom components (e.g. a router Link) carry their own click + keyboard\n  // semantics — only a plain element needs the button role/tabIndex/Enter-Space shim.\n  const handlesOwnInteraction =\n    as === 'a' || as === 'button' || typeof as === 'function' || typeof as === 'object'\n  const isDivButton = clickable && !handlesOwnInteraction\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} size={ICON_SIZE[size]} />\n    ) : (\n      icon\n    )\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (isDivButton && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      event.currentTarget.click()\n    }\n    onKeyDown?.(event)\n  }\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(\n        styles.item,\n        styles[size],\n        flush && styles.flush,\n        selected && styles.selected,\n        clickable && styles.clickable,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={{ '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`, ...style } as CSSProperties}\n      role={isDivButton ? 'button' : undefined}\n      tabIndex={isDivButton ? (disabled ? -1 : 0) : undefined}\n      aria-disabled={disabled || undefined}\n      aria-current={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={clickable ? handleKeyDown : onKeyDown}\n      {...props}\n    >\n      {renderedIcon != null && <span className={styles.itemIcon}>{renderedIcon}</span>}\n      {(children != null || description != null) && (\n        <span className={styles.itemText}>\n          {children != null && <span className={styles.itemLabel}>{children}</span>}\n          {description != null && <span className={styles.itemDescription}>{description}</span>}\n        </span>\n      )}\n      {trailing != null && <span className={styles.itemTrailing}>{trailing}</span>}\n    </Component>\n  )\n})\n","import {\n  forwardRef,\n  useMemo,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { space, type Spacing } from '../Flex/Flex'\nimport { Skeleton } from '../Skeleton'\nimport { ListContext } from './listContext'\nimport { ListItem, type ListItemSize } from './ListItem'\n\nexport interface ListProps extends HTMLAttributes<HTMLElement> {\n  /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */\n  as?: ElementType\n  /** Gap between items (token key, px number, or CSS value). Defaults to `2px`. */\n  gap?: Spacing\n  /** Padding around the list (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** Default size for the contained `ListItem`s — each item can still override its own `size`. */\n  size?: ListItemSize\n  /**\n   * Default `flush` for the contained `ListItem`s — drops their left / right padding so rows sit flush with\n   * the list's edges (e.g. inside a padded `Card`). Each item can still override its own `flush`.\n   */\n  flush?: boolean\n  /**\n   * Render skeleton rows instead of `children` — `true` shows 3, a number sets the count. Each row is a\n   * `ListItem` with an icon disc, a label line and a description line. Defaults to `false`.\n   */\n  loading?: boolean | number\n  children?: ReactNode\n}\n\n/**\n * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`\n * and `role=\"list\"` (override `role` to `\"menu\"` for a dropdown, etc.). `size` and `flush` set defaults\n * for all contained `ListItem`s (an explicit item prop wins). `loading` swaps the items for skeleton rows. Layout is set via inline style, matching the `Flex`/`Grid` primitives.\n */\nexport const List = forwardRef<HTMLElement, ListProps>(function List(\n  { as, gap = 2, padding, role = 'list', size, flush, loading = false, style, children, ...props },\n  ref,\n) {\n  const Component = (as ?? 'div') as ElementType\n  // one stable object per (size, flush) so items don't re-render on every List render\n  const ctx = useMemo(() => ({ size, flush }), [size, flush])\n  const skeletonRows = typeof loading === 'number' ? loading : loading ? 3 : 0\n  return (\n    <Component\n      ref={ref}\n      role={role}\n      aria-busy={loading ? true : undefined}\n      style={\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: space(gap),\n          padding: space(padding),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <ListContext.Provider value={ctx}>\n        {loading\n          ? Array.from({ length: skeletonRows }, (_, i) => (\n              <ListItem\n                key={i}\n                aria-hidden=\"true\"\n                icon={<Skeleton variant=\"circle\" height=\"1.25em\" />}\n                description={<Skeleton width={i % 2 ? '45%' : '60%'} />}\n              >\n                <Skeleton width={i % 2 ? '30%' : '40%'} />\n              </ListItem>\n            ))\n          : children}\n      </ListContext.Provider>\n    </Component>\n  )\n})\n"],"names":["ListContext","createContext","useListContext","useContext","ICON_NAME_SET","ICON_NAMES","ICON_SIZE","ListItem","forwardRef","icon","description","trailing","selected","clickable","disabled","sizeProp","flushProp","color","as","className","style","children","onClick","onKeyDown","props","ref","listCtx","size","flush","Component","isDivButton","renderedIcon","jsx","Icon","handleKeyDown","event","jsxs","clsx","styles","List","gap","padding","role","loading","ctx","useMemo","skeletonRows","space","_","i","Skeleton"],"mappings":";;;;;;;AASO,MAAMA,IAAcC,EAAgC,EAAE,GAGhDC,IAAiB,MAAwBC,EAAWH,CAAW;;;;;;;;;;;;;;GCItEI,IAAgB,IAAI,IAAYC,CAAU,GAK1CC,KAA+C,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAA,GAuClEC,KAAWC,EAAuC,SAC7D;AAAA,EACE,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAMC;AAAA,EACN,OAAOC;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,IAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAEA,QAAMC,IAAUxB,EAAA,GACVyB,IAAOZ,KAAYW,EAAQ,QAAQ,MACnCE,IAAQZ,KAAaU,EAAQ,SAAS,IACtCG,IAAaX,KAAM,OAKnBY,IAAcjB,KAAa,EAD/BK,MAAO,OAAOA,MAAO,YAAY,OAAOA,KAAO,cAAc,OAAOA,KAAO,WAGvEa,IACJtB,KAAQ,OAAO,OAAO,OAAOA,KAAS,YAAYL,EAAc,IAAIK,CAAI,IACtE,gBAAAuB,EAACC,KAAK,MAAMxB,GAAkB,MAAMH,GAAUqB,CAAI,GAAG,IAErDlB,GAGEyB,IAAgB,CAACC,MAAsC;AAC3D,IAAIL,KAAe,CAAChB,MAAaqB,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACtEA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBZ,KAAA,QAAAA,EAAYY;AAAA,EACd;AAEA,SACE,gBAAAC;AAAA,IAACP;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWY;AAAA,QACTC,EAAO;AAAA,QACPA,EAAOX,CAAI;AAAA,QACXC,KAASU,EAAO;AAAA,QAChB1B,KAAY0B,EAAO;AAAA,QACnBzB,KAAayB,EAAO;AAAA,QACpBxB,KAAYwB,EAAO;AAAA,QACnBnB;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,gBAAgB,kBAAkBF,CAAK,SAAS,GAAGG,EAAA;AAAA,MAC5D,MAAMU,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAehB,IAAW,KAAK,IAAK;AAAA,MAC9C,iBAAeA,KAAY;AAAA,MAC3B,gBAAcF,KAAY;AAAA,MAC1B,SAASE,IAAW,SAAYQ;AAAA,MAChC,WAAWT,IAAYqB,IAAgBX;AAAA,MACtC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAO,KAAgB,QAAQ,gBAAAC,EAAC,QAAA,EAAK,WAAWM,EAAO,UAAW,UAAAP,GAAa;AAAA,SACvEV,KAAY,QAAQX,KAAe,2BAClC,QAAA,EAAK,WAAW4B,EAAO,UACrB,UAAA;AAAA,UAAAjB,KAAY,QAAQ,gBAAAW,EAAC,QAAA,EAAK,WAAWM,EAAO,WAAY,UAAAjB,GAAS;AAAA,UACjEX,KAAe,QAAQ,gBAAAsB,EAAC,UAAK,WAAWM,EAAO,iBAAkB,UAAA5B,EAAA,CAAY;AAAA,QAAA,GAChF;AAAA,QAEDC,KAAY,QAAQ,gBAAAqB,EAAC,UAAK,WAAWM,EAAO,cAAe,UAAA3B,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3E,CAAC,GClGY4B,KAAO/B,EAAmC,SACrD,EAAE,IAAAU,GAAI,KAAAsB,IAAM,GAAG,SAAAC,GAAS,MAAAC,IAAO,QAAQ,MAAAf,GAAM,OAAAC,GAAO,SAAAe,IAAU,IAAO,OAAAvB,GAAO,UAAAC,GAAU,GAAGG,EAAA,GACzFC,GACA;AACA,QAAMI,IAAaX,KAAM,OAEnB0B,IAAMC,EAAQ,OAAO,EAAE,MAAAlB,GAAM,OAAAC,MAAU,CAACD,GAAMC,CAAK,CAAC,GACpDkB,IAAe,OAAOH,KAAY,WAAWA,IAAUA,IAAU,IAAI;AAC3E,SACE,gBAAAX;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,MAAAiB;AAAA,MACA,aAAWC,IAAU,KAAO;AAAA,MAC5B,OACE;AAAA,QACE,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAKI,EAAMP,CAAG;AAAA,QACd,SAASO,EAAMN,CAAO;AAAA,QACtB,GAAGrB;AAAA,MAAA;AAAA,MAGN,GAAGI;AAAA,MAEJ,UAAA,gBAAAQ,EAAChC,EAAY,UAAZ,EAAqB,OAAO4C,GAC1B,UAAAD,IACG,MAAM,KAAK,EAAE,QAAQG,EAAA,GAAgB,CAACE,GAAGC,MACvC,gBAAAjB;AAAA,QAACzB;AAAA,QAAA;AAAA,UAEC,eAAY;AAAA,UACZ,MAAM,gBAAAyB,EAACkB,GAAA,EAAS,SAAQ,UAAS,QAAO,UAAS;AAAA,UACjD,aAAa,gBAAAlB,EAACkB,GAAA,EAAS,OAAOD,IAAI,IAAI,QAAQ,OAAO;AAAA,UAErD,4BAACC,GAAA,EAAS,OAAOD,IAAI,IAAI,QAAQ,MAAA,CAAO;AAAA,QAAA;AAAA,QALnCA;AAAA,MAAA,CAOR,IACD5B,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/{Loader-fffFnQqS.js → Loader-C1uaCtx6.js}

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as _ } from "react";
 import { clsx as d } from "clsx";
-import { a as n } from "./ConfigProvider-DL9fylMo.js";
+import { a as n } from "./ConfigProvider-BbsI15b-.js";
 const c = "_loader_166pp_2", i = "_sm_166pp_18", f = "_md_166pp_24", u = "_lg_166pp_30", s = {
   loader: c,
   "tz-loader-spin": "_tz-loader-spin_166pp_1",
@@ -25,4 +25,4 @@ const c = "_loader_166pp_2", i = "_sm_166pp_18", f = "_md_166pp_24", u = "_lg_16
 export {
   j as L
 };
-//# sourceMappingURL=Loader-fffFnQqS.js.map
+//# sourceMappingURL=Loader-C1uaCtx6.js.map

package/dist/{Loader-fffFnQqS.js.map → Loader-C1uaCtx6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Loader-fffFnQqS.js","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":";;;;;;;;;;GAmBaA,IAASC,EAAyC,SAC7D,EAAE,MAAAC,IAAO,MAAM,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAIC,EAAA;AACV,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,MAAK;AAAA,MACL,cAAYC,EAAE,cAAc;AAAA,MAC3B,GAAGF;AAAA,MACJ,WAAWK,EAAKC,EAAO,QAAQA,EAAOV,CAAI,GAAGE,CAAS;AAAA,MACtD,OAAOD,IAAS,EAAE,OAAO,kBAAkBA,CAAK,KAAK,GAAGE,MAA4BA;AAAA,IAAA;AAAA,EAAA;AAG1F,CAAC;"}
+{"version":3,"file":"Loader-C1uaCtx6.js","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":";;;;;;;;;;GAmBaA,IAASC,EAAyC,SAC7D,EAAE,MAAAC,IAAO,MAAM,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAIC,EAAA;AACV,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,MAAK;AAAA,MACL,cAAYC,EAAE,cAAc;AAAA,MAC3B,GAAGF;AAAA,MACJ,WAAWK,EAAKC,EAAO,QAAQA,EAAOV,CAAI,GAAGE,CAAS;AAAA,MACtD,OAAOD,IAAS,EAAE,OAAO,kBAAkBA,CAAK,KAAK,GAAGE,MAA4BA;AAAA,IAAA;AAAA,EAAA;AAG1F,CAAC;"}

package/dist/{Loader-0Imnbael.cjs → Loader-Cpr9-OOZ.cjs}

@@ -1,2 +1,2 @@
-"use strict";const c=require("react/jsx-runtime"),d=require("react"),_=require("clsx"),p=require("./ConfigProvider-BicoaBLj.cjs"),i="_loader_166pp_2",u="_sm_166pp_18",m="_md_166pp_24",f="_lg_166pp_30",s={loader:i,"tz-loader-spin":"_tz-loader-spin_166pp_1",sm:u,md:m,lg:f},g=d.forwardRef(function({size:o="md",color:e,className:t,style:r,...a},l){const n=p.useT();return c.jsx("span",{ref:l,role:"status","aria-label":n("loader.label"),...a,className:_.clsx(s.loader,s[o],t),style:e?{color:`var(--tz-color-${e})`,...r}:r})});exports.Loader=g;
-//# sourceMappingURL=Loader-0Imnbael.cjs.map
+"use strict";const c=require("react/jsx-runtime"),d=require("react"),_=require("clsx"),p=require("./ConfigProvider-ByLHqXpv.cjs"),i="_loader_166pp_2",u="_sm_166pp_18",m="_md_166pp_24",f="_lg_166pp_30",s={loader:i,"tz-loader-spin":"_tz-loader-spin_166pp_1",sm:u,md:m,lg:f},g=d.forwardRef(function({size:o="md",color:e,className:t,style:r,...a},l){const n=p.useT();return c.jsx("span",{ref:l,role:"status","aria-label":n("loader.label"),...a,className:_.clsx(s.loader,s[o],t),style:e?{color:`var(--tz-color-${e})`,...r}:r})});exports.Loader=g;
+//# sourceMappingURL=Loader-Cpr9-OOZ.cjs.map

package/dist/{Loader-0Imnbael.cjs.map → Loader-Cpr9-OOZ.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Loader-0Imnbael.cjs","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":"gRAmBaA,EAASC,EAAAA,WAAyC,SAC7D,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAO,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAA,EAC3CC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACV,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAH,EACA,KAAK,SACL,aAAYC,EAAE,cAAc,EAC3B,GAAGF,EACJ,UAAWK,EAAAA,KAAKC,EAAO,OAAQA,EAAOV,CAAI,EAAGE,CAAS,EACtD,MAAOD,EAAS,CAAE,MAAO,kBAAkBA,CAAK,IAAK,GAAGE,GAA4BA,CAAA,CAAA,CAG1F,CAAC"}
+{"version":3,"file":"Loader-Cpr9-OOZ.cjs","sources":["../src/components/Loader/Loader.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { clsx } from 'clsx'\nimport { useT, type ThemeColor } from '../../theme'\nimport styles from './Loader.module.css'\n\nexport type LoaderSize = 'sm' | 'md' | 'lg'\n\nexport interface LoaderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Preset size — matches the Icon sizes: `sm` 14px · `md` 18px · `lg` 22px. Defaults to `md`. */\n  size?: LoaderSize\n  /** Theme palette token used to color the spinner. Omit to inherit the surrounding text color (`currentColor`). */\n  color?: ThemeColor\n}\n\n/**\n * A circular spinner. Works standalone as a loading indicator or inside a\n * `Button`, where it inherits the button color via `currentColor` unless an\n * explicit `color` is given.\n */\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { size = 'md', color, className, style, ...props },\n  ref,\n) {\n  const t = useT()\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={t('loader.label')}\n      {...props}\n      className={clsx(styles.loader, styles[size], className)}\n      style={color ? ({ color: `var(--tz-color-${color})`, ...style } as CSSProperties) : style}\n    />\n  )\n})\n"],"names":["Loader","forwardRef","size","color","className","style","props","ref","t","useT","jsx","clsx","styles"],"mappings":"gRAmBaA,EAASC,EAAAA,WAAyC,SAC7D,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAO,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAA,EAC3CC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EACV,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAH,EACA,KAAK,SACL,aAAYC,EAAE,cAAc,EAC3B,GAAGF,EACJ,UAAWK,EAAAA,KAAKC,EAAO,OAAQA,EAAOV,CAAI,EAAGE,CAAS,EACtD,MAAOD,EAAS,CAAE,MAAO,kBAAkBA,CAAK,IAAK,GAAGE,GAA4BA,CAAA,CAAA,CAG1F,CAAC"}

package/dist/Modal-DFeBHv-Q.cjs

@@ -0,0 +1,2 @@
+"use strict";const l=require("react/jsx-runtime"),n=require("react"),T=require("clsx"),W=require("./names-BJnFU_5m.cjs"),$=require("./Icon-BVULqOJD.cjs"),H=require("./IconButton-BNa0yLcv.cjs"),X=require("react-dom"),Y=require("./useLockBodyScroll-CIXHZo-Q.cjs"),Z=require("./ConfigProvider-ByLHqXpv.cjs"),w="_overlay_gwv2a_6",C={overlay:w},K=n.forwardRef(function({open:a,onClose:s,closeOnBackdrop:N=!0,closeOnEscape:E=!0,lockScroll:j=!0,dim:c,className:u,style:o,children:D,onKeyDown:d,onMouseDown:h,onClick:_,...R},M){const S=n.useRef(null),[A,g]=n.useState(!1);Y.useLockBodyScroll(a&&j),n.useEffect(()=>{if(!a){g(!1);return}const t=requestAnimationFrame(()=>g(!0));return()=>cancelAnimationFrame(t)},[a]);const b=t=>{t.key==="Escape"&&(t.stopPropagation(),E&&(s==null||s())),d==null||d(t)},O=t=>{S.current=t.target,h==null||h(t)},x=t=>{N&&t.target===t.currentTarget&&S.current===t.currentTarget&&(s==null||s()),_==null||_(t)};return!a||typeof document>"u"?null:X.createPortal(l.jsx("div",{ref:M,className:T.clsx(C.overlay,u),"data-open":A?"true":"false",style:c!=null?{"--tz-overlay-dim":c,...o}:o,onKeyDown:b,onMouseDown:O,onClick:x,...R,children:D}),document.body)}),ee="_overlay_1lotx_3",te="_modal_1lotx_25",le="_sm_1lotx_48",re="_md_1lotx_51",ne="_lg_1lotx_54",ae="_fullScreen_1lotx_57",se="_header_1lotx_74",ce="_headerDivided_1lotx_83",oe="_headerMain_1lotx_86",ie="_icon_1lotx_93",ue="_headerText_1lotx_96",de="_title_1lotx_103",fe="_subtitle_1lotx_115",_e="_close_1lotx_127",xe="_body_1lotx_132",me="_footer_1lotx_143",r={overlay:ee,modal:te,sm:le,md:re,lg:ne,fullScreen:ae,header:se,headerDivided:ce,headerMain:oe,icon:ie,headerText:ue,title:de,subtitle:fe,close:_e,body:xe,footer:me},he=new Set(W.ICON_NAMES),I='a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])',be=n.forwardRef(function({open:a,onClose:s,size:N="md",scrollBehavior:E="outside",placement:j="center",title:c,description:u,icon:o,color:D="accent",footer:d,bodyClassName:h,showCloseButton:_=!0,closeOnBackdrop:R=!0,closeOnEscape:M=!0,ariaLabel:S,className:A,style:g,children:b,...O},x){const t=Z.useT(),q=n.useRef(null),P=n.useRef(null),k=n.useRef(null),p=n.useId(),z=n.useId();n.useEffect(()=>{var f,y,v;if(!a)return;const e=document.activeElement,i=((f=P.current)==null?void 0:f.querySelector(I))??((y=k.current)==null?void 0:y.querySelector(I))??((v=q.current)==null?void 0:v.querySelector(I))??q.current;return i==null||i.focus({preventScroll:!0}),()=>{var m;e!=null&&e.isConnected&&((m=e.focus)==null||m.call(e))}},[a]);const V=e=>{q.current=e,typeof x=="function"?x(e):x&&(x.current=e)},F=e=>{if(e.key!=="Tab")return;const i=q.current;if(!i)return;const f=[...i.querySelectorAll(I)].filter(L=>L.offsetParent!==null||L===document.activeElement);if(f.length===0){e.preventDefault(),i.focus();return}const y=f[0],v=f[f.length-1],m=document.activeElement;e.shiftKey&&(m===y||m===i)?(e.preventDefault(),v.focus()):!e.shiftKey&&m===v&&(e.preventDefault(),y.focus())};if(!a)return null;const G=j!=="center",B=o==null?null:typeof o=="string"&&he.has(o)?l.jsx($.Icon,{name:o}):o,J=c!=null||u!=null||B!=null||_,Q=b!=null||d!=null;return l.jsx(K,{open:a,onClose:s,closeOnBackdrop:R,closeOnEscape:M,onKeyDown:F,className:r.overlay,"data-size":N,"data-placement":j,"data-scroll":G?"inside":E,children:l.jsxs("div",{ref:V,className:T.clsx(r.modal,r[N],A),role:"dialog","aria-modal":"true","aria-labelledby":c!=null?p:void 0,"aria-label":c==null?S:void 0,"aria-describedby":u!=null?z:void 0,tabIndex:-1,style:g,...O,children:[J&&l.jsxs("div",{className:T.clsx(r.header,Q&&r.headerDivided),children:[l.jsxs("div",{className:r.headerMain,children:[B!=null&&l.jsx(H.IconButton,{variant:"filled",size:"sm",color:D,nonClickable:!0,"aria-hidden":!0,className:r.icon,children:B}),(c!=null||u!=null)&&l.jsxs("div",{className:r.headerText,children:[c!=null&&l.jsx("div",{id:p,className:r.title,children:c}),u!=null&&l.jsx("div",{id:z,className:r.subtitle,children:u})]})]}),_&&l.jsx(H.IconButton,{variant:"filled",color:"primary",size:"sm",className:r.close,"aria-label":t("common.close"),onClick:s,children:l.jsx($.Icon,{name:"Close"})})]}),b!=null&&l.jsx("div",{ref:P,className:T.clsx(r.body,h),children:b}),d!=null&&l.jsx("div",{ref:k,className:r.footer,children:d})]})})});exports.Modal=be;exports.Overlay=K;
+//# sourceMappingURL=Modal-DFeBHv-Q.cjs.map