entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/feedback/LogView/logViewUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logViewUtils.js","sources":["src/components/feedback/LogView/logViewUtils.ts"],"sourcesContent":["import type { LogEntry, ResolvedLogEntry } from './LogView.types';\n\n/** A run of text, flagged as a search match or not. */\nexport interface HighlightSegment {\n  text: string;\n  match: boolean;\n}\n\n/**\n * Split `text` into alternating non-match / match segments for `query`.\n *\n * Pure and allocation-light: an empty (or whitespace-only) query returns a\n * single non-match segment so callers can render uniformly. Matching is\n * case-insensitive unless `caseSensitive` is set. All occurrences are marked.\n *\n * @example\n * getHighlightSegments('abcABC', 'bc')\n * // → [{text:'a',match:false},{text:'bc',match:true},\n * //    {text:'A',match:false},{text:'BC',match:true}]\n */\nexport function getHighlightSegments(\n  text: string,\n  query: string,\n  caseSensitive = false\n): HighlightSegment[] {\n  const needle = query.trim();\n  if (needle === '' || text === '') {\n    return [{ text, match: false }];\n  }\n\n  const haystack = caseSensitive ? text : text.toLowerCase();\n  const term = caseSensitive ? needle : needle.toLowerCase();\n\n  const segments: HighlightSegment[] = [];\n  let cursor = 0;\n  let found = haystack.indexOf(term, cursor);\n\n  if (found === -1) {\n    return [{ text, match: false }];\n  }\n\n  while (found !== -1) {\n    if (found > cursor) {\n      segments.push({ text: text.slice(cursor, found), match: false });\n    }\n    segments.push({\n      text: text.slice(found, found + term.length),\n      match: true,\n    });\n    cursor = found + term.length;\n    found = haystack.indexOf(term, cursor);\n  }\n\n  if (cursor < text.length) {\n    segments.push({ text: text.slice(cursor), match: false });\n  }\n\n  return segments;\n}\n\n/** Pad a number to two digits. */\nfunction pad2(value: number): string {\n  return value < 10 ? `0${value}` : String(value);\n}\n\n/** Pad a number to three digits. */\nfunction pad3(value: number): string {\n  if (value < 10) return `00${value}`;\n  if (value < 100) return `0${value}`;\n  return String(value);\n}\n\n/**\n * Default timestamp formatter: `HH:mm:ss.SSS` in local time. Accepts epoch\n * milliseconds or a `Date`.\n */\nexport function defaultFormatTimestamp(timestamp: number | Date): string {\n  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);\n  if (Number.isNaN(date.getTime())) return '';\n  return `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(\n    date.getSeconds()\n  )}.${pad3(date.getMilliseconds())}`;\n}\n\n/**\n * True when the entry matches the search query. Searches the message and the\n * optional source tag. An empty query always matches.\n */\nexport function entryMatchesQuery(\n  entry: Pick<LogEntry, 'message' | 'source'>,\n  query: string,\n  caseSensitive = false\n): boolean {\n  const needle = query.trim();\n  if (needle === '') return true;\n  const term = caseSensitive ? needle : needle.toLowerCase();\n  const message = caseSensitive ? entry.message : entry.message.toLowerCase();\n  if (message.includes(term)) return true;\n  if (entry.source != null) {\n    const source = caseSensitive ? entry.source : entry.source.toLowerCase();\n    if (source.includes(term)) return true;\n  }\n  return false;\n}\n\n/**\n * Render one resolved entry to a plain-text line for copy/export. Includes the\n * timestamp and source when present, mirroring what the row shows.\n */\nexport function entryToText(\n  entry: ResolvedLogEntry,\n  options: {\n    showTimestamps?: boolean;\n    formatTimestamp?: (timestamp: number | Date) => string;\n  } = {}\n): string {\n  const { showTimestamps = false, formatTimestamp = defaultFormatTimestamp } =\n    options;\n  const parts: string[] = [];\n  if (showTimestamps && entry.timestamp != null) {\n    const formatted = formatTimestamp(entry.timestamp);\n    if (formatted !== '') parts.push(formatted);\n  }\n  parts.push(`[${String(entry.level).toUpperCase()}]`);\n  if (entry.source != null && entry.source !== '') {\n    parts.push(`(${entry.source})`);\n  }\n  parts.push(entry.message);\n  return parts.join(' ');\n}\n\n/**\n * Filter resolved entries by visible levels and a text query.\n *\n * Level rule: an entry is hidden only when its level is a *known* filter level\n * (has a chip) and that level is not active. Entries with an unknown level (no\n * chip) are always visible — toggling chips never hides them.\n */\nexport function filterEntries(\n  entries: readonly ResolvedLogEntry[],\n  options: {\n    query: string;\n    caseSensitive?: boolean;\n    knownLevels: ReadonlySet<string>;\n    activeLevels: ReadonlySet<string>;\n  }\n): ResolvedLogEntry[] {\n  const { query, caseSensitive = false, knownLevels, activeLevels } = options;\n  const hasQuery = query.trim() !== '';\n  return entries.filter(entry => {\n    if (knownLevels.has(entry.level) && !activeLevels.has(entry.level)) {\n      return false;\n    }\n    if (hasQuery && !entryMatchesQuery(entry, query, caseSensitive)) {\n      return false;\n    }\n    return true;\n  });\n}\n\n/** Join resolved entries into a copy/export blob. */\nexport function entriesToText(\n  entries: readonly ResolvedLogEntry[],\n  options?: {\n    showTimestamps?: boolean;\n    formatTimestamp?: (timestamp: number | Date) => string;\n  }\n): string {\n  return entries.map(entry => entryToText(entry, options)).join('\\n');\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/feedback/LogView/useFollowTail.js

@@ -0,0 +1,95 @@
+"use client";
+import { useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+
+/**
+ * Follow-tail behavior for a scrollable log body.
+ *
+ * - While `follow` is on, the viewport snaps to the bottom whenever the entry
+ *   count changes (a genuine scroll-position sync → `useLayoutEffect`).
+ * - A manual scroll **up** detaches (`setFollow(false)`); scrolling back to the
+ *   bottom re-attaches. "At bottom" is read from live scroll metrics, never
+ *   from mirrored state, so it can't drift.
+ * - Programmatic snaps are flagged so they don't read as a manual scroll.
+ *
+ * This logic is intentionally colocated with LogView (single consumer); promote
+ * it to `src/hooks/` only if a second component needs it.
+ */
+function useFollowTail({ scrollRef, follow, setFollow, entryCount, threshold = 8, }) {
+    const followRef = useLatest(follow);
+    const setFollowRef = useLatest(setFollow);
+    const entryCountRef = useLatest(entryCount);
+    const isAutoScrollingRef = useRef(false);
+    const resetRafRef = useRef(0);
+    // Entry count captured at the moment of detach; `null` until the user
+    // actually scrolls away (so a consumer starting with follow=false doesn't
+    // miscount every existing line as "new"). The badge shows entryCount - this.
+    const [detachedAtCount, setDetachedAtCount] = useState(null);
+    const performScrollToBottom = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        isAutoScrollingRef.current = true;
+        el.scrollTop = el.scrollHeight;
+        if (typeof requestAnimationFrame === 'function') {
+            cancelAnimationFrame(resetRafRef.current);
+            resetRafRef.current = requestAnimationFrame(() => {
+                isAutoScrollingRef.current = false;
+            });
+        }
+        else {
+            isAutoScrollingRef.current = false;
+        }
+    }, [scrollRef]);
+    // Snap to bottom on mount and whenever the entry count changes while attached.
+    useLayoutEffect(() => {
+        if (!follow)
+            return;
+        performScrollToBottom();
+    }, [follow, entryCount, performScrollToBottom]);
+    // Detach on manual scroll-up; re-attach on scroll-to-bottom. Listener attaches
+    // once and reads live values through refs.
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const handleScroll = () => {
+            if (isAutoScrollingRef.current)
+                return;
+            const atBottom = el.scrollHeight - el.clientHeight - el.scrollTop <= threshold;
+            if (atBottom) {
+                if (!followRef.current) {
+                    setDetachedAtCount(null);
+                    setFollowRef.current(true);
+                }
+            }
+            else if (followRef.current) {
+                setDetachedAtCount(entryCountRef.current);
+                setFollowRef.current(false);
+            }
+        };
+        el.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            el.removeEventListener('scroll', handleScroll);
+        };
+    }, [scrollRef, threshold, followRef, setFollowRef, entryCountRef]);
+    useEffect(() => {
+        return () => {
+            if (typeof cancelAnimationFrame === 'function') {
+                cancelAnimationFrame(resetRafRef.current);
+            }
+        };
+    }, []);
+    const scrollToBottom = useCallback(() => {
+        performScrollToBottom();
+        setDetachedAtCount(null);
+        setFollowRef.current(true);
+    }, [performScrollToBottom, setFollowRef]);
+    const newSinceDetach = follow || detachedAtCount === null
+        ? 0
+        : Math.max(0, entryCount - detachedAtCount);
+    return { scrollToBottom, isDetached: !follow, newSinceDetach };
+}
+
+export { useFollowTail };
+//# sourceMappingURL=useFollowTail.js.map

