se-design 1.0.74 → 1.0.76-dev1

package/dist/index200.js.map

@@ -1 +1 @@
-{"version":3,"file":"index200.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":"AAkNO,SAAA,UAAAA,GAAA,eAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,SAAA,wBAAAC,SAAA;AAAA,SAASC,EAAqB;AAAA,EACnCC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA;AACqB,GAAsB;AAC3C,QAAMC,IAAaf,EAA8B,IAAI,GAC/CgB,IAA0BhB,EAAO,EAAK,GACtCiB,IAAmBjB,EAAO,EAAK,GAG/BkB,IAAqBJ,MAAaK,SAAYL,IAAWR,EAAMc,SAAS,GAGxEC,IAAgBpB,EAAY,MAAM;AACtCO,IAAAA,EAAa,EAAK;AAAA,EACpB,GAAG,CAACA,CAAY,CAAC;AAGjBN,EAAAA,EAAU,MAAM;AACd,IAAKK,MACHS,EAAwBM,UAAU;AAAA,EAEtC,GAAG,CAACf,CAAM,CAAC;AAGX,QAAMgB,IAAapB,EAAyB;AAAA,IAC1CG,OAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAE,UAAAA;AAAAA,IACAe,SAASH;AAAAA,IACTI,QAAQA,MAAMjB,EAAa,EAAI;AAAA,IAC/BG,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAG,YAAAA;AAAAA,IACAF,gBAAAA;AAAAA,EAAAA,CACD,GAGKa,IAAkBtB,EAAqB;AAAA,IAC3CuB,YAAYN;AAAAA,IACZO,UAAUP;AAAAA,IACVT,UAAU,CAACL;AAAAA,EAAAA,CACZ,GAEKsB,IAA0D;AAAA,IAC9D,GAAGH;AAAAA,IACHI,eAAgBC,CAAAA,MAAM;AAGpB,UAAIf,CAAAA,EAAwBM,SAG5B;AAAA,YAAIL,EAAiBK,SAAS;AAC5BL,UAAAA,EAAiBK,UAAU;AAC3B;AAAA,QACF;AAEAI,QAAAA,EAAgBI,cAAcC,CAAC;AAAA;AAAA,IACjC;AAAA,EAAA,GAIIC,IAAa;AAAA,IACjBC,MAAM;AAAA,IACN,iBAAiB1B,KAAUW;AAAAA,IAC3B,iBAAiB;AAAA,IACjB,iBAAiBX,IAASG,IAAYS;AAAAA,IACtC,qBAAqB;AAAA,IACrB,yBACEI,EAAWW,oBAAoB,IAC3BX,EAAWY,YAAYzB,GAAWa,EAAWW,gBAAgB,IAC7Df;AAAAA,IACNiB,WAAWA,CAACL,MAA2B;AAErC,MAAIA,EAAEM,QAAQ,UACZpB,EAAiBK,UAAU,KAE7BC,EAAWe,cAAcP,CAAC;AAAA,IAC5B;AAAA,EAAA,GAIIQ,IAAe;AAAA,IACnBC,IAAI9B;AAAAA,IACJuB,MAAM;AAAA,IACNQ,KAAK1B;AAAAA,IACL2B,oBAAoBA,CAACC,MAAyB;AAC5C3B,MAAAA,EAAwBM,UAAU;AAAA,IACpC;AAAA,IACAsB,kBAAkBA,CAACD,MAAyB;AAC1C3B,MAAAA,EAAwBM,UAAU;AAAA,IACpC;AAAA,IACAuB,cAAcA,CAACF,MAAyB;AACtC3B,MAAAA,EAAwBM,UAAU;AAAA,IACpC;AAAA,EAAA,GAIIwB,IAAiB7C,EACrB,CAAC8C,GAAeC,IAAoB,QAAW;AAAA,IAC7CR,IAAIjB,EAAWY,YAAYzB,GAAWqC,CAAK;AAAA,IAC3Cd,MAAM;AAAA,IACN,iBAAiBe;AAAAA,EAAAA,IAEnB,CAACzB,EAAWY,aAAazB,CAAS,CACpC;AAEA,SAAO;AAAA,IACLmB,gBAAAA;AAAAA,IACAG,YAAAA;AAAAA,IACAO,cAAAA;AAAAA,IACAO,gBAAAA;AAAAA,IACAZ,kBAAkBX,EAAWW;AAAAA,IAC7Be,qBAAqB1B,EAAW0B;AAAAA,IAChCd,aAAaZ,EAAWY;AAAAA,EAAAA;AAE5B;"}
+{"version":3,"file":"index200.js","sources":["../src/utils/mergeIds.ts"],"sourcesContent":["/**\n * Merges multiple ID strings into a single space-separated string.\n * Filters out falsy values and deduplicates IDs while preserving order.\n * \n * Useful for ARIA attributes (aria-describedby, aria-labelledby) and class names.\n * \n * @param ids - Array of id strings (or undefined/null)\n * @returns Merged space-separated id string, or undefined if no valid ids\n * \n * @example\n * mergeIds('error-1', undefined, 'helper-1', 'error-1')\n * // Returns: 'error-1 helper-1'\n */\nexport function mergeIds(...ids: (string | undefined | null)[]): string | undefined {\n  const uniqueIds = [\n    ...new Set(\n      ids\n        .filter((id): id is string => Boolean(id))\n        .flatMap(id => id.trim().split(/\\s+/))\n        .filter(Boolean)\n    )\n  ];\n  \n  return uniqueIds.length > 0 ? uniqueIds.join(' ') : undefined;\n}\n"],"names":["mergeIds","ids","uniqueIds","Set","filter","id","Boolean","flatMap","trim","split","length","join","undefined"],"mappings":"AAaO,SAASA,KAAYC,GAAwD;AAClF,QAAMC,IAAY,CAChB,GAAG,IAAIC,IACLF,EACGG,OAAO,CAACC,MAAqBC,EAAQD,CAAG,EACxCE,QAAQF,CAAAA,MAAMA,EAAGG,OAAOC,MAAM,KAAK,CAAC,EACpCL,OAAOE,OAAO,CACnB,CAAC;AAGH,SAAOJ,EAAUQ,SAAS,IAAIR,EAAUS,KAAK,GAAG,IAAIC;AACtD;"}

