@persona/design-system 0.1.5-pre.4

package/dist/components/Table/index.mjs

@@ -0,0 +1,379 @@
+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-DOTYjIt0.mjs";
+import { fadeIn } from "../../variables/keyframes.mjs";
+import { r as HelperTooltip } from "../../Tooltip-T7RQpy_a.mjs";
+import { Z_INDICES } from "../../lib/zindex.mjs";
+import { t as Spinner } from "../../Spinner-C05An_fn.mjs";
+import "../Spinner/index.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled, { css, keyframes } from "styled-components";
+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`
+  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;
+
+  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]};
+`;
+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, {
+			css: { flexDirection: align === "right" ? "row-reverse" : "row" },
+			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 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(HelperTooltip, {
+			size: "sm",
+			css: {
+				height: 14,
+				marginLeft: Spacing[1]
+			},
+			children: helpText
+		})]
+	});
+});
+//#endregion
+//#region components/Table/TableCell.tsx
+const TableCell = styled.td.attrs({ role: "cell" })`
+  display: table-cell;
+  vertical-align: middle;
+
+  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 { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/Table/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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 { Spacing } from '@persona/design-tokens';\nimport styled, { css, keyframes } from 'styled-components';\n\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 { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\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\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`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\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\n        css={{\n          flexDirection: align === 'right' ? 'row-reverse' : 'row',\n        }}\n      >\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 { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\nimport { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\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 && (\n        <HelperTooltip size='sm' css={{ height: 14, marginLeft: Spacing[1] }}>\n          {helpText}\n        </HelperTooltip>\n      )}\n    </TableHeaderCell>\n  );\n});\n\nexport default TableTH;\n","import { Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\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\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 { Color, Spacing } from '@persona/design-tokens';\nimport type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\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/components/Text/index.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../chunk-CoPdw6nB.cjs");
+const require_Text = require("../../Text-DVz8erdF.cjs");
+exports.Display = require_Text.Display;
+exports.Heading = require_Text.Heading;
+exports.Label = require_Text.Label;
+exports.Paragraph = require_Text.Paragraph;
+exports.Span = require_Text.Span;
+exports.TabularNumber = require_Text.TabularNumber;

package/dist/components/Text/index.d.cts

@@ -0,0 +1,2 @@
+import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-CrGiWG2E.cjs";
+export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/components/Text/index.d.mts

@@ -0,0 +1,2 @@
+import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-CnXedFut.mjs";
+export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/components/Text/index.mjs

@@ -0,0 +1,2 @@
+import { a as Span, i as Paragraph, n as Heading, o as TabularNumber, r as Label, t as Display } from "../../Text-DOTYjIt0.mjs";
+export { Display, Heading, Label, Paragraph, Span, TabularNumber };

package/dist/components/TextArea/index.cjs

@@ -0,0 +1,8 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_TextArea = require("../../TextArea-MVgGGM6r.cjs");
+exports.TextArea = require_TextArea.TextAreaWithStyle;
+exports.default = require_TextArea.TextAreaWithStyle;

package/dist/components/TextArea/index.d.cts

@@ -0,0 +1,2 @@
+import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-j43fhp2P.cjs";
+export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/components/TextArea/index.d.mts

@@ -0,0 +1,2 @@
+import { n as TextAreaWithStyle, t as TextAreaProps } from "../../TextArea-1bHvaq9p.mjs";
+export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default, TextAreaProps };

package/dist/components/TextArea/index.mjs

@@ -0,0 +1,2 @@
+import { t as TextAreaWithStyle } from "../../TextArea-B1kitxCl.mjs";
+export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default };

package/dist/components/Tile/index.cjs

