@persona/design-system 0.1.8 → 0.2.0

package/dist/Table-DxLvJYWK.cjs

@@ -1,478 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
-require("./variables/transitions.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_variables_keyframes = require("./variables/keyframes.cjs");
-require("./variables/spacing.cjs");
-const require_Text = require("./Text-G9QmYf0P.cjs");
-const require_Tooltip = require("./Tooltip-olP3rdUO.cjs");
-const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Spinner = require("./Spinner-B6bx70yR.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-let _persona_icons = require("@persona/icons");
-//#region components/Table/Table.tsx
-const slideKeyframes$1 = styled_components.keyframes`
-  0% {
-    transform: translateX(-50%) scaleX(0);
-  }
-  50% {
-    transform: translateX(0) scaleX(1);
-  }
-  100% {
-    transform: translateX(50%) scaleX(0);
-  }
-`;
-const Table = styled_components.default.table.attrs({ role: "table" })`
-  display: table;
-  width: 100%;
-  border-spacing: 0;
-  ${require_mixins_text.paragraphMixins.md};
-
-  ${({ size }) => size === "sm" && styled_components.css`
-      td,
-      th {
-        padding: ${_persona_design_tokens.Spacing[2]};
-      }
-    `}
-
-  ${({ isLoading }) => isLoading && styled_components.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_components.default.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" ? require_mixins_text.paragraphMixins.sm : require_mixins_text.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 && styled_components.css`
-      cursor: pointer;
-
-      &:hover ${TableIconContainer} {
-        display: inline;
-        visibility: visible;
-      }
-    `};
-
-  ${({ isSticky }) => isSticky ? styled_components.css`
-          position: sticky;
-          top: 0;
-          z-index: 1;
-        ` : styled_components.css`
-          position: relative;
-        `}
-`;
-const VerticalAlign = styled_components.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[1]};
-  flex-direction: ${({ $align }) => $align === "right" ? "row-reverse" : "row"};
-`;
-const TableIconContainer = (0, styled_components.default)("div")`
-  display: inline-block;
-
-  ${({ sortDirection }) => {
-	if (sortDirection) return styled_components.css`
-        display: inline;
-      `;
-	else return styled_components.css`
-        display: inline;
-        visibility: hidden;
-        color: ${({ theme }) => theme.color.text.disabled};
-      `;
-}};
-`;
-const TableHeaderCell = (0, react.forwardRef)(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {
-	let ariaSort = "none";
-	if (sortable && sortDirection) ariaSort = sortDirection === "asc" ? "ascending" : "descending";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeaderCell, {
-		sortable,
-		"aria-sort": ariaSort,
-		role: "columnheader",
-		...elemProps,
-		ref,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VerticalAlign, {
-			$align: align,
-			children: [children, sortable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableIconContainer, {
-				sortDirection,
-				children: sortDirection === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretUpIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretDownIcon, {})
-			})]
-		})
-	});
-});
-//#endregion
-//#region components/Table/TableRow.tsx
-const TableRow = styled_components.default.tr.attrs({ role: "row" })`
-  display: table-row;
-
-  ${({ onClick }) => onClick != null && styled_components.css`
-      cursor: pointer;
-    `}
-
-  ${({ disableHoverBackground, theme }) => !disableHoverBackground && styled_components.css`
-      &${require_lib_pseudoClass.isHovered} {
-        background-color: ${theme.color.background.highlight};
-        transition-duration: ${"200ms"};
-      }
-    `}
-
-  ${require_lib_pseudoClass.isFocusedVisible}
-`;
-//#endregion
-//#region components/Table/TableTH.tsx
-const StyledHelperTooltip = (0, styled_components.default)(require_Tooltip.HelperTooltip)`
-  height: 14px;
-  margin-left: ${_persona_design_tokens.Spacing[1]};
-`;
-const TableTH = (0, react.forwardRef)(function TableTH({ children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableHeaderCell, {
-		sortable: canSort,
-		sortDirection: canSort && isSorted ? isDescending ? "desc" : "asc" : false,
-		ref,
-		isSticky,
-		align,
-		size,
-		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "th__text",
-			children
-		}), helpText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledHelperTooltip, {
-			size: "sm",
-			children: helpText
-		})]
-	});
-});
-//#endregion
-//#region components/Table/TableCell.tsx
-const TableCell = styled_components.default.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;
-  ${require_mixins_text.paragraphMixins.md};
-  line-height: 1;
-  ${({ breakWord }) => breakWord ? `white-space: normal;
-         overflow-wrap: break-word;` : ""}
-`;
-const CellTitleContainer = styled_components.default.div`
-  display: flex;
-  flex-direction: column;
-`;
-const CellTitle = (0, styled_components.default)(require_Text.Paragraph).attrs({ color: "primary" })`
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[2]};
-`;
-const TableCellTitle = ({ children, subtitle, ...elemProps }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CellTitleContainer, {
-		...elemProps,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellTitle, { children }), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: subtitle })]
-	});
-};
-const TableTD = (0, styled_components.default)(TableCell)`
-  white-space: normal;
-  overflow-wrap: break-word;
-  ${(props) => props.unclickable && styled_components.css`
-      cursor: default;
-    `}
-`;
-const TableIconTD = (0, styled_components.default)(TableTD)`
-  text-align: right;
-  line-height: 0; /* To center icon; cannot use flex here */
-  padding: 0;
-  padding-left: ${_persona_design_tokens.Spacing[4]};
-  width: 36px;
-`;
-const TableActionTD = (0, styled_components.default)(TableTD)`
-  text-align: right;
-  padding: 0;
-  padding-right: ${_persona_design_tokens.Spacing[4]};
-  width: 48px;
-`;
-const StickyTD = (0, styled_components.default)(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 = (0, styled_components.default)(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 = (0, styled_components.default)(TableRow)`
-  ${({ disableHoverBackground }) => disableHoverBackground && styled_components.css`
-      &:hover {
-        background-color: transparent !important;
-      }
-    `}
-
-  ${({ $isActive }) => $isActive && styled_components.css`
-      background-color: ${({ theme }) => theme.color.background.highlight};
-      &:hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
-      }
-    `}
-
-  ${({ onClick, disableHoverBackground, $isActive }) => onClick != null && !disableHoverBackground && !$isActive && styled_components.css`
-      cursor: pointer;
-      :hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
-      }
-      transition-duration: ${"200ms"};
-    `}
-`;
-//#endregion
-//#region components/Table/TableHead.tsx
-const TableHead = styled_components.default.thead.attrs({ role: "rowgroup" })`
-  display: table-header-group;
-  ${({ sticky }) => sticky && styled_components.css`
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    `}
-`;
-//#endregion
-//#region components/Table/TableBody.tsx
-const TableBody = styled_components.default.tbody.attrs({ role: "rowgroup" })`
-  display: table-row-group;
-`;
-//#endregion
-//#region components/Table/TableLayout.tsx
-const Container = styled_components.default.div`
-    position: relative;
-    z-index: 0;
-    overflow-x: auto;
-    ${({ maxHeight }) => {
-	if (maxHeight != null) return `max-height: ${maxHeight}px;`;
-}}
-  `;
-const slideKeyframes = styled_components.keyframes`
-    0% {
-      transform: translateX(-50%) scaleX(0);
-    }
-    50% {
-      transform: translateX(0) scaleX(1);
-    }
-    100% {
-      transform: translateX(50%) scaleX(0);
-    }
-  `;
-const Loader = styled_components.default.div`
-    position: absolute;
-    z-index: ${require_lib_zindex.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_components.default.div`
-    position: absolute;
-    z-index: ${require_lib_zindex.Z_INDICES.loadingOverlays};
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: ${({ theme }) => theme.color.primary.white};
-    opacity: 50%;
-  `;
-const SpinnerWrapper = styled_components.default.div`
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: ${_persona_design_tokens.Spacing[5]} 0;
-    animation: ${require_variables_keyframes.fadeIn} 1s;
-    animation-delay: 0.5s;
-    animation-fill-mode: backwards;
-  `;
-const TableSpinner = (0, styled_components.default)(require_Spinner.Spinner)`
-    svg {
-      width: 120px;
-      height: 120px;
-    }
-  
-    path {
-      stroke: ${_persona_design_tokens.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__ */ (0, react_jsx_runtime.jsx)(SpinnerWrapper, {
-		role: "status",
-		"aria-live": "polite",
-		"aria-busy": "true",
-		"aria-label": "Loading...",
-		"data-loading-indicator": "true",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableSpinner, { size: "md" })
-	});
-	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
-		"data-test": dataTest,
-		children: nullState
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-		"data-test": dataTest,
-		maxHeight: containerMaxHeight,
-		className,
-		children: [
-			isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, { "data-test": "table-layout__loader" }),
-			isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Overlay, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-				size,
-				"aria-busy": isLoading || void 0,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
-					sticky: stickyHeader,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: headerTR })
-				}), !isEmpty && children]
-			}),
-			isEmpty && nullState
-		]
-	});
-};
-//#endregion
-Object.defineProperty(exports, "StickyTD", {
-	enumerable: true,
-	get: function() {
-		return StickyTD;
-	}
-});
-Object.defineProperty(exports, "StickyTH", {
-	enumerable: true,
-	get: function() {
-		return StickyTH;
-	}
-});
-Object.defineProperty(exports, "Table", {
-	enumerable: true,
-	get: function() {
-		return Table;
-	}
-});
-Object.defineProperty(exports, "TableActionTD", {
-	enumerable: true,
-	get: function() {
-		return TableActionTD;
-	}
-});
-Object.defineProperty(exports, "TableBody", {
-	enumerable: true,
-	get: function() {
-		return TableBody;
-	}
-});
-Object.defineProperty(exports, "TableCell", {
-	enumerable: true,
-	get: function() {
-		return TableCell;
-	}
-});
-Object.defineProperty(exports, "TableCellTitle", {
-	enumerable: true,
-	get: function() {
-		return TableCellTitle;
-	}
-});
-Object.defineProperty(exports, "TableHead", {
-	enumerable: true,
-	get: function() {
-		return TableHead;
-	}
-});
-Object.defineProperty(exports, "TableHeaderCell", {
-	enumerable: true,
-	get: function() {
-		return TableHeaderCell;
-	}
-});
-Object.defineProperty(exports, "TableIconTD", {
-	enumerable: true,
-	get: function() {
-		return TableIconTD;
-	}
-});
-Object.defineProperty(exports, "TableLayout", {
-	enumerable: true,
-	get: function() {
-		return TableLayout;
-	}
-});
-Object.defineProperty(exports, "TableRow", {
-	enumerable: true,
-	get: function() {
-		return TableRow;
-	}
-});
-Object.defineProperty(exports, "TableTD", {
-	enumerable: true,
-	get: function() {
-		return TableTD;
-	}
-});
-Object.defineProperty(exports, "TableTH", {
-	enumerable: true,
-	get: function() {
-		return TableTH;
-	}
-});
-Object.defineProperty(exports, "TableTR", {
-	enumerable: true,
-	get: function() {
-		return TableTR;
-	}
-});
-
-//# sourceMappingURL=Table-DxLvJYWK.cjs.map

package/dist/Table-DxLvJYWK.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table-DxLvJYWK.cjs","names":["slideKeyframes","paragraphMixins","Spacing","paragraphMixins","Spacing","CaretUpIcon","CaretDownIcon","isHovered","isFocusedVisible","HelperTooltip","Spacing","paragraphMixins","Paragraph","Spacing","Z_INDICES","Spacing","fadeIn","Spinner","Color"],"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.d.cts

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

package/dist/TableBody-CxwHmdNb.d.cts

@@ -1,9 +0,0 @@
-import * as _$styled_components0 from "styled-components";
-
-//#region components/Table/TableBody.d.ts
-declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
-  role: "rowgroup";
-}, "role">;
-//#endregion
-export { TableBody as t };
-//# sourceMappingURL=TableBody-CxwHmdNb.d.cts.map

package/dist/TableBody.d.cts

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