@persona/design-system 0.5.0 → 0.6.0

package/dist/TabBar-Dw3xE_B-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar-Dw3xE_B-.mjs","names":["TabBarContext","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { mergeRefs } from '@react-aria/utils';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n  display: flex;\n  height: ${Spacing[6]};\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  justify-content: space-between;\n  gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n  align-self: center;\n`;\n\nconst TitleTab = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n  display: flex;\n  gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n  margin-bottom: -2px;\n  padding-bottom: 2px;\n  overflow: hidden;\n  flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n  { children, maxTabChars, size, ...props },\n  forwardedRef,\n) {\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const getIndexOfCurrentTab = (list: Element[]) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return getIndex(list, document.activeElement);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const list = getTabList(tabListRef.current.children);\n\n    if (document.activeElement && !list.includes(document.activeElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // Go to previous tab\n        const curIndex = getIndexOfCurrentTab(list);\n        const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n        (list[nextIndex] as HTMLElement).focus();\n        break;\n      }\n      case 'ArrowRight': {\n        // Go to next tab\n        const curIndex = getIndexOfCurrentTab(list);\n        (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n        break;\n      }\n      case 'Home': {\n        // Go to first tab\n        (list[0] as HTMLElement).focus();\n        break;\n      }\n      case 'End': {\n        // Go to last tab\n        (list[list.length - 1] as HTMLElement).focus();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <TabBarContext.Provider value={{ maxTabChars, size }}>\n      <StyledTabContainer\n        role='tablist'\n        ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n        onKeyDown={handleKeyDown}\n        $size={size}\n        {...props}\n      >\n        {children}\n      </StyledTabContainer>\n    </TabBarContext.Provider>\n  );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n  return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  return Array.from(list).filter((e: HTMLElement) => {\n    return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n  });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n  actions?: ReactNode;\n  title?: string;\n  'data-tour-target'?: string;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n  {\n    children,\n    actions,\n    title,\n    'data-tour-target': dataTourTarget,\n    maxTabChars,\n    size,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...elemProps\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <TabBarContainer {...elemProps}>\n      <TabContainer\n        ref={forwardedRef}\n        maxTabChars={maxTabChars}\n        size={size}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n        {children}\n      </TabContainer>\n      {actions && <RightActions>{actions}</RightActions>}\n    </TabBarContainer>\n  );\n});\n\nexport default TabBar;\n","import {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactElement,\n  useContext,\n} from 'react';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\n/** A tab carries either a count or a label beside its text, never both. */\ntype TabAdornment =\n  | { badge?: ReactElement; sticker?: never }\n  | { badge?: never; sticker?: ReactElement };\n\ninterface TabBaseProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n  typeof Button\n> {\n  selected?: boolean;\n  as?: T;\n  size?: 'md' | 'sm';\n}\n\ntype TabProps<T extends ElementType = 'button'> = TabBaseProps<T> & TabAdornment;\n\nconst AdornmentContainer = styled.span`\n  display: inline-flex;\n  vertical-align: middle;\n  /* Align the atomic badge with the label's cap midpoint, not its x-height midpoint. */\n  transform: translateY(calc((1ex - 1cap) / 2));\n  padding: 0;\n  margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n  NonNullable<TabBaseProps['size']>,\n  FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n  md: css`\n    ${paragraphMixins.md}\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n  `,\n};\n\nconst tabSelectedStyle = css`\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', theme.color.primary.brand)};\n  border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n  }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabBaseProps>({\n  width: 'auto',\n  variant: 'basic',\n})<TabBaseProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  background-color: transparent;\n  color: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'FgDisabled', theme.color.variants.basic.textDisabled)\n      : semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n  transition: color ${TransitionDuration.Fast} ease-out;\n  height: 32px;\n  margin: 0;\n  padding: 0;\n  ${({ size }) => sizeStyles[size || 'md']};\n  outline: none;\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  a {\n    color: currentColor;\n  }\n\n  /* remove default button focused/hovered box shadow */\n  &${isActive}${isNotDisabled} {\n    background-color: unset;\n  }\n  &${isHovered}${isNotDisabled} {\n    background-color: unset;\n    ${({ selected, theme }) =>\n      !selected &&\n      css`\n        color: ${semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n      `}\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n    background-color: unset;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    background-color: unset;\n  }\n  &:disabled {\n    background-color: unset;\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n    content: '';\n  }\n\n  &.selected,\n  &.active {\n    ${tabSelectedStyle}\n  }\n\n  ${({ selected }) => selected && tabSelectedStyle}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n    `}\n\n  a& {\n    text-decoration: none;\n  }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n  if (text.length <= maxCharacters) {\n    return text;\n  }\n  return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n  selected,\n  disabled,\n  children,\n  badge,\n  sticker,\n  as,\n  size,\n  ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n  const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n  const finalSize = size || contextSize || 'md';\n\n  // Truncate text if maxTabChars is provided and children is a string\n  const hasTruncation = maxTabChars && typeof children === 'string';\n  const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n  return (\n    <StyledTab\n      role='tab'\n      selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      as={as as ElementType}\n      size={finalSize}\n      title={hasTruncation ? children : undefined}\n      {...elemProps}\n    >\n      {displayChildren}\n      {badge && (\n        <AdornmentContainer>\n          {badge.type === Badge\n            ? cloneElement(badge, {\n                variant: selected ? 'active' : 'basic',\n                onSecondaryBackground: true,\n              })\n            : badge}\n        </AdornmentContainer>\n      )}\n      {sticker && <AdornmentContainer>{sticker}</AdornmentContainer>}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n","import styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nexport default styled(IconButton).attrs({\n  size: 'sm',\n})`\n  padding-left: ${Spacing[2]};\n  padding-right: ${Spacing[2]};\n  border-radius: ${BorderRadius.Sm};\n\n  // remove default button focused/hovered box shadow\n  &${isActive}${isNotDisabled} {\n    background-color: transparent;\n  }\n  &${isHovered}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &:disabled {\n    background-color: transparent;\n  }\n  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n    box-shadow: 0 0 0 3px ${({ theme }) => semanticColor(theme, 'ActionNeutralActive', theme.color.variants.basic.highlight)};\n  }\n\n  svg {\n    color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.CoreSlate800)};\n  }\n\n  &:hover {\n    svg {\n      color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.CoreSlate900)};\n    }\n  }\n`;\n"],"mappings":"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"}

