@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/Table-CNs8p8hL.mjs

@@ -0,0 +1,387 @@
+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 { fadeIn } from "./variables/keyframes.mjs";
+import { r as HelperTooltip } from "./Tooltip-CDvOu1UN.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 { CaretDownIcon, CaretUpIcon } from "@persona/icons";
+//#region components/Table/Table.tsx
+const slideKeyframes$1 = keyframes`
+  0% {
+    transform: translateX(-50%) scaleX(0);
+  }
+  50% {
+    transform: translateX(0) scaleX(1);
+  }
+  100% {
+    transform: translateX(50%) scaleX(0);
+  }
+`;
+const Table = styled.table.attrs({ role: "table" })`
+  display: table;
+  width: 100%;
+  border-spacing: 0;
+  ${paragraphMixins.md};
+
+  ${({ size }) => size === "sm" && css`
+      td,
+      th {
+        padding: ${Spacing[2]};
+      }
+    `}
+
+  ${({ isLoading }) => isLoading && css`
+      thead {
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
+          animation: ${slideKeyframes$1} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
+        }
+      }
+    `}
+`;
+//#endregion
+//#region components/Table/TableHeaderCell.tsx
+const StyledTableHeaderCell = styled.th`
+  display: table-cell;
+  /* Self-contained box model: don't depend on a consumer's global
+     border-box reset, so header padding + border are included in the
+     declared width/height. */
+  box-sizing: border-box;
+
+  background-color: ${({ theme }) => theme.color.background.secondary};
+  padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
+  text-align: left;
+  white-space: nowrap;
+  ${({ size }) => size === "sm" ? paragraphMixins.sm : paragraphMixins.md};
+  line-height: 1;
+  width: ${({ width }) => {
+	switch (width) {
+		case "min": return "1px";
+		case "max": return "100%";
+		default: if (width) return width;
+		else return "auto";
+	}
+}};
+
+  &:first-child {
+    border-radius: ${({ theme }) => `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};
+  }
+
+  &:last-child {
+    border-radius: ${({ theme }) => `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};
+  }
+
+  ${({ sortable }) => sortable && css`
+      cursor: pointer;
+
+      &:hover ${TableIconContainer} {
+        display: inline;
+        visibility: visible;
+      }
+    `};
+
+  ${({ isSticky }) => isSticky ? css`
+          position: sticky;
+          top: 0;
+          z-index: 1;
+        ` : css`
+          position: relative;
+        `}
+`;
+const VerticalAlign = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[1]};
+  flex-direction: ${({ $align }) => $align === "right" ? "row-reverse" : "row"};
+`;
+const TableIconContainer = styled("div")`
+  display: inline-block;
+
+  ${({ sortDirection }) => {
+	if (sortDirection) return css`
+        display: inline;
+      `;
+	else return css`
+        display: inline;
+        visibility: hidden;
+        color: ${({ theme }) => theme.color.text.disabled};
+      `;
+}};
+`;
+const TableHeaderCell = forwardRef(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {
+	let ariaSort = "none";
+	if (sortable && sortDirection) ariaSort = sortDirection === "asc" ? "ascending" : "descending";
+	return /* @__PURE__ */ jsx(StyledTableHeaderCell, {
+		sortable,
+		"aria-sort": ariaSort,
+		role: "columnheader",
+		...elemProps,
+		ref,
+		children: /* @__PURE__ */ jsxs(VerticalAlign, {
+			$align: align,
+			children: [children, sortable && /* @__PURE__ */ jsx(TableIconContainer, {
+				sortDirection,
+				children: sortDirection === "asc" ? /* @__PURE__ */ jsx(CaretUpIcon, {}) : /* @__PURE__ */ jsx(CaretDownIcon, {})
+			})]
+		})
+	});
+});
+//#endregion
+//#region components/Table/TableRow.tsx
+const TableRow = styled.tr.attrs({ role: "row" })`
+  display: table-row;
+
+  ${({ onClick }) => onClick != null && css`
+      cursor: pointer;
+    `}
+
+  ${({ disableHoverBackground, theme }) => !disableHoverBackground && css`
+      &${isHovered} {
+        background-color: ${theme.color.background.highlight};
+        transition-duration: ${"200ms"};
+      }
+    `}
+
+  ${isFocusedVisible}
+`;
+//#endregion
+//#region components/Table/TableTH.tsx
+const StyledHelperTooltip = styled(HelperTooltip)`
+  height: 14px;
+  margin-left: ${Spacing[1]};
+`;
+const TableTH = forwardRef(function TableTH({ children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(TableHeaderCell, {
+		sortable: canSort,
+		sortDirection: canSort && isSorted ? isDescending ? "desc" : "asc" : false,
+		ref,
+		isSticky,
+		align,
+		size,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "th__text",
+			children
+		}), helpText && /* @__PURE__ */ jsx(StyledHelperTooltip, {
+			size: "sm",
+			children: helpText
+		})]
+	});
+});
+//#endregion
+//#region components/Table/TableCell.tsx
+const TableCell = styled.td.attrs({ role: "cell" })`
+  display: table-cell;
+  vertical-align: middle;
+  /* Self-contained box model: don't depend on a consumer's global
+     border-box reset, so a fixed cell height includes its padding + border
+     and rows stay compact. */
+  box-sizing: border-box;
+
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+  text-align: left;
+  padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
+  color: ${({ theme }) => theme.color.text.primary};
+  white-space: nowrap;
+  ${paragraphMixins.md};
+  line-height: 1;
+  ${({ breakWord }) => breakWord ? `white-space: normal;
+         overflow-wrap: break-word;` : ""}
+`;
+const CellTitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const CellTitle = styled(Paragraph).attrs({ color: "primary" })`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+`;
+const TableCellTitle = ({ children, subtitle, ...elemProps }) => {
+	return /* @__PURE__ */ jsxs(CellTitleContainer, {
+		...elemProps,
+		children: [/* @__PURE__ */ jsx(CellTitle, { children }), subtitle && /* @__PURE__ */ jsx(Paragraph, { children: subtitle })]
+	});
+};
+const TableTD = styled(TableCell)`
+  white-space: normal;
+  overflow-wrap: break-word;
+  ${(props) => props.unclickable && css`
+      cursor: default;
+    `}
+`;
+const TableIconTD = styled(TableTD)`
+  text-align: right;
+  line-height: 0; /* To center icon; cannot use flex here */
+  padding: 0;
+  padding-left: ${Spacing[4]};
+  width: 36px;
+`;
+const TableActionTD = styled(TableTD)`
+  text-align: right;
+  padding: 0;
+  padding-right: ${Spacing[4]};
+  width: 48px;
+`;
+const StickyTD = styled(TableTD)`
+  position: sticky;
+  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
+  background-color: ${({ theme }) => theme.color.background.primary};
+
+  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}
+  z-index: 2;
+`;
+const StickyTH = styled(TableTH)`
+  position: sticky;
+  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};`}
+`;
+const TableTR = styled(TableRow)`
+  ${({ disableHoverBackground }) => disableHoverBackground && css`
+      &:hover {
+        background-color: transparent !important;
+      }
+    `}
+
+  ${({ $isActive }) => $isActive && css`
+      background-color: ${({ theme }) => theme.color.background.highlight};
+      &:hover {
+        background-color: ${({ theme }) => theme.color.background.highlight};
+      }
+    `}
+
+  ${({ onClick, disableHoverBackground, $isActive }) => onClick != null && !disableHoverBackground && !$isActive && css`
+      cursor: pointer;
+      :hover {
+        background-color: ${({ theme }) => theme.color.background.highlight};
+      }
+      transition-duration: ${"200ms"};
+    `}
+`;
+//#endregion
+//#region components/Table/TableHead.tsx
+const TableHead = styled.thead.attrs({ role: "rowgroup" })`
+  display: table-header-group;
+  ${({ sticky }) => sticky && css`
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    `}
+`;
+//#endregion
+//#region components/Table/TableBody.tsx
+const TableBody = styled.tbody.attrs({ role: "rowgroup" })`
+  display: table-row-group;
+`;
+//#endregion
+//#region components/Table/TableLayout.tsx
+const Container = styled.div`
+    position: relative;
+    z-index: 0;
+    overflow-x: auto;
+    ${({ maxHeight }) => {
+	if (maxHeight != null) return `max-height: ${maxHeight}px;`;
+}}
+  `;
+const slideKeyframes = keyframes`
+    0% {
+      transform: translateX(-50%) scaleX(0);
+    }
+    50% {
+      transform: translateX(0) scaleX(1);
+    }
+    100% {
+      transform: translateX(50%) scaleX(0);
+    }
+  `;
+const Loader = styled.div`
+    position: absolute;
+    z-index: ${Z_INDICES.loadingOverlays};
+    border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
+    width: 100%;
+  
+    animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
+  `;
+const Overlay = styled.div`
+    position: absolute;
+    z-index: ${Z_INDICES.loadingOverlays};
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: ${({ theme }) => theme.color.primary.white};
+    opacity: 50%;
+  `;
+const SpinnerWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${Spacing[5]} 0;
+    animation: ${fadeIn} 1s;
+    animation-delay: 0.5s;
+    animation-fill-mode: backwards;
+  `;
+const TableSpinner = styled(Spinner)`
+    svg {
+      width: 120px;
+      height: 120px;
+    }
+  
+    path {
+      stroke: ${Color.CorePurple500};
+      stroke-width: 0.46;
+    }
+  `;
+const TableLayout = ({ children, className, containerMaxHeight, dataTest, headerTR, isEmpty, isLoading, nullState, showHeader, size = "md", stickyHeader = false }) => {
+	if (isEmpty && !showHeader) if (isLoading) return /* @__PURE__ */ jsx(SpinnerWrapper, {
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true",
+		"aria-label": "Loading...",
+		"data-loading-indicator": "true",
+		children: /* @__PURE__ */ jsx(TableSpinner, { size: "md" })
+	});
+	else return /* @__PURE__ */ jsx(Container, {
+		"data-test": dataTest,
+		children: nullState
+	});
+	return /* @__PURE__ */ jsxs(Container, {
+		"data-test": dataTest,
+		maxHeight: containerMaxHeight,
+		className,
+		children: [
+			isLoading && /* @__PURE__ */ jsx(Loader, { "data-test": "table-layout__loader" }),
+			isLoading && /* @__PURE__ */ jsx(Overlay, {}),
+			/* @__PURE__ */ jsxs(Table, {
+				size,
+				"aria-busy": isLoading || void 0,
+				children: [/* @__PURE__ */ jsx(TableHead, {
+					sticky: stickyHeader,
+					children: /* @__PURE__ */ jsx(TableRow, { children: headerTR })
+				}), !isEmpty && children]
+			}),
+			isEmpty && nullState
+		]
+	});
+};
+//#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

package/dist/Table-CNs8p8hL.mjs.map

@@ -0,0 +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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"}

package/dist/{Table-DkAA1lt_.d.cts → Table-D3nyiZt0.d.mts}

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

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

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

package/dist/Table.d.cts

@@ -1,2 +1,2 @@
-import { t as Table } from "./Table-DkAA1lt_.cjs";
+import { t as Table } from "./Table-DJZtluW3.cjs";
 export { Table, Table as default };

package/dist/Table.d.mts

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

package/dist/{TableBody-5QcVMPP_.d.cts → TableBody-BFPF07n4.d.cts}

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

package/dist/{TableBody-Clf34yzJ.d.mts → TableBody-DpRjZgzU.d.mts}

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

package/dist/TableBody.d.cts

@@ -1,2 +1,2 @@
-import { t as TableBody } from "./TableBody-5QcVMPP_.cjs";
+import { t as TableBody } from "./TableBody-BFPF07n4.cjs";
 export = TableBody;

package/dist/TableBody.d.mts

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