package/dist/esm/components/feedback/LogView/useFollowTail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFollowTail.js","sources":["src/components/feedback/LogView/useFollowTail.ts"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useLatest } from '@/hooks/useLatest';\n\nimport type { RefObject } from 'react';\n\nexport interface UseFollowTailOptions {\n  /** The scroll viewport element. */\n  scrollRef: RefObject<HTMLElement | null>;\n  /** Whether to stick to the bottom as new entries arrive. */\n  follow: boolean;\n  /** Attach/detach follow. */\n  setFollow: (follow: boolean) => void;\n  /** Current number of (visible) entries — drives snap-on-append and the new-line badge. */\n  entryCount: number;\n  /** Distance from the bottom (px) still considered \"at bottom\". @default 8 */\n  threshold?: number;\n}\n\nexport interface UseFollowTailResult {\n  /** Scroll to the latest line and re-attach follow. */\n  scrollToBottom: () => void;\n  /** True when the user has scrolled up and detached from the tail. */\n  isDetached: boolean;\n  /** Entries appended since the user detached (0 while following). */\n  newSinceDetach: number;\n}\n\n/**\n * Follow-tail behavior for a scrollable log body.\n *\n * - While `follow` is on, the viewport snaps to the bottom whenever the entry\n *   count changes (a genuine scroll-position sync → `useLayoutEffect`).\n * - A manual scroll **up** detaches (`setFollow(false)`); scrolling back to the\n *   bottom re-attaches. \"At bottom\" is read from live scroll metrics, never\n *   from mirrored state, so it can't drift.\n * - Programmatic snaps are flagged so they don't read as a manual scroll.\n *\n * This logic is intentionally colocated with LogView (single consumer); promote\n * it to `src/hooks/` only if a second component needs it.\n */\nexport function useFollowTail({\n  scrollRef,\n  follow,\n  setFollow,\n  entryCount,\n  threshold = 8,\n}: UseFollowTailOptions): UseFollowTailResult {\n  const followRef = useLatest(follow);\n  const setFollowRef = useLatest(setFollow);\n  const entryCountRef = useLatest(entryCount);\n\n  const isAutoScrollingRef = useRef(false);\n  const resetRafRef = useRef(0);\n\n  // Entry count captured at the moment of detach; `null` until the user\n  // actually scrolls away (so a consumer starting with follow=false doesn't\n  // miscount every existing line as \"new\"). The badge shows entryCount - this.\n  const [detachedAtCount, setDetachedAtCount] = useState<number | null>(null);\n\n  const performScrollToBottom = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    isAutoScrollingRef.current = true;\n    el.scrollTop = el.scrollHeight;\n    if (typeof requestAnimationFrame === 'function') {\n      cancelAnimationFrame(resetRafRef.current);\n      resetRafRef.current = requestAnimationFrame(() => {\n        isAutoScrollingRef.current = false;\n      });\n    } else {\n      isAutoScrollingRef.current = false;\n    }\n  }, [scrollRef]);\n\n  // Snap to bottom on mount and whenever the entry count changes while attached.\n  useLayoutEffect(() => {\n    if (!follow) return;\n    performScrollToBottom();\n  }, [follow, entryCount, performScrollToBottom]);\n\n  // Detach on manual scroll-up; re-attach on scroll-to-bottom. Listener attaches\n  // once and reads live values through refs.\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const handleScroll = (): void => {\n      if (isAutoScrollingRef.current) return;\n      const atBottom =\n        el.scrollHeight - el.clientHeight - el.scrollTop <= threshold;\n      if (atBottom) {\n        if (!followRef.current) {\n          setDetachedAtCount(null);\n          setFollowRef.current(true);\n        }\n      } else if (followRef.current) {\n        setDetachedAtCount(entryCountRef.current);\n        setFollowRef.current(false);\n      }\n    };\n\n    el.addEventListener('scroll', handleScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', handleScroll);\n    };\n  }, [scrollRef, threshold, followRef, setFollowRef, entryCountRef]);\n\n  useEffect(() => {\n    return () => {\n      if (typeof cancelAnimationFrame === 'function') {\n        cancelAnimationFrame(resetRafRef.current);\n      }\n    };\n  }, []);\n\n  const scrollToBottom = useCallback(() => {\n    performScrollToBottom();\n    setDetachedAtCount(null);\n    setFollowRef.current(true);\n  }, [performScrollToBottom, setFollowRef]);\n\n  const newSinceDetach =\n    follow || detachedAtCount === null\n      ? 0\n      : Math.max(0, entryCount - detachedAtCount);\n\n  return { scrollToBottom, isDetached: !follow, newSinceDetach };\n}\n"],"names":[],"mappings":";;;;AAoCA;;;;;;;;;;;;AAYG;AACG;AAOJ;AACA;AACA;AAEA;AACA;;;;;AAOA;AACE;AACA;;AACA;AACA;AACA;AACE;AACA;AACE;AACF;;;AAEA;;AAEJ;;;AAIE;;AACA;;;;;AAMA;AACA;;;;;AAIE;;AAGE;;AAEE;;;AAEG;AACL;AACA;;AAEJ;AAEA;AACA;AACE;AACF;AACF;;AAGE;AACE;AACE;;AAEJ;;AAGF;AACE;;AAEA;AACF;AAEA;AAEI;;;AAIN;;"}

package/dist/esm/components/feedback/LogView/useLogSelection.js

@@ -0,0 +1,113 @@
+"use client";
+import { useRef, useCallback } from 'react';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+
+/**
+ * Row selection + keyboard behavior for the LogView body.
+ *
+ * - Click selects (single), Cmd/Ctrl+click toggles, Shift+click extends a range
+ *   from the anchor (multiple).
+ * - Enter/Space activate the focused row; Cmd/Ctrl+C copies the selection (when
+ *   present and no text is selected); Cmd/Ctrl+A selects all visible; Escape
+ *   clears.
+ * - A drag-to-select-text gesture is never treated as a row click.
+ *
+ * Consumer values are read through `useLatest` so the returned handlers stay
+ * identity-stable (they never have to be memoized by the caller). Colocated
+ * with LogView (single consumer); promote to `src/hooks/` only if a second
+ * component needs it.
+ */
+function useLogSelection({ selectionMode, selectedIds, setSelectedIds, filtered, onEntryClick, isTextSelected, onCopyShortcut, }) {
+    const anchorRef = useRef(null);
+    const filteredRef = useLatest(filtered);
+    const selectedIdsRef = useLatest(selectedIds);
+    const onEntryClickRef = useLatest(onEntryClick);
+    const isTextSelectedRef = useLatest(isTextSelected);
+    const onCopyShortcutRef = useLatest(onCopyShortcut);
+    const handleRowClick = useCallback((entry, index, event) => {
+        // Don't treat a drag-to-select-text gesture as a row click.
+        if (isTextSelectedRef.current())
+            return;
+        onEntryClickRef.current?.(entry, index);
+        if (selectionMode === false)
+            return;
+        const { id } = entry;
+        if (selectionMode === 'single') {
+            anchorRef.current = index;
+            setSelectedIds(new Set([id]));
+            return;
+        }
+        if (event.shiftKey && anchorRef.current !== null) {
+            const list = filteredRef.current;
+            const from = Math.min(anchorRef.current, index);
+            const to = Math.max(anchorRef.current, index);
+            const range = new Set();
+            for (let i = from; i <= to; i += 1) {
+                const rangeEntry = list[i];
+                if (rangeEntry)
+                    range.add(rangeEntry.id);
+            }
+            setSelectedIds(range);
+        }
+        else if (event.metaKey || event.ctrlKey) {
+            const next = new Set(selectedIdsRef.current);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            anchorRef.current = index;
+            setSelectedIds(next);
+        }
+        else {
+            anchorRef.current = index;
+            setSelectedIds(new Set([id]));
+        }
+    }, [
+        selectionMode,
+        setSelectedIds,
+        filteredRef,
+        selectedIdsRef,
+        onEntryClickRef,
+        isTextSelectedRef,
+    ]);
+    const handleRowKeyDown = useCallback((entry, index, event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleRowClick(entry, index, event);
+            return;
+        }
+        const meta = event.metaKey || event.ctrlKey;
+        if (meta && (event.key === 'c' || event.key === 'C')) {
+            // Let the browser copy an active text selection instead.
+            if (isTextSelectedRef.current() || selectedIdsRef.current.size === 0) {
+                return;
+            }
+            event.preventDefault();
+            onCopyShortcutRef.current();
+            return;
+        }
+        if (selectionMode === false)
+            return;
+        if (meta && (event.key === 'a' || event.key === 'A')) {
+            event.preventDefault();
+            setSelectedIds(new Set(filteredRef.current.map(item => item.id)));
+            return;
+        }
+        if (event.key === 'Escape' && selectedIdsRef.current.size > 0) {
+            event.preventDefault();
+            setSelectedIds(new Set());
+        }
+    }, [
+        handleRowClick,
+        selectionMode,
+        setSelectedIds,
+        filteredRef,
+        selectedIdsRef,
+        isTextSelectedRef,
+        onCopyShortcutRef,
+    ]);
+    return { handleRowClick, handleRowKeyDown };
+}
+
+export { useLogSelection };
+//# sourceMappingURL=useLogSelection.js.map

