@persona/design-system 0.1.7 → 0.1.9

package/dist/TabBar-Bn8PHHBZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar-Bn8PHHBZ.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 { 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 ${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 { 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 }) => theme.color.primary.brand};\n  border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => 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 ? theme.color.variants.basic.textDisabled : 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 }) =>\n      !selected &&\n      css`\n        color: ${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';\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 }) => theme.color.variants.basic.highlight};\n  }\n\n  svg {\n    color: ${Color.CoreSlate800};\n  }\n\n  &:hover {\n    svg {\n      color: ${Color.CoreSlate900};\n    }\n  }\n`;\n"],"mappings":"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"}

package/dist/TabBarIconButton.d.mts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "./IconButton-Dnnlf9uO.mjs";
+import { n as IconButtonProps } from "./IconButton-BHCmHIx5.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 

package/dist/{Table-DJZtluW3.d.cts → Table-BNScLj9g.d.mts}

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

package/dist/{Table-CNs8p8hL.mjs → Table-BfontAeY.mjs}

@@ -2,15 +2,15 @@ import { isFocusedVisible, isHovered } from "./lib/pseudoClass.mjs";
 import "./variables/transitions.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import "./variables/spacing.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
+import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
-import { r as HelperTooltip } from "./Tooltip-CDvOu1UN.mjs";
+import { r as HelperTooltip } from "./Tooltip-BvDbmXak.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { t as Spinner } from "./Spinner-BEPF42RW.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css, keyframes } from "styled-components";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { CaretDownIcon, CaretUpIcon } from "@persona/icons";
 //#region components/Table/Table.tsx
 const slideKeyframes$1 = keyframes`
@@ -294,7 +294,7 @@ const TableBody = styled.tbody.attrs({ role: "rowgroup" })`
 const Container = styled.div`
     position: relative;
     z-index: 0;
-    overflow-x: auto;
+    overflow-x: ${({ $scrollsHorizontally }) => $scrollsHorizontally ? "auto" : "visible"};
     ${({ maxHeight }) => {
 	if (maxHeight != null) return `max-height: ${maxHeight}px;`;
 }}
@@ -349,7 +349,7 @@ const TableSpinner = styled(Spinner)`
       stroke-width: 0.46;
     }
   `;
-const TableLayout = ({ children, className, containerMaxHeight, dataTest, headerTR, isEmpty, isLoading, nullState, showHeader, size = "md", stickyHeader = false }) => {
+const TableLayout = ({ children, className, containerMaxHeight, containerScrollsHorizontally = true, dataTest, headerTR, isEmpty, isLoading, nullState, showHeader, size = "md", stickyHeader = false }) => {
 	if (isEmpty && !showHeader) if (isLoading) return /* @__PURE__ */ jsx(SpinnerWrapper, {
 		role: "status",
 		"aria-live": "polite",
@@ -360,12 +360,14 @@ const TableLayout = ({ children, className, containerMaxHeight, dataTest, header
 	});
 	else return /* @__PURE__ */ jsx(Container, {
 		"data-test": dataTest,
+		$scrollsHorizontally: containerScrollsHorizontally,
 		children: nullState
 	});
 	return /* @__PURE__ */ jsxs(Container, {
 		"data-test": dataTest,
 		maxHeight: containerMaxHeight,
 		className,
+		$scrollsHorizontally: containerScrollsHorizontally,
 		children: [
 			isLoading && /* @__PURE__ */ jsx(Loader, { "data-test": "table-layout__loader" }),
 			isLoading && /* @__PURE__ */ jsx(Overlay, {}),
@@ -384,4 +386,4 @@ const TableLayout = ({ children, className, containerMaxHeight, dataTest, header
 //#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-CNs8p8hL.mjs.map
+//# sourceMappingURL=Table-BfontAeY.mjs.map

package/dist/{Table-CNs8p8hL.mjs.map → Table-BfontAeY.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Table-CNs8p8hL.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 { 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 }) => 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 } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\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}\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 }) => theme.color.background.secondary};\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\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\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 }) => theme.color.text.disabled};\n      `;\n    }\n  }};\n`;\n\nconst TableHeaderCell = forwardRef<\n  HTMLTableCellElement,\n  ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {\n  let ariaSort: 'none' | 'ascending' | 'descending' | 'other' = 'none';\n\n  if (sortable && sortDirection) {\n    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n  }\n\n  return (\n    <StyledTableHeaderCell\n      sortable={sortable}\n      aria-sort={ariaSort}\n      role='columnheader'\n      {...elemProps}\n      ref={ref}\n    >\n      <VerticalAlign $align={align}>\n        {children}\n        {sortable && (\n          <TableIconContainer sortDirection={sortDirection}>\n            {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n          </TableIconContainer>\n        )}\n      </VerticalAlign>\n    </StyledTableHeaderCell>\n  );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\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    !disableHoverBackground &&\n    css`\n      &${isHovered} {\n        background-color: ${theme.color.background.highlight};\n        transition-duration: ${TransitionDuration.Fast};\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      {...props}\n    >\n      {/* We have to wrap the children to make it easier to use tooltips */}\n      <span className='th__text'>{children}</span>\n      {helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\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 { paragraphMixins } from 'design-system/mixins/text';\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 }) => theme.color.border.primary};\n  text-align: left;\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  color: ${({ theme }) => 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  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\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 && <Paragraph>{subtitle}</Paragraph>}\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 }) => theme.color.background.primary};\n\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder && `border-right: 2px solid ${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 }) => theme.color.background.secondary};\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder && `border-right: 2px solid ${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 }) => theme.color.background.highlight};\n      &:hover {\n        background-color: ${({ theme }) => theme.color.background.highlight};\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 }) => theme.color.background.highlight};\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, { TableHead, TableRow } from 'design-system/components/Table';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\nconst Container = styled.div<{ maxHeight?: number }>`\n    position: relative;\n    z-index: 0;\n    overflow-x: auto;\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 }) => 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 }) => 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: ${Color.CorePurple500};\n      stroke-width: 0.46;\n    }\n  `;\n\ninterface TableLayoutProps {\n  className?: string;\n  containerMaxHeight?: number;\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  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 <Container data-test={dataTest}>{nullState}</Container>;\n    }\n  }\n\n  return (\n    <Container data-test={dataTest} maxHeight={containerMaxHeight} className={className}>\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 && children}\n      </Table>\n\n      {isEmpty && nullState}\n    </Container>\n  );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}
+{"version":3,"file":"Table-BfontAeY.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 { 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 }) => 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 } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\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}\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 }) => theme.color.background.secondary};\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\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\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 }) => theme.color.text.disabled};\n      `;\n    }\n  }};\n`;\n\nconst TableHeaderCell = forwardRef<\n  HTMLTableCellElement,\n  ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {\n  let ariaSort: 'none' | 'ascending' | 'descending' | 'other' = 'none';\n\n  if (sortable && sortDirection) {\n    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n  }\n\n  return (\n    <StyledTableHeaderCell\n      sortable={sortable}\n      aria-sort={ariaSort}\n      role='columnheader'\n      {...elemProps}\n      ref={ref}\n    >\n      <VerticalAlign $align={align}>\n        {children}\n        {sortable && (\n          <TableIconContainer sortDirection={sortDirection}>\n            {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n          </TableIconContainer>\n        )}\n      </VerticalAlign>\n    </StyledTableHeaderCell>\n  );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\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    !disableHoverBackground &&\n    css`\n      &${isHovered} {\n        background-color: ${theme.color.background.highlight};\n        transition-duration: ${TransitionDuration.Fast};\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      {...props}\n    >\n      {/* We have to wrap the children to make it easier to use tooltips */}\n      <span className='th__text'>{children}</span>\n      {helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\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 { paragraphMixins } from 'design-system/mixins/text';\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 }) => theme.color.border.primary};\n  text-align: left;\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  color: ${({ theme }) => 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  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\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 && <Paragraph>{subtitle}</Paragraph>}\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 }) => theme.color.background.primary};\n\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder && `border-right: 2px solid ${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 }) => theme.color.background.secondary};\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder && `border-right: 2px solid ${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 }) => theme.color.background.highlight};\n      &:hover {\n        background-color: ${({ theme }) => theme.color.background.highlight};\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 }) => theme.color.background.highlight};\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, { TableHead, TableRow } from 'design-system/components/Table';\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 }) => 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 }) => 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: ${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 && children}\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-D3nyiZt0.mjs";
+import { t as Table } from "./Table-BNScLj9g.mjs";
 export { Table, Table as default };

package/dist/{TableBody-BFPF07n4.d.cts → TableBody-CrDNMyT8.d.mts}

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

package/dist/TableBody.d.mts

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

package/dist/{TableBox-DIJffyts.mjs → TableBox-bmrKh_ax.mjs}

@@ -2,22 +2,22 @@ import { focusOutline } from "./mixins/focus.mjs";
 import "./variables/effect.mjs";
 import "./variables/transitions.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { a as Tooltip } from "./Tooltip-CDvOu1UN.mjs";
+import { n as Stack, t as HStack } from "./Stack-Bl54WmhY.mjs";
+import { a as Tooltip } from "./Tooltip-BvDbmXak.mjs";
 import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Stack, t as HStack } from "./Stack-ckRN7LrP.mjs";