package/dist/TabBarIconButton.d.mts

@@ -1,11 +1,7 @@
-import { n as IconButtonProps } from "./IconButton-Bh-JJ-0x.mjs";
 import * as _$styled_components0 from "styled-components";
-import * as _$react from "react";
 
 //#region components/TabBar/TabBarIconButton.d.ts
-declare const _default: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {
-  size: "sm";
-}, "size">;
+declare const _default: _$styled_components0.StyledComponent<any, any, any, any>;
 //#endregion
 export { _default as default };
 //# sourceMappingURL=TabBarIconButton.d.mts.map

package/dist/{Table-BOcWdwpv.d.mts → Table-CPvIH27_.d.mts}

@@ -10,4 +10,4 @@ declare const Table: _$styled_components0.StyledComponent<"table", any, {
 } & TableProps, "role">;
 //#endregion
 export { Table as t };
-//# sourceMappingURL=Table-BOcWdwpv.d.mts.map
+//# sourceMappingURL=Table-CPvIH27_.d.mts.map

package/dist/{Table-nWd5ZVbm.mjs → Table-ELLvSvH4.mjs}

@@ -1,13 +1,16 @@
-import { a as styled, i as keyframes, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { isFocusedVisible, isHovered } from "./lib/pseudoClass.mjs";
-import "./variables/transitions.mjs";
+import { a as styled, i as keyframes, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import "./variables/spacing.mjs";
-import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
+import { i as Paragraph } from "./Text-Dn_p7ZvT.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
-import { r as HelperTooltip } from "./Tooltip-DSKGD33G.mjs";
+import "./variables/transitions.mjs";
+import { r as HelperTooltip } from "./Tooltip-BsuYG0fw.mjs";
+import { withAlpha } from "./lib/color.mjs";
+import { isFocusedVisible, isHovered } from "./lib/pseudoClass.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as Spinner } from "./Spinner-e725Rxkd.mjs";
+import { focusOutline } from "./mixins/focus.mjs";
+import { t as Spinner } from "./Spinner-Dpw3-3JS.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -46,7 +49,7 @@ const Table = styled.table.attrs({ role: "table" })`
           bottom: 0;
           left: 0;
           width: 100%;
-          border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
+          border-bottom: 3px solid ${({ theme }) => semanticColor(theme, "FeedbackAccent3", theme.color.primary.brand)};
           animation: ${slideKeyframes$1} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
         }
       }