package/dist/index201.js

@@ -0,0 +1,43 @@
+import { useRef as l } from "react";
+import { useFocusTrap as d } from "./index72.js";
+import { useDismissOnEscape as u } from "./index206.js";
+import { getA11yNameAttributes as c } from "./index78.js";
+import { useStableId as f } from "./index199.js";
+function v({
+  isOpen: e,
+  onDismiss: s,
+  ariaLabel: o,
+  ariaLabelledBy: a,
+  titleIdPrefix: i = "modal-title",
+  initialFocus: m = "first"
+}) {
+  const t = l(null), r = f(void 0, i);
+  d({
+    enabled: e,
+    containerRef: t,
+    restoreFocus: !0,
+    initialFocus: m
+  }), u({
+    containerRef: t,
+    onDismiss: s,
+    enabled: e
+  });
+  const n = {
+    role: "dialog",
+    "aria-modal": !0,
+    tabIndex: -1,
+    ...c({
+      ariaLabelledBy: a ?? (o ? void 0 : r),
+      ariaLabel: o
+    })
+  };
+  return {
+    containerRef: t,
+    titleId: r,
+    dialogProps: n
+  };
+}
+export {
+  v as useModalA11y
+};
+//# sourceMappingURL=index201.js.map

package/dist/index201.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index201.js","sources":["../src/utils/a11y/useModalA11y.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { useFocusTrap } from './useFocusTrap';\nimport { useDismissOnEscape } from './useDismissOnEscape';\nimport { getA11yNameAttributes } from './accessibleName';\nimport { useStableId } from 'src/utils/useStableId';\n\nexport interface UseModalA11yOptions {\n  /**\n   * Whether the modal is open. Controls focus trap and Escape handler activation.\n   */\n  isOpen: boolean;\n  /**\n   * Called when Escape is pressed while focus is within the modal.\n   * If undefined, Escape dismissal is disabled.\n   */\n  onDismiss?: () => void;\n  /**\n   * aria-label for modals without a visible title heading.\n   * Only used when `ariaLabelledBy` is not provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID of an existing visible element (e.g. an h2 inside the modal content) that labels\n   * the dialog. Preferred over ariaLabel when a visible heading already exists in the content.\n   * Only used when `title` is not provided.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Prefix for the auto-generated title element id. Default: 'modal-title'.\n   */\n  titleIdPrefix?: string;\n  /**\n   * Initial focus target when the modal opens. Forwarded to useFocusTrap.\n   * - 'first': Focus first focusable element (default)\n   * - 'container': Focus the dialog container itself\n   * - 'none': Skip — browser handles it (e.g. autofocus attribute on inner element)\n   * - CSS selector string: Focus matching element\n   * - HTMLElement: Focus specific element\n   */\n  initialFocus?: 'first' | 'container' | 'none' | string | HTMLElement;\n}\n\nexport interface UseModalA11yReturn {\n  /**\n   * Ref to attach to the dialog container element.\n   */\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  /**\n   * Stable ID to set on the visible title element: `<h2 id={titleId}>`.\n   * Only relevant when `title` is provided.\n   */\n  titleId: string;\n  /**\n   * Spread onto the dialog container element.\n   * Includes: role=\"dialog\", aria-modal, tabIndex, aria-labelledby or aria-label.\n   */\n  dialogProps: {\n    role: 'dialog';\n    'aria-modal': true;\n    tabIndex: number;\n    [key: string]: unknown;\n  };\n}\n\n/**\n * Bundles all WCAG dialog semantics into a single hook.\n *\n * Handles:\n * - Stable ID for title element (aria-labelledby association)\n * - Focus trap: moves focus into modal on open, wraps Tab, restores focus on close\n * - Escape dismissal: calls onDismiss when Escape is pressed within the modal\n * - dialogProps: role=\"dialog\", aria-modal, tabIndex, aria-labelledby / aria-label\n *\n * @example Modal with a visible title (most common)\n * ```tsx\n * const MyModal = ({ isOpen, onClose }) => {\n *   const { containerRef, titleId, dialogProps } = useModalA11y({\n *     isOpen,\n *     onDismiss: onClose,\n *   });\n *\n *   return (\n *     <div ref={containerRef} {...dialogProps} className=\"modal-content\">\n *       <h2 id={titleId}>My Title</h2>\n *       ...\n *     </div>\n *   );\n * };\n * ```\n *\n * @example Modal without a visible title\n * ```tsx\n * const { containerRef, dialogProps } = useModalA11y({\n *   isOpen,\n *   onDismiss: onClose,\n *   ariaLabel: 'Upload document',\n * });\n * ```\n *\n * @example Custom initial focus (specific button) or skip (autofocus)\n * ```tsx\n * useModalA11y({ isOpen, onDismiss, initialFocus: '.my-cta-btn' });\n * useModalA11y({ isOpen, onDismiss, initialFocus: 'none' }); // autofocus on inner element\n * ```\n */\nexport function useModalA11y({\n  isOpen,\n  onDismiss,\n  ariaLabel,\n  ariaLabelledBy,\n  titleIdPrefix = 'modal-title',\n  initialFocus = 'first',\n}: UseModalA11yOptions): UseModalA11yReturn {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const titleId = useStableId(undefined, titleIdPrefix);\n\n  useFocusTrap({\n    enabled: isOpen,\n    containerRef,\n    restoreFocus: true,\n    initialFocus,\n  });\n\n  useDismissOnEscape({\n    containerRef,\n    onDismiss,\n    enabled: isOpen,\n  });\n\n  const nameAttrs = getA11yNameAttributes({\n    ariaLabelledBy: ariaLabelledBy ?? (ariaLabel ? undefined : titleId),\n    ariaLabel: ariaLabel,\n  });\n\n  const dialogProps = {\n    role: 'dialog' as const,\n    'aria-modal': true as const,\n    tabIndex: -1,\n    ...nameAttrs,\n  };\n\n  return { containerRef, titleId, dialogProps };\n}\n"],"names":["useRef","useFocusTrap","useDismissOnEscape","getA11yNameAttributes","useStableId","useModalA11y","isOpen","onDismiss","ariaLabel","ariaLabelledBy","titleIdPrefix","initialFocus","containerRef","titleId","undefined","enabled","restoreFocus","dialogProps","role","tabIndex","nameAttrs"],"mappings":"AAyGO,SAAA,UAAAA,SAAA;AAAA,SAAA,gBAAAC,SAAA;AAAA,SAAA,sBAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAASC,EAAa;AAAA,EAC3BC,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,cAAAA,IAAe;AACI,GAAuB;AAC1C,QAAMC,IAAeZ,EAAuB,IAAI,GAC1Ca,IAAUT,EAAYU,QAAWJ,CAAa;AAEpDT,EAAAA,EAAa;AAAA,IACXc,SAAST;AAAAA,IACTM,cAAAA;AAAAA,IACAI,cAAc;AAAA,IACdL,cAAAA;AAAAA,EAAAA,CACD,GAEDT,EAAmB;AAAA,IACjBU,cAAAA;AAAAA,IACAL,WAAAA;AAAAA,IACAQ,SAAST;AAAAA,EAAAA,CACV;AAOD,QAAMW,IAAc;AAAA,IAClBC,MAAM;AAAA,IACN,cAAc;AAAA,IACdC,UAAU;AAAA,IACV,GATgBhB,EAAsB;AAAA,MACtCM,gBAAgBA,MAAmBD,IAAYM,SAAYD;AAAAA,MAC3DL,WAAAA;AAAAA,IAAAA,CACD;AAAA,EAMIY;AAGL,SAAO;AAAA,IAAER,cAAAA;AAAAA,IAAcC,SAAAA;AAAAA,IAASI,aAAAA;AAAAA,EAAAA;AAClC;"}