package/dist/esm/components/feedback/LogView/useLogSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLogSelection.js","sources":["src/components/feedback/LogView/useLogSelection.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useRef } from 'react';\n\nimport { useLatest } from '@/hooks/useLatest';\n\nimport type { LogViewSelectionMode, ResolvedLogEntry } from './LogView.types';\nimport type React from 'react';\n\nexport interface UseLogSelectionOptions {\n  /** Active selection mode. */\n  selectionMode: LogViewSelectionMode;\n  /** Currently-selected entry ids. */\n  selectedIds: ReadonlySet<string>;\n  /** Replace the selection. */\n  setSelectedIds: (ids: ReadonlySet<string>) => void;\n  /** The currently-filtered entries (for range selection and select-all). */\n  filtered: readonly ResolvedLogEntry[];\n  /** Fired on row activation regardless of selection mode. */\n  onEntryClick: ((entry: ResolvedLogEntry, index: number) => void) | undefined;\n  /** True when the user has an active text selection inside the log body. */\n  isTextSelected: () => boolean;\n  /** Invoked on Cmd/Ctrl+C while a row selection exists. */\n  onCopyShortcut: () => void;\n}\n\nexport interface UseLogSelectionResult {\n  /** Click handler for a row (also reused for Enter/Space activation). */\n  handleRowClick: (\n    entry: ResolvedLogEntry,\n    index: number,\n    event: React.MouseEvent | React.KeyboardEvent\n  ) => void;\n  /** Keydown handler for a row: activation, copy, select-all, clear. */\n  handleRowKeyDown: (\n    entry: ResolvedLogEntry,\n    index: number,\n    event: React.KeyboardEvent<HTMLDivElement>\n  ) => void;\n}\n\n/**\n * Row selection + keyboard behavior for the LogView body.\n *\n * - Click selects (single), Cmd/Ctrl+click toggles, Shift+click extends a range\n *   from the anchor (multiple).\n * - Enter/Space activate the focused row; Cmd/Ctrl+C copies the selection (when\n *   present and no text is selected); Cmd/Ctrl+A selects all visible; Escape\n *   clears.\n * - A drag-to-select-text gesture is never treated as a row click.\n *\n * Consumer values are read through `useLatest` so the returned handlers stay\n * identity-stable (they never have to be memoized by the caller). Colocated\n * with LogView (single consumer); promote to `src/hooks/` only if a second\n * component needs it.\n */\nexport function useLogSelection({\n  selectionMode,\n  selectedIds,\n  setSelectedIds,\n  filtered,\n  onEntryClick,\n  isTextSelected,\n  onCopyShortcut,\n}: UseLogSelectionOptions): UseLogSelectionResult {\n  const anchorRef = useRef<number | null>(null);\n  const filteredRef = useLatest(filtered);\n  const selectedIdsRef = useLatest(selectedIds);\n  const onEntryClickRef = useLatest(onEntryClick);\n  const isTextSelectedRef = useLatest(isTextSelected);\n  const onCopyShortcutRef = useLatest(onCopyShortcut);\n\n  const handleRowClick = useCallback(\n    (\n      entry: ResolvedLogEntry,\n      index: number,\n      event: React.MouseEvent | React.KeyboardEvent\n    ) => {\n      // Don't treat a drag-to-select-text gesture as a row click.\n      if (isTextSelectedRef.current()) return;\n      onEntryClickRef.current?.(entry, index);\n      if (selectionMode === false) return;\n\n      const { id } = entry;\n      if (selectionMode === 'single') {\n        anchorRef.current = index;\n        setSelectedIds(new Set([id]));\n        return;\n      }\n\n      if (event.shiftKey && anchorRef.current !== null) {\n        const list = filteredRef.current;\n        const from = Math.min(anchorRef.current, index);\n        const to = Math.max(anchorRef.current, index);\n        const range = new Set<string>();\n        for (let i = from; i <= to; i += 1) {\n          const rangeEntry = list[i];\n          if (rangeEntry) range.add(rangeEntry.id);\n        }\n        setSelectedIds(range);\n      } else if (event.metaKey || event.ctrlKey) {\n        const next = new Set(selectedIdsRef.current);\n        if (next.has(id)) next.delete(id);\n        else next.add(id);\n        anchorRef.current = index;\n        setSelectedIds(next);\n      } else {\n        anchorRef.current = index;\n        setSelectedIds(new Set([id]));\n      }\n    },\n    [\n      selectionMode,\n      setSelectedIds,\n      filteredRef,\n      selectedIdsRef,\n      onEntryClickRef,\n      isTextSelectedRef,\n    ]\n  );\n\n  const handleRowKeyDown = useCallback(\n    (\n      entry: ResolvedLogEntry,\n      index: number,\n      event: React.KeyboardEvent<HTMLDivElement>\n    ) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleRowClick(entry, index, event);\n        return;\n      }\n      const meta = event.metaKey || event.ctrlKey;\n      if (meta && (event.key === 'c' || event.key === 'C')) {\n        // Let the browser copy an active text selection instead.\n        if (isTextSelectedRef.current() || selectedIdsRef.current.size === 0) {\n          return;\n        }\n        event.preventDefault();\n        onCopyShortcutRef.current();\n        return;\n      }\n      if (selectionMode === false) return;\n      if (meta && (event.key === 'a' || event.key === 'A')) {\n        event.preventDefault();\n        setSelectedIds(new Set(filteredRef.current.map(item => item.id)));\n        return;\n      }\n      if (event.key === 'Escape' && selectedIdsRef.current.size > 0) {\n        event.preventDefault();\n        setSelectedIds(new Set());\n      }\n    },\n    [\n      handleRowClick,\n      selectionMode,\n      setSelectedIds,\n      filteredRef,\n      selectedIdsRef,\n      isTextSelectedRef,\n      onCopyShortcutRef,\n    ]\n  );\n\n  return { handleRowClick, handleRowKeyDown };\n}\n"],"names":[],"mappings":";;;;AAyCA;;;;;;;;;;;;;;AAcG;;AAUD;AACA;AACA;AACA;AACA;AACA;;;;;;;;AAaI;AACA;AACE;;;;;AAMA;AACA;AACA;AACA;AACA;AACE;AACA;AAAgB;;;;;;AAKlB;AAAkB;;AACb;AACL;;;;AAGA;;;AAGJ;;;;;;;AAQC;;AASC;;AAEE;;;;AAIF;;AAEE;;;;;;;;;AAQF;;;;;AAKA;;AAEE;;AAEJ;;;;;;;;AASC;AAGH;AACF;;"}

package/dist/esm/components/feedback/ProgressBar/CircularProgress.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React from 'react';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
 import { progressColorVar, circularSvgStyle, circularTrackCircleStyle, circularIndeterminateStyle, circularFillCircleStyle, circularLabelStyle, circularRootStyle } from './ProgressBar.css.js';

package/dist/esm/components/feedback/ProgressBar/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sources":["../../../../../../src/components/feedback/ProgressBar/CircularProgress.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAqBA;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;AACE;AACF;AAEA;;AACmB;AACjB;AACF;AAEA;;AAImC;;AACF;;AACA;AAC/B;AACF;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAkBH;AACA;;AAEA;AACA;;;;;;;;;AAUC;;AAGD;AACA;AAEA;AACE;AACA;AACA;;;AAGA;;AAEA;AACE;;;;AAUE;AACA;AACA;AACA;;AAqCM;AACA;AAcd;AAGF;;"}
+{"version":3,"file":"CircularProgress.js","sources":["src/components/feedback/ProgressBar/CircularProgress.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  circularFillCircleStyle,\n  circularIndeterminateStyle,\n  circularLabelStyle,\n  circularRootStyle,\n  circularSvgStyle,\n  circularTrackCircleStyle,\n  progressColorVar,\n} from './ProgressBar.css';\n\nimport type {\n  CircularProgressProps,\n  CircularProgressSize,\n  ProgressBarColor,\n} from './ProgressBar.types';\n\nconst SIZE_MAP: Record<CircularProgressSize, number> = {\n  xs: 16,\n  sm: 20,\n  md: 24,\n  lg: 32,\n  xl: 48,\n};\n\nconst DEFAULT_THICKNESS: Record<CircularProgressSize, number> = {\n  xs: 1.5,\n  sm: 2,\n  md: 2,\n  lg: 2.5,\n  xl: 3,\n};\n\nconst LABEL_FONT_SIZE: Record<CircularProgressSize, string> = {\n  xs: vars.typography.fontSize.xxs,\n  sm: vars.typography.fontSize.xxs,\n  md: vars.typography.fontSize.xs,\n  lg: vars.typography.fontSize.xs,\n  xl: vars.typography.fontSize.sm,\n};\n\nconst NAMED_COLOR_MAP: Record<string, string> = {\n  primary: vars.colors.accent.primary,\n  success: vars.colors.accent.success,\n  warning: vars.colors.accent.warning,\n  error: vars.colors.accent.error,\n};\n\nfunction resolveColor(color: ProgressBarColor): string {\n  return NAMED_COLOR_MAP[color] ?? color;\n}\n\nfunction clampValue(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(value, max));\n}\n\nfunction toPercent(clamped: number, min: number, max: number): number {\n  if (max === min) return 0;\n  return ((clamped - min) / (max - min)) * 100;\n}\n\nfunction deriveValueText(\n  ariaValueText: string | undefined,\n  label: React.ReactNode\n): string | undefined {\n  if (ariaValueText !== undefined) return ariaValueText;\n  if (typeof label === 'string') return label;\n  if (typeof label === 'number') return String(label);\n  return undefined;\n}\n\n/**\n * Circular progress indicator.\n *\n * Determinate when `value` is provided; indeterminate (rotating arc) when\n * `value` is `undefined`. Renders an SVG with two stacked circles — track\n * and fill — using `stroke-dasharray` to draw the progress arc. Honors\n * `prefers-reduced-motion`.\n *\n * @example\n * ```tsx\n * <CircularProgress value={75} />\n * <CircularProgress size=\"xl\" value={42} showLabel />\n * <CircularProgress /> // indeterminate\n * ```\n */\nexport const CircularProgress = /*#__PURE__*/ React.memo<CircularProgressProps>(\n  ({\n    value,\n    min = 0,\n    max = 100,\n    size = 'md',\n    thickness,\n    color = 'primary',\n    showLabel = false,\n    label,\n    ariaLabel,\n    ariaValueText,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const indeterminate = value === undefined;\n    const clampedValue = indeterminate ? 0 : clampValue(value, min, max);\n    const percent = toPercent(clampedValue, min, max);\n    const resolvedColor = resolveColor(color);\n    const diameter = SIZE_MAP[size];\n    const stroke = thickness ?? DEFAULT_THICKNESS[size];\n    const radius = (diameter - stroke) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const dashOffset = indeterminate\n      ? circumference * 0.75\n      : circumference * (1 - percent / 100);\n\n    const inlineVars = assignInlineVars({\n      [progressColorVar]: resolvedColor,\n    });\n\n    const percentText = `${Math.round(percent)}%`;\n    const labelContent = label ?? (indeterminate ? null : percentText);\n    const showLabelText = showLabel && labelContent !== null;\n\n    const ariaProps: React.AriaAttributes = {\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-label': ariaLabel ?? (indeterminate ? 'Loading' : undefined),\n    };\n    if (!indeterminate) {\n      ariaProps['aria-valuenow'] = clampedValue;\n      const valueText = deriveValueText(ariaValueText, label);\n      if (valueText !== undefined) {\n        ariaProps['aria-valuetext'] = valueText;\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        className={cx(circularRootStyle, className)}\n        style={{\n          ...inlineVars,\n          width: diameter,\n          height: diameter,\n          ...style,\n        }}\n        data-testid={testId}\n        data-indeterminate={indeterminate ? 'true' : undefined}\n        {...ariaProps}\n        {...rest}\n      >\n        <svg\n          className={circularSvgStyle}\n          width={diameter}\n          height={diameter}\n          viewBox={`0 0 ${diameter} ${diameter}`}\n          aria-hidden\n        >\n          <circle\n            className={circularTrackCircleStyle}\n            cx={diameter / 2}\n            cy={diameter / 2}\n            r={radius}\n            fill=\"none\"\n            strokeWidth={stroke}\n          />\n          <circle\n            className={cx(\n              circularFillCircleStyle,\n              indeterminate && circularIndeterminateStyle\n            )}\n            cx={diameter / 2}\n            cy={diameter / 2}\n            r={radius}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={dashOffset}\n            transform={\n              indeterminate\n                ? undefined\n                : `rotate(-90 ${diameter / 2} ${diameter / 2})`\n            }\n          />\n        </svg>\n        {showLabelText ? (\n          <span\n            className={circularLabelStyle}\n            style={{ fontSize: LABEL_FONT_SIZE[size] }}\n          >\n            {labelContent}\n          </span>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nCircularProgress.displayName = 'CircularProgress';\n"],"names":[],"mappings":";;;;;;;;AAwBA;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;AACE;AACF;AAEA;;AACmB;AACjB;AACF;AAEA;;AAImC;;AACF;;AACA;AAC/B;AACF;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAkBH;AACA;;AAEA;AACA;;;;;;;;;AAUC;;AAGD;AACA;AAEA;AACE;AACA;AACA;;;AAGA;;AAEA;AACE;;;;AAUE;AACA;AACA;AACA;;AAqCM;AACA;AAcd;AAGF;;"}

package/dist/esm/components/feedback/ProgressBar/ProgressBar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React from 'react';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
 import { progressFillWidthVar, progressColorVar, progressFillStripedAnimatedStyle, progressFillStripedStyle, progressFillBaseStyle, progressIndeterminateStyle, progressOverlayLabelStyle, progressTrackRecipe, progressInlineLabelStyle, progressRootStyle } from './ProgressBar.css.js';

package/dist/esm/components/feedback/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/feedback/ProgressBar/ProgressBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAoBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;AACE;AACF;AAEA;;AACmB;AACjB;AACF;AAEA;;AAImC;;AACF;;AACA;AAC/B;AACF;AAEA;;;;;;;;;;;;;;;AAeG;AACI;AAmBH;AACA;;AAEA;;;AAIE;AACD;AAED;;AAOA;AAEA;AACE;AACA;AACA;;;AAGA;;AAEA;AACE;;;AAIJ;AA0BF;AAGF;;"}
+{"version":3,"file":"ProgressBar.js","sources":["src/components/feedback/ProgressBar/ProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  progressColorVar,\n  progressFillBaseStyle,\n  progressFillStripedAnimatedStyle,\n  progressFillStripedStyle,\n  progressFillWidthVar,\n  progressIndeterminateStyle,\n  progressInlineLabelStyle,\n  progressOverlayLabelStyle,\n  progressRootStyle,\n  progressTrackRecipe,\n} from './ProgressBar.css';\n\nimport type { ProgressBarColor, ProgressBarProps } from './ProgressBar.types';\n\nconst NAMED_COLOR_MAP: Record<string, string> = {\n  primary: vars.colors.accent.primary,\n  success: vars.colors.accent.success,\n  warning: vars.colors.accent.warning,\n  error: vars.colors.accent.error,\n};\n\nfunction resolveColor(color: ProgressBarColor): string {\n  return NAMED_COLOR_MAP[color] ?? color;\n}\n\nfunction clampValue(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(value, max));\n}\n\nfunction toPercent(clamped: number, min: number, max: number): number {\n  if (max === min) return 0;\n  return ((clamped - min) / (max - min)) * 100;\n}\n\nfunction deriveValueText(\n  ariaValueText: string | undefined,\n  label: React.ReactNode\n): string | undefined {\n  if (ariaValueText !== undefined) return ariaValueText;\n  if (typeof label === 'string') return label;\n  if (typeof label === 'number') return String(label);\n  return undefined;\n}\n\n/**\n * Linear progress indicator.\n *\n * Determinate when `value` is provided; indeterminate (animated sliding bar)\n * when `value` is `undefined`. Supports inline / overlay / custom labels,\n * striped texture (optionally animated), and arbitrary CSS colors. Honors\n * `prefers-reduced-motion`.\n *\n * @example\n * ```tsx\n * <ProgressBar value={60} />\n * <ProgressBar value={50} showLabel=\"inline\" />\n * <ProgressBar size=\"lg\" value={75} striped animated />\n * <ProgressBar /> // indeterminate\n * ```\n */\nexport const ProgressBar = /*#__PURE__*/ React.memo<ProgressBarProps>(\n  ({\n    value,\n    min = 0,\n    max = 100,\n    size = 'md',\n    color = 'primary',\n    showLabel = false,\n    label,\n    striped = false,\n    animated = false,\n    ariaLabel,\n    ariaValueText,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const indeterminate = value === undefined;\n    const clampedValue = indeterminate ? 0 : clampValue(value, min, max);\n    const percent = toPercent(clampedValue, min, max);\n    const resolvedColor = resolveColor(color);\n\n    const inlineVars = assignInlineVars({\n      [progressColorVar]: resolvedColor,\n      [progressFillWidthVar]: `${percent}%`,\n    });\n\n    const fillClassName = cx(\n      progressFillBaseStyle,\n      striped && progressFillStripedStyle,\n      striped && animated && progressFillStripedAnimatedStyle\n    );\n\n    const percentText = `${Math.round(percent)}%`;\n    const labelContent = label ?? (indeterminate ? null : percentText);\n\n    const ariaProps: React.AriaAttributes = {\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-label': ariaLabel ?? (indeterminate ? 'Loading' : undefined),\n    };\n    if (!indeterminate) {\n      ariaProps['aria-valuenow'] = clampedValue;\n      const valueText = deriveValueText(ariaValueText, label);\n      if (valueText !== undefined) {\n        ariaProps['aria-valuetext'] = valueText;\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        className={cx(progressRootStyle, className)}\n        style={{ ...inlineVars, ...style }}\n        data-testid={testId}\n        data-indeterminate={indeterminate ? 'true' : undefined}\n        {...ariaProps}\n        {...rest}\n      >\n        <div className={progressTrackRecipe({ size })}>\n          {indeterminate ? (\n            <div className={progressIndeterminateStyle} aria-hidden />\n          ) : (\n            <div className={fillClassName} aria-hidden />\n          )}\n          {showLabel === 'overlay' && labelContent !== null ? (\n            <span className={progressOverlayLabelStyle}>{labelContent}</span>\n          ) : null}\n        </div>\n        {showLabel === 'inline' && labelContent !== null ? (\n          <span className={progressInlineLabelStyle}>{labelContent}</span>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":[],"mappings":";;;;;;;;AAuBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;AACE;AACF;AAEA;;AACmB;AACjB;AACF;AAEA;;AAImC;;AACF;;AACA;AAC/B;AACF;AAEA;;;;;;;;;;;;;;;AAeG;AACI;AAmBH;AACA;;AAEA;;;AAIE;AACD;AAED;;AAOA;AAEA;AACE;AACA;AACA;;;AAGA;;AAEA;AACE;;;AAIJ;AA0BF;AAGF;;"}

package/dist/esm/components/feedback/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React from 'react';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
 import { devWarn } from '../../../utils/devWarn.js';

package/dist/esm/components/feedback/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAeA;AAEA;AACE;AACA;AACA;;AAGF;;AAG2B;AACzB;AACF;AAEA;;AAQE;AACA;AACE;;;AAEO;;;;;;;;;AAWP;AACA;AACA;;AAEJ;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAeD;AACA;;AAGA;;;;;;;AAiBD;;AAeH;AAGF;;"}
+{"version":3,"file":"Skeleton.js","sources":["src/components/feedback/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\nimport { devWarn } from '@/utils/devWarn';\n\nimport {\n  skeletonHeightVar,\n  skeletonRadiusVar,\n  skeletonRecipe,\n  skeletonWidthVar,\n} from './Skeleton.css';\n\nimport type { SkeletonProps, SkeletonShape } from './Skeleton.types';\n\nconst LINE_DEFAULT_HEIGHT = '12px';\n\nconst SHAPE_RADIUS_FALLBACK: Record<SkeletonShape, string> = {\n  rect: vars.borderRadius.sm,\n  line: vars.borderRadius.lg,\n  circle: '50%',\n};\n\nfunction resolveDimension(\n  value: number | string | undefined\n): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nfunction resolveDefaults(\n  shape: SkeletonShape,\n  width: number | string | undefined,\n  height: number | string | undefined,\n  borderRadius: number | string | undefined\n): { width: string; height: string; radius: string } {\n  const resolvedWidth = resolveDimension(width) ?? '100%';\n\n  let resolvedHeight = resolveDimension(height);\n  if (resolvedHeight === undefined) {\n    if (shape === 'line') {\n      resolvedHeight = LINE_DEFAULT_HEIGHT;\n    } else if (shape === 'circle') {\n      resolvedHeight = resolvedWidth;\n    } else {\n      resolvedHeight = '100%';\n    }\n  }\n\n  const resolvedRadius =\n    resolveDimension(borderRadius) ?? SHAPE_RADIUS_FALLBACK[shape];\n\n  return {\n    width: resolvedWidth,\n    height: resolvedHeight,\n    radius: resolvedRadius,\n  };\n}\n\n/**\n * Loading-placeholder block.\n *\n * Renders a rectangle, circle, or line shape with a configurable animation\n * (`pulse`, `wave`, `none`). Use it while waiting for real content to load.\n *\n * Skeletons are decorative — they set `aria-hidden=\"true\"` and `aria-busy=\"true\"`\n * but do not announce themselves. The surrounding region should announce\n * the loading state (e.g. via `Spinner` or `EmptyState loading`).\n *\n * @example\n * ```tsx\n * <Skeleton width={120} height={16} />\n * <Skeleton shape=\"circle\" width={32} />\n * <Skeleton shape=\"line\" width=\"60%\" />\n * <Skeleton animation=\"wave\" height={80} />\n * ```\n */\nexport const Skeleton = /*#__PURE__*/ React.memo<SkeletonProps>(\n  ({\n    shape = 'rect',\n    width,\n    height,\n    borderRadius,\n    animation = 'pulse',\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    if (\n      shape === 'circle' &&\n      width !== undefined &&\n      height !== undefined &&\n      width !== height\n    ) {\n      devWarn(\n        '[Skeleton] shape=\"circle\" expects equal width and height; received width=%o, height=%o.',\n        width,\n        height\n      );\n    }\n\n    const {\n      width: w,\n      height: h,\n      radius,\n    } = resolveDefaults(shape, width, height, borderRadius);\n\n    const inlineVars = assignInlineVars({\n      [skeletonWidthVar]: w,\n      [skeletonHeightVar]: h,\n      [skeletonRadiusVar]: radius,\n    });\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        aria-busy=\"true\"\n        className={cx(skeletonRecipe({ shape, animation }), className)}\n        style={{ ...inlineVars, ...style }}\n        data-testid={testId}\n        data-shape={shape}\n        data-animation={animation}\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AAEA;AACE;AACA;AACA;;AAGF;;AAG2B;AACzB;AACF;AAEA;;AAQE;AACA;AACE;;;AAEO;;;;;;;;;AAWP;AACA;AACA;;AAEJ;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAeD;AACA;;AAGA;;;;;;;AAiBD;;AAeH;AAGF;;"}

package/dist/esm/components/feedback/Skeleton/SkeletonGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React from 'react';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
 import { Skeleton } from './Skeleton.js';

package/dist/esm/components/feedback/Skeleton/SkeletonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonGroup.js","sources":["../../../../../../src/components/feedback/Skeleton/SkeletonGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAUA;;;;;;;;;;AAWA;;AACiC;;;;AAIjC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;;AAcD;AACD;;AAIC;AAIF;AAaF;AAGF;;"}
+{"version":3,"file":"SkeletonGroup.js","sources":["src/components/feedback/Skeleton/SkeletonGroup.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport { Skeleton } from './Skeleton';\nimport { skeletonGroupGapVar, skeletonGroupRecipe } from './Skeleton.css';\n\nimport type { SkeletonGroupProps } from './Skeleton.types';\n\nconst SPACING_SCALE: readonly string[] = [\n  '0',\n  vars.spacing.xs,\n  vars.spacing.sm,\n  vars.spacing.md,\n  vars.spacing.lg,\n  vars.spacing.xl,\n  vars.spacing.xxl,\n  vars.spacing.xxxl,\n];\n\nfunction resolveSpacing(value: number | string): string {\n  if (typeof value === 'string') return value;\n  const clamped = Math.max(0, Math.min(SPACING_SCALE.length - 1, value));\n  const index = Math.floor(clamped);\n  return SPACING_SCALE[index] ?? vars.spacing.sm;\n}\n\n/**\n * Lays out one or more `Skeleton` items consistently — handy for \"show\n * five skeleton rows then real data\" patterns.\n *\n * Pass `count` to auto-generate that many skeletons (using `itemProps` to\n * configure them), or pass `children` to lay out custom skeleton shapes\n * yourself. `direction` and `spacing` control the flex container.\n *\n * @example\n * ```tsx\n * // Five lines stacked vertically\n * <SkeletonGroup count={5} itemProps={{ shape: 'line' }} />\n *\n * // Custom composition\n * <SkeletonGroup direction=\"row\" spacing={3}>\n *   <Skeleton shape=\"circle\" width={32} />\n *   <Skeleton shape=\"line\" width={120} />\n * </SkeletonGroup>\n * ```\n */\nexport const SkeletonGroup = /*#__PURE__*/ React.memo<SkeletonGroupProps>(\n  ({\n    count,\n    spacing = 2,\n    direction = 'column',\n    itemProps,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const inlineVars = assignInlineVars({\n      [skeletonGroupGapVar]: resolveSpacing(spacing),\n    });\n\n    const content =\n      children ??\n      Array.from({ length: count ?? 0 }, (_, i) => (\n        <Skeleton key={i} {...itemProps} />\n      ));\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        aria-busy=\"true\"\n        className={cx(skeletonGroupRecipe({ direction }), className)}\n        style={{ ...inlineVars, ...style }}\n        data-testid={testId}\n        {...rest}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nSkeletonGroup.displayName = 'SkeletonGroup';\n"],"names":[],"mappings":";;;;;;;;;AAaA;;;;;;;;;;AAWA;;AACiC;;;;AAIjC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;;AAcD;AACD;;AAIC;AAIF;AAaF;AAGF;;"}

package/dist/esm/components/feedback/Skeleton/SkeletonLayout.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React from 'react';
 import { cx } from '../../../utils/cx.js';
 import { Skeleton } from './Skeleton.js';
 import { chatLayoutStyle, chatBubbleStyle, chatRowEndStyle, chatRowStyle, gridLayoutStyle, layoutColumnsVar, tableLayoutStyle, tableHeaderCellStyle, listLayoutStyle, listRowStyle, listRowBodyStyle, cardLayoutStyle, cardBodyStyle } from './SkeletonLayout.css.js';

package/dist/esm/components/feedback/Skeleton/SkeletonLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonLayout.js","sources":["../../../../../../src/components/feedback/Skeleton/SkeletonLayout.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA2BA;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AAEA;;AAYA;AAEA;AAIE;AAaF;AAEA;;AAME;AAMM;AACA;;AAYR;AAEA;AAKE;AAUF;AAEA;AAEA;;AAOQ;;AAEA;;AAqBR;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;;;AAeH;AAEA;;AAEE;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;AACE;;;AAIJ;AAcF;AAGF;;"}
+{"version":3,"file":"SkeletonLayout.js","sources":["src/components/feedback/Skeleton/SkeletonLayout.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { Skeleton } from './Skeleton';\nimport {\n  cardBodyStyle,\n  cardLayoutStyle,\n  chatBubbleStyle,\n  chatLayoutStyle,\n  chatRowEndStyle,\n  chatRowStyle,\n  gridLayoutStyle,\n  layoutColumnsVar,\n  listLayoutStyle,\n  listRowBodyStyle,\n  listRowStyle,\n  tableHeaderCellStyle,\n  tableLayoutStyle,\n} from './SkeletonLayout.css';\n\nimport type {\n  SkeletonAnimation,\n  SkeletonLayoutProps,\n  SkeletonLayoutVariant,\n} from './Skeleton.types';\n\nconst DEFAULT_COUNT: Record<SkeletonLayoutVariant, number> = {\n  card: 1,\n  list: 5,\n  table: 5,\n  grid: 12,\n  chat: 4,\n};\n\nconst DEFAULT_ANIMATION: Record<SkeletonLayoutVariant, SkeletonAnimation> = {\n  card: 'pulse',\n  list: 'pulse',\n  table: 'pulse',\n  grid: 'none',\n  chat: 'pulse',\n};\n\nconst DEFAULT_COLUMNS = 4;\n\nfunction renderCard(animation: SkeletonAnimation): React.ReactNode {\n  return (\n    <div className={cardLayoutStyle}>\n      <Skeleton shape=\"circle\" width={40} animation={animation} />\n      <div className={cardBodyStyle}>\n        <Skeleton shape=\"line\" width=\"70%\" animation={animation} />\n        <Skeleton shape=\"line\" width=\"100%\" animation={animation} />\n        <Skeleton shape=\"line\" width=\"50%\" animation={animation} />\n        <Skeleton width=\"100%\" height={80} animation={animation} />\n      </div>\n    </div>\n  );\n}\n\nfunction renderList(\n  count: number,\n  animation: SkeletonAnimation\n): React.ReactNode {\n  return (\n    <div className={listLayoutStyle}>\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={listRowStyle}>\n          <Skeleton shape=\"circle\" width={32} animation={animation} />\n          <div className={listRowBodyStyle}>\n            <Skeleton shape=\"line\" width=\"60%\" animation={animation} />\n            <Skeleton shape=\"line\" width=\"90%\" animation={animation} />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderTable(\n  rows: number,\n  columns: number,\n  animation: SkeletonAnimation\n): React.ReactNode {\n  const totalCells = (rows + 1) * columns;\n  return (\n    <div\n      className={tableLayoutStyle}\n      style={assignInlineVars({ [layoutColumnsVar]: String(columns) })}\n    >\n      {Array.from({ length: totalCells }, (_, i) => {\n        const isHeader = i < columns;\n        return (\n          <div key={i} className={isHeader ? tableHeaderCellStyle : undefined}>\n            <Skeleton\n              shape=\"line\"\n              width={isHeader ? '50%' : '80%'}\n              animation={animation}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction renderGrid(\n  count: number,\n  columns: number,\n  animation: SkeletonAnimation\n): React.ReactNode {\n  return (\n    <div\n      className={gridLayoutStyle}\n      style={assignInlineVars({ [layoutColumnsVar]: String(columns) })}\n    >\n      {Array.from({ length: count }, (_, i) => (\n        <Skeleton key={i} width=\"100%\" height={80} animation={animation} />\n      ))}\n    </div>\n  );\n}\n\nconst CHAT_BUBBLE_WIDTHS = ['85%', '60%', '95%', '70%', '50%', '80%'] as const;\n\nfunction renderChat(\n  count: number,\n  animation: SkeletonAnimation\n): React.ReactNode {\n  return (\n    <div className={chatLayoutStyle}>\n      {Array.from({ length: count }, (_, i) => {\n        const isOutgoing = i % 2 === 1;\n        const bubbleWidth = CHAT_BUBBLE_WIDTHS[i % CHAT_BUBBLE_WIDTHS.length];\n        return (\n          <div\n            key={i}\n            className={cx(chatRowStyle, isOutgoing && chatRowEndStyle)}\n          >\n            <Skeleton shape=\"circle\" width={28} animation={animation} />\n            <div className={chatBubbleStyle}>\n              <Skeleton\n                shape=\"line\"\n                width={bubbleWidth}\n                animation={animation}\n              />\n              {i % 3 === 0 ? (\n                <Skeleton shape=\"line\" width=\"40%\" animation={animation} />\n              ) : null}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * Pre-built skeleton layouts for common loading patterns — card, list, table,\n * grid, and chat. Drop one in when the surrounding UI shape is known and you\n * want the placeholder structure to mirror it without composing every block\n * by hand.\n *\n * Each variant uses the base `Skeleton` primitive underneath, so animation\n * and reduced-motion behavior match the rest of the library. Use `count` to\n * scale the number of rows/cells, `columns` for `grid` and `table`, and\n * `animation` to opt out of motion for dense surfaces.\n *\n * @example\n * ```tsx\n * <SkeletonLayout variant=\"card\" />\n * <SkeletonLayout variant=\"list\" count={8} />\n * <SkeletonLayout variant=\"table\" columns={5} count={6} />\n * <SkeletonLayout variant=\"grid\" columns={3} count={9} />\n * <SkeletonLayout variant=\"chat\" count={6} />\n * ```\n */\nexport const SkeletonLayout = /*#__PURE__*/ React.memo<SkeletonLayoutProps>(\n  ({\n    variant,\n    count,\n    columns = DEFAULT_COLUMNS,\n    animation,\n    width = '100%',\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const resolvedCount = count ?? DEFAULT_COUNT[variant];\n    const resolvedAnimation = animation ?? DEFAULT_ANIMATION[variant];\n    const resolvedWidth = typeof width === 'number' ? `${width}px` : width;\n\n    let content: React.ReactNode;\n    switch (variant) {\n      case 'card':\n        content = renderCard(resolvedAnimation);\n        break;\n      case 'list':\n        content = renderList(resolvedCount, resolvedAnimation);\n        break;\n      case 'table':\n        content = renderTable(resolvedCount, columns, resolvedAnimation);\n        break;\n      case 'grid':\n        content = renderGrid(resolvedCount, columns, resolvedAnimation);\n        break;\n      case 'chat':\n        content = renderChat(resolvedCount, resolvedAnimation);\n        break;\n    }\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        aria-busy=\"true\"\n        className={cx(className)}\n        style={{ width: resolvedWidth, ...style }}\n        data-testid={testId}\n        data-variant={variant}\n        {...rest}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nSkeletonLayout.displayName = 'SkeletonLayout';\n"],"names":[],"mappings":";;;;;;;;AA8BA;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AAEA;;AAYA;AAEA;AAIE;AAaF;AAEA;;AAME;AAMM;AACA;;AAYR;AAEA;AAKE;AAUF;AAEA;AAEA;;AAOQ;;AAEA;;AAqBR;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;;;AAeH;AAEA;;AAEE;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;AACE;;;AAIJ;AAcF;AAGF;;"}

package/dist/esm/components/feedback/Spinner/Spinner.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React from 'react';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
 import { spinnerSizeVar, spinnerColorVar, spinnerRingStyle, spinnerPulseStyle, spinnerDotsSizerStyle, spinnerDotRecipe, spinnerLabelStyle, visuallyHiddenStyle, spinnerRootStyle } from './Spinner.css.js';

package/dist/esm/components/feedback/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../../../src/components/feedback/Spinner/Spinner.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;;;;;;;;;;;;AAYG;;AAcC;AACA;;;;AAKC;AAED;AAaA;AAmBF;AAGF;;"}
+{"version":3,"file":"Spinner.js","sources":["src/components/feedback/Spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  spinnerColorVar,\n  spinnerDotRecipe,\n  spinnerDotsSizerStyle,\n  spinnerLabelStyle,\n  spinnerPulseStyle,\n  spinnerRingStyle,\n  spinnerRootStyle,\n  spinnerSizeVar,\n  visuallyHiddenStyle,\n} from './Spinner.css';\n\nimport type { SpinnerColor, SpinnerProps, SpinnerSize } from './Spinner.types';\n\nconst SIZE_MAP: Record<SpinnerSize, string> = {\n  xs: '12px',\n  sm: '14px',\n  md: '16px',\n  lg: '20px',\n};\n\nconst NAMED_COLOR_MAP: Record<string, string> = {\n  primary: vars.colors.text.primary,\n  secondary: vars.colors.text.secondary,\n  muted: vars.colors.text.muted,\n  accent: vars.colors.accent.primary,\n};\n\nfunction resolveColor(color: SpinnerColor): string {\n  return NAMED_COLOR_MAP[color] ?? color;\n}\n\n/**\n * Loading / activity indicator.\n *\n * Announces itself via `role=\"status\"` and `aria-label`; honors\n * `prefers-reduced-motion` by halting animation and dimming the indicator.\n *\n * @example\n * ```tsx\n * <Spinner />\n * <Spinner variant=\"dots\" size=\"lg\" />\n * <Spinner showLabel label=\"Fetching results...\" />\n * ```\n */\nexport const Spinner = /*#__PURE__*/ React.memo<SpinnerProps>(\n  ({\n    size = 'md',\n    variant = 'ring',\n    color = 'accent',\n    label = 'Loading...',\n    showLabel = false,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const resolvedColor = resolveColor(color);\n    const resolvedSize = SIZE_MAP[size];\n\n    const inlineVars = assignInlineVars({\n      [spinnerColorVar]: resolvedColor,\n      [spinnerSizeVar]: resolvedSize,\n    });\n\n    const indicator =\n      variant === 'ring' ? (\n        <span className={spinnerRingStyle} aria-hidden />\n      ) : variant === 'pulse' ? (\n        <span className={spinnerPulseStyle} aria-hidden />\n      ) : (\n        <span className={spinnerDotsSizerStyle} aria-hidden>\n          <span className={spinnerDotRecipe({ delay: '0' })} />\n          <span className={spinnerDotRecipe({ delay: '1' })} />\n          <span className={spinnerDotRecipe({ delay: '2' })} />\n        </span>\n      );\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={label}\n        className={cx(spinnerRootStyle, className)}\n        style={{ ...inlineVars, ...style }}\n        data-testid={testId}\n        {...rest}\n      >\n        {indicator}\n        {showLabel ? (\n          <span className={spinnerLabelStyle}>{label}</span>\n        ) : (\n          <span className={visuallyHiddenStyle}>{label}</span>\n        )}\n      </span>\n    );\n  }\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":[],"mappings":";;;;;;;;AAsBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;;;;;;;;;;;;AAYG;;AAcC;AACA;;;;AAKC;AAED;AAaA;AAmBF;AAGF;;"}

package/dist/esm/components/feedback/Stat/Stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stat.js","sources":["../../../../../../src/components/feedback/Stat/Stat.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAwBA;AACE;AACA;AACA;;AAGF;;AAKI;;AAEF;;AAEE;;;AAGA;;;AAGJ;AAEA;AACE;AAUF;AAEA;AACE;;AAEA;AASF;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AA8BP;;"}
+{"version":3,"file":"Stat.js","sources":["src/components/feedback/Stat/Stat.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  statContentStyle,\n  statDeltaColorVar,\n  statDeltaIconStyle,\n  statDeltaStyle,\n  statHelperStyle,\n  statIconStyle,\n  statLabelStyle,\n  statRoot,\n  statValueRecipe,\n} from './Stat.css';\n\nimport type {\n  StatDelta,\n  StatDeltaDirection,\n  StatDeltaSemantics,\n  StatProps,\n} from './Stat.types';\n\nconst ARROW_PATHS: Record<StatDeltaDirection, string> = {\n  up: 'M6 2 L10 7 L7 7 L7 10 L5 10 L5 7 L2 7 Z',\n  down: 'M6 10 L2 5 L5 5 L5 2 L7 2 L7 5 L10 5 Z',\n  neutral: 'M2 6 L10 6 L10 7 L2 7 Z',\n};\n\nfunction deltaColor(\n  direction: StatDeltaDirection,\n  semantics: StatDeltaSemantics\n): string {\n  if (semantics === 'neutral' || direction === 'neutral') {\n    return vars.colors.text.muted;\n  }\n  const isUpGood = semantics === 'positive';\n  const upColor = isUpGood\n    ? vars.colors.accent.success\n    : vars.colors.accent.error;\n  const downColor = isUpGood\n    ? vars.colors.accent.error\n    : vars.colors.accent.success;\n  return direction === 'up' ? upColor : downColor;\n}\n\nfunction DeltaIcon({ direction }: { direction: StatDeltaDirection }) {\n  return (\n    <svg\n      className={statDeltaIconStyle}\n      viewBox=\"0 0 12 12\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path d={ARROW_PATHS[direction]} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction DeltaDisplay({ delta }: { delta: StatDelta }) {\n  const semantics = delta.semantics ?? 'positive';\n  const color = deltaColor(delta.direction, semantics);\n  return (\n    <span\n      className={statDeltaStyle}\n      style={assignInlineVars({ [statDeltaColorVar]: color })}\n    >\n      <DeltaIcon direction={delta.direction} />\n      {delta.value}\n    </span>\n  );\n}\n\n/**\n * KPI / metric display: label + value + optional trend delta.\n *\n * Use `delta.semantics` to indicate whether \"up\" is good. Errors and\n * latency, for example, want `semantics: \"negative\"` so an upward\n * direction shows red.\n *\n * @example\n * ```tsx\n * <Stat\n *   label=\"MRR\"\n *   value=\"$12,400\"\n *   delta={{ value: '+8.2%', direction: 'up' }}\n *   helper=\"vs. last month\"\n * />\n * ```\n */\nexport const Stat: React.FC<StatProps> = ({\n  label,\n  value,\n  delta,\n  helper,\n  icon,\n  size = 'md',\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => (\n  <div\n    ref={ref}\n    className={cx(statRoot({ size }), className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {icon && <div className={statIconStyle}>{icon}</div>}\n    <div className={statContentStyle}>\n      <p className={statLabelStyle}>{label}</p>\n      <p className={statValueRecipe({ size })}>{value}</p>\n      {delta && <DeltaDisplay delta={delta} />}\n      {helper && <p className={statHelperStyle}>{helper}</p>}\n    </div>\n  </div>\n);\n\nStat.displayName = 'Stat';\n"],"names":[],"mappings":";;;;;;;AA2BA;AACE;AACA;AACA;;AAGF;;AAKI;;AAEF;;AAEE;;;AAGA;;;AAGJ;AAEA;AACE;AAUF;AAEA;AACE;;AAEA;AASF;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AA8BP;;"}

package/dist/esm/components/feedback/Toast/ToastContainer.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { cx } from '../../../utils/cx.js';
-import { ToastItem } from './ToastItem.js';
 import { zIndexVar, gapVar, containerReverse, containerNormal, container } from './ToastContainer.css.js';
+import { ToastItem } from './ToastItem.js';
 
 // --- Position style map ---
 const POSITION_STYLES = {

package/dist/esm/components/feedback/Toast/ToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.js","sources":["../../../../../../src/components/feedback/Toast/ToastContainer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEA;;;AAGE;;;AAGA;;AAaF;;;AAGG;AACI;;AAQL;;AAGE;AACA;AACD;;AAMK;AACA;AACD;AASP;AAEA;;"}
+{"version":3,"file":"ToastContainer.js","sources":["src/components/feedback/Toast/ToastContainer.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  gapVar,\n  zIndexVar,\n  container,\n  containerReverse,\n  containerNormal,\n} from './ToastContainer.css';\nimport { ToastItem } from './ToastItem';\n\nimport type { ToastInternalData, ToastPosition } from './Toast.types';\n\n// --- Position style map ---\n\nconst POSITION_STYLES: Record<ToastPosition, React.CSSProperties> = {\n  'top-right': { top: 16, right: 16 },\n  'top-left': { top: 16, left: 16 },\n  'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },\n  'bottom-right': { bottom: 16, right: 16 },\n  'bottom-left': { bottom: 16, left: 16 },\n  'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },\n};\n\n// --- Props ---\n\ninterface ToastContainerProps {\n  toasts: ToastInternalData[];\n  position: ToastPosition;\n  gap: number;\n  zIndex: number;\n  onDismiss: (id: string) => void;\n}\n\n/**\n * ToastContainer positions toast items at the specified screen edge.\n * Bottom positions use column-reverse so the newest toast appears at the bottom.\n */\nexport const ToastContainer: React.FC<ToastContainerProps> = ({\n  toasts,\n  position,\n  gap,\n  zIndex,\n  onDismiss,\n}) => {\n  const isBottom = position.startsWith('bottom');\n  const positionStyle = POSITION_STYLES[position];\n\n  const inlineVars = assignInlineVars({\n    [gapVar]: `${gap}px`,\n    [zIndexVar]: String(zIndex),\n  });\n\n  return (\n    <div\n      className={cx(container, isBottom ? containerReverse : containerNormal)}\n      style={{\n        ...positionStyle,\n        ...inlineVars,\n      }}\n      aria-label=\"Notifications\"\n      role=\"region\"\n    >\n      {toasts.map(toast => (\n        <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />\n      ))}\n    </div>\n  );\n};\n\nToastContainer.displayName = 'ToastContainer';\n"],"names":[],"mappings":";;;;;;;AAkBA;AAEA;;;AAGE;;;AAGA;;AAaF;;;AAGG;AACI;;AAQL;;AAGE;AACA;AACD;;AAMK;AACA;AACD;AASP;AAEA;;"}

package/dist/esm/components/feedback/Toast/ToastItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { ErrorIcon } from '../../Icons/ErrorIcon.js';
 import { InfoIcon } from '../../Icons/InfoIcon.js';
@@ -35,7 +35,9 @@ const ToastItem = ({ toast: toastData, onDismiss, }) => {
     const [paused, setPaused] = useState(false);
     const timerRef = useRef(null);
     const remainingRef = useRef(duration);
-    const startRef = useRef(Date.now());
+    // Seeded on mount by startTimer(); 0 is a safe placeholder and avoids calling
+    // the impure Date.now() during render.
+    const startRef = useRef(0);
     const isAlert = severity === 'warning' || severity === 'error';
     const role = isAlert ? 'alert' : 'status';
     const ariaLive = isAlert ? 'assertive' : 'polite';
@@ -71,7 +73,9 @@ const ToastItem = ({ toast: toastData, onDismiss, }) => {
         startTimer();
         return clearTimer;
     }, [startTimer, clearTimer]);
-    return (jsxs("div", { className: toast({ severity }), role: role, "aria-live": ariaLive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": `toast-${id}`, children: [jsxs("div", { className: content, children: [jsx("div", { className: iconWrapper, children: icon ?? jsx(SeverityIcon, { severity: severity }) }), jsxs("div", { className: textContent, children: [title && jsx("div", { className: titleStyle, children: title }), jsx("div", { className: message, children: msg }), action && (jsx("button", { className: actionButton({ severity }), onClick: action.onClick, type: "button", children: action.label }))] }), closable && (jsx("button", { className: closeButton, onClick: () => onDismiss(id), "aria-label": "Dismiss notification", type: "button", children: jsx(CloseIcon, { size: "sm", decorative: true }) }))] }), showProgress && duration > 0 && (jsx("div", { className: progressBar({ severity, paused }), style: assignInlineVars({
+    return (jsxs("div", { className: toast({ severity }), role: role, "aria-live": ariaLive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": `toast-${id}`, children: [jsxs("div", { className: content, children: [jsx("div", { className: iconWrapper, children: icon ?? jsx(SeverityIcon, { severity: severity }) }), jsxs("div", { className: textContent, children: [title && jsx("div", { className: titleStyle, children: title }), jsx("div", { className: message, children: msg }), action && (jsx("button", { className: actionButton({ severity }), onClick: action.onClick, type: "button", children: action.label }))] }), closable && (jsx("button", { className: closeButton, onClick: () => {
+                            onDismiss(id);
+                        }, "aria-label": "Dismiss notification", type: "button", children: jsx(CloseIcon, { size: "sm", decorative: true }) }))] }), showProgress && duration > 0 && (jsx("div", { className: progressBar({ severity, paused }), style: assignInlineVars({
                     [progressDurationVar]: `${duration}ms`,
                 }), "data-testid": `toast-progress-${id}` }))] }));
 };

package/dist/esm/components/feedback/Toast/ToastItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastItem.js","sources":["../../../../../../src/components/feedback/Toast/ToastItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAuBA;AAEA;;AAEI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;;AAEN;AASA;;;;;;;AAOG;AACI;;;AAiBL;AACA;;;;;AAOA;AACE;AACE;AACA;;;AAIJ;;;AAEE;AACA;AACA;;AAEA;;AAGF;;;;AAGE;;AAEF;AAEA;;;;AAGE;AACF;;AAGE;AACA;AACF;AAEA;AAyCU;;AAOZ;AAEA;;"}
+{"version":3,"file":"ToastItem.js","sources":["src/components/feedback/Toast/ToastItem.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\n\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { ErrorIcon } from '@/components/Icons/ErrorIcon';\nimport { InfoIcon } from '@/components/Icons/InfoIcon';\nimport { SuccessIcon } from '@/components/Icons/SuccessIcon';\nimport { WarningIcon } from '@/components/Icons/WarningIcon';\n\nimport {\n  progressDurationVar,\n  toast,\n  content,\n  iconWrapper,\n  textContent,\n  titleStyle,\n  message,\n  closeButton,\n  actionButton,\n  progressBar,\n} from './ToastItem.css';\n\nimport type { ToastInternalData, ToastSeverity } from './Toast.types';\n\n// --- Severity icons ---\n\nconst SeverityIcon: React.FC<{ severity: ToastSeverity }> = ({ severity }) => {\n  switch (severity) {\n    case 'info':\n      return <InfoIcon size=\"md\" color=\"currentColor\" decorative />;\n    case 'success':\n      return <SuccessIcon size=\"md\" color=\"currentColor\" decorative />;\n    case 'warning':\n      return <WarningIcon size=\"md\" color=\"currentColor\" decorative />;\n    case 'error':\n      return <ErrorIcon size=\"md\" color=\"currentColor\" decorative />;\n  }\n};\n\n// --- ToastItem component ---\n\ninterface ToastItemProps {\n  toast: ToastInternalData;\n  onDismiss: (id: string) => void;\n}\n\n/**\n * Individual toast notification with severity indicator, auto-dismiss,\n * optional progress bar, and action button support.\n *\n * - info/success: role=\"status\", aria-live=\"polite\"\n * - warning/error: role=\"alert\", aria-live=\"assertive\"\n * - Auto-dismiss pauses on hover\n */\nexport const ToastItem: React.FC<ToastItemProps> = ({\n  toast: toastData,\n  onDismiss,\n}) => {\n  const {\n    id,\n    title,\n    message: msg,\n    severity,\n    duration,\n    closable,\n    showProgress,\n    icon,\n    action,\n  } = toastData;\n\n  const [paused, setPaused] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const remainingRef = useRef(duration);\n  // Seeded on mount by startTimer(); 0 is a safe placeholder and avoids calling\n  // the impure Date.now() during render.\n  const startRef = useRef(0);\n\n  const isAlert = severity === 'warning' || severity === 'error';\n  const role = isAlert ? 'alert' : 'status';\n  const ariaLive = isAlert ? 'assertive' : 'polite';\n\n  const clearTimer = useCallback(() => {\n    if (timerRef.current !== null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  const startTimer = useCallback(() => {\n    if (duration <= 0) return;\n    clearTimer();\n    startRef.current = Date.now();\n    timerRef.current = setTimeout(() => {\n      onDismiss(id);\n    }, remainingRef.current);\n  }, [duration, clearTimer, onDismiss, id]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (duration <= 0) return;\n    setPaused(true);\n    clearTimer();\n    remainingRef.current -= Date.now() - startRef.current;\n  }, [duration, clearTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (duration <= 0) return;\n    setPaused(false);\n    startTimer();\n  }, [duration, startTimer]);\n\n  useEffect(() => {\n    startTimer();\n    return clearTimer;\n  }, [startTimer, clearTimer]);\n\n  return (\n    <div\n      className={toast({ severity })}\n      role={role}\n      aria-live={ariaLive}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      data-testid={`toast-${id}`}\n    >\n      <div className={content}>\n        <div className={iconWrapper}>\n          {icon ?? <SeverityIcon severity={severity} />}\n        </div>\n        <div className={textContent}>\n          {title && <div className={titleStyle}>{title}</div>}\n          <div className={message}>{msg}</div>\n          {action && (\n            <button\n              className={actionButton({ severity })}\n              onClick={action.onClick}\n              type=\"button\"\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n        {closable && (\n          <button\n            className={closeButton}\n            onClick={() => {\n              onDismiss(id);\n            }}\n            aria-label=\"Dismiss notification\"\n            type=\"button\"\n          >\n            <CloseIcon size=\"sm\" decorative />\n          </button>\n        )}\n      </div>\n      {showProgress && duration > 0 && (\n        <div\n          className={progressBar({ severity, paused })}\n          style={assignInlineVars({\n            [progressDurationVar]: `${duration}ms`,\n          })}\n          data-testid={`toast-progress-${id}`}\n        />\n      )}\n    </div>\n  );\n};\n\nToastItem.displayName = 'ToastItem';\n"],"names":[],"mappings":";;;;;;;;;;;AA0BA;AAEA;;AAEI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;;AAEN;AASA;;;;;;;AAOG;AACI;;;AAiBL;AACA;;;AAGA;;;;AAMA;AACE;AACE;AACA;;;AAIJ;;;AAEE;AACA;AACA;;AAEA;;AAGF;;;;AAGE;;AAEF;AAEA;;;;AAGE;AACF;;AAGE;AACA;AACF;;;AAiCU;AAYA;;AAOZ;AAEA;;"}

package/dist/esm/components/feedback/Toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../../../../src/components/feedback/Toast/ToastProvider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAsBE;AAEF;AAEA;AAIE;AACE;;AAEA;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;;;;;;;;;;;;AAYG;AACI;AAQL;;;AASA;;AAEA;AAEA;AAIM;AAYR;AAEA;;"}
+{"version":3,"file":"ToastProvider.js","sources":["src/components/feedback/Toast/ToastProvider.tsx"],"sourcesContent":["'use client';\n\nimport React, { createContext, useReducer, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ToastContainer } from './ToastContainer';\n\nimport type { ToastProviderProps, ToastInternalData } from './Toast.types';\n\n// --- Toast Actions ---\n\ntype ToastAction =\n  | { type: 'ADD_TOAST'; toast: ToastInternalData }\n  | { type: 'DISMISS_TOAST'; id: string }\n  | { type: 'DISMISS_ALL' };\n\n// --- Toast Context ---\n\nexport interface ToastContextValue {\n  dispatch: React.Dispatch<ToastAction>;\n  defaultDuration: number;\n}\n\nexport const ToastContext =\n  /*#__PURE__*/ createContext<ToastContextValue | null>(null);\n\n// --- Reducer ---\n\nfunction toastReducer(\n  state: ToastInternalData[],\n  action: ToastAction\n): ToastInternalData[] {\n  switch (action.type) {\n    case 'ADD_TOAST':\n      return [...state, action.toast];\n    case 'DISMISS_TOAST':\n      return state.filter(t => t.id !== action.id);\n    case 'DISMISS_ALL':\n      return [];\n    default:\n      return state;\n  }\n}\n\n/**\n * ToastProvider manages toast notification state and renders them via portal.\n *\n * Wrap your application (or a section of it) with this provider, then use\n * the `useToast()` hook to trigger notifications from any child component.\n *\n * @example\n * ```tsx\n * <ToastProvider position=\"bottom-right\" maxVisible={5}>\n *   <App />\n * </ToastProvider>\n * ```\n */\nexport const ToastProvider: React.FC<ToastProviderProps> = ({\n  children,\n  position = 'bottom-right',\n  maxVisible = 5,\n  defaultDuration = 5000,\n  gap = 8,\n  zIndex = 1200,\n}) => {\n  const [toasts, dispatch] = useReducer(toastReducer, []);\n\n  const contextValue = useMemo<ToastContextValue>(\n    () => ({ dispatch, defaultDuration }),\n    [dispatch, defaultDuration]\n  );\n\n  const visibleToasts = toasts.slice(-maxVisible);\n\n  const handleDismiss = (id: string) => {\n    dispatch({ type: 'DISMISS_TOAST', id });\n  };\n\n  return (\n    <ToastContext.Provider value={contextValue}>\n      {children}\n      {typeof document !== 'undefined' &&\n        createPortal(\n          <ToastContainer\n            toasts={visibleToasts}\n            position={position}\n            gap={gap}\n            zIndex={zIndex}\n            onDismiss={handleDismiss}\n          />,\n          document.body\n        )}\n    </ToastContext.Provider>\n  );\n};\n\nToastProvider.displayName = 'ToastProvider';\n"],"names":[],"mappings":";;;;;;;AAwBE;AAEF;AAEA;AAIE;AACE;;AAEA;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;;;;;;;;;;;;AAYG;AACI;AAQL;;;AASA;;AAEA;AAEA;AAIM;AAYR;AAEA;;"}

package/dist/esm/components/feedback/Toast/useToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.js","sources":["../../../../../../src/components/feedback/Toast/useToast.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;AAgBG;;AAED;;AAEE;;AAGF;AACA;AAEA;AACE;;;AAIF;;AAGI;AACE;;AAEA;AACA;AACA;AACA;AACA;;;AAGF;;AAKJ;AAMA;AAMA;AAMA;AAMA;;AAGE;AAIF;AACE;AACF;AAEA;AACF;;"}
+{"version":3,"file":"useToast.js","sources":["src/components/feedback/Toast/useToast.ts"],"sourcesContent":["'use client';\n\nimport { useContext, useCallback, useRef } from 'react';\n\nimport { ToastContext } from './ToastProvider';\n\nimport type {\n  ToastData,\n  ToastInternalData,\n  UseToastReturn,\n} from './Toast.types';\n\n/**\n * Hook to trigger toast notifications from any component\n * inside a `<ToastProvider>`.\n *\n * @throws Error if used outside of a `<ToastProvider>`\n *\n * @example\n * ```tsx\n * const { toast, success, error, dismiss } = useToast();\n *\n * success('File saved successfully');\n * error('Failed to export', { title: 'Export Error' });\n *\n * const id = toast({ message: 'Custom toast', severity: 'info' });\n * dismiss(id);\n * ```\n */\nexport function useToast(): UseToastReturn {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n\n  const { dispatch, defaultDuration } = context;\n  const counterRef = useRef(0);\n\n  const generateId = useCallback(() => {\n    counterRef.current += 1;\n    return `toast-${Date.now()}-${counterRef.current}`;\n  }, []);\n\n  const toast = useCallback(\n    (data: ToastData): string => {\n      const id = data.id ?? generateId();\n      const internalData: ToastInternalData = {\n        ...data,\n        id,\n        severity: data.severity ?? 'info',\n        duration: data.duration ?? defaultDuration,\n        closable: data.closable ?? true,\n        showProgress: data.showProgress ?? false,\n        createdAt: Date.now(),\n      };\n      dispatch({ type: 'ADD_TOAST', toast: internalData });\n      return id;\n    },\n    [dispatch, defaultDuration, generateId]\n  );\n\n  const info = useCallback(\n    (message: string, options?: Partial<ToastData>): string =>\n      toast({ message, severity: 'info', ...options }),\n    [toast]\n  );\n\n  const success = useCallback(\n    (message: string, options?: Partial<ToastData>): string =>\n      toast({ message, severity: 'success', ...options }),\n    [toast]\n  );\n\n  const warning = useCallback(\n    (message: string, options?: Partial<ToastData>): string =>\n      toast({ message, severity: 'warning', ...options }),\n    [toast]\n  );\n\n  const error = useCallback(\n    (message: string, options?: Partial<ToastData>): string =>\n      toast({ message, severity: 'error', ...options }),\n    [toast]\n  );\n\n  const dismiss = useCallback(\n    (id: string) => {\n      dispatch({ type: 'DISMISS_TOAST', id });\n    },\n    [dispatch]\n  );\n\n  const dismissAll = useCallback(() => {\n    dispatch({ type: 'DISMISS_ALL' });\n  }, [dispatch]);\n\n  return { toast, info, success, warning, error, dismiss, dismissAll };\n}\n"],"names":[],"mappings":";;;;AAYA;;;;;;;;;;;;;;;;AAgBG;;AAED;;AAEE;;AAGF;AACA;AAEA;AACE;;;AAIF;;AAGI;AACE;;AAEA;AACA;AACA;AACA;AACA;;;AAGF;;AAKJ;AAMA;AAMA;AAMA;AAMA;;AAGE;AAIF;AACE;AACF;AAEA;AACF;;"}

package/dist/esm/components/form/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","sources":["../../../../../src/components/form/FormHelperText.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAuBA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAUF;AAGF;;"}
+{"version":3,"file":"FormHelperText.js","sources":["src/components/form/FormHelperText.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Prettify } from '@/types/utilities';\nimport { cx } from '@/utils/cx';\n\nimport { formHelperTextRecipe } from './FormHelperText.css';\n\nimport type { BaseComponent } from '@/types/common';\n\nexport interface FormHelperTextBaseProps extends BaseComponent {\n  /**\n   * Helper text content\n   */\n  children: React.ReactNode;\n\n  /**\n   * Whether to display in error state\n   * @default false\n   */\n  error?: boolean;\n}\n\nexport type FormHelperTextProps = Prettify<FormHelperTextBaseProps>;\n\n/**\n * A standardized helper text component for use with form controls.\n *\n * Provides consistent styling for helper text and error messages\n * across different form components.\n *\n * @example\n * ```tsx\n * <Input label=\"Email\" />\n * <FormHelperText>We'll never share your email with anyone else.</FormHelperText>\n *\n * <Input label=\"Username\" error={!!usernameError} />\n * <FormHelperText error>{usernameError}</FormHelperText>\n * ```\n */\nexport const FormHelperText = /*#__PURE__*/ React.memo<FormHelperTextProps>(\n  ({ children, error = false, className, style, ref, ...rest }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(formHelperTextRecipe({ error }), className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nFormHelperText.displayName = 'FormHelperText';\n"],"names":[],"mappings":";;;;;;AA0BA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAUF;AAGF;;"}

package/dist/esm/components/form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/form/FormLabel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkCA;;;;;;;;;;;;;AAaG;AACI;AAWH;AAYF;AAGF;;"}
+{"version":3,"file":"FormLabel.js","sources":["src/components/form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Prettify } from '@/types/utilities';\nimport { cx } from '@/utils/cx';\n\nimport { formLabelRecipe, requiredIndicatorStyle } from './FormLabel.css';\n\nimport type { BaseComponent } from '@/types/common';\n\nexport interface FormLabelBaseProps extends BaseComponent<HTMLLabelElement> {\n  /**\n   * Label content\n   */\n  children: React.ReactNode;\n\n  /**\n   * HTML for attribute to associate label with form control\n   */\n  htmlFor?: string;\n\n  /**\n   * Whether the associated form control is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the associated form control is required\n   * @default false\n   */\n  required?: boolean;\n}\n\nexport type FormLabelProps = Prettify<FormLabelBaseProps>;\n\n/**\n * A standardized form label component for use with form controls.\n *\n * Provides consistent styling and behavior for labels across different\n * form components, with support for required indicators and disabled states.\n *\n * @example\n * ```tsx\n * <FormLabel htmlFor=\"name-input\" required>\n *   Full Name\n * </FormLabel>\n * <Input id=\"name-input\" />\n * ```\n */\nexport const FormLabel = /*#__PURE__*/ React.memo<FormLabelProps>(\n  ({\n    children,\n    htmlFor,\n    disabled = false,\n    required = false,\n    className,\n    style,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <label\n        ref={ref}\n        htmlFor={htmlFor}\n        className={cx(formLabelRecipe({ disabled }), className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n        {required && <span className={requiredIndicatorStyle}> *</span>}\n      </label>\n    );\n  }\n);\n\nFormLabel.displayName = 'FormLabel';\n"],"names":[],"mappings":";;;;;;AAqCA;;;;;;;;;;;;;AAaG;AACI;AAWH;AAYF;AAGF;;"}

package/dist/esm/components/form/InputWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.js","sources":["../../../../../src/components/form/InputWrapper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA4CA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAYH;AAaF;AAGF;;"}
+{"version":3,"file":"InputWrapper.js","sources":["src/components/form/InputWrapper.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Prettify } from '@/types/utilities';\nimport { cx } from '@/utils/cx';\n\nimport { inputWrapperRecipe } from './InputWrapper.css';\n\nimport type { BaseComponent, Size } from '@/types/common';\n\nexport interface InputWrapperBaseProps extends BaseComponent {\n  /**\n   * Input wrapper content\n   */\n  children: React.ReactNode;\n\n  /**\n   * Input size using standard library sizing\n   * - `sm`: 20px height, compact for toolbars\n   * - `md`: 24px height, standard for forms\n   * - `lg`: 32px height, prominent inputs\n   * @default \"md\"\n   */\n  size?: Size;\n\n  /**\n   * Whether the input has an error state\n   * @default false\n   */\n  error?: boolean;\n\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the input is focused\n   * @default false\n   */\n  focused?: boolean;\n}\n\nexport type InputWrapperProps = Prettify<InputWrapperBaseProps>;\n\n/**\n * A standardized wrapper component for form inputs.\n *\n * Provides consistent styling and behavior for input containers\n * across different form components, with support for different sizes,\n * states (error, disabled, focused), and consistent border styling.\n *\n * @example\n * ```tsx\n * <InputWrapper\n *   size=\"md\"\n *   error={!!inputError}\n *   disabled={isDisabled}\n *   focused={isFocused}\n * >\n *   <input type=\"text\" />\n * </InputWrapper>\n * ```\n */\nexport const InputWrapper = /*#__PURE__*/ React.memo<InputWrapperProps>(\n  ({\n    children,\n    size = 'md',\n    error = false,\n    disabled = false,\n    focused = false,\n    className,\n    style,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          inputWrapperRecipe({ size, error, disabled, focused }),\n          className\n        )}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nInputWrapper.displayName = 'InputWrapper';\n"],"names":[],"mappings":";;;;;;AA+CA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAYH;AAaF;AAGF;;"}

package/dist/esm/components/layout/Accordion/Accordion.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useId, useState, useCallback, createContext, useContext } from 'react';
 import { cx } from '../../../utils/cx.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { accordionGapVar, accordionRoot } from './Accordion.css.js';
 
 // --- Contexts ---