@@ -61,7 +64,8 @@ const StyledTableHeaderCell = styled.th`
      declared width/height. */
   box-sizing: border-box;
 
-  background-color: ${({ theme }) => theme.color.background.secondary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfaceSecondary", theme.color.background.secondary)};
+  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
   padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
   text-align: left;
   white-space: nowrap;
@@ -91,6 +95,11 @@ const StyledTableHeaderCell = styled.th`
         display: inline;
         visibility: visible;
       }
+
+      ${SortButton}:focus-visible ${TableIconContainer} {
+        display: inline;
+        visibility: visible;
+      }
     `};
 
   ${({ isSticky }) => isSticky ? css`
@@ -107,6 +116,21 @@ const VerticalAlign = styled.div`
   gap: ${Spacing[1]};
   flex-direction: ${({ $align }) => $align === "right" ? "row-reverse" : "row"};
 `;
+const SortButton = styled.button`
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+  min-width: 0;
+  ${focusOutline}
+`;
 const TableIconContainer = styled("div")`
   display: inline-block;
 
@@ -117,25 +141,31 @@ const TableIconContainer = styled("div")`
 	else return css`
         display: inline;
         visibility: hidden;
-        color: ${({ theme }) => theme.color.text.disabled};
+        color: ${({ theme }) => semanticColor(theme, "FgTertiary", theme.color.text.disabled)};
       `;
 }};
 `;
-const TableHeaderCell = forwardRef(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {
-	let ariaSort = "none";
+const TableHeaderCell = forwardRef(function TableHeaderCell({ sortable, sortDirection, children, align, trailing, onClick, ...elemProps }, ref) {
+	let ariaSort;
 	if (sortable && sortDirection) ariaSort = sortDirection === "asc" ? "ascending" : "descending";
+	else if (sortable) ariaSort = "none";
 	return /* @__PURE__ */ jsx(StyledTableHeaderCell, {
 		sortable,
 		"aria-sort": ariaSort,
-		role: "columnheader",
+		onClick: sortable ? void 0 : onClick,
 		...elemProps,
 		ref,
 		children: /* @__PURE__ */ jsxs(VerticalAlign, {
 			$align: align,
-			children: [children, sortable && /* @__PURE__ */ jsx(TableIconContainer, {
-				sortDirection,
-				children: sortDirection === "asc" ? /* @__PURE__ */ jsx(CaretUpIcon, {}) : /* @__PURE__ */ jsx(CaretDownIcon, {})
-			})]
+			children: [sortable ? /* @__PURE__ */ jsxs(SortButton, {
+				type: "button",
+				onClick,
+				children: [children, /* @__PURE__ */ jsx(TableIconContainer, {
+					"aria-hidden": "true",
+					sortDirection,
+					children: sortDirection === "asc" ? /* @__PURE__ */ jsx(CaretUpIcon, {}) : /* @__PURE__ */ jsx(CaretDownIcon, {})
+				})]
+			}) : children, trailing]
 		})
 	});
 });
@@ -148,12 +178,17 @@ const TableRow = styled.tr.attrs({ role: "row" })`
       cursor: pointer;
     `}
 
-  ${({ disableHoverBackground, theme }) => !disableHoverBackground && css`
+  ${({ disableHoverBackground, theme }) => {
+	if (disableHoverBackground) return null;
+	const tokens = semanticTokens(theme);
+	return css`
       &${isHovered} {
-        background-color: ${theme.color.background.highlight};
+        background-color: ${tokens ? withAlpha(tokens.ActionAccent, tokens.Opacity25) : theme.color.background.highlight};
+        ${tokens ? `color: ${tokens.FgPrimary};` : ""}
         transition-duration: ${"200ms"};
       }
-    `}
+    `;
+}}
 
   ${isFocusedVisible}
 `;
@@ -164,21 +199,22 @@ const StyledHelperTooltip = styled(HelperTooltip)`
   margin-left: ${Spacing[1]};
 `;
 const TableTH = forwardRef(function TableTH({ children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props }, ref) {
-	return /* @__PURE__ */ jsxs(TableHeaderCell, {
+	return /* @__PURE__ */ jsx(TableHeaderCell, {
 		sortable: canSort,
 		sortDirection: canSort && isSorted ? isDescending ? "desc" : "asc" : false,
 		ref,
 		isSticky,
 		align,
 		size,
+		trailing: helpText && /* @__PURE__ */ jsx(StyledHelperTooltip, {
+			size: "sm",
+			children: helpText
+		}),
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
+		children: /* @__PURE__ */ jsx("span", {
 			className: "th__text",
 			children
-		}), helpText && /* @__PURE__ */ jsx(StyledHelperTooltip, {
-			size: "sm",
-			children: helpText
-		})]
+		})
 	});
 });
 //#endregion
