se-design 1.0.72 → 1.0.73-dev2

package/dist/index229.js

@@ -1,57 +1,25 @@
-import { useState as m, useEffect as w, useCallback as b } from "react";
-import { useScrollActiveIntoView as x } from "./index231.js";
-function E({
-  items: u,
-  isOpen: t,
-  onSelect: o,
-  onClose: c,
-  onOpen: l,
-  loop: i = !0,
-  disabled: h = !1,
-  listboxRef: k,
-  optionSelector: g = '[role="option"]'
+const l = ["button:not([disabled])", "[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"]):not([disabled])', '[contenteditable="true"]'].join(", "), a = [l, '[role="menuitem"]', '[role="option"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'].join(", ");
+function u({
+  container: e,
+  includeRoles: t = !1,
+  additionalSelectors: r = [],
+  filterHidden: s = !1
 }) {
-  const [f, a] = m(-1);
-  w(() => {
-    t || a(-1);
-  }, [t]), x({
-    containerRef: k,
-    activeIndex: f,
-    itemSelector: g,
-    enabled: t
-  });
-  const D = b((r) => {
-    if (h) {
-      r.key === "Escape" && t && (r.preventDefault(), c());
-      return;
-    }
-    const e = u.length;
-    switch (r.key) {
-      case "ArrowDown":
-        r.preventDefault(), !t && e > 0 ? (l?.(), a(0)) : t && e > 0 && a((n) => i ? (n + 1) % e : Math.min(n + 1, e - 1));
-        break;
-      case "ArrowUp":
-        r.preventDefault(), t && e > 0 && a((n) => n === -1 ? e - 1 : i ? (n - 1 + e) % e : Math.max(n - 1, 0));
-        break;
-      case "Enter":
-        t && f >= 0 && u[f] && (r.preventDefault(), o(u[f], f), a(-1));
-        break;
-      case "Escape":
-        t && (r.preventDefault(), c(), a(-1));
-        break;
-      case "Tab":
-        t && (c(), a(-1));
-        break;
-    }
-  }, [h, u, t, f, o, c, l, i]), d = b((r, e) => `${r}-option-${e}`, []);
-  return {
-    highlightedIndex: f,
-    setHighlightedIndex: a,
-    handleKeyDown: D,
-    getOptionId: d
-  };
+  if (!e) return [];
+  const d = [t ? a : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
+  return s ? i.filter((n) => {
+    const o = window.getComputedStyle(n);
+    return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
+  }) : i;
+}
+function c(e) {
+  const t = u(e);
+  return t.length > 0 ? t[0] : null;
 }
 export {
-  E as useComboboxNavigation
+  l as FOCUSABLE_SELECTOR,
+  a as FOCUSABLE_WITH_ROLES_SELECTOR,
+  c as getFirstFocusableElement,
+  u as getFocusableElements
 };
 //# sourceMappingURL=index229.js.map

package/dist/index229.js.map

@@ -1 +1 @@
-{"version":3,"file":"index229.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<T = any> {\n  /**\n   * Array of items to navigate through\n   */\n  items: T[];\n  \n  /**\n   * Whether the dropdown is currently open\n   */\n  isOpen: boolean;\n  \n  /**\n   * Callback when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Callback to close the dropdown\n   */\n  onClose: () => void;\n  \n  /**\n   * Optional: Callback to open the dropdown\n   */\n  onOpen?: () => void;\n  \n  /**\n   * Whether to wrap around at the ends of the list.\n   * Default: true\n   */\n  loop?: boolean;\n  \n  /**\n   * Whether keyboard navigation is disabled\n   * (e.g., for custom rendered content)\n   */\n  disabled?: boolean;\n  \n  /**\n   * Ref to the listbox container for scroll management\n   */\n  listboxRef?: RefObject<HTMLElement | null>;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\n  /**\n   * Currently highlighted index (-1 if none)\n   */\n  highlightedIndex: number;\n  \n  /**\n   * Set the highlighted index manually\n   */\n  setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n  \n  /**\n   * Keyboard event handler for the combobox input\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n  \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n *   highlightedIndex, \n *   handleKeyDown, \n *   getOptionId \n * } = useComboboxNavigation({\n *   items: suggestions,\n *   isOpen: isDropdownOpen,\n *   onSelect: (item, idx) => handleSelect(item),\n *   onClose: () => setIsOpen(false),\n *   listboxRef\n * });\n * \n * <input\n *   role=\"combobox\"\n *   onKeyDown={handleKeyDown}\n *   aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n  items,\n  isOpen,\n  onSelect,\n  onClose,\n  onOpen,\n  loop = true,\n  disabled = false,\n  listboxRef,\n  optionSelector = '[role=\"option\"]'\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n  \n  // Reset highlighted index when dropdown closes\n  useEffect(() => {\n    if (!isOpen) {\n      setHighlightedIndex(-1);\n    }\n  }, [isOpen]);\n  \n  // Auto-scroll highlighted item into view\n  useScrollActiveIntoView({\n    containerRef: listboxRef,\n    activeIndex: highlightedIndex,\n    itemSelector: optionSelector,\n    enabled: isOpen\n  });\n  \n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) {\n        // For disabled navigation, still handle Escape\n        if (e.key === 'Escape' && isOpen) {\n          e.preventDefault();\n          onClose();\n        }\n        return;\n      }\n      \n      const itemCount = items.length;\n      \n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!isOpen && itemCount > 0) {\n            // Open dropdown and highlight first item\n            onOpen?.();\n            setHighlightedIndex(0);\n          } else if (isOpen && itemCount > 0) {\n            // Navigate down\n            setHighlightedIndex((prev) => {\n              if (loop) {\n                return (prev + 1) % itemCount;\n              }\n              return Math.min(prev + 1, itemCount - 1);\n            });\n          }\n          break;\n          \n        case 'ArrowUp':\n          e.preventDefault();\n          if (isOpen && itemCount > 0) {\n            // Navigate up\n            setHighlightedIndex((prev) => {\n              // If nothing highlighted, go to last item\n              if (prev === -1) {\n                return itemCount - 1;\n              }\n              if (loop) {\n                return (prev - 1 + itemCount) % itemCount;\n              }\n              return Math.max(prev - 1, 0);\n            });\n          }\n          break;\n          \n        case 'Enter':\n          if (isOpen && highlightedIndex >= 0 && items[highlightedIndex]) {\n            e.preventDefault();\n            onSelect(items[highlightedIndex], highlightedIndex);\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Escape':\n          if (isOpen) {\n            e.preventDefault();\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Tab':\n          // Close dropdown on Tab (don't preventDefault - let focus move naturally)\n          if (isOpen) {\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n      }\n    },\n    [disabled, items, isOpen, highlightedIndex, onSelect, onClose, onOpen, loop]\n  );\n  \n  const getOptionId = useCallback(\n    (listboxId: string, index: number) => `${listboxId}-option-${index}`,\n    []\n  );\n  \n  return {\n    highlightedIndex,\n    setHighlightedIndex,\n    handleKeyDown,\n    getOptionId\n  };\n}\n"],"names":["useState","useEffect","useCallback","useScrollActiveIntoView","useComboboxNavigation","items","isOpen","onSelect","onClose","onOpen","loop","disabled","listboxRef","optionSelector","highlightedIndex","setHighlightedIndex","containerRef","activeIndex","itemSelector","enabled","handleKeyDown","e","key","preventDefault","itemCount","length","prev","Math","min","max","getOptionId","listboxId","index"],"mappings":"AA2GO,SAAA,YAAAA,GAAA,aAAAC,GAAA,eAAAC,SAAA;AAAA,SAAA,2BAAAC,SAAA;AAAA,SAASC,EAA+B;AAAA,EAC7CC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,YAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AACc,GAAgC;AAC/D,QAAM,CAACC,GAAkBC,CAAmB,IAAIf,EAAiB,EAAE;AAGnEC,EAAAA,EAAU,MAAM;AACd,IAAKK,KACHS,EAAoB,EAAE;AAAA,EAE1B,GAAG,CAACT,CAAM,CAAC,GAGXH,EAAwB;AAAA,IACtBa,cAAcJ;AAAAA,IACdK,aAAaH;AAAAA,IACbI,cAAcL;AAAAA,IACdM,SAASb;AAAAA,EAAAA,CACV;AAED,QAAMc,IAAgBlB,EACpB,CAACmB,MAA2B;AAC1B,QAAIV,GAAU;AAEZ,MAAIU,EAAEC,QAAQ,YAAYhB,MACxBe,EAAEE,eAAAA,GACFf,EAAAA;AAEF;AAAA,IACF;AAEA,UAAMgB,IAAYnB,EAAMoB;AAExB,YAAQJ,EAAEC,KAAAA;AAAAA,MACR,KAAK;AACHD,QAAAA,EAAEE,eAAAA,GACE,CAACjB,KAAUkB,IAAY,KAEzBf,IAAAA,GACAM,EAAoB,CAAC,KACZT,KAAUkB,IAAY,KAE/BT,EAAqBW,CAAAA,MACfhB,KACMgB,IAAO,KAAKF,IAEfG,KAAKC,IAAIF,IAAO,GAAGF,IAAY,CAAC,CACxC;AAEH;AAAA,MAEF,KAAK;AACHH,QAAAA,EAAEE,eAAAA,GACEjB,KAAUkB,IAAY,KAExBT,EAAqBW,CAAAA,MAEfA,MAAS,KACJF,IAAY,IAEjBd,KACMgB,IAAO,IAAIF,KAAaA,IAE3BG,KAAKE,IAAIH,IAAO,GAAG,CAAC,CAC5B;AAEH;AAAA,MAEF,KAAK;AACH,QAAIpB,KAAUQ,KAAoB,KAAKT,EAAMS,CAAgB,MAC3DO,EAAEE,eAAAA,GACFhB,EAASF,EAAMS,CAAgB,GAAGA,CAAgB,GAClDC,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AACH,QAAIT,MACFe,EAAEE,eAAAA,GACFf,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AAEH,QAAIT,MACFE,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,IAAA;AAAA,EAEN,GACA,CAACJ,GAAUN,GAAOC,GAAQQ,GAAkBP,GAAUC,GAASC,GAAQC,CAAI,CAC7E,GAEMoB,IAAc5B,EAClB,CAAC6B,GAAmBC,MAAkB,GAAGD,CAAS,WAAWC,CAAK,IAClE,CAAA,CACF;AAEA,SAAO;AAAA,IACLlB,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAU,aAAAA;AAAAA,EAAAA;AAEJ;"}
+{"version":3,"file":"index229.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n  'button:not([disabled])',\n  '[href]',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n  '[contenteditable=\"true\"]'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n  FOCUSABLE_SELECTOR,\n  '[role=\"menuitem\"]',\n  '[role=\"option\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n  /**\n   * Container element to search within. If null/undefined, returns empty array.\n   */\n  container: HTMLElement | null;\n  /**\n   * Whether to include role-based focusable elements (menuitem, option, etc.).\n   * Default: false (uses base selector only)\n   */\n  includeRoles?: boolean;\n  /**\n   * Additional custom selectors to include.\n   */\n  additionalSelectors?: string[];\n  /**\n   * Whether to filter out hidden/invisible elements.\n   * Default: false (returns all matching elements regardless of visibility)\n   */\n  filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: menuRef.current,\n *   includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: customWidgetRef.current,\n *   additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n  container,\n  includeRoles = false,\n  additionalSelectors = [],\n  filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n  if (!container) return [];\n\n  const selector = [\n    includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n    ...additionalSelectors\n  ].filter(Boolean).join(', ');\n\n  const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n  if (!filterHidden) return elements;\n\n  // Filter out hidden/invisible elements\n  return elements.filter((el) => {\n    const style = window.getComputedStyle(el);\n    return (\n      style.display !== 'none' &&\n      style.visibility !== 'hidden' &&\n      style.opacity !== '0' &&\n      !el.hasAttribute('hidden') &&\n      el.offsetWidth > 0 &&\n      el.offsetHeight > 0\n    );\n  });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,0BACA,UACA,yBACA,0BACA,4BACA,mDACA,0BAA0B,EAC1BC,KAAK,IAAI,GAMEC,IAAgC,CAC3CF,GACA,qBACA,mBACA,6BACA,wBAAwB,EACxBC,KAAK,IAAI;AAmDJ,SAASE,EAAqB;AAAA,EACnCC,WAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,qBAAAA,IAAsB,CAAA;AAAA,EACtBC,cAAAA,IAAe;AACY,GAAkB;AAC7C,MAAI,CAACH,EAAW,QAAO,CAAA;AAEvB,QAAMI,IAAW,CACfH,IAAeH,IAAgCF,GAC/C,GAAGM,CAAmB,EACtBG,OAAOC,OAAO,EAAET,KAAK,IAAI,GAErBU,IAAWC,MAAMC,KAAKT,EAAUU,iBAA8BN,CAAQ,CAAC;AAE7E,SAAKD,IAGEI,EAASF,OAAQM,CAAAA,MAAO;AAC7B,UAAMC,IAAQC,OAAOC,iBAAiBH,CAAE;AACxC,WACEC,EAAMG,YAAY,UAClBH,EAAMI,eAAe,YACrBJ,EAAMK,YAAY,OAClB,CAACN,EAAGO,aAAa,QAAQ,KACzBP,EAAGQ,cAAc,KACjBR,EAAGS,eAAe;AAAA,EAEtB,CAAC,IAbyBb;AAc5B;AAMO,SAASc,EACdC,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAW,CAAC,IAAI;AACjD;"}

package/dist/index230.js

@@ -1,25 +1,57 @@
-const l = ["button:not([disabled])", "[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"]):not([disabled])', '[contenteditable="true"]'].join(", "), a = [l, '[role="menuitem"]', '[role="option"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'].join(", ");
-function u({
-  container: e,
-  includeRoles: t = !1,
-  additionalSelectors: r = [],
-  filterHidden: s = !1
+import { useState as m, useEffect as w, useCallback as b } from "react";
+import { useScrollActiveIntoView as x } from "./index231.js";
+function E({
+  items: u,
+  isOpen: t,
+  onSelect: o,
+  onClose: c,
+  onOpen: l,
+  loop: i = !0,
+  disabled: h = !1,
+  listboxRef: k,
+  optionSelector: g = '[role="option"]'
 }) {
-  if (!e) return [];
-  const d = [t ? a : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
-  return s ? i.filter((n) => {
-    const o = window.getComputedStyle(n);
-    return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
-  }) : i;
-}
-function c(e) {
-  const t = u(e);
-  return t.length > 0 ? t[0] : null;
+  const [f, a] = m(-1);
+  w(() => {
+    t || a(-1);
+  }, [t]), x({
+    containerRef: k,
+    activeIndex: f,
+    itemSelector: g,
+    enabled: t
+  });
+  const D = b((r) => {
+    if (h) {
+      r.key === "Escape" && t && (r.preventDefault(), c());
+      return;
+    }
+    const e = u.length;
+    switch (r.key) {
+      case "ArrowDown":
+        r.preventDefault(), !t && e > 0 ? (l?.(), a(0)) : t && e > 0 && a((n) => i ? (n + 1) % e : Math.min(n + 1, e - 1));
+        break;
+      case "ArrowUp":
+        r.preventDefault(), t && e > 0 && a((n) => n === -1 ? e - 1 : i ? (n - 1 + e) % e : Math.max(n - 1, 0));
+        break;
+      case "Enter":
+        t && f >= 0 && u[f] && (r.preventDefault(), o(u[f], f), a(-1));
+        break;
+      case "Escape":
+        t && (r.preventDefault(), c(), a(-1));
+        break;
+      case "Tab":
+        t && (c(), a(-1));
+        break;
+    }
+  }, [h, u, t, f, o, c, l, i]), d = b((r, e) => `${r}-option-${e}`, []);
+  return {
+    highlightedIndex: f,
+    setHighlightedIndex: a,
+    handleKeyDown: D,
+    getOptionId: d
+  };
 }
 export {
-  l as FOCUSABLE_SELECTOR,
-  a as FOCUSABLE_WITH_ROLES_SELECTOR,
-  c as getFirstFocusableElement,
-  u as getFocusableElements
+  E as useComboboxNavigation
 };
 //# sourceMappingURL=index230.js.map

package/dist/index230.js.map

@@ -1 +1 @@
-{"version":3,"file":"index230.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n  'button:not([disabled])',\n  '[href]',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n  '[contenteditable=\"true\"]'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n  FOCUSABLE_SELECTOR,\n  '[role=\"menuitem\"]',\n  '[role=\"option\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n  /**\n   * Container element to search within. If null/undefined, returns empty array.\n   */\n  container: HTMLElement | null;\n  /**\n   * Whether to include role-based focusable elements (menuitem, option, etc.).\n   * Default: false (uses base selector only)\n   */\n  includeRoles?: boolean;\n  /**\n   * Additional custom selectors to include.\n   */\n  additionalSelectors?: string[];\n  /**\n   * Whether to filter out hidden/invisible elements.\n   * Default: false (returns all matching elements regardless of visibility)\n   */\n  filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: menuRef.current,\n *   includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: customWidgetRef.current,\n *   additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n  container,\n  includeRoles = false,\n  additionalSelectors = [],\n  filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n  if (!container) return [];\n\n  const selector = [\n    includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n    ...additionalSelectors\n  ].filter(Boolean).join(', ');\n\n  const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n  if (!filterHidden) return elements;\n\n  // Filter out hidden/invisible elements\n  return elements.filter((el) => {\n    const style = window.getComputedStyle(el);\n    return (\n      style.display !== 'none' &&\n      style.visibility !== 'hidden' &&\n      style.opacity !== '0' &&\n      !el.hasAttribute('hidden') &&\n      el.offsetWidth > 0 &&\n      el.offsetHeight > 0\n    );\n  });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,0BACA,UACA,yBACA,0BACA,4BACA,mDACA,0BAA0B,EAC1BC,KAAK,IAAI,GAMEC,IAAgC,CAC3CF,GACA,qBACA,mBACA,6BACA,wBAAwB,EACxBC,KAAK,IAAI;AAmDJ,SAASE,EAAqB;AAAA,EACnCC,WAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,qBAAAA,IAAsB,CAAA;AAAA,EACtBC,cAAAA,IAAe;AACY,GAAkB;AAC7C,MAAI,CAACH,EAAW,QAAO,CAAA;AAEvB,QAAMI,IAAW,CACfH,IAAeH,IAAgCF,GAC/C,GAAGM,CAAmB,EACtBG,OAAOC,OAAO,EAAET,KAAK,IAAI,GAErBU,IAAWC,MAAMC,KAAKT,EAAUU,iBAA8BN,CAAQ,CAAC;AAE7E,SAAKD,IAGEI,EAASF,OAAQM,CAAAA,MAAO;AAC7B,UAAMC,IAAQC,OAAOC,iBAAiBH,CAAE;AACxC,WACEC,EAAMG,YAAY,UAClBH,EAAMI,eAAe,YACrBJ,EAAMK,YAAY,OAClB,CAACN,EAAGO,aAAa,QAAQ,KACzBP,EAAGQ,cAAc,KACjBR,EAAGS,eAAe;AAAA,EAEtB,CAAC,IAbyBb;AAc5B;AAMO,SAASc,EACdC,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAW,CAAC,IAAI;AACjD;"}
+{"version":3,"file":"index230.js","sources":["../src/utils/a11y/useComboboxNavigation.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useScrollActiveIntoView } from './useScrollActiveIntoView';\n\nexport interface UseComboboxNavigationOptions<T = any> {\n  /**\n   * Array of items to navigate through\n   */\n  items: T[];\n  \n  /**\n   * Whether the dropdown is currently open\n   */\n  isOpen: boolean;\n  \n  /**\n   * Callback when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Callback to close the dropdown\n   */\n  onClose: () => void;\n  \n  /**\n   * Optional: Callback to open the dropdown\n   */\n  onOpen?: () => void;\n  \n  /**\n   * Whether to wrap around at the ends of the list.\n   * Default: true\n   */\n  loop?: boolean;\n  \n  /**\n   * Whether keyboard navigation is disabled\n   * (e.g., for custom rendered content)\n   */\n  disabled?: boolean;\n  \n  /**\n   * Ref to the listbox container for scroll management\n   */\n  listboxRef?: RefObject<HTMLElement | null>;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n}\n\nexport interface UseComboboxNavigationReturn {\n  /**\n   * Currently highlighted index (-1 if none)\n   */\n  highlightedIndex: number;\n  \n  /**\n   * Set the highlighted index manually\n   */\n  setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n  \n  /**\n   * Keyboard event handler for the combobox input\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n  \n}\n\n/**\n * Hook for managing combobox keyboard navigation with aria-activedescendant.\n * \n * Implements WAI-ARIA 1.2 Combobox pattern:\n * - Arrow Up/Down to navigate options\n * - Enter to select highlighted option\n * - Escape to close dropdown\n * - Tab to close and move focus\n * - Auto-scrolls highlighted option into view\n * \n * @example\n * ```tsx\n * const { \n *   highlightedIndex, \n *   handleKeyDown, \n *   getOptionId \n * } = useComboboxNavigation({\n *   items: suggestions,\n *   isOpen: isDropdownOpen,\n *   onSelect: (item, idx) => handleSelect(item),\n *   onClose: () => setIsOpen(false),\n *   listboxRef\n * });\n * \n * <input\n *   role=\"combobox\"\n *   onKeyDown={handleKeyDown}\n *   aria-activedescendant={highlightedIndex >= 0 ? getOptionId(listboxId, highlightedIndex) : undefined}\n * />\n * ```\n */\nexport function useComboboxNavigation<T = any>({\n  items,\n  isOpen,\n  onSelect,\n  onClose,\n  onOpen,\n  loop = true,\n  disabled = false,\n  listboxRef,\n  optionSelector = '[role=\"option\"]'\n}: UseComboboxNavigationOptions<T>): UseComboboxNavigationReturn {\n  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);\n  \n  // Reset highlighted index when dropdown closes\n  useEffect(() => {\n    if (!isOpen) {\n      setHighlightedIndex(-1);\n    }\n  }, [isOpen]);\n  \n  // Auto-scroll highlighted item into view\n  useScrollActiveIntoView({\n    containerRef: listboxRef,\n    activeIndex: highlightedIndex,\n    itemSelector: optionSelector,\n    enabled: isOpen\n  });\n  \n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) {\n        // For disabled navigation, still handle Escape\n        if (e.key === 'Escape' && isOpen) {\n          e.preventDefault();\n          onClose();\n        }\n        return;\n      }\n      \n      const itemCount = items.length;\n      \n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!isOpen && itemCount > 0) {\n            // Open dropdown and highlight first item\n            onOpen?.();\n            setHighlightedIndex(0);\n          } else if (isOpen && itemCount > 0) {\n            // Navigate down\n            setHighlightedIndex((prev) => {\n              if (loop) {\n                return (prev + 1) % itemCount;\n              }\n              return Math.min(prev + 1, itemCount - 1);\n            });\n          }\n          break;\n          \n        case 'ArrowUp':\n          e.preventDefault();\n          if (isOpen && itemCount > 0) {\n            // Navigate up\n            setHighlightedIndex((prev) => {\n              // If nothing highlighted, go to last item\n              if (prev === -1) {\n                return itemCount - 1;\n              }\n              if (loop) {\n                return (prev - 1 + itemCount) % itemCount;\n              }\n              return Math.max(prev - 1, 0);\n            });\n          }\n          break;\n          \n        case 'Enter':\n          if (isOpen && highlightedIndex >= 0 && items[highlightedIndex]) {\n            e.preventDefault();\n            onSelect(items[highlightedIndex], highlightedIndex);\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Escape':\n          if (isOpen) {\n            e.preventDefault();\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n          \n        case 'Tab':\n          // Close dropdown on Tab (don't preventDefault - let focus move naturally)\n          if (isOpen) {\n            onClose();\n            setHighlightedIndex(-1);\n          }\n          break;\n      }\n    },\n    [disabled, items, isOpen, highlightedIndex, onSelect, onClose, onOpen, loop]\n  );\n  \n  const getOptionId = useCallback(\n    (listboxId: string, index: number) => `${listboxId}-option-${index}`,\n    []\n  );\n  \n  return {\n    highlightedIndex,\n    setHighlightedIndex,\n    handleKeyDown,\n    getOptionId\n  };\n}\n"],"names":["useState","useEffect","useCallback","useScrollActiveIntoView","useComboboxNavigation","items","isOpen","onSelect","onClose","onOpen","loop","disabled","listboxRef","optionSelector","highlightedIndex","setHighlightedIndex","containerRef","activeIndex","itemSelector","enabled","handleKeyDown","e","key","preventDefault","itemCount","length","prev","Math","min","max","getOptionId","listboxId","index"],"mappings":"AA2GO,SAAA,YAAAA,GAAA,aAAAC,GAAA,eAAAC,SAAA;AAAA,SAAA,2BAAAC,SAAA;AAAA,SAASC,EAA+B;AAAA,EAC7CC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,YAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AACc,GAAgC;AAC/D,QAAM,CAACC,GAAkBC,CAAmB,IAAIf,EAAiB,EAAE;AAGnEC,EAAAA,EAAU,MAAM;AACd,IAAKK,KACHS,EAAoB,EAAE;AAAA,EAE1B,GAAG,CAACT,CAAM,CAAC,GAGXH,EAAwB;AAAA,IACtBa,cAAcJ;AAAAA,IACdK,aAAaH;AAAAA,IACbI,cAAcL;AAAAA,IACdM,SAASb;AAAAA,EAAAA,CACV;AAED,QAAMc,IAAgBlB,EACpB,CAACmB,MAA2B;AAC1B,QAAIV,GAAU;AAEZ,MAAIU,EAAEC,QAAQ,YAAYhB,MACxBe,EAAEE,eAAAA,GACFf,EAAAA;AAEF;AAAA,IACF;AAEA,UAAMgB,IAAYnB,EAAMoB;AAExB,YAAQJ,EAAEC,KAAAA;AAAAA,MACR,KAAK;AACHD,QAAAA,EAAEE,eAAAA,GACE,CAACjB,KAAUkB,IAAY,KAEzBf,IAAAA,GACAM,EAAoB,CAAC,KACZT,KAAUkB,IAAY,KAE/BT,EAAqBW,CAAAA,MACfhB,KACMgB,IAAO,KAAKF,IAEfG,KAAKC,IAAIF,IAAO,GAAGF,IAAY,CAAC,CACxC;AAEH;AAAA,MAEF,KAAK;AACHH,QAAAA,EAAEE,eAAAA,GACEjB,KAAUkB,IAAY,KAExBT,EAAqBW,CAAAA,MAEfA,MAAS,KACJF,IAAY,IAEjBd,KACMgB,IAAO,IAAIF,KAAaA,IAE3BG,KAAKE,IAAIH,IAAO,GAAG,CAAC,CAC5B;AAEH;AAAA,MAEF,KAAK;AACH,QAAIpB,KAAUQ,KAAoB,KAAKT,EAAMS,CAAgB,MAC3DO,EAAEE,eAAAA,GACFhB,EAASF,EAAMS,CAAgB,GAAGA,CAAgB,GAClDC,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AACH,QAAIT,MACFe,EAAEE,eAAAA,GACFf,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,MAEF,KAAK;AAEH,QAAIT,MACFE,EAAAA,GACAO,EAAoB,EAAE;AAExB;AAAA,IAAA;AAAA,EAEN,GACA,CAACJ,GAAUN,GAAOC,GAAQQ,GAAkBP,GAAUC,GAASC,GAAQC,CAAI,CAC7E,GAEMoB,IAAc5B,EAClB,CAAC6B,GAAmBC,MAAkB,GAAGD,CAAS,WAAWC,CAAK,IAClE,CAAA,CACF;AAEA,SAAO;AAAA,IACLlB,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAK,eAAAA;AAAAA,IACAU,aAAAA;AAAAA,EAAAA;AAEJ;"}

package/dist/index24.js

@@ -4,8 +4,8 @@ import { Icon as M } from "./index5.js";
 import { Checkbox as me } from "./index22.js";
 import { Button as R } from "./index3.js";
 import { InputWithIcon as fe } from "./index51.js";
-import { useStableId as T } from "./index189.js";
-import { useCombobox as pe } from "./index195.js";
+import { useStableId as T } from "./index190.js";
+import { useCombobox as pe } from "./index196.js";
 function m() {
   return m = Object.assign ? Object.assign.bind() : function(t) {
     for (var a = 1; a < arguments.length; a++) {

package/dist/index27.js

@@ -1,7 +1,7 @@
 import d, { useMemo as S, useRef as D, useEffect as c } from "react";
 import { Icon as j } from "./index5.js";
-import { getA11yNameAttributes as B } from "./index70.js";
-import { useDismissOnEscape as M } from "./index197.js";
+import { getA11yNameAttributes as B } from "./index71.js";
+import { useDismissOnEscape as M } from "./index198.js";
 /* empty css         */
 function m() {
   return m = Object.assign ? Object.assign.bind() : function(r) {

package/dist/index28.js

@@ -1,84 +1,143 @@
-import r, { useState as f, useEffect as k } from "react";
-import { Icon as E } from "./index5.js";
-import { Popover as N } from "./index18.js";
-import { MenuList as I } from "./index17.js";
+import o, { useState as F, useMemo as R, useRef as S, useEffect as _ } from "react";
+import { Icon as $ } from "./index5.js";
+import { Popover as j } from "./index18.js";
+import { MenuList as B } from "./index17.js";
+import { useStableId as z } from "./index190.js";
+import { getA11yNameAttributes as H } from "./index71.js";
+import { useTabsA11y as V, getPanelId as q } from "./index69.js";
 /* empty css         */
-const M = ({
-  defaultActiveTab: a,
-  tabs: o,
-  onTabChange: p,
-  primaryTabCount: i = 0,
-  singleTabAsHeading: y = !1
+function s() {
+  return s = Object.assign ? Object.assign.bind() : function(l) {
+    for (var t = 1; t < arguments.length; t++) {
+      var i = arguments[t];
+      for (var c in i) ({}).hasOwnProperty.call(i, c) && (l[c] = i[c]);
+    }
+    return l;
+  }, s.apply(null, arguments);
+}
+const ee = ({
+  defaultActiveTab: l,
+  tabs: t,
+  onTabChange: i,
+  primaryTabCount: c,
+  headingLevel: v,
+  id: A,
+  ariaLabel: D = "Tabs",
+  ariaLabelledBy: L,
+  panelId: f
 }) => {
-  const T = a || (o[0] ? o[0].id : ""), [n, c] = f(T), [d, m] = f(!1), v = i || o?.length, h = o.slice(0, v), l = o.slice(v), s = l.find((e) => e.id === n), x = y && o.length === 1;
-  k(() => {
-    c(a || "");
-  }, [a]);
-  const u = (e) => {
-    c(e?.id), p?.(e?.id);
-  }, b = (e, t) => e.id === t;
-  if (x) {
-    const e = o[0];
-    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", {
-      className: "se-design-tabs-heading text-xl font-semibold text-[var(--color-gray-900)] mb-4"
-    }, e.label), /* @__PURE__ */ r.createElement("div", {
+  const O = l || (t[0] ? t[0].id : ""), [d, g] = F(O), [p, h] = F(!1), T = c ?? t?.length, b = t.slice(0, T), m = t.slice(T), u = m.find((e) => e.id === d), w = t.some((e) => e.renderTabContent), y = z(A, "tabs"), M = R(() => {
+    const e = b.filter((a) => !a.disabled), r = m.filter((a) => !a.disabled), n = e.map((a) => a.id);
+    return r.length > 0 ? [...n, "overflow"] : n;
+  }, [b, m]), {
+    getTabProps: E,
+    getPanelProps: K,
+    handleKeyDown: I,
+    setFocusedTabId: x
+  } = V({
+    itemIds: M,
+    activeItem: d,
+    orientation: "horizontal",
+    idBase: y,
+    includePanelLinks: w || !!f,
+    externalPanelId: f
+  }), k = S(null);
+  _(() => {
+    g(l || "");
+  }, [l]);
+  const C = (e) => {
+    g(e?.id), i?.(e?.id);
+  }, P = (e, r) => e.id === r;
+  if (v && t.length === 1) {
+    const e = t[0];
+    return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(v, {
+      className: "se-design-tabs se-design-tabs-heading"
+    }, e.label), /* @__PURE__ */ o.createElement("div", {
       className: "se-design-tabs-content"
-    }, /* @__PURE__ */ r.createElement("div", {
+    }, /* @__PURE__ */ o.createElement("div", {
       className: "tab-content block"
     }, e?.renderTabContent && e?.renderTabContent(e))));
   }
-  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-400)] w-fit",
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", s({
+    className: "se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit",
+    role: "tablist",
     "data-automation-id": "tabs-container"
-  }, h.map((e) => {
-    const t = n === e.id, g = e.disabled;
-    return /* @__PURE__ */ r.createElement("div", {
-      key: e.label,
-      onClick: () => !g && u(e),
-      className: `se-design-tab-item text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${g ? "text-[var(--color-gray-400)] cursor-not-allowed" : t ? "se-design-tab-item-active text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out"}`,
+  }, H({
+    ariaLabel: D,
+    ariaLabelledBy: L
+  })), b.map((e) => {
+    const r = d === e.id, n = !!e.disabled, a = E(e.id);
+    return /* @__PURE__ */ o.createElement("button", s({
+      type: "button",
+      key: e.id
+    }, a, {
+      disabled: n,
+      "aria-label": e.ariaLabel,
+      onFocus: () => !n && x(e.id),
+      onKeyDown: I,
+      onClick: () => C(e),
+      className: `se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${n ? "" : "focus-outline"} ${n ? "text-[var(--color-gray-400)] cursor-not-allowed" : r ? "se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out"}`,
       "data-automation-id": `tab-item-${e.automationId || e.id || ""}`
-    }, e.label);
-  }), l.length > 0 && /* @__PURE__ */ r.createElement(N, {
+    }), e.label);
+  }), m.length > 0 && /* @__PURE__ */ o.createElement(j, {
     className: "se-design-overflow-tabs",
     position: "bottom-left",
     automationId: "tabs-kebab-menu",
     noBorder: !0,
+    disableClickToggle: !0,
+    onPopoverToggle: (e) => {
+      e || k.current?.focus();
+    },
     renderPopoverSrcElement: ({
-      displayPopover: e
-    }) => /* @__PURE__ */ r.createElement("div", {
-      className: `overflow-tabs-src-element border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${e ? "bg-[var(--color-blue-100)]" : ""} ${s?.label ? "bg-[var(--color-blue-100)]" : "hover:bg-[var(--color-gray-50)]"}`,
-      onMouseEnter: () => m(!0),
-      onMouseLeave: () => m(!1)
-    }, s?.label ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("span", {
-      className: "text-[var(--color-blue-500)]"
-    }, s?.label), /* @__PURE__ */ r.createElement(E, {
-      name: "chevron",
-      rotation: e ? "180" : "0",
-      stroke: d ? "var(--color-gray-900)" : "var(--color-gray-700)"
-    })) : /* @__PURE__ */ r.createElement(E, {
-      name: "kebab-menu",
-      fill: d ? "var(--color-gray-900)" : "var(--color-gray-700)"
-    })),
+      displayPopover: e,
+      togglePopover: r
+    }) => {
+      const n = E("overflow"), a = u ? q(u.id, y) : void 0;
+      return /* @__PURE__ */ o.createElement("div", s({}, n, {
+        ref: (N) => {
+          k.current = N, n.ref(N);
+        },
+        "aria-controls": a,
+        "aria-haspopup": "true",
+        "aria-expanded": e,
+        onClick: () => r(),
+        onFocus: () => x("overflow"),
+        onKeyDown: I,
+        className: `overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${e ? "bg-[var(--color-blue-100)]" : ""} ${u?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
+        onMouseEnter: () => h(!0),
+        onMouseLeave: () => h(!1)
+      }), u?.label ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("span", {
+        className: "text-[var(--color-white)]"
+      }, u?.label), /* @__PURE__ */ o.createElement($, {
+        name: "chevron",
+        rotation: e ? "180" : "0",
+        stroke: p ? "var(--color-gray-100)" : "var(--color-white)"
+      })) : /* @__PURE__ */ o.createElement($, {
+        name: "kebab-menu",
+        fill: p ? "var(--color-gray-900)" : "var(--color-gray-700)"
+      }));
+    },
     renderPopoverContents: ({
       closePopoverCb: e
-    }) => /* @__PURE__ */ r.createElement(I, {
-      items: l.map((t) => ({
-        id: t?.id,
-        label: t?.label,
-        automationId: t?.automationId || t?.id,
+    }) => /* @__PURE__ */ o.createElement(B, {
+      items: m.map((r) => ({
+        id: r?.id,
+        label: r?.label,
+        automationId: r?.automationId || r?.id,
         onClick: () => {
-          u(t), e();
+          C(r), e();
         }
       }))
     })
-  })), /* @__PURE__ */ r.createElement("div", {
+  })), w && /* @__PURE__ */ o.createElement("div", {
     className: "se-design-tabs-content"
-  }, o.map((e) => /* @__PURE__ */ r.createElement("div", {
-    key: e.id,
-    className: `tab-content ${b(e, n) ? "block" : "hidden"}`
-  }, b(e, n) && e?.renderTabContent && e?.renderTabContent(e)))));
+  }, t.map((e) => /* @__PURE__ */ o.createElement("div", s({
+    key: e.id
+  }, K(e.id), {
+    className: `tab-content ${P(e, d) ? "block" : "hidden"}`
+  }), P(e, d) && e.renderTabContent?.(e)))));
 };
 export {
-  M as Tabs
+  ee as Tabs
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n  automationId?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  singleTabAsHeading?: boolean; // prop for rendering single tab as heading\n  automationId?: string;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount = 0,\n  singleTabAsHeading = false\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = primaryTabCount ? primaryTabCount : tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  // Check if we should render as heading (single tab and singleTabAsHeading is true)\n  const shouldRenderAsHeading = singleTabAsHeading && tabs.length === 1;\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  // If single tab and should render as heading, render just the heading\n  if (shouldRenderAsHeading) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <div className=\"se-design-tabs-heading text-xl font-semibold text-[var(--color-gray-900)] mb-4\">\n          {singleTab.label}\n        </div>\n        <div className=\"se-design-tabs-content\">\n          <div className=\"tab-content block\">\n            {singleTab?.renderTabContent && singleTab?.renderTabContent(singleTab)}\n          </div>\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-400)] w-fit\"\n        data-automation-id=\"tabs-container\"\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`se-design-tab-item text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'se-design-tab-item-active text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            automationId=\"tabs-kebab-menu\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => {\n              return (\n                <div\n                  className={`overflow-tabs-src-element border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  } ${activeOverflowTab?.label ? 'bg-[var(--color-blue-100)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-blue-500)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'}\n                      />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  id: tab?.id,\n                  label: tab?.label,\n                  automationId: tab?.automationId || tab?.id,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div key={tab.id} className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}>\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","singleTabAsHeading","defaultTabId","id","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","shouldRenderAsHeading","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","renderTabContent","map","isActive","isDisabled","disabled","key","onClick","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
+{"version":3,"file":"index28.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect, useMemo, useRef } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\nimport { useStableId } from '../../utils/useStableId';\nimport { useTabsA11y, getPanelId, getA11yNameAttributes } from '../../utils/a11y';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n  automationId?: string;\n  ariaLabel?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'; // heading tag to render single tab as a heading element when only one tab is present\n  automationId?: string;\n  id?: string; // custom ID for baseId (passed to useStableId)\n  ariaLabel?: string; // Accessible name when no visible label exists\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel)\n  panelId?: string; // When consumer manages a single external panel, pass its id here\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount,\n  headingLevel: HeadingTag,\n  id,\n  ariaLabel = 'Tabs',\n  ariaLabelledBy,\n  panelId\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = primaryTabCount ?? tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  // Only render internal panels if at least one tab provides content via renderTabContent\n  const hasPanelContent = tabs.some(t => t.renderTabContent);\n\n  // A11y setup\n  const baseId = useStableId(id, 'tabs');\n  const itemIds = useMemo(() => {\n    const enabledVisibleTabs = visibleTabs.filter(t => !t.disabled);\n    const enabledOverflowTabs = overflowTabs.filter(t => !t.disabled);\n    const visibleIds = enabledVisibleTabs.map(t => t.id);\n    return enabledOverflowTabs.length > 0 ? [...visibleIds, 'overflow'] : visibleIds;\n  }, [visibleTabs, overflowTabs]);\n\n  const { getTabProps, getPanelProps, handleKeyDown, setFocusedTabId } = useTabsA11y({\n    itemIds,\n    activeItem: activeTab,\n    orientation: 'horizontal',\n    idBase: baseId,\n    includePanelLinks: hasPanelContent || !!panelId,\n    externalPanelId: panelId\n  });\n\n  // Ref for the overflow button div — needed to return focus after menu closes\n  const overflowDivRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  if (HeadingTag && tabs.length === 1) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <HeadingTag className=\"se-design-tabs se-design-tabs-heading\">\n          {singleTab.label}\n        </HeadingTag>\n        <div className=\"se-design-tabs-content\">\n          <div className=\"tab-content block\">\n            {singleTab?.renderTabContent && singleTab?.renderTabContent(singleTab)}\n          </div>\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit\"\n        role=\"tablist\"\n        data-automation-id=\"tabs-container\"\n        {...getA11yNameAttributes({\n          ariaLabel,\n          ariaLabelledBy\n        })}\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = !!tab.disabled;\n          const tabProps = getTabProps(tab.id);\n          return (\n            <button\n              type=\"button\"\n              key={tab.id}\n              {...tabProps}\n              disabled={isDisabled}\n              aria-label={tab.ariaLabel}\n              onFocus={() => !isDisabled && setFocusedTabId(tab.id)}\n              onKeyDown={handleKeyDown}\n              onClick={() => handleTabClick(tab)}\n              className={`se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${!isDisabled ? 'focus-outline' : ''} ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            automationId=\"tabs-kebab-menu\"\n            noBorder\n            disableClickToggle={true}\n            onPopoverToggle={(isOpen) => {\n              // Return focus to the overflow button when the menu closes (e.g. Escape)\n              if (!isOpen) overflowDivRef.current?.focus();\n            }}\n            renderPopoverSrcElement={({ displayPopover, togglePopover }) => {\n              const overflowTabProps = getTabProps('overflow');\n              const overflowAriaControls = activeOverflowTab\n                ? getPanelId(activeOverflowTab.id, baseId)\n                : undefined;\n\n              return (\n                <div\n                  {...overflowTabProps}\n                  ref={(el) => { overflowDivRef.current = el; overflowTabProps.ref(el); }}\n                  aria-controls={overflowAriaControls}\n                  aria-haspopup=\"true\"\n                  aria-expanded={displayPopover}\n                  onClick={() => togglePopover()}\n                  onFocus={() => setFocusedTabId('overflow')}\n                  onKeyDown={handleKeyDown}\n                  className={`overflow-tabs-src-element focus-outline border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  } ${activeOverflowTab?.label ? 'bg-[var(--color-blue-500)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-white)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-100)' : 'var(--color-white)'}\n                      />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  id: tab?.id,\n                  label: tab?.label,\n                  automationId: tab?.automationId || tab?.id,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      {hasPanelContent && (\n        <div className=\"se-design-tabs-content\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.id}\n              {...getPanelProps(tab.id)}\n              className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}\n            >\n              {isTabActive(tab, activeTab) && tab.renderTabContent?.(tab)}\n            </div>\n          ))}\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","headingLevel","HeadingTag","id","ariaLabel","ariaLabelledBy","panelId","defaultTabId","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","hasPanelContent","some","t","renderTabContent","baseId","useStableId","itemIds","useMemo","enabledVisibleTabs","filter","disabled","enabledOverflowTabs","visibleIds","map","getTabProps","getPanelProps","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","role","getA11yNameAttributes","isActive","isDisabled","tabProps","type","key","onFocus","onKeyDown","onClick","automationId","Popover","position","noBorder","disableClickToggle","onPopoverToggle","isOpen","current","focus","renderPopoverSrcElement","displayPopover","togglePopover","overflowTabProps","overflowAriaControls","getPanelId","undefined","ref","el","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":";;;;;;;;;;;;;;;;;AA8BO,MAAMA,KAAsBA,CAAC;AAAA,EAClCC,kBAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAcC;AAAAA,EACdC,IAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,gBAAAA;AAAAA,EACAC,SAAAA;AACF,MAAM;AACJ,QAAMC,IAAeV,MAAqBC,EAAK,CAAC,IAAIA,EAAK,CAAC,EAAEK,KAAK,KAC3D,CAACK,GAAWC,CAAY,IAAIC,EAASH,CAAY,GACjD,CAACI,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GAEpDG,IAAkBb,KAAmBF,GAAMgB,QAC3CC,IAAcjB,EAAKkB,MAAM,GAAGH,CAAe,GAC3CI,IAAenB,EAAKkB,MAAMH,CAAe,GACzCK,IAAoBD,EAAaE,KAAMC,CAAAA,MAAQA,EAAIjB,OAAOK,CAAS,GAGnEa,IAAkBvB,EAAKwB,KAAKC,CAAAA,MAAKA,EAAEC,gBAAgB,GAGnDC,IAASC,EAAYvB,GAAI,MAAM,GAC/BwB,IAAUC,EAAQ,MAAM;AAC5B,UAAMC,IAAqBd,EAAYe,OAAOP,CAAAA,MAAK,CAACA,EAAEQ,QAAQ,GACxDC,IAAsBf,EAAaa,OAAOP,CAAAA,MAAK,CAACA,EAAEQ,QAAQ,GAC1DE,IAAaJ,EAAmBK,IAAIX,CAAAA,MAAKA,EAAEpB,EAAE;AACnD,WAAO6B,EAAoBlB,SAAS,IAAI,CAAC,GAAGmB,GAAY,UAAU,IAAIA;AAAAA,EACxE,GAAG,CAAClB,GAAaE,CAAY,CAAC,GAExB;AAAA,IAAEkB,aAAAA;AAAAA,IAAaC,eAAAA;AAAAA,IAAeC,eAAAA;AAAAA,IAAeC,iBAAAA;AAAAA,EAAAA,IAAoBC,EAAY;AAAA,IACjFZ,SAAAA;AAAAA,IACAa,YAAYhC;AAAAA,IACZiC,aAAa;AAAA,IACbC,QAAQjB;AAAAA,IACRkB,mBAAmBtB,KAAmB,CAAC,CAACf;AAAAA,IACxCsC,iBAAiBtC;AAAAA,EAAAA,CAClB,GAGKuC,IAAiBC,EAAuB,IAAI;AAElDC,EAAAA,EAAU,MAAM;AACdtC,IAAAA,EAAaZ,KAAoB,EAAE;AAAA,EACrC,GAAG,CAACA,CAAgB,CAAC;AAErB,QAAMmD,IAAiBA,CAAC5B,MAAkB;AACxCX,IAAAA,EAAaW,GAAKjB,EAAE,GACpBJ,IAAcqB,GAAKjB,EAAE;AAAA,EACvB,GAEM8C,IAAcA,CAAC7B,GAAeZ,MAC3BY,EAAIjB,OAAOK;AAGpB,MAAIN,KAAcJ,EAAKgB,WAAW,GAAG;AACnC,UAAMoC,IAAYpD,EAAK,CAAC;AACxB,6BACEqD,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAACjD,GAAU;AAAA,MAACoD,WAAU;AAAA,IAAA,GACnBJ,EAAUK,KACD,GACZH,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MAAKG,WAAU;AAAA,IAAA,GACbF,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MAAKG,WAAU;AAAA,IAAA,GACZJ,GAAW1B,oBAAoB0B,GAAW1B,iBAAiB0B,CAAS,CAClE,CACF,CACL;AAAA,EAEN;AAEA,SACEE,gBAAAA,EAAAD,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAAK,EAAA;AAAA,IACEF,WAAU;AAAA,IACVG,MAAK;AAAA,IACL,sBAAmB;AAAA,EAAA,GACfC,EAAsB;AAAA,IACxBtD,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,CACD,CAAC,GAEDU,EAAYmB,IAAKd,CAAAA,MAAQ;AACxB,UAAMuC,IAAWnD,MAAcY,EAAIjB,IAC7ByD,IAAa,CAAC,CAACxC,EAAIW,UACnB8B,IAAW1B,EAAYf,EAAIjB,EAAE;AACnC,WACEiD,gBAAAA,EAAAD,cAAA,UAAAK,EAAA;AAAA,MACEM,MAAK;AAAA,MACLC,KAAK3C,EAAIjB;AAAAA,IAAAA,GACL0D,GAAQ;AAAA,MACZ9B,UAAU6B;AAAAA,MACV,cAAYxC,EAAIhB;AAAAA,MAChB4D,SAASA,MAAM,CAACJ,KAActB,EAAgBlB,EAAIjB,EAAE;AAAA,MACpD8D,WAAW5B;AAAAA,MACX6B,SAASA,MAAMlB,EAAe5B,CAAG;AAAA,MACjCkC,WAAW,gLAAiLM,IAA+B,KAAlB,eAAoB,IAC3NA,IACI,oDACAD,IACA,oHACA,oKAAoK;AAAA,MAE1K,sBAAoB,YAAYvC,EAAI+C,gBAAgB/C,EAAIjB,MAAM,EAAE;AAAA,IAAA,CAAG,GAElEiB,EAAImC,KACC;AAAA,EAEZ,CAAC,GAEAtC,EAAaH,SAAS,KACrBsC,gBAAAA,EAAAD,cAACiB,GAAO;AAAA,IACNd,WAAU;AAAA,IACVe,UAAS;AAAA,IACTF,cAAa;AAAA,IACbG,UAAQ;AAAA,IACRC,oBAAoB;AAAA,IACpBC,iBAAkBC,CAAAA,MAAW;AAE3B,MAAKA,KAAQ5B,EAAe6B,SAASC,MAAAA;AAAAA,IACvC;AAAA,IACAC,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,MAAgBC,eAAAA;AAAAA,IAAAA,MAAoB;AAC9D,YAAMC,IAAmB5C,EAAY,UAAU,GACzC6C,IAAuB9D,IACzB+D,EAAW/D,EAAkBf,IAAIsB,CAAM,IACvCyD;AAEJ,+BACE/B,cAAA,OAAAK,MACMuB,GAAgB;AAAA,QACpBI,KAAMC,CAAAA,MAAO;AAAEvC,UAAAA,EAAe6B,UAAUU,GAAIL,EAAiBI,IAAIC,CAAE;AAAA,QAAG;AAAA,QACtE,iBAAeJ;AAAAA,QACf,iBAAc;AAAA,QACd,iBAAeH;AAAAA,QACfX,SAASA,MAAMY,EAAAA;AAAAA,QACfd,SAASA,MAAM1B,EAAgB,UAAU;AAAA,QACzC2B,WAAW5B;AAAAA,QACXiB,WAAW,sJACTuB,IAAiB,+BAA+B,EAAE,IAChD3D,GAAmBqC,QAAQ,+BAA+B,iCAAiC;AAAA,QAC/F8B,cAAcA,MAAMzE,EAAkB,EAAI;AAAA,QAC1C0E,cAAcA,MAAM1E,EAAkB,EAAK;AAAA,MAAA,CAAE,GAE5CM,GAAmBqC,QAClBH,gBAAAA,EAAAD,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,QAAA;AAAA,QAAMG,WAAU;AAAA,MAAA,GAA6BpC,GAAmBqC,KAAY,GAC5EH,gBAAAA,EAAAD,cAACoC,GAAI;AAAA,QACHC,MAAK;AAAA,QACLC,UAAUZ,IAAiB,QAAQ;AAAA,QACnCa,QAAQ/E,IAAiB,0BAA0B;AAAA,MAAA,CACpD,CACD,IAEFyC,gBAAAA,EAAAD,cAACoC,GAAI;AAAA,QAACC,MAAK;AAAA,QAAaG,MAAMhF,IAAiB,0BAA0B;AAAA,MAAA,CAA0B,CAElG;AAAA,IAET;AAAA,IACAiF,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBzC,gBAAAA,EAAAD,cAAC2C,GAAQ;AAAA,MACPC,OAAO9E,EAAaiB,IAAKd,CAAAA,OAAS;AAAA,QAChCjB,IAAIiB,GAAKjB;AAAAA,QACToD,OAAOnC,GAAKmC;AAAAA,QACZY,cAAc/C,GAAK+C,gBAAgB/C,GAAKjB;AAAAA,QACxC+D,SAASA,MAAM;AACblB,UAAAA,EAAe5B,CAAG,GAClByE,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACH;AAAA,EAAA,CAEJ,CAEA,GAEJxE,KACC+B,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZxD,EAAKoC,IAAKd,OACTgC,gBAAAA,EAAAD,cAAA,OAAAK,EAAA;AAAA,IACEO,KAAK3C,EAAIjB;AAAAA,EAAAA,GACLiC,EAAchB,EAAIjB,EAAE,GAAC;AAAA,IACzBmD,WAAW,eAAeL,EAAY7B,GAAKZ,CAAS,IAAI,UAAU,QAAQ;AAAA,EAAA,CAAG,GAE5EyC,EAAY7B,GAAKZ,CAAS,KAAKY,EAAII,mBAAmBJ,CAAG,CACvD,CACN,CACE,CAEP;AAEN;"}

package/dist/index29.js

@@ -1,7 +1,7 @@
 import e, { forwardRef as H } from "react";
 import { Icon as J } from "./index5.js";
 import { Button as b } from "./index3.js";
-import { useStableId as I } from "./index189.js";
+import { useStableId as I } from "./index190.js";
 import { getRegionAttributes as K } from "./index65.js";
 import { useAccessiblePress as M } from "./index66.js";
 /* empty css         */

package/dist/index3.js

@@ -1,5 +1,5 @@
 import r, { forwardRef as I } from "react";
-import { getA11yNameAttributes as R } from "./index70.js";
+import { getA11yNameAttributes as R } from "./index71.js";
 import { useAccessiblePress as z } from "./index66.js";
 import { Icon as b } from "./index5.js";
 /* empty css        */