-import { t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { t as FormGroupContext } from "./useFormGroup-BMukAMAd.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-cnkoGc7C.mjs";
-import { n as CaretButton, t as Combobox } from "./Combobox-CeKMrlxy.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-CNs8p8hL.mjs";
-import { s as Popover_default } from "./Popover-D0QY5f-J.mjs";
-import { t as Container } from "./FormControl-ArDcvmir.mjs";
+import { t as IconButton } from "./IconButton-P8w0JDI5.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-D25WBCah.mjs";
+import { t as FormGroupContext } from "./useFormGroup-DWVW7A9f.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-BfontAeY.mjs";
+import { n as CaretButton, t as Combobox } from "./Combobox-B6JyLog8.mjs";
+import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
+import { t as Container } from "./FormControl-CFU9uKF7.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { DragIcon } from "@persona/icons";
 import { CircleAlertIcon as CircleAlertIcon$1, MoreIcon as MoreIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import uniqueId from "lodash/fp/uniqueId.js";
@@ -518,7 +518,7 @@ const TableBoxCell = ({ children, itemId = "", value = "", columnKey, errorText,
 		...columnConfig,
 		...inlineEditConfigOverride
 	} : columnConfig;
-	if (inlineEditConfig?.type === "combobox" && (context.hasHorizontalOverflow || inlineEditConfig?.fullWidthComboboxDropdown)) inlineEditConfig = {
+	if (inlineEditConfig?.type === "combobox" && (context.clipsOverflow || inlineEditConfig?.fullWidthComboboxDropdown)) inlineEditConfig = {
 		...inlineEditConfig,
 		useComboboxPortal: true
 	};
@@ -1087,42 +1087,58 @@ const useTableBoxDragAndDrop = ({ tableRef, reorderConfig }) => {
 const TableBoxContext = createContext(null);
 const DRAG_HANDLE_CELL_WIDTH = 24;
 const RIGHT_FADE_WIDTH = 48;
+const CONTAINER_BORDER_WIDTH_PX = 1;
+const STICKY_COLUMN_Z_INDEX = Z_INDICES.sticky;
+const BODY_FADE_Z_INDEX = Z_INDICES.sticky + 1;
+const PINNED_ACTIONS_Z_INDEX = Z_INDICES.sticky + 2;
+const STICKY_HEADER_Z_INDEX = Z_INDICES.sticky + 3;
+const STICKY_CORNER_Z_INDEX = Z_INDICES.sticky + 4;
+const HEADER_FADE_Z_INDEX = Z_INDICES.sticky + 5;
 const HEADER_HEIGHT_PX = parseInt(Spacing[1], 10) * 2 + parseInt(Typography.TextSmall.lineHeight, 10) + 1;
 const TableScrollContainer = styled.div`
-  border: 1px solid ${Color.BorderDivider};
+  border: ${CONTAINER_BORDER_WIDTH_PX}px solid ${Color.BorderDivider};
   border-radius: ${BorderRadius.Md};
   overflow-x: ${({ $fixedLayout, $hasHorizontalOverflow }) => $fixedLayout ? "visible" : $hasHorizontalOverflow ? "auto" : "visible"};
+  overflow-y: ${({ $maxHeight }) => $maxHeight != null ? "auto" : "visible"};
   overscroll-behavior-x: none;
+  ${({ $maxHeight }) => $maxHeight != null && css`
+      max-height: ${typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
+    `}
 `;
 const ScrollAffordanceWrapper = styled.div`
   position: relative;
 `;
 const RightFadeOverlay = styled.div`
   position: absolute;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
+  right: ${({ $scrollbarWidth }) => CONTAINER_BORDER_WIDTH_PX + $scrollbarWidth}px;
   width: ${RIGHT_FADE_WIDTH}px;
-  /* Sits above the sticky first column (z-index 2) but below the pinned
-     row actions (z-index 4) so action buttons stay legible. */
-  z-index: 3;
   pointer-events: none;
-  background:
-    linear-gradient(to right, transparent, ${Color.BackgroundSecondary}) top left / 100%
-      ${Math.max(0, HEADER_HEIGHT_PX - 1)}px no-repeat,
-    linear-gradient(to right, transparent, ${Color.BackgroundPrimary}) bottom left / 100%
-      calc(100% - ${HEADER_HEIGHT_PX}px) no-repeat;
-  border-top-right-radius: ${BorderRadius.Md};
-  border-bottom-right-radius: ${BorderRadius.Md};
   opacity: ${({ $visible }) => $visible ? 1 : 0};
   transition: opacity ${"200ms"} ease-out;
 `;
-const stickyContentColumn = (isReorderable) => css`
+const HeaderFadeOverlay = styled(RightFadeOverlay).attrs({ "data-scroll-affordance": "header-fade" })`
+  top: ${CONTAINER_BORDER_WIDTH_PX}px;
+  height: ${Math.max(0, HEADER_HEIGHT_PX - CONTAINER_BORDER_WIDTH_PX)}px;
+  z-index: ${HEADER_FADE_Z_INDEX};
+  background: linear-gradient(to right, transparent, ${Color.BackgroundSecondary});
+  border-top-right-radius: ${BorderRadius.Md};
+`;
+const BodyFadeOverlay = styled(RightFadeOverlay).attrs({ "data-scroll-affordance": "body-fade" })`
+  top: ${({ $hideHeader }) => $hideHeader ? `${CONTAINER_BORDER_WIDTH_PX}px` : `${CONTAINER_BORDER_WIDTH_PX + HEADER_HEIGHT_PX}px`};
+  bottom: ${({ $scrollbarHeight }) => CONTAINER_BORDER_WIDTH_PX + $scrollbarHeight}px;
+  z-index: ${BODY_FADE_Z_INDEX};
+  background: linear-gradient(to right, transparent, ${Color.BackgroundPrimary});
+  border-bottom-right-radius: ${BorderRadius.Md};
+  ${({ $hideHeader }) => $hideHeader && css`
+      border-top-right-radius: ${BorderRadius.Md};
+    `}
+`;
+const stickyContentColumn = (isReorderable, stickyHeader) => css`
   && thead th:first-child,
   && tbody td:first-child {
     position: sticky;
     left: 0;
-    z-index: 2;
+    z-index: ${STICKY_COLUMN_Z_INDEX};
   }
 
   && tbody td:first-child {
@@ -1134,13 +1150,26 @@ const stickyContentColumn = (isReorderable) => css`
     && tbody td:nth-child(2) {
       position: sticky;
       left: ${DRAG_HANDLE_CELL_WIDTH}px;
-      z-index: 2;
+      z-index: ${STICKY_COLUMN_Z_INDEX};
     }
 
     && tbody td:nth-child(2) {
       background-color: inherit;
     }
   `}
+
+  ${stickyHeader && css`
+      && thead th {
+        position: sticky;
+        top: 0;
+        z-index: ${STICKY_HEADER_Z_INDEX};
+        background-color: ${Color.BackgroundSecondary};
+      }
+
+      ${isReorderable ? `&& thead th:nth-child(-n+2)` : `&& thead th:first-child`} {
+        z-index: ${STICKY_CORNER_Z_INDEX};
+      }
+    `}
 `;
 const StyledTable = styled(Table)`
   caret-color: ${Color.BorderFocus};
@@ -1149,10 +1178,19 @@ const StyledTable = styled(Table)`
     background: ${Color.BackgroundLabelPurple};
   }
 
-  ${({ $fixedLayout, $isReorderable }) => $fixedLayout ? css`
+  ${({ $fixedLayout, $isReorderable, $stickyHeader }) => $fixedLayout ? css`
           /* Legacy: truncate long cell content to container width. */
           table-layout: fixed;
-        ` : stickyContentColumn($isReorderable)}
+
+          ${$stickyHeader && css`
+              && thead th {
+                position: sticky;
+                top: 0;
+                z-index: ${STICKY_HEADER_Z_INDEX};
+                background-color: ${Color.BackgroundSecondary};
+              }
+            `}
+        ` : stickyContentColumn($isReorderable, $stickyHeader)}
 
   /* Lock column widths while inline editing to prevent layout reflow. */
   ${({ $fixedLayout, $lockedWidth }) => !$fixedLayout && $lockedWidth != null && css`
@@ -1200,7 +1238,7 @@ const DragHandleHeaderCell = styled(StyledTableHeaderCell)`
 const PinnedActionsCell = styled(TableCell)`
   position: sticky;
   right: 0;
-  z-index: 4;
+  z-index: ${PINNED_ACTIONS_Z_INDEX};
   background: transparent;
   border-bottom: 1px solid ${Color.BorderHairline};
   padding: 0;
@@ -1209,7 +1247,9 @@ const PinnedActionsCell = styled(TableCell)`
 `;
 const EmptyStateCell = styled(TableCell)`
   ${paragraphMixins.sm};
-  padding: ${Spacing[2]};
+  /* Same vertical padding as TableBoxCell so empty and populated tables share a
+     stable row height. */
+  padding: ${Spacing[1]} ${Spacing[2]};
   color: ${Color.TextSecondary};
   border-bottom: none;
 `;
@@ -1222,14 +1262,14 @@ const EmptyStateButton = styled.button`
   cursor: pointer;
   ${focusOutline}
 `;
-const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, columns, onSelectionChange, selectionMode = "none", newRowId, onCreateNewRow: onCreateNewRowProp, disabled = false, reorderConfig, disableHorizontalScroll: disableHorizontalScrollProp = false, hideHeader = false, "aria-label": ariaLabel, ...props }) => {
+const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, columns, onSelectionChange, selectionMode = "none", newRowId, onCreateNewRow: onCreateNewRowProp, disabled = false, reorderConfig, disableHorizontalScroll: disableHorizontalScrollProp = false, hideHeader = false, maxHeight, "aria-label": ariaLabel, ...props }) => {
 	const tableRef = useRef(null);
 	const scrollContainerRef = useRef(null);
 	const tableBoxId = useMemo(() => uniqueId("tablebox-"), []);
 	const rowDropdownId = `${tableBoxId}-row-dropdown`;
 	const hasInlineEditableColumn = columns.some((c) => c.inlineEditConfig != null);
 	const disableHorizontalScroll = disableHorizontalScrollProp || hasInlineEditableColumn;
-	const { hasHorizontalOverflow, hasMoreScrollRight } = useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
+	const { hasHorizontalOverflow, hasMoreScrollRight, scrollbarSize } = useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
 	const { lockedColWidths, setColumnWidthsLocked } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
 	const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
 	const [shouldCreateNewRowAfterCommit, setShouldCreateNewRowAfterCommit] = useState(false);
@@ -1271,6 +1311,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 	});
 	const isReorderable = !disabled && reorderConfig != null;
 	const hasActionsColumn = !disableHorizontalScroll;
+	const stickyHeader = maxHeight != null && !hideHeader;
 	const contextValue = {
 		disabled,
 		newRowId,
@@ -1285,6 +1326,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 		draggedDirection,
 		hasActionsColumn,
 		hasHorizontalOverflow,
+		clipsOverflow: hasHorizontalOverflow || maxHeight != null,
 		setColumnWidthsLocked,
 		scheduleCreateNewRowAfterCommit: onCreateNewRowProp ? scheduleCreateNewRowAfterCommit : void 0
 	};
@@ -1295,6 +1337,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 		ref: scrollContainerRef,
 		$fixedLayout: disableHorizontalScroll,
 		$hasHorizontalOverflow: hasHorizontalOverflow,
+		$maxHeight: maxHeight,
 		children: /* @__PURE__ */ jsxs(StyledTable, {
 			ref: tableRef,
 			size: "md",
@@ -1304,6 +1347,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 			$hasHorizontalOverflow: hasHorizontalOverflow,
 			$fixedLayout: disableHorizontalScroll,
 			$hideHeader: hideHeader,
+			$stickyHeader: stickyHeader,
 			$lockedWidth: lockedColWidths != null ? lockedColWidths.reduce((sum, w) => sum + w, 0) : void 0,
 			...props,
 			children: [
@@ -1329,10 +1373,17 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 				}) : children })
 			]
 		})