@@ -191,10 +227,10 @@ const TableCell = styled.td.attrs({ role: "cell" })`
      and rows stay compact. */
   box-sizing: border-box;
 
-  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", theme.color.border.primary)};
   text-align: left;
   padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
-  color: ${({ theme }) => theme.color.text.primary};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
   white-space: nowrap;
   ${paragraphMixins.md};
   line-height: 1;
@@ -206,14 +242,23 @@ const CellTitleContainer = styled.div`
   flex-direction: column;
 `;
 const CellTitle = styled(Paragraph).attrs({ color: "primary" })`
+  ${semanticOnly(() => "color: inherit;")}
   display: flex;
   align-items: center;
   gap: ${Spacing[2]};
 `;
+const CellSubtitle = styled(Paragraph)`
+  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}
+`;
+const activeHighlight = (theme) => semanticColor(theme, "ActionAccent", theme.color.background.highlight);
+const hoverHighlight = (theme) => {
+	const tokens = semanticTokens(theme);
+	return tokens ? withAlpha(tokens.ActionAccent, tokens.Opacity25) : theme.color.background.highlight;
+};
 const TableCellTitle = ({ children, subtitle, ...elemProps }) => {
 	return /* @__PURE__ */ jsxs(CellTitleContainer, {
 		...elemProps,
-		children: [/* @__PURE__ */ jsx(CellTitle, { children }), subtitle && /* @__PURE__ */ jsx(Paragraph, { children: subtitle })]
+		children: [/* @__PURE__ */ jsx(CellTitle, { children }), subtitle && /* @__PURE__ */ jsx(CellSubtitle, { children: subtitle })]
 	});
 };
 const TableTD = styled(TableCell)`
@@ -239,9 +284,9 @@ const TableActionTD = styled(TableTD)`
 const StickyTD = styled(TableTD)`
   position: sticky;
   left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