package/dist/index206.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=index206.js.map

package/dist/index206.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index206.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/index207.js

@@ -0,0 +1,71 @@
+import { useRef as a, useLayoutEffect as m, useEffect as g } from "react";
+import { getFirstFocusableElement as f, getLastFocusableElement as F } from "./index71.js";
+import { consumeFocusAnchor as I, consumeLastInteractedElement as E } from "./index72.js";
+const l = {
+  position: "absolute",
+  opacity: 0,
+  pointerEvents: "none",
+  width: 0,
+  height: 0
+};
+function T({
+  isOpen: o,
+  isModal: i,
+  containerRef: e,
+  returnFocusRef: d
+}) {
+  const c = a(null), r = a(null), u = a(null);
+  return m(() => {
+    if (i || !o) return;
+    const t = d?.current ?? I() ?? E() ?? document.activeElement;
+    if (!(!t || t === document.body))
+      return c.current = t, u.current && (u.current.tabIndex = 0), () => {
+        u.current && (u.current.tabIndex = -1);
+      };
+  }, [o, i]), g(() => {
+    if (i || !o || !c.current) return;
+    const t = requestAnimationFrame(() => {
+      (f({
+        container: e.current
+      }) ?? e.current)?.focus(), r.current && (r.current.tabIndex = 0);
+    });
+    return () => {
+      cancelAnimationFrame(t), r.current && (r.current.tabIndex = -1);
+      const s = c.current;
+      c.current = null, s?.isConnected && requestAnimationFrame(() => s.focus());
+    };
+  }, [o, i]), {
+    startSentinelProps: {
+      ref: r,
+      tabIndex: -1,
+      style: l,
+      onFocus: (t) => {
+        if (e.current?.contains(t.relatedTarget) && t.relatedTarget !== e.current) {
+          const n = c.current;
+          n?.isConnected && n.focus();
+        } else
+          r.current && (r.current.tabIndex = -1), (f({
+            container: e.current
+          }) ?? e.current)?.focus();
+      }
+    },
+    endSentinelProps: {
+      ref: u,
+      tabIndex: -1,
+      style: l,
+      onFocus: (t) => {
+        if (e.current?.contains(t.relatedTarget) && t.relatedTarget !== e.current) {
+          const n = c.current;
+          n?.isConnected && n.focus();
+        } else
+          (F({
+            container: e.current
+          }) ?? e.current)?.focus();
+      }
+    }
+  };
+}
+export {
+  T as useFocusSentinel
+};
+//# sourceMappingURL=index207.js.map

