se-design 1.0.59 → 1.0.61-dev

package/dist/index19.js

@@ -1,36 +1,17 @@
 import e from "react";
-import { Popover as l } from "./index17.js";
-import { Icon as s } from "./index5.js";
-const t = {
-  base: "se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center",
-  active: "bg-[var(--color-blue-450)]",
-  hover: "hover:bg-[var(--color-blue-450)]"
-}, u = ({
-  className: a = "",
-  automationId: n = "",
-  popoverContentAutomationId: m = "",
-  menuContent: o,
-  popoverClassName: c = ""
-}) => /* @__PURE__ */ e.createElement(l, {
+const o = ({
+  leftContainer: t,
+  centerContainer: l,
+  rightContainer: r,
   className: a,
-  position: "bottom-left",
-  automationId: n,
-  popoverContentAutomationId: m,
-  renderPopoverSrcElement: ({
-    displayPopover: r
-  }) => /* @__PURE__ */ e.createElement("div", {
-    className: `${t.base} ${r ? t.active : ""} ${t.hover}`
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: "hamburger",
-    stroke: "var(--color-white)"
-  })),
-  renderPopoverContents: (r) => /* @__PURE__ */ e.createElement("div", {
-    className: `min-w-[212px] ${c}`
-  }, o && /* @__PURE__ */ e.createElement("div", {
-    className: "menu-content"
-  }, o(r)))
-});
+  id: n,
+  ...u
+}) => /* @__PURE__ */ e.createElement("header", {
+  id: n,
+  tabIndex: -1,
+  className: `se-design-header ${a} sticky top-0 h-[48px] w-full z-[1010] bg-[var(--color-blue-600)] flex justify-between items-center focus:outline-none [&_*:focus-visible]:!outline-[var(--color-blue-300)] ${u?.type === "fixed" ? "fixed left-0 right-0 top-0" : ""}`
+}, t && /* @__PURE__ */ e.createElement(e.Fragment, null, t), l && /* @__PURE__ */ e.createElement(e.Fragment, null, l), r && /* @__PURE__ */ e.createElement(e.Fragment, null, r));
 export {
-  u as HamburgerMenu
+  o as Header
 };
 //# sourceMappingURL=index19.js.map

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n  popoverClassName?: string;\n}\n\nconst menuClasses = {\n  base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center',\n  active: 'bg-[var(--color-blue-450)]',\n  hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent,\n  popoverClassName = ''\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n          <Icon name='hamburger' stroke={'var(--color-white)'} />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className={`min-w-[212px] ${popoverClassName}`}>\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["React__default","Popover","Icon","menuClasses","base","active","hover","HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","popoverClassName","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAYA,OAAAA,OAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAc;AAAA,EAClBC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,OAAO;AACT,GAEaC,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AACrB,MAGIC,gBAAAA,EAAAC,cAACb,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAO,UAAS;AAAA,EACTN,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAM,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAW,GAAGL,EAAYC,IAAI,IAAIa,IAAiBd,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGO,gBAAAA,EAAAC,cAACZ,GAAI;AAAA,IAACgB,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBR,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAW,iBAAiBI,CAAgB;AAAA,EAAA,GAC9CD,KAAeE,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,EAAA,GAAgBG,EAAYU,CAAI,CAAO,CACnE;AAAA,CAER;"}
+{"version":3,"file":"index19.js","sources":["../src/components/Header/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport interface HeaderProps {\n  leftContainer?: React.ReactNode;\n  centerContainer?: React.ReactNode;\n  rightContainer?: React.ReactNode;\n  type?: string;\n  className?: string;\n  id?: string;\n}\n\nexport const Header: FC<HeaderProps> = ({\n  leftContainer,\n  centerContainer,\n  rightContainer,\n  className,\n  id,\n  ...props\n}) => {\n  return (\n    <header\n      id={id}\n      tabIndex={-1}\n      className={`se-design-header ${className} sticky top-0 h-[48px] w-full z-[1010] bg-[var(--color-blue-600)] flex justify-between items-center focus:outline-none [&_*:focus-visible]:!outline-[var(--color-blue-300)] ${\n        props?.type === 'fixed' ? 'fixed left-0 right-0 top-0' : ''\n      }`}\n    >\n      {leftContainer && <>{leftContainer}</>}\n      {centerContainer && <>{centerContainer}</>}\n      {rightContainer && <>{rightContainer}</>}\n    </header>\n  );\n};\n"],"names":["Header","leftContainer","centerContainer","rightContainer","className","id","props","React","createElement","tabIndex","type","Fragment"],"mappings":";AAWO,MAAMA,IAA0BA,CAAC;AAAA,EACtCC,eAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACA,GAAGC;AACL,MAEIC,gBAAAA,EAAAC,cAAA,UAAA;AAAA,EACEH,IAAAA;AAAAA,EACAI,UAAU;AAAA,EACVL,WAAW,oBAAoBA,CAAS,+KACtCE,GAAOI,SAAS,UAAU,+BAA+B,EAAE;AAAA,GAG5DT,KAAiBM,gBAAAA,EAAAC,cAAAD,EAAAI,UAAA,MAAGV,CAAgB,GACpCC,KAAmBK,gBAAAA,EAAAC,cAAAD,EAAAI,UAAA,MAAGT,CAAkB,GACxCC,KAAkBI,gBAAAA,EAAAC,cAAAD,EAAAI,UAAA,MAAGR,CAAiB,CACjC;"}

package/dist/index191.js

@@ -0,0 +1,87 @@
+import { useRef as u, useCallback as f, useEffect as P } from "react";
+import { useComboboxNavigation as y } from "./index225.js";
+import { useDismissOnFocusOut as R } from "./index188.js";
+function M({
+  items: l,
+  isOpen: t,
+  onOpenChange: s,
+  onSelect: g,
+  listboxId: n,
+  loop: h = !0,
+  disabled: x = !1,
+  optionSelector: b = '[role="option"]',
+  hasItems: c
+}) {
+  const d = u(null), r = u(!1), i = u(!1), m = c !== void 0 ? c : l.length > 0, a = f(() => {
+    s(!1);
+  }, [s]);
+  P(() => {
+    t || (r.current = !1);
+  }, [t]);
+  const e = y({
+    items: l,
+    isOpen: t,
+    onSelect: g,
+    onClose: a,
+    onOpen: () => s(!0),
+    loop: h,
+    disabled: x,
+    listboxRef: d,
+    optionSelector: b
+  }), p = R({
+    onFocusOut: a,
+    onEscape: a,
+    disabled: !t
+  }), v = {
+    ...p,
+    onBlurCapture: (o) => {
+      if (!r.current) {
+        if (i.current) {
+          i.current = !1;
+          return;
+        }
+        p.onBlurCapture(o);
+      }
+    }
+  }, I = {
+    role: "combobox",
+    "aria-expanded": t && m,
+    "aria-haspopup": "listbox",
+    "aria-controls": t ? n : void 0,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": e.highlightedIndex >= 0 ? e.getOptionId(n, e.highlightedIndex) : void 0,
+    onKeyDown: (o) => {
+      o.key === "Tab" && (i.current = !0), e.handleKeyDown(o);
+    }
+  }, w = {
+    id: n,
+    role: "listbox",
+    ref: d,
+    onMouseDownCapture: (o) => {
+      r.current = !0;
+    },
+    onMouseUpCapture: (o) => {
+      r.current = !1;
+    },
+    onMouseLeave: (o) => {
+      r.current = !1;
+    }
+  }, C = f((o, D = !1) => ({
+    id: e.getOptionId(n, o),
+    role: "option",
+    "aria-selected": D
+  }), [e.getOptionId, n]);
+  return {
+    containerProps: v,
+    inputProps: I,
+    listboxProps: w,
+    getOptionProps: C,
+    highlightedIndex: e.highlightedIndex,
+    setHighlightedIndex: e.setHighlightedIndex,
+    getOptionId: e.getOptionId
+  };
+}
+export {
+  M as useCombobox
+};
+//# sourceMappingURL=index191.js.map

package/dist/index191.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index191.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<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 to change the open state\n   */\n  onOpenChange: (open: boolean) => void;\n  \n  /**\n   * Callback when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Stable ID for the listbox element\n   */\n  listboxId: string;\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   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n  \n  /**\n   * Whether the listbox has any items to show\n   * Used for aria-expanded logic\n   * Default: items.length > 0\n   */\n  hasItems?: boolean;\n}\n\nexport interface UseComboboxReturn {\n  /**\n   * Props to spread on the container element (handles dismiss on focus out)\n   */\n  containerProps: UseDismissOnFocusOutReturn<HTMLElement>;\n  \n  /**\n   * Props to spread on the combobox input element\n   */\n  inputProps: {\n    role: 'combobox';\n    'aria-expanded': boolean;\n    'aria-haspopup': 'listbox';\n    'aria-controls': string | undefined;\n    'aria-autocomplete': 'list';\n    'aria-activedescendant': string | undefined;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n  };\n  \n  /**\n   * Props to spread on the listbox element\n   */\n  listboxProps: {\n    id: string;\n    role: 'listbox';\n    ref: RefObject<HTMLDivElement | null>;\n    onMouseDownCapture: (e: React.MouseEvent) => void;\n    onMouseUpCapture: (e: React.MouseEvent) => void;\n    onMouseLeave: (e: React.MouseEvent) => void;\n  };\n  \n  /**\n   * Generate props for an option element at the given index\n   * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n   */\n  getOptionProps: (index: number, selected?: boolean) => {\n    id: string;\n    role: 'option';\n    'aria-selected': boolean;\n  };\n  \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   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n *   const [isOpen, setIsOpen] = useState(false);\n *   const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n *   \n *   const {\n *     containerProps,\n *     inputProps,\n *     listboxProps,\n *     getOptionProps,\n *     highlightedIndex\n *   } = useCombobox({\n *     items,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (item) => console.log('Selected:', item),\n *     listboxId: 'my-listbox'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input {...inputProps} />\n *       {isOpen && (\n *         <div {...listboxProps}>\n *           {items.map((item, i) => (\n *             <div key={i} {...getOptionProps(i)}>\n *               {item}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n *   const [query, setQuery] = useState('');\n *   const [suggestions, setSuggestions] = useState([]);\n *   const [isOpen, setIsOpen] = useState(false);\n *   \n *   const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n *     items: suggestions,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (suggestion) => {\n *       setQuery(suggestion);\n *       setIsOpen(false);\n *     },\n *     listboxId: 'search-suggestions'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input\n *         {...inputProps}\n *         value={query}\n *         onChange={(e) => setQuery(e.target.value)}\n *         aria-label=\"Search\"\n *       />\n *       {isOpen && suggestions.length > 0 && (\n *         <div {...listboxProps} aria-label=\"Search suggestions\">\n *           {suggestions.map((suggestion, i) => (\n *             <div\n *               key={i}\n *               {...getOptionProps(i)}\n *               onClick={() => {\n *                 setQuery(suggestion);\n *                 setIsOpen(false);\n *               }}\n *             >\n *               {suggestion}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n  items,\n  isOpen,\n  onOpenChange,\n  onSelect,\n  listboxId,\n  loop = true,\n  disabled = false,\n  optionSelector = '[role=\"option\"]',\n  hasItems\n}: UseComboboxOptions<T>): UseComboboxReturn {\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n  const pointerDownInListboxRef = useRef(false);\n  const tabKeyPressedRef = useRef(false);\n  \n  // Determine if we should show as expanded\n  const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n  \n  // Close dropdown callback\n  const closeDropdown = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // Ensure pointer state doesn't get stuck when listbox unmounts\n  useEffect(() => {\n    if (!isOpen) {\n      pointerDownInListboxRef.current = false;\n    }\n  }, [isOpen]);\n  \n  // Keyboard navigation with aria-activedescendant\n  const navigation = useComboboxNavigation<T>({\n    items,\n    isOpen,\n    onSelect,\n    onClose: closeDropdown,\n    onOpen: () => onOpenChange(true),\n    loop,\n    disabled,\n    listboxRef,\n    optionSelector\n  });\n  \n  // Focus out / Escape dismissal\n  const dismissHandlers = useDismissOnFocusOut({\n    onFocusOut: closeDropdown,\n    onEscape: closeDropdown,\n    disabled: !isOpen\n  });\n\n  const containerProps: UseDismissOnFocusOutReturn<HTMLElement> = {\n    ...dismissHandlers,\n    onBlurCapture: (e) => {\n      // Clicking inside a listbox option can blur the input (relatedTarget is null),\n      // which would dismiss before the click handler runs. Prevent that.\n      if (pointerDownInListboxRef.current) return;\n      \n      // Tab key pressed - let Tab handler close dropdown, skip blur detection\n      if (tabKeyPressedRef.current) {\n        tabKeyPressedRef.current = false;\n        return;\n      }\n      \n      dismissHandlers.onBlurCapture(e);\n    }\n  };\n  \n  // Build input props\n  const inputProps = {\n    role: 'combobox' as const,\n    'aria-expanded': isOpen && shouldShowExpanded,\n    'aria-haspopup': 'listbox' as const,\n    'aria-controls': isOpen ? listboxId : undefined,\n    'aria-autocomplete': 'list' as const,\n    'aria-activedescendant': \n      navigation.highlightedIndex >= 0 \n        ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n        : undefined,\n    onKeyDown: (e: React.KeyboardEvent) => {\n      // Set flag when Tab is pressed (before blur fires)\n      if (e.key === 'Tab') {\n        tabKeyPressedRef.current = true;\n      }\n      navigation.handleKeyDown(e);\n    }\n  };\n  \n  // Build listbox props\n  const listboxProps = {\n    id: listboxId,\n    role: 'listbox' as const,\n    ref: listboxRef,\n    onMouseDownCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = true;\n    },\n    onMouseUpCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    },\n    onMouseLeave: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    }\n  };\n  \n  // Option props generator\n  const getOptionProps = useCallback(\n    (index: number, selected: boolean = false) => ({\n      id: navigation.getOptionId(listboxId, index),\n      role: 'option' as const,\n      'aria-selected': selected\n    }),\n    [navigation.getOptionId, listboxId]\n  );\n  \n  return {\n    containerProps,\n    inputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex: navigation.highlightedIndex,\n    setHighlightedIndex: navigation.setHighlightedIndex,\n    getOptionId: navigation.getOptionId\n  };\n}\n"],"names":["useRef","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onBlurCapture","e","inputProps","role","highlightedIndex","getOptionId","onKeyDown","key","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"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"}

package/dist/index193.js

@@ -0,0 +1,26 @@
+import { useEffect as d } from "react";
+function p({
+  containerRef: r,
+  onDismiss: e,
+  enabled: n = !0,
+  preventDefault: u = !0,
+  stopPropagation: c = !0
+}) {
+  d(() => {
+    if (!n || !e) return;
+    const o = r.current;
+    if (!o) return;
+    const a = (t) => {
+      t.key === "Escape" && o.contains(document.activeElement) && (u && t.preventDefault(), c && t.stopPropagation(), e());
+    };
+    return document.addEventListener("keydown", a, {
+      capture: !0
+    }), () => document.removeEventListener("keydown", a, {
+      capture: !0
+    });
+  }, [n, e, r, u, c]);
+}
+export {
+  p as useDismissOnEscape
+};
+//# sourceMappingURL=index193.js.map

package/dist/index193.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index193.js","sources":["../src/utils/a11y/useDismissOnEscape.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface UseDismissOnEscapeOptions<T extends HTMLElement = HTMLElement> {\n  /**\n   * Container element ref to check if focus is within.\n   * Escape will only trigger if focus is within this container.\n   */\n  containerRef: RefObject<T | null>;\n  /**\n   * Callback when Escape key is pressed and focus is within container.\n   */\n  onDismiss?: () => void;\n  /**\n   * Whether the Escape handler is active.\n   * Default: true\n   */\n  enabled?: boolean;\n  /**\n   * Whether to call preventDefault() when handling Escape.\n   * Default: true\n   */\n  preventDefault?: boolean;\n  /**\n   * Whether to call stopPropagation() when handling Escape.\n   * Default: true\n   */\n  stopPropagation?: boolean;\n}\n\n/**\n * Hook to handle Escape key dismissal when focus is within a container.\n * \n * This is a UX pattern: if user is interacting with an overlay/sidebar\n * (indicated by focus being within it), Escape should close it.\n * \n * @example\n * ```tsx\n * const MySidebar = ({ isOpen, onClose }) => {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   \n *   useDismissOnEscape({\n *     containerRef,\n *     onDismiss: onClose,\n *     enabled: isOpen\n *   });\n *   \n *   return <div ref={containerRef}>...</div>;\n * };\n * ```\n */\nexport function useDismissOnEscape<T extends HTMLElement = HTMLElement>({\n  containerRef,\n  onDismiss,\n  enabled = true,\n  preventDefault = true,\n  stopPropagation = true\n}: UseDismissOnEscapeOptions<T>): void {\n  useEffect(() => {\n    if (!enabled || !onDismiss) return;\n    \n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && container.contains(document.activeElement)) {\n        preventDefault && e.preventDefault();\n        stopPropagation && e.stopPropagation();\n        onDismiss();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape, { capture: true });\n    return () => document.removeEventListener('keydown', handleEscape, { capture: true });\n  }, [enabled, onDismiss, containerRef, preventDefault, stopPropagation]);\n}\n"],"names":["useEffect","useDismissOnEscape","containerRef","onDismiss","enabled","preventDefault","stopPropagation","container","current","handleEscape","e","key","contains","document","activeElement","addEventListener","capture","removeEventListener"],"mappings":"AAmDO,SAAA,aAAAA,SAAA;AAAA,SAASC,EAAwD;AAAA,EACtEC,cAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,gBAAAA,IAAiB;AAAA,EACjBC,iBAAAA,IAAkB;AACU,GAAS;AACrCN,EAAAA,EAAU,MAAM;AACd,QAAI,CAACI,KAAW,CAACD,EAAW;AAE5B,UAAMI,IAAYL,EAAaM;AAC/B,QAAI,CAACD,EAAW;AAEhB,UAAME,IAAeA,CAACC,MAAqB;AACzC,MAAIA,EAAEC,QAAQ,YAAYJ,EAAUK,SAASC,SAASC,aAAa,MACjET,KAAkBK,EAAEL,eAAAA,GACpBC,KAAmBI,EAAEJ,gBAAAA,GACrBH,EAAAA;AAAAA,IAEJ;AAEAU,oBAASE,iBAAiB,WAAWN,GAAc;AAAA,MAAEO,SAAS;AAAA,IAAA,CAAM,GAC7D,MAAMH,SAASI,oBAAoB,WAAWR,GAAc;AAAA,MAAEO,SAAS;AAAA,IAAA,CAAM;AAAA,EACtF,GAAG,CAACZ,GAASD,GAAWD,GAAcG,GAAgBC,CAAe,CAAC;AACxE;"}

package/dist/index20.js

@@ -1,60 +1,36 @@
-import t, { useRef as v } from "react";
-import { TableContentLoader as E } from "./index25.js";
-function n() {
-  return n = Object.assign ? Object.assign.bind() : function(a) {
-    for (var l = 1; l < arguments.length; l++) {
-      var e = arguments[l];
-      for (var r in e) ({}).hasOwnProperty.call(e, r) && (a[r] = e[r]);
-    }
-    return a;
-  }, n.apply(null, arguments);
-}
-const O = ({
+import e from "react";
+import { Popover as l } from "./index18.js";
+import { Icon as s } from "./index5.js";
+const t = {
+  base: "se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center",
+  active: "bg-[var(--color-blue-450)]",
+  hover: "hover:bg-[var(--color-blue-450)]"
+}, u = ({
   className: a = "",
-  automationId: l = "",
-  loading: e,
-  headerColSpan: r = [],
-  headerData: o,
-  tableData: s,
-  renderTableContentLoader: h,
-  getTableHeaders: c,
-  getTableBody: u,
-  getTableFooter: b,
-  onSortUiUpdate: i,
-  onRowClick: m,
-  tableId: d,
-  ariaDescribedBy: f,
-  ...g
-}) => {
-  const p = v(null);
-  return /* @__PURE__ */ t.createElement("div", n({
-    className: "se-design-table-layout-wrapper" + (a.length > 0 ? ` ${a}` : "") + (e ? " table-data-loading" : "")
-  }, g), /* @__PURE__ */ t.createElement("table", {
-    className: "se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed",
-    ref: p,
-    "data-automation-id": l,
-    id: d,
-    "aria-describedby": f
-  }, /* @__PURE__ */ t.createElement("thead", null, /* @__PURE__ */ t.createElement("tr", null, c({
-    headerData: o,
-    sortData: {},
-    onSortUiUpdate: i,
-    loading: e
-  }))), /* @__PURE__ */ t.createElement("tbody", null, e ? /* @__PURE__ */ t.createElement(E, {
-    noOfColumns: o?.length,
-    colSpan: r
-  }) : u({
-    tableData: s,
-    onRowClick: m,
-    loading: e
-  }))), /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-table-footer w-full bg-[var(--color-white)]"
-  }, b({
-    tableData: s,
-    loading: e
-  })));
-};
+  automationId: n = "",
+  popoverContentAutomationId: m = "",
+  menuContent: o,
+  popoverClassName: c = ""
+}) => /* @__PURE__ */ e.createElement(l, {
+  className: a,
+  position: "bottom-left",
+  automationId: n,
+  popoverContentAutomationId: m,
+  renderPopoverSrcElement: ({
+    displayPopover: r
+  }) => /* @__PURE__ */ e.createElement("div", {
+    className: `${t.base} ${r ? t.active : ""} ${t.hover}`
+  }, /* @__PURE__ */ e.createElement(s, {
+    name: "hamburger",
+    stroke: "var(--color-white)"
+  })),
+  renderPopoverContents: (r) => /* @__PURE__ */ e.createElement("div", {
+    className: `min-w-[212px] ${c}`
+  }, o && /* @__PURE__ */ e.createElement("div", {
+    className: "menu-content"
+  }, o(r)))
+});
 export {
-  O as TableLayout
+  u as HamburgerMenu
 };
 //# sourceMappingURL=index20.js.map

package/dist/index20.js.map

@@ -1 +1 @@
-{"version":3,"file":"index20.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n  className?: string;\n  automationId?: string;\n  loading: boolean;\n  headerData: any[];\n  tableData: any[];\n  headerColSpan?: number[];\n  renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n  getTableHeaders: (props: { headerData: any[]; sortData: any; onSortUiUpdate: any; loading: boolean }) => ReactNode;\n  getTableBody: (props: { tableData: any[]; onRowClick: any; loading: boolean }) => ReactNode;\n  getTableFooter: (props: { tableData: any[]; loading: boolean }) => ReactNode;\n  onSortUiUpdate: (newSortData: any) => void;\n  onRowClick: (rowData: any) => void;\n  tableId: string;\n  /**\n   * ID of element that describes the table (e.g., sort instructions for screen readers)\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n  className = '',\n  automationId = '',\n  loading,\n  headerColSpan = [],\n  headerData,\n  tableData,\n  renderTableContentLoader,\n  getTableHeaders,\n  getTableBody,\n  getTableFooter,\n  onSortUiUpdate,\n  onRowClick,\n  tableId,\n  ariaDescribedBy,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  return (\n    <div className={'se-design-table-layout-wrapper' + (className.length > 0 ? ` ${className}` : '') + (loading? ' table-data-loading' : '')} {...props}>\n      <table\n        className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n        ref={tableRef}\n        data-automation-id={automationId}\n        id={tableId}\n        aria-describedby={ariaDescribedBy}\n      >\n        <thead>\n          <tr>{getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}</tr>\n        </thead>\n        <tbody>\n          {loading ? (\n            <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n          ) : (\n            getTableBody({ tableData, onRowClick, loading })\n          )}\n        </tbody>\n      </table>\n      <div className=\"se-design-table-footer w-full bg-[var(--color-white)]\">\n        {getTableFooter({ tableData, loading })}\n      </div>\n    </div>\n  );\n};\n"],"names":["TableLayout","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","getTableFooter","onSortUiUpdate","onRowClick","tableId","ariaDescribedBy","props","tableRef","useRef","React","createElement","_extends","length","ref","id","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;AAuBO,MAAMA,IAAoCA,CAAC;AAAA,EAChDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,SAAAA;AAAAA,EACAC,eAAAA,IAAgB,CAAA;AAAA,EAChBC,YAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,0BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKnB,WAAW,oCAAoCA,EAAUoB,SAAS,IAAI,IAAIpB,CAAS,KAAK,OAAOE,IAAS,wBAAwB;AAAA,EAAA,GAASY,CAAK,GACjJG,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACElB,WAAW;AAAA,IACXqB,KAAKN;AAAAA,IACL,sBAAoBd;AAAAA,IACpBqB,IAAIV;AAAAA,IACJ,oBAAkBC;AAAAA,EAAAA,qBAElBK,cAAA,SAAA,MACED,gBAAAA,EAAAC,cAAA,MAAA,MAAKX,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYmB,UAAU,CAAA;AAAA,IAAIb,gBAAAA;AAAAA,IAAgBR,SAAAA;AAAAA,EAAAA,CAAS,CAAM,CAC3E,GACPe,gBAAAA,EAAAC,cAAA,SAAA,MACGhB,IACCe,gBAAAA,EAAAC,cAACM,GAAkB;AAAA,IAACC,aAAarB,GAAYgB;AAAAA,IAAQM,SAASvB;AAAAA,EAAAA,CAAgB,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWM,YAAAA;AAAAA,IAAYT,SAAAA;AAAAA,EAAAA,CAAS,CAE5C,CACF,GACPe,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKlB,WAAU;AAAA,EAAA,GACZS,EAAe;AAAA,IAAEJ,WAAAA;AAAAA,IAAWH,SAAAA;AAAAA,EAAAA,CAAS,CACnC,CACF;AAET;"}
+{"version":3,"file":"index20.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n  popoverClassName?: string;\n}\n\nconst menuClasses = {\n  base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center',\n  active: 'bg-[var(--color-blue-450)]',\n  hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent,\n  popoverClassName = ''\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n          <Icon name='hamburger' stroke={'var(--color-white)'} />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className={`min-w-[212px] ${popoverClassName}`}>\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["React__default","Popover","Icon","menuClasses","base","active","hover","HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","popoverClassName","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAYA,OAAAA,OAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAc;AAAA,EAClBC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,OAAO;AACT,GAEaC,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AACrB,MAGIC,gBAAAA,EAAAC,cAACb,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAO,UAAS;AAAA,EACTN,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAM,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAW,GAAGL,EAAYC,IAAI,IAAIa,IAAiBd,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGO,gBAAAA,EAAAC,cAACZ,GAAI;AAAA,IAACgB,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBR,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAW,iBAAiBI,CAAgB;AAAA,EAAA,GAC9CD,KAAeE,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,EAAA,GAAgBG,EAAYU,CAAI,CAAO,CACnE;AAAA,CAER;"}

package/dist/{index197.js → index201.js}

@@ -12,4 +12,4 @@ function n(o, u) {
 export {
   n as debounce
 };
-//# sourceMappingURL=index197.js.map
+//# sourceMappingURL=index201.js.map

package/dist/{index197.js.map → index201.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index197.js","sources":["../src/utils/debounce.ts"],"sourcesContent":["export function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> | null;\n    const debounced = (...args: Parameters<T>) => {\n      if (timeout) clearTimeout(timeout);\n      timeout = setTimeout(() => {\n        func(...args);\n      }, wait);\n    };\n    debounced.cancel = () => {\n      if (timeout) clearTimeout(timeout);\n      timeout = null;\n    };\n    return debounced as T & { cancel: () => void };\n  }"],"names":["debounce","func","wait","timeout","debounced","args","setTimeout","cancel"],"mappings":"AAAO,SAASA,EAA6CC,GAASC,GAAc;AAChF,MAAIC;AACJ,QAAMC,IAAYA,IAAIC,MAAwB;AAC5C,IAAIF,kBAAsBA,CAAO,GACjCA,IAAUG,WAAW,MAAM;AACzBL,MAAAA,EAAK,GAAGI,CAAI;AAAA,IACd,GAAGH,CAAI;AAAA,EACT;AACAE,SAAAA,EAAUG,SAAS,MAAM;AACvB,IAAIJ,kBAAsBA,CAAO,GACjCA,IAAU;AAAA,EACZ,GACOC;AACT;"}
+{"version":3,"file":"index201.js","sources":["../src/utils/debounce.ts"],"sourcesContent":["export function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> | null;\n    const debounced = (...args: Parameters<T>) => {\n      if (timeout) clearTimeout(timeout);\n      timeout = setTimeout(() => {\n        func(...args);\n      }, wait);\n    };\n    debounced.cancel = () => {\n      if (timeout) clearTimeout(timeout);\n      timeout = null;\n    };\n    return debounced as T & { cancel: () => void };\n  }"],"names":["debounce","func","wait","timeout","debounced","args","setTimeout","cancel"],"mappings":"AAAO,SAASA,EAA6CC,GAASC,GAAc;AAChF,MAAIC;AACJ,QAAMC,IAAYA,IAAIC,MAAwB;AAC5C,IAAIF,kBAAsBA,CAAO,GACjCA,IAAUG,WAAW,MAAM;AACzBL,MAAAA,EAAK,GAAGI,CAAI;AAAA,IACd,GAAGH,CAAI;AAAA,EACT;AACAE,SAAAA,EAAUG,SAAS,MAAM;AACvB,IAAIJ,kBAAsBA,CAAO,GACjCA,IAAU;AAAA,EACZ,GACOC;AACT;"}

package/dist/{index205.js → index209.js}

@@ -1233,4 +1233,4 @@ const e = [
 export {
   e as default
 };
-//# sourceMappingURL=index205.js.map
+//# sourceMappingURL=index209.js.map

package/dist/{index205.js.map → index209.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index205.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index209.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index21.js

@@ -1,82 +1,60 @@
-import i, { useState as D, useEffect as O } from "react";
-import { useStableId as S } from "./index181.js";
-import { getA11yNameAttributes as _ } from "./index67.js";
-import { mergeIds as $ } from "./index182.js";
-/* empty css         */
-function b() {
-  return b = Object.assign ? Object.assign.bind() : function(s) {
-    for (var a = 1; a < arguments.length; a++) {
-      var n = arguments[a];
-      for (var e in n) ({}).hasOwnProperty.call(n, e) && (s[e] = n[e]);
+import t, { useRef as v } from "react";
+import { TableContentLoader as E } from "./index26.js";
+function n() {
+  return n = Object.assign ? Object.assign.bind() : function(a) {
+    for (var l = 1; l < arguments.length; l++) {
+      var e = arguments[l];
+      for (var r in e) ({}).hasOwnProperty.call(e, r) && (a[r] = e[r]);
     }
-    return s;
-  }, b.apply(null, arguments);
+    return a;
+  }, n.apply(null, arguments);
 }
-const F = ({
-  className: s = "",
-  automationId: a = "",
-  defaultChecked: n = !1,
-  disabled: e = !1,
-  onChange: d,
-  checkMarkType: r = "",
-  label: h = "",
-  disabledLabel: f = "",
-  containerAutomationId: g = "",
-  ariaLabel: p,
-  ariaLabelledBy: E,
-  ariaDescribedBy: v
+const O = ({
+  className: a = "",
+  automationId: l = "",
+  loading: e,
+  headerColSpan: r = [],
+  headerData: o,
+  tableData: s,
+  renderTableContentLoader: h,
+  getTableHeaders: c,
+  getTableBody: u,
+  getTableFooter: b,
+  onSortUiUpdate: i,
+  onRowClick: m,
+  tableId: d,
+  ariaDescribedBy: f,
+  ...g
 }) => {
-  const [t, u] = D(n);
-  O(() => {
-    u(n);
-  }, [n]);
-  const y = (c) => {
-    e || (u((o) => !o), d?.(!t, c));
-  }, N = (c) => {
-    if (!e && (c.key === "Enter" || c.key === " ")) {
-      c.preventDefault(), c.stopPropagation();
-      const o = !t;
-      u(o);
-      const m = c.currentTarget.closest("label")?.querySelector("input");
-      m && d?.(o, {
-        target: m,
-        currentTarget: m
-      });
-    }
-  }, C = () => e ? t && r === "tick" ? "disabled-tick" : t && r === "minus-checkbox" ? "disabled-minus-checkbox" : t && !r ? "disabled-tick" : "disabled-default" : r === "minus-checkbox" && t ? "minus-checkbox" : t ? "checked" : "unchecked", I = () => e ? "checkbox-label-disabled" : "checkbox-label", x = () => e && f ? f : h, l = S(void 0, "checkbox-input"), k = h ? `${l}-label` : void 0, w = _({
-    ariaLabelledBy: $(k, E),
-    ariaLabel: p,
-    ariaDescribedBy: v
-  }), A = () => r === "minus-checkbox" && t ? "mixed" : t ? "true" : "false";
-  return /* @__PURE__ */ i.createElement("div", {
-    className: "se-design-checkbox-ctn"
-  }, /* @__PURE__ */ i.createElement("label", b({
-    role: "checkbox",
-    htmlFor: l,
-    className: `se-design-checkbox ${s} ${C()}`,
-    "data-automation-id": g || "checkbox-container",
-    tabIndex: e ? -1 : 0,
-    "aria-checked": A(),
-    "aria-disabled": e ? "true" : "false"
-  }, w, {
-    onKeyDown: N
-  }), /* @__PURE__ */ i.createElement("input", {
-    id: l,
-    type: "checkbox",
-    checked: t,
-    onChange: y,
-    disabled: e,
-    "aria-hidden": "true"
-  }), /* @__PURE__ */ i.createElement("span", {
-    className: "checkbox-item",
-    "data-automation-id": a
-  }), x()?.length > 0 && /* @__PURE__ */ i.createElement("span", {
-    id: k,
-    className: I(),
-    "data-automation-id": "checkbox-label"
-  }, x())));
+  const p = v(null);
+  return /* @__PURE__ */ t.createElement("div", n({
+    className: "se-design-table-layout-wrapper" + (a.length > 0 ? ` ${a}` : "") + (e ? " table-data-loading" : "")
+  }, g), /* @__PURE__ */ t.createElement("table", {
+    className: "se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed",
+    ref: p,
+    "data-automation-id": l,
+    id: d,
+    "aria-describedby": f
+  }, /* @__PURE__ */ t.createElement("thead", null, /* @__PURE__ */ t.createElement("tr", null, c({
+    headerData: o,
+    sortData: {},
+    onSortUiUpdate: i,
+    loading: e
+  }))), /* @__PURE__ */ t.createElement("tbody", null, e ? /* @__PURE__ */ t.createElement(E, {
+    noOfColumns: o?.length,
+    colSpan: r
+  }) : u({
+    tableData: s,
+    onRowClick: m,
+    loading: e
+  }))), /* @__PURE__ */ t.createElement("div", {
+    className: "se-design-table-footer w-full bg-[var(--color-white)]"
+  }, b({
+    tableData: s,
+    loading: e
+  })));
 };
 export {
-  F as Checkbox
+  O as TableLayout
 };
 //# sourceMappingURL=index21.js.map

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { mergeIds } from '../../utils/mergeIds';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  /**\n   * Explicit accessible name for the checkbox.\n   * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this checkbox (for screen reader association).\n   * Typically used when checkbox is part of a larger labelled context.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this checkbox (provides additional context).\n   * Often used for help text or instructions.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy\n}) => {\n  const [isChecked, setIsChecked] = useState(defaultChecked);\n\n  useEffect(() => {\n    setIsChecked(defaultChecked);\n  }, [defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    setIsChecked((prev) => (checkMarkType === 'minus-checkbox' ? !prev : !prev));\n    onChange?.(!isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = !isChecked;\n      setIsChecked(newChecked);\n      \n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement,\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return 'minus-checkbox';\n    return isChecked ? 'checked' : 'unchecked';\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n  \n  // Generate stable IDs (persists across renders)\n  const inputId = useStableId(undefined, 'checkbox-input');\n  const labelId = label ? `${inputId}-label` : undefined;\n\n  const a11yNameAttributes = getA11yNameAttributes({\n    ariaLabelledBy: mergeIds(labelId, ariaLabelledBy),\n    ariaLabel,\n    ariaDescribedBy\n  });\n\n  // Determine aria-checked value: \"mixed\" for indeterminate, \"true\" for checked, \"false\" for unchecked\n  const getAriaChecked = () => {\n    if (checkMarkType === 'minus-checkbox' && isChecked) {\n      return 'mixed'; // Indeterminate/half-checked state\n    }\n    return isChecked ? 'true' : 'false';\n  };\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label\n        role=\"checkbox\"\n        htmlFor={inputId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={disabled ? -1 : 0}\n        aria-checked={getAriaChecked()}\n        aria-disabled={disabled ? 'true' : 'false'}\n        {...a11yNameAttributes}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && (\n          <span id={labelId} className={getLabelClassName()} data-automation-id=\"checkbox-label\">\n            {getLabelText()}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","undefined","labelId","a11yNameAttributes","getA11yNameAttributes","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","checked","length"],"mappings":"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"}
+{"version":3,"file":"index21.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n  className?: string;\n  automationId?: string;\n  loading: boolean;\n  headerData: any[];\n  tableData: any[];\n  headerColSpan?: number[];\n  renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n  getTableHeaders: (props: { headerData: any[]; sortData: any; onSortUiUpdate: any; loading: boolean }) => ReactNode;\n  getTableBody: (props: { tableData: any[]; onRowClick: any; loading: boolean }) => ReactNode;\n  getTableFooter: (props: { tableData: any[]; loading: boolean }) => ReactNode;\n  onSortUiUpdate: (newSortData: any) => void;\n  onRowClick: (rowData: any) => void;\n  tableId: string;\n  /**\n   * ID of element that describes the table (e.g., sort instructions for screen readers)\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n  className = '',\n  automationId = '',\n  loading,\n  headerColSpan = [],\n  headerData,\n  tableData,\n  renderTableContentLoader,\n  getTableHeaders,\n  getTableBody,\n  getTableFooter,\n  onSortUiUpdate,\n  onRowClick,\n  tableId,\n  ariaDescribedBy,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  return (\n    <div className={'se-design-table-layout-wrapper' + (className.length > 0 ? ` ${className}` : '') + (loading? ' table-data-loading' : '')} {...props}>\n      <table\n        className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n        ref={tableRef}\n        data-automation-id={automationId}\n        id={tableId}\n        aria-describedby={ariaDescribedBy}\n      >\n        <thead>\n          <tr>{getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}</tr>\n        </thead>\n        <tbody>\n          {loading ? (\n            <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n          ) : (\n            getTableBody({ tableData, onRowClick, loading })\n          )}\n        </tbody>\n      </table>\n      <div className=\"se-design-table-footer w-full bg-[var(--color-white)]\">\n        {getTableFooter({ tableData, loading })}\n      </div>\n    </div>\n  );\n};\n"],"names":["TableLayout","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","getTableFooter","onSortUiUpdate","onRowClick","tableId","ariaDescribedBy","props","tableRef","useRef","React","createElement","_extends","length","ref","id","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;AAuBO,MAAMA,IAAoCA,CAAC;AAAA,EAChDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,SAAAA;AAAAA,EACAC,eAAAA,IAAgB,CAAA;AAAA,EAChBC,YAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,0BAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKnB,WAAW,oCAAoCA,EAAUoB,SAAS,IAAI,IAAIpB,CAAS,KAAK,OAAOE,IAAS,wBAAwB;AAAA,EAAA,GAASY,CAAK,GACjJG,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACElB,WAAW;AAAA,IACXqB,KAAKN;AAAAA,IACL,sBAAoBd;AAAAA,IACpBqB,IAAIV;AAAAA,IACJ,oBAAkBC;AAAAA,EAAAA,qBAElBK,cAAA,SAAA,MACED,gBAAAA,EAAAC,cAAA,MAAA,MAAKX,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYmB,UAAU,CAAA;AAAA,IAAIb,gBAAAA;AAAAA,IAAgBR,SAAAA;AAAAA,EAAAA,CAAS,CAAM,CAC3E,GACPe,gBAAAA,EAAAC,cAAA,SAAA,MACGhB,IACCe,gBAAAA,EAAAC,cAACM,GAAkB;AAAA,IAACC,aAAarB,GAAYgB;AAAAA,IAAQM,SAASvB;AAAAA,EAAAA,CAAgB,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWM,YAAAA;AAAAA,IAAYT,SAAAA;AAAAA,EAAAA,CAAS,CAE5C,CACF,GACPe,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKlB,WAAU;AAAA,EAAA,GACZS,EAAe;AAAA,IAAEJ,WAAAA;AAAAA,IAAWH,SAAAA;AAAAA,EAAAA,CAAS,CACnC,CACF;AAET;"}

package/dist/{index207.js → index211.js}

@@ -32,4 +32,4 @@ b.displayName = "TabButton";
 export {
   b as TabButton
 };
-//# sourceMappingURL=index207.js.map
+//# sourceMappingURL=index211.js.map

package/dist/{index207.js.map → index211.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index207.js","sources":["../src/components/NavigationBar/TabButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface TabButtonProps {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  isDisabled?: boolean;\n  panelId: string;\n  tabIndex: number;\n  className?: string;\n  automationId?: string;\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocus: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Internal TabButton component for NavigationBar.\n * Uses Button (unstyled) internally for consistent activation handling.\n * Supports forwardRef for focus management (roving tabindex).\n */\nexport const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(\n  (\n    {\n      id,\n      label,\n      isSelected,\n      isDisabled = false,\n      panelId,\n      tabIndex,\n      className = '',\n      automationId,\n      onClick,\n      onFocus,\n      onKeyDown\n    },\n    ref\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        type=\"unstyled\"\n        label={label}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={className}\n        automationId={automationId}\n        role=\"tab\"\n        id={id}\n        aria-selected={isSelected}\n        aria-controls={panelId}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["React__default","forwardRef","Button","TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","type","disabled","role","displayName"],"mappings":"AAsBO,OAAAA,KAAA,cAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,MAAMC,sBACX,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AACF,GACAC,MAGEC,gBAAAA,EAAAC,cAACf,GAAM;AAAA,EACLa,KAAAA;AAAAA,EACAG,MAAK;AAAA,EACLb,OAAAA;AAAAA,EACAc,UAAUZ;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAS,MAAK;AAAA,EACLhB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,EACf,iBAAeE;AAAAA,EACfC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CACD,CAGP;AAEAX,EAAUkB,cAAc;"}
+{"version":3,"file":"index211.js","sources":["../src/components/NavigationBar/TabButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface TabButtonProps {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  isDisabled?: boolean;\n  panelId: string;\n  tabIndex: number;\n  className?: string;\n  automationId?: string;\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onFocus: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Internal TabButton component for NavigationBar.\n * Uses Button (unstyled) internally for consistent activation handling.\n * Supports forwardRef for focus management (roving tabindex).\n */\nexport const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(\n  (\n    {\n      id,\n      label,\n      isSelected,\n      isDisabled = false,\n      panelId,\n      tabIndex,\n      className = '',\n      automationId,\n      onClick,\n      onFocus,\n      onKeyDown\n    },\n    ref\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        type=\"unstyled\"\n        label={label}\n        disabled={isDisabled}\n        onClick={onClick}\n        className={className}\n        automationId={automationId}\n        role=\"tab\"\n        id={id}\n        aria-selected={isSelected}\n        aria-controls={panelId}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["React__default","forwardRef","Button","TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","type","disabled","role","displayName"],"mappings":"AAsBO,OAAAA,KAAA,cAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,MAAMC,sBACX,CACE;AAAA,EACEC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AACF,GACAC,MAGEC,gBAAAA,EAAAC,cAACf,GAAM;AAAA,EACLa,KAAAA;AAAAA,EACAG,MAAK;AAAA,EACLb,OAAAA;AAAAA,EACAc,UAAUZ;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAS,MAAK;AAAA,EACLhB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,EACf,iBAAeE;AAAAA,EACfC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CACD,CAGP;AAEAX,EAAUkB,cAAc;"}

package/dist/{index208.js → index212.js}

@@ -1,5 +1,5 @@
 import { useCallback as d } from "react";
-import { useRovingFocus as g } from "./index186.js";
+import { useRovingFocus as g } from "./index189.js";
 const u = (e, t) => `tab${t ? `-${t}` : ""}-${e}`, c = (e, t) => `panel${t ? `-${t}` : ""}-${e}`;
 function P({
   itemIds: e,
@@ -41,4 +41,4 @@ function P({
 export {
   P as useTabsA11y
 };
-//# sourceMappingURL=index208.js.map
+//# sourceMappingURL=index212.js.map