-  background-color: ${({ theme }) => theme.color.background.primary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
 
-  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}
+  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${semanticColor(theme, "BorderDivider", theme.color.border.primary)};`}
   z-index: 2;
 `;
 const StickyTH = styled(TableTH)`
@@ -249,8 +294,8 @@ const StickyTH = styled(TableTH)`
   left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
   z-index: 2;
   max-width: 10%;
-  background-color: ${({ theme }) => theme.color.background.secondary};
-  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}
+  background-color: ${({ theme }) => semanticColor(theme, "SurfaceSecondary", theme.color.background.secondary)};
+  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${semanticColor(theme, "BorderDivider", theme.color.border.primary)};`}
 `;
 const TableTR = styled(TableRow)`
   ${({ disableHoverBackground }) => disableHoverBackground && css`
@@ -260,16 +305,18 @@ const TableTR = styled(TableRow)`
     `}
 
   ${({ $isActive }) => $isActive && css`
-      background-color: ${({ theme }) => theme.color.background.highlight};
+      background-color: ${({ theme }) => activeHighlight(theme)};
+      ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
       &:hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
+        background-color: ${({ theme }) => activeHighlight(theme)};
       }
     `}
 
   ${({ onClick, disableHoverBackground, $isActive }) => onClick != null && !disableHoverBackground && !$isActive && css`
       cursor: pointer;
       :hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
+        background-color: ${({ theme }) => hoverHighlight(theme)};
+        ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
       }
       transition-duration: ${"200ms"};
     `}
@@ -313,7 +360,7 @@ const slideKeyframes = keyframes`
 const Loader = styled.div`
     position: absolute;
     z-index: ${Z_INDICES.loadingOverlays};
-    border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
+    border-bottom: 3px solid ${({ theme }) => semanticColor(theme, "BorderAccent", theme.color.primary.brand)};
     width: 100%;
   
     animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