package/dist/index207.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index207.js","sources":["../src/utils/a11y/useFocusSentinel.ts"],"sourcesContent":["import { useRef, useEffect, useLayoutEffect } from 'react';\n\nimport { getFirstFocusableElement, getLastFocusableElement } from './focusableElements';\nimport { consumeLastInteractedElement, consumeFocusAnchor } from './useFocusTrap';\n\nconst SENTINEL_STYLE: React.CSSProperties = {\n  position: 'absolute',\n  opacity: 0,\n  pointerEvents: 'none',\n  width: 0,\n  height: 0,\n};\n\nexport interface UseFocusSentinelOptions {\n  /** Whether the panel is currently open. */\n  isOpen: boolean | undefined;\n  /**\n   * When true the hook is a no-op — dialog mode (focus trap) handles focus management instead.\n   */\n  isModal: boolean;\n  /** Ref to the panel container element. */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /**\n   * Explicit element to restore focus to on close.\n   * Overrides the automatic trigger capture.\n   */\n  returnFocusRef?: React.RefObject<HTMLElement | null>;\n}\n\nexport interface SentinelProps {\n  ref: React.RefObject<HTMLDivElement | null>;\n  tabIndex: number;\n  style: React.CSSProperties;\n  onFocus: (e: React.FocusEvent) => void;\n}\n\nexport interface UseFocusSentinelReturn {\n  /** Spread onto an invisible div placed before the panel content. */\n  startSentinelProps: SentinelProps;\n  /** Spread onto an invisible div placed after the panel content. */\n  endSentinelProps: SentinelProps;\n}\n\n/**\n * Focus management for complementary (non-modal) side panels.\n *\n * Moves focus into the panel on open, restores it to the trigger on close,\n * and wraps Tab / Shift+Tab back to the trigger when focus reaches either end.\n *\n * Sentinel tabIndex values are mutated imperatively (no state) to avoid\n * re-renders. React does not touch a DOM attribute unless the JSX prop value\n * changes, so the initial tabIndex={-1} in the returned props is safe.\n */\nexport function useFocusSentinel({\n  isOpen,\n  isModal,\n  containerRef,\n  returnFocusRef,\n}: UseFocusSentinelOptions): UseFocusSentinelReturn {\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const startSentinelRef = useRef<HTMLDivElement>(null);\n  const endSentinelRef = useRef<HTMLDivElement>(null);\n\n  // Capture trigger before React commits (document.activeElement is still the opener).\n  // Body focus = page-load open → skip so sentinels stay inert.\n  useLayoutEffect(() => {\n    if (isModal || !isOpen) return;\n    const trigger =\n      returnFocusRef?.current ??\n      consumeFocusAnchor() ??\n      consumeLastInteractedElement() ??\n      (document.activeElement as HTMLElement);\n    if (!trigger || trigger === document.body) return;\n    triggerRef.current = trigger;\n    if (endSentinelRef.current) endSentinelRef.current.tabIndex = 0;\n    return () => {\n      if (endSentinelRef.current) endSentinelRef.current.tabIndex = -1;\n    };\n  }, [isOpen, isModal]);\n\n  // Move focus into panel on open; restore to trigger on close.\n  useEffect(() => {\n    if (isModal || !isOpen || !triggerRef.current) return;\n\n    const rafId = requestAnimationFrame(() => {\n      const first = getFirstFocusableElement({ container: containerRef.current });\n      (first ?? containerRef.current)?.focus();\n      // Activate start sentinel so Shift+Tab from first content returns to trigger.\n      if (startSentinelRef.current) startSentinelRef.current.tabIndex = 0;\n    });\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      if (startSentinelRef.current) startSentinelRef.current.tabIndex = -1;\n      const trigger = triggerRef.current;\n      triggerRef.current = null;\n      if (trigger?.isConnected) {\n        requestAnimationFrame(() => trigger.focus());\n      }\n    };\n  }, [isOpen, isModal]);\n\n  const handleStartFocus = (e: React.FocusEvent) => {\n    const fromInside =\n      containerRef.current?.contains(e.relatedTarget as Node) &&\n      e.relatedTarget !== containerRef.current;\n    if (fromInside) {\n      // Shift+Tab from first content → restore trigger\n      const trigger = triggerRef.current;\n      if (trigger?.isConnected) trigger.focus();\n    } else {\n      // Natural Tab entry from outside → forward to first content,\n      // deactivate so next Shift+Tab exits naturally.\n      if (startSentinelRef.current) startSentinelRef.current.tabIndex = -1;\n      const first = getFirstFocusableElement({ container: containerRef.current });\n      (first ?? containerRef.current)?.focus();\n    }\n  };\n\n  const handleEndFocus = (e: React.FocusEvent) => {\n    const fromInside =\n      containerRef.current?.contains(e.relatedTarget as Node) &&\n      e.relatedTarget !== containerRef.current;\n    if (fromInside) {\n      // Tab from last content → restore trigger\n      const trigger = triggerRef.current;\n      if (trigger?.isConnected) trigger.focus();\n    } else {\n      // Shift+Tab entry from outside → back to last content\n      const last = getLastFocusableElement({ container: containerRef.current });\n      (last ?? containerRef.current)?.focus();\n    }\n  };\n\n  return {\n    startSentinelProps: {\n      ref: startSentinelRef,\n      tabIndex: -1,\n      style: SENTINEL_STYLE,\n      onFocus: handleStartFocus,\n    },\n    endSentinelProps: {\n      ref: endSentinelRef,\n      tabIndex: -1,\n      style: SENTINEL_STYLE,\n      onFocus: handleEndFocus,\n    },\n  };\n}\n"],"names":["useRef","useLayoutEffect","useEffect","getFirstFocusableElement","getLastFocusableElement","consumeFocusAnchor","consumeLastInteractedElement","SENTINEL_STYLE","position","opacity","pointerEvents","width","height","useFocusSentinel","isOpen","isModal","containerRef","returnFocusRef","triggerRef","startSentinelRef","endSentinelRef","trigger","current","document","activeElement","body","tabIndex","rafId","requestAnimationFrame","container","focus","cancelAnimationFrame","isConnected","startSentinelProps","ref","style","onFocus","handleStartFocus","e","contains","relatedTarget","endSentinelProps","handleEndFocus"],"mappings":"AAKA,SAAA,UAAAA,GAAA,mBAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,4BAAAC,GAAA,2BAAAC,SAAA;AAAA,SAAA,sBAAAC,GAAA,gCAAAC,SAAA;AAAA,MAAMC,IAAsC;AAAA,EAC1CC,UAAU;AAAA,EACVC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,OAAO;AAAA,EACPC,QAAQ;AACV;AA0CO,SAASC,EAAiB;AAAA,EAC/BC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,gBAAAA;AACuB,GAA2B;AAClD,QAAMC,IAAalB,EAA2B,IAAI,GAC5CmB,IAAmBnB,EAAuB,IAAI,GAC9CoB,IAAiBpB,EAAuB,IAAI;AAIlDC,SAAAA,EAAgB,MAAM;AACpB,QAAIc,KAAW,CAACD,EAAQ;AACxB,UAAMO,IACJJ,GAAgBK,WAChBjB,OACAC,EAAAA,KACCiB,SAASC;AACZ,QAAI,GAACH,KAAWA,MAAYE,SAASE;AACrCP,aAAAA,EAAWI,UAAUD,GACjBD,EAAeE,YAASF,EAAeE,QAAQI,WAAW,IACvD,MAAM;AACX,QAAIN,EAAeE,YAASF,EAAeE,QAAQI,WAAW;AAAA,MAChE;AAAA,EACF,GAAG,CAACZ,GAAQC,CAAO,CAAC,GAGpBb,EAAU,MAAM;AACd,QAAIa,KAAW,CAACD,KAAU,CAACI,EAAWI,QAAS;AAE/C,UAAMK,IAAQC,sBAAsB,MAAM;AAExC,OADczB,EAAyB;AAAA,QAAE0B,WAAWb,EAAaM;AAAAA,MAAAA,CAAS,KAChEN,EAAaM,UAAUQ,MAAAA,GAE7BX,EAAiBG,YAASH,EAAiBG,QAAQI,WAAW;AAAA,IACpE,CAAC;AAED,WAAO,MAAM;AACXK,2BAAqBJ,CAAK,GACtBR,EAAiBG,YAASH,EAAiBG,QAAQI,WAAW;AAClE,YAAML,IAAUH,EAAWI;AAC3BJ,MAAAA,EAAWI,UAAU,MACjBD,GAASW,eACXJ,sBAAsB,MAAMP,EAAQS,OAAO;AAAA,IAE/C;AAAA,EACF,GAAG,CAAChB,GAAQC,CAAO,CAAC,GAkCb;AAAA,IACLkB,oBAAoB;AAAA,MAClBC,KAAKf;AAAAA,MACLO,UAAU;AAAA,MACVS,OAAO5B;AAAAA,MACP6B,SArCqBC,CAACC,MAAwB;AAIhD,YAFEtB,EAAaM,SAASiB,SAASD,EAAEE,aAAqB,KACtDF,EAAEE,kBAAkBxB,EAAaM,SACnB;AAEd,gBAAMD,IAAUH,EAAWI;AAC3B,UAAID,GAASW,eAAaX,EAAQS,MAAAA;AAAAA,QACpC;AAGE,UAAIX,EAAiBG,YAASH,EAAiBG,QAAQI,WAAW,MACpDvB,EAAyB;AAAA,YAAE0B,WAAWb,EAAaM;AAAAA,UAAAA,CAAS,KAChEN,EAAaM,UAAUQ,MAAAA;AAAAA,MAErC;AAAA,IAsBaO;AAAAA,IAEXI,kBAAkB;AAAA,MAChBP,KAAKd;AAAAA,MACLM,UAAU;AAAA,MACVS,OAAO5B;AAAAA,MACP6B,SA1BmBM,CAACJ,MAAwB;AAI9C,YAFEtB,EAAaM,SAASiB,SAASD,EAAEE,aAAqB,KACtDF,EAAEE,kBAAkBxB,EAAaM,SACnB;AAEd,gBAAMD,IAAUH,EAAWI;AAC3B,UAAID,GAASW,eAAaX,EAAQS,MAAAA;AAAAA,QACpC;AAGE,WADa1B,EAAwB;AAAA,YAAEyB,WAAWb,EAAaM;AAAAA,UAAAA,CAAS,KAC/DN,EAAaM,UAAUQ,MAAAA;AAAAA,MAEpC;AAAA,IAaaY;AAAAA,EACX;AAEJ;"}

package/dist/index21.js

@@ -1,64 +1,36 @@
-import t, { useRef as v } from "react";
-import { TableContentLoader as x } from "./index26.js";
-function n() {
-  return n = Object.assign ? Object.assign.bind() : function(l) {
-    for (var a = 1; a < arguments.length; a++) {
-      var e = arguments[a];
-      for (var r in e) ({}).hasOwnProperty.call(e, r) && (l[r] = e[r]);
-    }
-    return l;
-  }, n.apply(null, arguments);
-}
-const O = ({
-  className: l = "",
-  automationId: a = "",
-  loading: e,
-  headerColSpan: r = [],
-  headerData: o,
-  tableData: s,
-  renderTableContentLoader: E,
-  getTableHeaders: c,
-  getTableBody: i,
-  getTableFooter: m,
-  onSortUiUpdate: u,
-  onRowClick: f,
-  tableId: b,
-  ariaDescribedBy: d,
-  ariaLabel: g,
-  ...p
-}) => {
-  const h = v(null);
-  return /* @__PURE__ */ t.createElement("div", n({
-    className: "se-design-table-layout-wrapper flex flex-col flex-1 min-h-0" + (l.length > 0 ? ` ${l}` : "") + (e ? " table-data-loading" : "")
-  }, p), /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-table-scroll-area flex-1 min-h-0 overflow-y-auto"
-  }, /* @__PURE__ */ t.createElement("table", {
-    className: "se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed",
-    ref: h,
-    "data-automation-id": a,
-    id: b,
-    "aria-describedby": d,
-    "aria-label": g
-  }, /* @__PURE__ */ t.createElement("thead", null, /* @__PURE__ */ t.createElement("tr", null, c({
-    headerData: o,
-    sortData: {},
-    onSortUiUpdate: u,
-    loading: e
-  }))), /* @__PURE__ */ t.createElement("tbody", null, e ? /* @__PURE__ */ t.createElement(x, {
-    noOfColumns: o?.length,
-    colSpan: r
-  }) : i({
-    tableData: s,
-    onRowClick: f,
-    loading: e
-  })))), /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-table-footer w-full bg-[var(--color-white)] flex-shrink-0"
-  }, m({
-    tableData: s,
-    loading: e
-  })));
-};
+import e from "react";
+import { Popover as l } from "./index19.js";
+import { Icon as s } from "./index6.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, {
+  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=index21.js.map