package/dist/esm/components/layout/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AAEA;AACE;AACF;AACE;;AAGA;;AAEE;;AAIF;AACF;;AAGE;;AAEE;;AAIF;AACF;AAIA;AAEA;;AAC2B;AACzB;AAA0B;;AAE5B;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AAiBL;AAEA;AAGA;;AAEE;;AAGF;;AAII;;AAGE;AACE;AACA;;;;;;;AAKA;;;;;;;AASF;;;;;AAIJ;AAIF;;;;;AAKE;;AAGF;AACE;AACE;;AAEF;AACA;;AAGF;AAaF;AAEA;;"}
+{"version":3,"file":"Accordion.js","sources":["src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n} from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { accordionRoot, accordionGapVar } from './Accordion.css';\n\nimport type {\n  AccordionContextValue,\n  AccordionItemContextValue,\n  AccordionProps,\n} from './Accordion.types';\n\n// --- Contexts ---\n\nconst AccordionContext =\n  /*#__PURE__*/ createContext<AccordionContextValue | null>(null);\nconst AccordionItemContext =\n  /*#__PURE__*/ createContext<AccordionItemContextValue | null>(null);\n\nexport function useAccordionContext(): AccordionContextValue {\n  const ctx = useContext(AccordionContext);\n  if (!ctx) {\n    throw new Error(\n      'Accordion compound components must be used within <Accordion>'\n    );\n  }\n  return ctx;\n}\n\nexport function useAccordionItemContext(): AccordionItemContextValue {\n  const ctx = useContext(AccordionItemContext);\n  if (!ctx) {\n    throw new Error(\n      'AccordionTrigger/AccordionContent must be used within <AccordionItem>'\n    );\n  }\n  return ctx;\n}\n\nexport { AccordionContext, AccordionItemContext };\n\n// --- Helpers ---\n\nfunction normalizeValue(value: string | string[] | undefined): string[] {\n  if (value === undefined) return [];\n  if (Array.isArray(value)) return value;\n  return [value];\n}\n\n// --- Component ---\n\n/**\n * Accordion component for collapsible sections in property inspectors\n * and settings panels.\n *\n * Compound component pattern: use with AccordionItem, AccordionTrigger,\n * and AccordionContent.\n *\n * @example\n * ```tsx\n * <Accordion defaultValue=\"transform\">\n *   <AccordionItem value=\"transform\">\n *     <AccordionTrigger>Transform</AccordionTrigger>\n *     <AccordionContent>Position, rotation, scale fields...</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nexport const Accordion: React.FC<AccordionProps> = ({\n  value: valueProp,\n  defaultValue,\n  multiple = false,\n  collapsible = false,\n  variant = 'default',\n  size = 'md',\n  gap = 0,\n  width = '100%',\n  children,\n  onChange,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const autoId = useId();\n\n  const [internalValue, setInternalValue] = useState<string[]>(\n    normalizeValue(defaultValue)\n  );\n  const isControlled = valueProp !== undefined;\n  const expandedItems = isControlled\n    ? normalizeValue(valueProp)\n    : internalValue;\n\n  const toggleItem = useCallback(\n    (itemValue: string) => {\n      const isExpanded = expandedItems.includes(itemValue);\n\n      let nextExpanded: string[];\n\n      if (multiple) {\n        nextExpanded = isExpanded\n          ? expandedItems.filter(v => v !== itemValue)\n          : [...expandedItems, itemValue];\n      } else {\n        if (isExpanded) {\n          nextExpanded = collapsible ? [] : expandedItems;\n        } else {\n          nextExpanded = [itemValue];\n        }\n      }\n\n      if (!isControlled) {\n        setInternalValue(nextExpanded);\n      }\n\n      if (multiple) {\n        onChange?.(nextExpanded);\n      } else {\n        onChange?.(nextExpanded[0] ?? '');\n      }\n    },\n    [expandedItems, multiple, collapsible, isControlled, onChange]\n  );\n\n  const contextValue: AccordionContextValue = {\n    expandedItems,\n    toggleItem,\n    variant,\n    size,\n    accordionId: autoId,\n  };\n\n  const mergedStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [accordionGapVar]: `${gap}px`,\n    }),\n    width: typeof width === 'number' ? `${width}px` : width,\n    ...style,\n  };\n\n  return (\n    <AccordionContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={cx(accordionRoot, className)}\n        style={mergedStyle}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n};\n\nAccordion.displayName = 'Accordion';\n"],"names":[],"mappings":";;;;;;;AAqBA;AAEA;AACE;AACF;AACE;;AAGA;;AAEE;;AAIF;AACF;;AAGE;;AAEE;;AAIF;AACF;AAIA;AAEA;;AAC2B;AACzB;AAA0B;;AAE5B;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AAiBL;AAEA;AAGA;;AAEE;;AAGF;;AAII;;AAGE;AACE;AACA;;;;;;;AAKA;;;;;;;AASF;;;;;AAIJ;AAIF;;;;;AAKE;;AAGF;AACE;AACE;;AAEF;AACA;;AAGF;AAaF;AAEA;;"}

package/dist/esm/components/layout/Accordion/AccordionContent.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
 import { cx } from '../../../utils/cx.js';
+import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
 import { contentInner, contentBody, contentWrapperExpanded, contentWrapperCollapsed, contentWrapper } from './Accordion.css.js';
 
 // --- Component ---