@@ -325,7 +372,7 @@ const Overlay = styled.div`
     left: 0;
     width: 100%;
     height: 100%;
-    background: ${({ theme }) => theme.color.primary.white};
+    background: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.primary.white)};
     opacity: 50%;
   `;
 const SpinnerWrapper = styled.div`
@@ -345,7 +392,7 @@ const TableSpinner = styled(Spinner)`
     }
   
     path {
-      stroke: ${Color.CorePurple500};
+      stroke: ${({ theme }) => semanticColor(theme, "FeedbackAccent3", Color.CorePurple500)};
       stroke-width: 0.46;
     }
   `;
@@ -386,4 +433,4 @@ const TableLayout = ({ children, className, containerMaxHeight, containerScrolls
 //#endregion
 export { StickyTH as a, TableCellTitle as c, TableTR as d, TableTH as f, Table as h, StickyTD as i, TableIconTD as l, TableHeaderCell as m, TableBody as n, TableActionTD as o, TableRow as p, TableHead as r, TableCell as s, TableLayout as t, TableTD as u };
 
-//# sourceMappingURL=Table-nWd5ZVbm.mjs.map
+//# sourceMappingURL=Table-ELLvSvH4.mjs.map

package/dist/Table-ELLvSvH4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table-ELLvSvH4.mjs","names":["slideKeyframes"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n  size?: 'sm' | 'md';\n  isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n  0% {\n    transform: translateX(-50%) scaleX(0);\n  }\n  50% {\n    transform: translateX(0) scaleX(1);\n  }\n  100% {\n    transform: translateX(50%) scaleX(0);\n  }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n  display: table;\n  width: 100%;\n  border-spacing: 0;\n  ${paragraphMixins.md};\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      td,\n      th {\n        padding: ${Spacing[2]};\n      }\n    `}\n\n  ${({ isLoading }) =>\n    isLoading &&\n    css`\n      thead {\n        &:after {\n          content: '';\n          display: block;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', theme.color.primary.brand)};\n          animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n        }\n      }\n    `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n  size?: 'sm' | 'md';\n  sortable?: boolean;\n  width?: 'auto' | 'min' | 'max' | string;\n  isSticky?: boolean;\n  align?: 'left' | 'right';\n  trailing?: ReactNode;\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n  display: table-cell;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so header padding + border are included in the\n     declared width/height. */\n  box-sizing: border-box;\n\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  text-align: left;\n  white-space: nowrap;\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  line-height: 1;\n  width: ${({ width }) => {\n    switch (width) {\n      case 'min':\n        return '1px';\n      case 'max':\n        return '100%';\n      default:\n        if (width) {\n          return width;\n        } else {\n          return 'auto';\n        }\n    }\n  }};\n\n  &:first-child {\n    border-radius: ${({ theme }) =>\n      `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n  }\n\n  &:last-child {\n    border-radius: ${({ theme }) =>\n      `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n  }\n\n  ${({ sortable }) =>\n    sortable &&\n    css`\n      cursor: pointer;\n\n      &:hover ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n\n      ${SortButton}:focus-visible ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n    `};\n\n  ${({ isSticky }) =>\n    isSticky\n      ? css`\n          position: sticky;\n          top: 0;\n          z-index: 1;\n        `\n      : css`\n          position: relative;\n        `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\nconst SortButton = styled.button`\n  background: none;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  min-width: 0;\n  ${focusOutline}\n`;\n\ninterface TableIconContainerProps {\n  sortDirection?: 'asc' | 'desc' | false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n  display: inline-block;\n\n  ${({ sortDirection }) => {\n    if (sortDirection) {\n      return css`\n        display: inline;\n      `;\n    } else {\n      return css`\n        display: inline;\n        visibility: hidden;\n        color: ${({ theme }) => semanticColor(theme, 'FgTertiary', theme.color.text.disabled)};\n      `;\n    }\n  }};\n`;\n\nconst TableHeaderCell = forwardRef<\n  HTMLTableCellElement,\n  ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell(\n  { sortable, sortDirection, children, align, trailing, onClick, ...elemProps },\n  ref,\n) {\n  let ariaSort: 'none' | 'ascending' | 'descending' | undefined;\n\n  if (sortable && sortDirection) {\n    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n  } else if (sortable) {\n    ariaSort = 'none';\n  }\n\n  return (\n    <StyledTableHeaderCell\n      sortable={sortable}\n      aria-sort={ariaSort}\n      onClick={sortable ? undefined : onClick}\n      {...elemProps}\n      ref={ref}\n    >\n      <VerticalAlign $align={align}>\n        {sortable ? (\n          <SortButton type='button' onClick={onClick}>\n            {children}\n            <TableIconContainer aria-hidden='true' sortDirection={sortDirection}>\n              {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n            </TableIconContainer>\n          </SortButton>\n        ) : (\n          children\n        )}\n        {trailing}\n      </VerticalAlign>\n    </StyledTableHeaderCell>\n  );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { withAlpha } from 'design-system/lib/color';\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n  disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n  role: 'row',\n})<TableRowProps>`\n  display: table-row;\n\n  ${({ onClick }) =>\n    onClick != null &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ disableHoverBackground, theme }) => {\n    if (disableHoverBackground) {\n      return null;\n    }\n    const tokens = semanticTokens(theme);\n    return css`\n      &${isHovered} {\n        background-color: ${\n          tokens\n            ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n            : theme.color.background.highlight\n        };\n        ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n        transition-duration: ${TransitionDuration.Fast};\n      }\n    `;\n  }}\n\n  ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n  height: 14px;\n  margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n  canSort?: boolean;\n  isSorted?: boolean;\n  isDescending?: boolean;\n  isSticky?: boolean;\n  /**\n   * Display help icon and tooltip for column header\n   */\n  helpText?: ReactNode;\n  align?: 'left' | 'right';\n  size?: 'sm' | 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n  { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n  ref,\n) {\n  return (\n    <TableHeaderCell\n      sortable={canSort}\n      sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n      ref={ref}\n      isSticky={isSticky}\n      align={align}\n      size={size}\n      trailing={helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n      {...props}\n    >\n      {/* We have to wrap the children to make it easier to use tooltips */}\n      <span className='th__text'>{children}</span>\n    </TableHeaderCell>\n  );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { withAlpha } from 'design-system/lib/color';\nimport {\n  type MaybeSemanticTheme,\n  semanticColor,\n  semanticOnly,\n  semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n  breakWord?: boolean;\n  size?: 'sm' | 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n  display: table-cell;\n  vertical-align: middle;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so a fixed cell height includes its padding + border\n     and rows stay compact. */\n  box-sizing: border-box;\n\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  text-align: left;\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  white-space: nowrap;\n  ${paragraphMixins.md};\n  line-height: 1;\n  ${({ breakWord }) =>\n    breakWord\n      ? `white-space: normal;\n         overflow-wrap: break-word;`\n      : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n  ${semanticOnly(() => 'color: inherit;')}\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst CellSubtitle = styled(Paragraph)`\n  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst activeHighlight = (theme: PersonaTheme & MaybeSemanticTheme) =>\n  semanticColor(theme, 'ActionAccent', theme.color.background.highlight);\n\nconst hoverHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n  const tokens = semanticTokens(theme);\n  return tokens\n    ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n    : theme.color.background.highlight;\n};\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n  subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n  return (\n    <CellTitleContainer {...elemProps}>\n      <CellTitle>{children}</CellTitle>\n      {subtitle && <CellSubtitle>{subtitle}</CellSubtitle>}\n    </CellTitleContainer>\n  );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n  white-space: normal;\n  overflow-wrap: break-word;\n  ${(props) =>\n    props.unclickable &&\n    css`\n      cursor: default;\n    `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n  text-align: right;\n  line-height: 0; /* To center icon; cannot use flex here */\n  padding: 0;\n  padding-left: ${Spacing[4]};\n  width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n  text-align: right;\n  padding: 0;\n  padding-right: ${Spacing[4]};\n  width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n  left?: number;\n  hasRightBorder?: boolean;\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n  z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n  left?: number;\n  hasRightBorder?: boolean;\n  size?: 'sm' | 'md';\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  z-index: 2;\n  max-width: 10%;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n  ${({ disableHoverBackground }) =>\n    disableHoverBackground &&\n    css`\n      &:hover {\n        background-color: transparent !important;\n      }\n    `}\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      background-color: ${({ theme }) => activeHighlight(theme)};\n      ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      &:hover {\n        background-color: ${({ theme }) => activeHighlight(theme)};\n      }\n    `}\n\n  ${({ onClick, disableHoverBackground, $isActive }) =>\n    onClick != null &&\n    !disableHoverBackground &&\n    !$isActive &&\n    css`\n      cursor: pointer;\n      :hover {\n        background-color: ${({ theme }) => hoverHighlight(theme)};\n        ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      }\n      transition-duration: ${TransitionDuration.Fast};\n    `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n  sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n  display: table-header-group;\n  ${({ sticky }) =>\n    sticky &&\n    css`\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n  display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableBody, TableHead, TableRow } from 'design-system/components/Table';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\n// `visible` rather than a narrower opt-out because CSS blockifies the other axis: any\n// `overflow-x` other than `visible`/`clip` forces `overflow-y` to compute to `auto` too, which\n// makes this element the scrollport that descendant sticky offsets resolve against.\nconst Container = styled.div<{ maxHeight?: number; $scrollsHorizontally: boolean }>`\n    position: relative;\n    z-index: 0;\n    overflow-x: ${({ $scrollsHorizontally }) => ($scrollsHorizontally ? 'auto' : 'visible')};\n    ${({ maxHeight }) => {\n      if (maxHeight != null) {\n        return `max-height: ${maxHeight}px;`;\n      }\n    }}\n  `;\n\nconst slideKeyframes = keyframes`\n    0% {\n      transform: translateX(-50%) scaleX(0);\n    }\n    50% {\n      transform: translateX(0) scaleX(1);\n    }\n    100% {\n      transform: translateX(50%) scaleX(0);\n    }\n  `;\n\nconst Loader = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n    width: 100%;\n  \n    animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n  `;\n\nconst Overlay = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.primary.white)};\n    opacity: 50%;\n  `;\n\nconst SpinnerWrapper = styled.div`\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[5]} 0;\n    animation: ${fadeIn} 1s;\n    animation-delay: 0.5s;\n    animation-fill-mode: backwards;\n  `;\n\nconst TableSpinner = styled(Spinner)`\n    svg {\n      width: 120px;\n      height: 120px;\n    }\n  \n    path {\n      stroke: ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', Color.CorePurple500)};\n      stroke-width: 0.46;\n    }\n  `;\n\ninterface TableLayoutProps {\n  className?: string;\n  containerMaxHeight?: number;\n  /**\n   * When false, the container does not scroll horizontally and an ancestor is expected to.\n   * Sticky offsets inside the table then resolve against that ancestor's scrollport rather\n   * than against the container.\n   */\n  containerScrollsHorizontally?: boolean;\n  dataTest?: string;\n  headerTR: JSX.Element;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  nullState: ReactNode;\n  showHeader?: boolean;\n  size?: 'sm' | 'md';\n  stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n  children,\n  className,\n  containerMaxHeight,\n  containerScrollsHorizontally = true,\n  dataTest,\n  headerTR,\n  isEmpty,\n  isLoading,\n  nullState,\n  showHeader,\n  size = 'md',\n  stickyHeader = false,\n}) => {\n  if (isEmpty && !showHeader) {\n    if (isLoading) {\n      return (\n        <SpinnerWrapper\n          role='status'\n          aria-live='polite'\n          aria-busy='true'\n          aria-label='Loading...'\n          data-loading-indicator='true'\n        >\n          <TableSpinner size='md' />\n        </SpinnerWrapper>\n      );\n    } else {\n      return (\n        <Container data-test={dataTest} $scrollsHorizontally={containerScrollsHorizontally}>\n          {nullState}\n        </Container>\n      );\n    }\n  }\n\n  return (\n    <Container\n      data-test={dataTest}\n      maxHeight={containerMaxHeight}\n      className={className}\n      $scrollsHorizontally={containerScrollsHorizontally}\n    >\n      {isLoading && <Loader data-test='table-layout__loader' />}\n      {isLoading && <Overlay />}\n\n      <Table size={size} aria-busy={isLoading || undefined}>\n        <TableHead sticky={stickyHeader}>\n          <TableRow>{headerTR}</TableRow>\n        </TableHead>\n        {!isEmpty && <TableBody>{children}</TableBody>}\n      </Table>\n\n      {isEmpty && nullState}\n    </Container>\n  );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}

package/dist/Table.d.mts

@@ -1,2 +1,2 @@
-import { t as Table } from "./Table-BOcWdwpv.mjs";
+import { t as Table } from "./Table-CPvIH27_.mjs";
 export { Table, Table as default };

package/dist/{TableBody-BFPFaZnD.d.mts → TableBody-CQYijW_3.d.mts}

@@ -6,4 +6,4 @@ declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
 }, "role">;
 //#endregion
 export { TableBody as t };
-//# sourceMappingURL=TableBody-BFPFaZnD.d.mts.map
+//# sourceMappingURL=TableBody-CQYijW_3.d.mts.map

package/dist/TableBody.d.mts

@@ -1,2 +1,2 @@
-import { t as TableBody } from "./TableBody-BFPFaZnD.mjs";
+import { t as TableBody } from "./TableBody-CQYijW_3.mjs";
 export { TableBody as default };