package/dist/index21.js.map

@@ -1 +1 @@
-{"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   * Accessible name for the table element\n   */\n  ariaLabel?: 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  ariaLabel,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  return (\n    <div className={'se-design-table-layout-wrapper flex flex-col flex-1 min-h-0' + (className.length > 0 ? ` ${className}` : '') + (loading? ' table-data-loading' : '')} {...props}>\n      <div className=\"se-design-table-scroll-area flex-1 min-h-0 overflow-y-auto\">\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          aria-label={ariaLabel}\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>\n      <div className=\"se-design-table-footer w-full bg-[var(--color-white)] flex-shrink-0\">\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","ariaLabel","props","tableRef","useRef","React","createElement","_extends","length","ref","id","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;AA2BO,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,EACAC,WAAAA;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKpB,WAAW,iEAAiEA,EAAUqB,SAAS,IAAI,IAAIrB,CAAS,KAAK,OAAOE,IAAS,wBAAwB;AAAA,EAAA,GAASa,CAAK,GAC9KG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GACbkB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEnB,WAAW;AAAA,IACXsB,KAAKN;AAAAA,IACL,sBAAoBf;AAAAA,IACpBsB,IAAIX;AAAAA,IACJ,oBAAkBC;AAAAA,IAClB,cAAYC;AAAAA,EAAAA,qBAEZK,cAAA,SAAA,MACED,gBAAAA,EAAAC,cAAA,MAAA,MAAKZ,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYoB,UAAU,CAAA;AAAA,IAAId,gBAAAA;AAAAA,IAAgBR,SAAAA;AAAAA,EAAAA,CAAS,CAAM,CAC3E,GACPgB,gBAAAA,EAAAC,cAAA,SAAA,MACGjB,IACCgB,gBAAAA,EAAAC,cAACM,GAAkB;AAAA,IAACC,aAAatB,GAAYiB;AAAAA,IAAQM,SAASxB;AAAAA,EAAAA,CAAgB,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWM,YAAAA;AAAAA,IAAYT,SAAAA;AAAAA,EAAAA,CAAS,CAE5C,CACF,CACJ,GACLgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GACZS,EAAe;AAAA,IAAEJ,WAAAA;AAAAA,IAAWH,SAAAA;AAAAA,EAAAA,CAAS,CACnC,CACF;AAET;"}
+{"version":3,"file":"index21.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/{index209.js → index215.js}

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

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

@@ -1 +1 @@
-{"version":3,"file":"index209.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":"index215.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/index22.js

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

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.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  /**\n   * Controlled checked value. When provided, the checkbox is controlled by the parent\n   * and its visual state always reflects this prop. Use `onChange` to update the parent state.\n   */\n  checked?: 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  checked,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy\n}) => {\n  const isControlled = checked !== undefined;\n  const [isChecked, setIsChecked] = useState(isControlled ? checked : defaultChecked);\n\n  useEffect(() => {\n    if (isControlled) {\n      setIsChecked(checked!);\n    } else {\n      setIsChecked(defaultChecked);\n    }\n  }, [checked, defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    if (!isControlled) {\n      setIsChecked((prev) => !prev);\n    }\n    onChange?.(isControlled ? !checked : !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 = isControlled ? !checked : !isChecked;\n      if (!isControlled) {\n        setIsChecked(newChecked);\n      }\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\n            id={labelId}\n            className={getLabelClassName()}\n            data-automation-id={automationId || (label ? `checkbox-label-${label}` : 'checkbox-label')}\n          >\n            {getLabelText()}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","checked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","isControlled","undefined","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","getLabelClassName","getLabelText","inputId","useStableId","labelId","a11yNameAttributes","getA11yNameAttributes","mergeIds","getAriaChecked","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","length"],"mappings":"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"}
+{"version":3,"file":"index22.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   * Accessible name for the table element\n   */\n  ariaLabel?: 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  ariaLabel,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  return (\n    <div className={'se-design-table-layout-wrapper flex flex-col flex-1 min-h-0' + (className.length > 0 ? ` ${className}` : '') + (loading? ' table-data-loading' : '')} {...props}>\n      <div className=\"se-design-table-scroll-area flex-1 min-h-0 overflow-y-auto\">\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          aria-label={ariaLabel}\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>\n      <div className=\"se-design-table-footer w-full bg-[var(--color-white)] flex-shrink-0\">\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","ariaLabel","props","tableRef","useRef","React","createElement","_extends","length","ref","id","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;AA2BO,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,EACAC,WAAAA;AAAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAAyB,IAAI;AAE9C,SACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKpB,WAAW,iEAAiEA,EAAUqB,SAAS,IAAI,IAAIrB,CAAS,KAAK,OAAOE,IAAS,wBAAwB;AAAA,EAAA,GAASa,CAAK,GAC9KG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GACbkB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEnB,WAAW;AAAA,IACXsB,KAAKN;AAAAA,IACL,sBAAoBf;AAAAA,IACpBsB,IAAIX;AAAAA,IACJ,oBAAkBC;AAAAA,IAClB,cAAYC;AAAAA,EAAAA,qBAEZK,cAAA,SAAA,MACED,gBAAAA,EAAAC,cAAA,MAAA,MAAKZ,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYoB,UAAU,CAAA;AAAA,IAAId,gBAAAA;AAAAA,IAAgBR,SAAAA;AAAAA,EAAAA,CAAS,CAAM,CAC3E,GACPgB,gBAAAA,EAAAC,cAAA,SAAA,MACGjB,IACCgB,gBAAAA,EAAAC,cAACM,GAAkB;AAAA,IAACC,aAAatB,GAAYiB;AAAAA,IAAQM,SAASxB;AAAAA,EAAAA,CAAgB,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWM,YAAAA;AAAAA,IAAYT,SAAAA;AAAAA,EAAAA,CAAS,CAE5C,CACF,CACJ,GACLgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GACZS,EAAe;AAAA,IAAEJ,WAAAA;AAAAA,IAAWH,SAAAA;AAAAA,EAAAA,CAAS,CACnC,CACF;AAET;"}

package/dist/{index217.js → index223.js}

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

package/dist/{index217.js.map → index223.js.map}

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

package/dist/{index220.js → index226.js}

@@ -1,5 +1,5 @@
 import d, { forwardRef as b } from "react";
-import { Button as p } from "./index3.js";
+import { Button as p } from "./index4.js";
 function n() {
   return n = Object.assign ? Object.assign.bind() : function(a) {
     for (var t = 1; t < arguments.length; t++) {
@@ -43,4 +43,4 @@ g.displayName = "TabButton";
 export {
   g as TabButton
 };
-//# sourceMappingURL=index220.js.map
+//# sourceMappingURL=index226.js.map

package/dist/{index220.js.map → index226.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index220.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        {...(panelId ? { 'aria-controls': panelId } : {})}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","Button","_extends","type","disabled","role","displayName"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,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,cAACC,GAAMC,EAAA;AAAA,EACLJ,KAAAA;AAAAA,EACAK,MAAK;AAAA,EACLf,OAAAA;AAAAA,EACAgB,UAAUd;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAW,MAAK;AAAA,EACLlB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,GACVE,IAAU;AAAA,EAAE,iBAAiBA;AAAAA,IAAY,IAAE;AAAA,EAChDC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CAAqB,CACtB,CAGP;AAEAX,EAAUoB,cAAc;"}
+{"version":3,"file":"index226.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        {...(panelId ? { 'aria-controls': panelId } : {})}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTabButton.displayName = 'TabButton';\n"],"names":["TabButton","id","label","isSelected","isDisabled","panelId","tabIndex","className","automationId","onClick","onFocus","onKeyDown","ref","React","createElement","Button","_extends","type","disabled","role","displayName"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,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,cAACC,GAAMC,EAAA;AAAA,EACLJ,KAAAA;AAAAA,EACAK,MAAK;AAAA,EACLf,OAAAA;AAAAA,EACAgB,UAAUd;AAAAA,EACVK,SAAAA;AAAAA,EACAF,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAW,MAAK;AAAA,EACLlB,IAAAA;AAAAA,EACA,iBAAeE;AAAAA,GACVE,IAAU;AAAA,EAAE,iBAAiBA;AAAAA,IAAY,IAAE;AAAA,EAChDC,UAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,CAAqB,CACtB,CAGP;AAEAX,EAAUoB,cAAc;"}