@@ -0,0 +1,103 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
+require("../Stack/index.cjs");
+const require_Text = require("../../Text-DVz8erdF.cjs");
+const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
+const require_Sticker = require("../../Sticker-D_dutvp_.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 _persona_icons_12px = require("@persona/icons/12px");
+let _persona_icons_16px = require("@persona/icons/16px");
+//#region components/Tile/Tile.tsx
+const PADDING_BY_SIZE = {
+	sm: _persona_design_tokens.Spacing[3],
+	md: _persona_design_tokens.Spacing[4]
+};
+const TileContainer = (0, styled_components.default)(require_Stack.Stack)`
+  background-color: ${({ theme }) => theme.color.background.primary};
+  box-sizing: border-box;
+  width: 100%;
+  max-width: ${"220px"};
+  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};
+  border: 1px solid ${({ theme }) => theme.color.border.primary};
+  border-radius: ${({ theme }) => theme.card.borderRadius};
+`;
+const TransitionArrow = styled_components.default.span`
+  display: inline-flex;
+  align-items: center;
+  color: ${_persona_design_tokens.Color.BorderIconSecondary};
+  line-height: 0;
+`;
+const Tile = ({ size = "md", label, labelTooltip, value, sticker, metadata, metadataTooltip, ...props }) => {
+	const labelNode = labelTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextUnderlineTooltip, {
+		tooltip: labelTooltip,
+		side: "top",
+		children: label
+	}) : label;
+	const metadataNode = metadata != null && metadataTooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextUnderlineTooltip, {
+		tooltip: metadataTooltip,
+		children: metadata
+	}) : metadata;
+	const { text: stickerText, ...stickerRest } = sticker ?? { text: "" };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TileContainer, {
+		$size: size,
+		spacing: _persona_design_tokens.Spacing[1],
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+				size,
+				color: "secondary",
+				as: "div",
+				children: labelNode
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+				spacing: _persona_design_tokens.Spacing[2],
+				align: "center",
+				children: [Array.isArray(value) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
+						size,
+						color: "primary",
+						as: "p",
+						children: value[0]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransitionArrow, {
+						"data-test": "tile-transition-arrow",
+						"aria-hidden": "true",
+						children: size === "sm" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.ArrowRightIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_16px.ArrowRightIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
+						size,
+						color: "primary",
+						as: "p",
+						children: value[1]
+					})
+				] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
+					size,
+					color: "primary",
+					as: "p",
+					children: value
+				}), sticker != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
+					...stickerRest,
+					children: stickerText
+				})]
+			}),
+			metadata != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, {
+				size: "sm",
+				color: "secondary",
+				as: "div",
+				children: metadataNode
+			})
+		]
+	});
+};
+//#endregion
+exports.Tile = Tile;
+exports.default = Tile;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/Tile/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Spacing","Stack","Color","TextUnderlineTooltip","Paragraph","HStack","Heading","ArrowRightIcon12","ArrowRightIcon16","Sticker"],"sources":["../../../components/Tile/Tile.tsx"],"sourcesContent":["import Stack, { HStack } from '@persona/design-system/components/Stack';\nimport Sticker, { type StickerProps } from '@persona/design-system/components/Sticker';\nimport { Heading, Paragraph } from '@persona/design-system/components/Text';\nimport { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowRightIcon as ArrowRightIcon12 } from '@persona/icons/12px';\nimport { ArrowRightIcon as ArrowRightIcon16 } from '@persona/icons/16px';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type TileSize = 'sm' | 'md';\n\nexport interface TileStickerProps extends Omit<\n  StickerProps,\n  'children' | 'onDismiss' | 'dismissButtonProps'\n> {\n  /**\n   * Text content of the sticker. The Tile owns rendering so callers cannot\n   * inject arbitrary JSX.\n   */\n  text: string;\n}\n\nexport interface TileProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Size of the tile. Controls value typography and padding.\n   *\n   * @defaultValue 'md'\n   */\n  size?: TileSize;\n\n  /**\n   * Label rendered above the value.\n   */\n  label: string;\n\n  /**\n   * Tooltip content shown when hovering the label. When provided, the label\n   * is rendered with a dashed-underline trigger.\n   */\n  labelTooltip?: ReactNode;\n\n  /**\n   * Main value displayed prominently. Pass a `[before, after]` tuple to render\n   * a transition between two values with a right-pointing arrow between them.\n   */\n  value: string | [string, string];\n\n  /**\n   * Optional sticker rendered to the right of the value. The Tile renders the\n   * `<Sticker>` itself; callers configure it via these props (text + any\n   * non-children sticker props such as `variant` or `icon`).\n   */\n  sticker?: TileStickerProps;\n\n  /**\n   * Optional metadata text rendered beneath the value.\n   */\n  metadata?: string;\n\n  /**\n   * Tooltip content shown when hovering the metadata. When provided, the\n   * metadata is rendered with a dashed-underline trigger.\n   */\n  metadataTooltip?: ReactNode;\n}\n\nconst PADDING_BY_SIZE: Record<TileSize, string> = {\n  sm: Spacing[3],\n  md: Spacing[4],\n};\n\nconst TILE_MAX_WIDTH_PX = '220px';\n\nconst TileContainer = styled(Stack)<{ $size: TileSize }>`\n  background-color: ${({ theme }) => theme.color.background.primary};\n  box-sizing: border-box;\n  width: 100%;\n  max-width: ${TILE_MAX_WIDTH_PX};\n  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};\n  border: 1px solid ${({ theme }) => theme.color.border.primary};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst TransitionArrow = styled.span`\n  display: inline-flex;\n  align-items: center;\n  color: ${Color.BorderIconSecondary};\n  line-height: 0;\n`;\n\nexport const Tile = ({\n  size = 'md',\n  label,\n  labelTooltip,\n  value,\n  sticker,\n  metadata,\n  metadataTooltip,\n  ...props\n}: TileProps) => {\n  const labelNode = labelTooltip ? (\n    <TextUnderlineTooltip tooltip={labelTooltip} side='top'>\n      {label}\n    </TextUnderlineTooltip>\n  ) : (\n    label\n  );\n\n  const metadataNode =\n    metadata != null && metadataTooltip ? (\n      <TextUnderlineTooltip tooltip={metadataTooltip}>{metadata}</TextUnderlineTooltip>\n    ) : (\n      metadata\n    );\n\n  const { text: stickerText, ...stickerRest } = sticker ?? { text: '' };\n\n  return (\n    <TileContainer $size={size} spacing={Spacing[1]} {...props}>\n      <Paragraph size={size} color='secondary' as='div'>\n        {labelNode}\n      </Paragraph>\n      <HStack spacing={Spacing[2]} align='center'>\n        {Array.isArray(value) ? (\n          <>\n            <Heading size={size} color='primary' as='p'>\n              {value[0]}\n            </Heading>\n            <TransitionArrow data-test='tile-transition-arrow' aria-hidden='true'>\n              {size === 'sm' ? <ArrowRightIcon12 /> : <ArrowRightIcon16 />}\n            </TransitionArrow>\n            <Heading size={size} color='primary' as='p'>\n              {value[1]}\n            </Heading>\n          </>\n        ) : (\n          <Heading size={size} color='primary' as='p'>\n            {value}\n          </Heading>\n        )}\n        {sticker != null && <Sticker {...stickerRest}>{stickerText}</Sticker>}\n      </HStack>\n      {metadata != null && (\n        <Paragraph size='sm' color='secondary' as='div'>\n          {metadataNode}\n        </Paragraph>\n      )}\n    </TileContainer>\n  );\n};\n\nexport default Tile;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmEA,MAAM,kBAA4C;CAChD,IAAIA,uBAAAA,QAAQ;CACZ,IAAIA,uBAAAA,QAAQ;CACb;AAID,MAAM,gBAAgB,CAAA,GAAA,kBAAA,SAAOC,cAAAA,MAAM;uBACZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;eAGrD,QAAkB;cACnB,EAAE,YAAY,gBAAgB,OAAO;uBAC5B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;oBAC5C,EAAE,YAAY,MAAM,KAAK,aAAa;;AAG1D,MAAM,kBAAkB,kBAAA,QAAO,IAAI;;;WAGxBC,uBAAAA,MAAM,oBAAoB;;;AAIrC,MAAa,QAAQ,EACnB,OAAO,MACP,OACA,cACA,OACA,SACA,UACA,iBACA,GAAG,YACY;CACf,MAAM,YAAY,eAChB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,sBAAD;EAAsB,SAAS;EAAc,MAAK;YAC/C;EACoB,CAAA,GAEvB;CAGF,MAAM,eACJ,YAAY,QAAQ,kBAClB,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,sBAAD;EAAsB,SAAS;YAAkB;EAAgC,CAAA,GAEjF;CAGJ,MAAM,EAAE,MAAM,aAAa,GAAG,gBAAgB,WAAW,EAAE,MAAM,IAAI;AAErE,QACE,iBAAA,GAAA,kBAAA,MAAC,eAAD;EAAe,OAAO;EAAM,SAASH,uBAAAA,QAAQ;EAAI,GAAI;YAArD;GACE,iBAAA,GAAA,kBAAA,KAACI,aAAAA,WAAD;IAAiB;IAAM,OAAM;IAAY,IAAG;cACzC;IACS,CAAA;GACZ,iBAAA,GAAA,kBAAA,MAACC,cAAAA,QAAD;IAAQ,SAASL,uBAAAA,QAAQ;IAAI,OAAM;cAAnC,CACG,MAAM,QAAQ,MAAM,GACnB,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACE,iBAAA,GAAA,kBAAA,KAACM,aAAAA,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACV,iBAAA,GAAA,kBAAA,KAAC,iBAAD;MAAiB,aAAU;MAAwB,eAAY;gBAC5D,SAAS,OAAO,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,gBAAD,EAAoB,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,gBAAD,EAAoB,CAAA;MAC5C,CAAA;KAClB,iBAAA,GAAA,kBAAA,KAACF,aAAAA,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACT,EAAA,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAACA,aAAAA,SAAD;KAAe;KAAM,OAAM;KAAU,IAAG;eACrC;KACO,CAAA,EAEX,WAAW,QAAQ,iBAAA,GAAA,kBAAA,KAACG,gBAAAA,SAAD;KAAS,GAAI;eAAc;KAAsB,CAAA,CAC9D;;GACR,YAAY,QACX,iBAAA,GAAA,kBAAA,KAACL,aAAAA,WAAD;IAAW,MAAK;IAAK,OAAM;IAAY,IAAG;cACvC;IACS,CAAA;GAEA"}

package/dist/components/Tile/index.d.cts

@@ -0,0 +1,2 @@
+import { Tile, TileProps, TileSize, TileStickerProps } from "../../Tile.cjs";
+export { Tile, Tile as default, type TileProps, type TileSize, type TileStickerProps };

package/dist/components/Tile/index.d.mts

@@ -0,0 +1,2 @@
+import { Tile, TileProps, TileSize, TileStickerProps } from "../../Tile.mjs";
+export { Tile, Tile as default, type TileProps, type TileSize, type TileStickerProps };