-	}), !disableHorizontalScroll && /* @__PURE__ */ jsx(RightFadeOverlay, {
+	}), !disableHorizontalScroll && /* @__PURE__ */ jsxs(Fragment, { children: [!hideHeader && /* @__PURE__ */ jsx(HeaderFadeOverlay, {
+		"aria-hidden": "true",
+		$visible: hasMoreScrollRight,
+		$scrollbarWidth: scrollbarSize.vertical
+	}), /* @__PURE__ */ jsx(BodyFadeOverlay, {
 		"aria-hidden": "true",
-		$visible: hasMoreScrollRight
-	})] });
+		$visible: hasMoreScrollRight,
+		$hideHeader: hideHeader,
+		$scrollbarWidth: scrollbarSize.vertical,
+		$scrollbarHeight: scrollbarSize.horizontal
+	})] })] });
 	return /* @__PURE__ */ jsx(TableBoxContext.Provider, {
 		value: contextValue,
 		children: isReorderable ? /* @__PURE__ */ jsxs(DndContext, {
@@ -1353,4 +1404,4 @@ TableBox.Cell = TableBoxCell;
 //#endregion
 export { TableBoxContext as n, TableBox as t };
 
-//# sourceMappingURL=TableBox-DIJffyts.mjs.map
+//# sourceMappingURL=TableBox-bmrKh_ax.mjs.map