@guardian/stand 0.0.70 → 0.0.71

package/dist/Table.cjs

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_table = require("./styleD/build/typescript/component/table.cjs");
+const require_Table = require("./components/Table/Table.cjs");
+exports.Table = require_Table.Table;
+exports.TableBody = require_Table.TableBody;
+exports.TableCell = require_Table.TableCell;
+exports.TableColumnHeader = require_Table.TableColumnHeader;
+exports.TableHeader = require_Table.TableHeader;
+exports.TableRow = require_Table.TableRow;
+exports.componentTable = require_table.componentTable;

package/dist/Table.d.cts

@@ -0,0 +1,5 @@
+import { ComponentTable, componentTable } from "./styleD/build/typescript/component/table.cjs";
+import { PartialTableTheme } from "./components/Table/styles.cjs";
+import { ResponsiveTableValue, TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeaderProps, TableProps, TableRowProps } from "./components/Table/types.cjs";
+import { Table, TableBody, TableCell, TableColumnHeader, TableHeader, TableRow } from "./components/Table/Table.cjs";
+export { type ComponentTable, type ResponsiveTableValue, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumnHeader, type TableColumnHeaderProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, type PartialTableTheme as TableTheme, componentTable };

package/dist/Table.d.ts

@@ -0,0 +1,5 @@
+import { ComponentTable, componentTable } from "./styleD/build/typescript/component/table.js";
+import { PartialTableTheme } from "./components/Table/styles.js";
+import { ResponsiveTableValue, TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeaderProps, TableProps, TableRowProps } from "./components/Table/types.js";
+import { Table, TableBody, TableCell, TableColumnHeader, TableHeader, TableRow } from "./components/Table/Table.js";
+export { type ComponentTable, type ResponsiveTableValue, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumnHeader, type TableColumnHeaderProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, type PartialTableTheme as TableTheme, componentTable };

package/dist/Table.js

@@ -0,0 +1,3 @@
+import { componentTable } from "./styleD/build/typescript/component/table.js";
+import { Table, TableBody, TableCell, TableColumnHeader, TableHeader, TableRow } from "./components/Table/Table.js";
+export { Table, TableBody, TableCell, TableColumnHeader, TableHeader, TableRow, componentTable };

package/dist/components/Table/Table.cjs

@@ -0,0 +1,80 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/Table/Table.tsx
+const TableContext = (0, react.createContext)({
+	columns: { sm: "minmax(0, 1fr)" },
+	headerVisibleFrom: "lg",
+	theme: require_styles.defaultTableTheme
+});
+function Table({ columns, headerVisibleFrom = "lg", theme = {}, cssOverrides, children, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTableTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableContext.Provider, {
+		value: {
+			columns,
+			headerVisibleFrom,
+			theme: mergedTheme
+		},
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Table, {
+			css: [require_styles.tableStyles(mergedTheme), cssOverrides],
+			...props,
+			children
+		})
+	});
+}
+function TableHeader({ theme = {}, cssOverrides, children, ...props }) {
+	const context = (0, react.useContext)(TableContext);
+	const mergedTheme = require_mergeDeep.mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.TableHeader, {
+		css: [require_styles.tableHeaderStyles(mergedTheme, context.columns, context.headerVisibleFrom), cssOverrides],
+		...props,
+		children
+	});
+}
+function TableBody({ cssOverrides, children, ...props }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.TableBody, {
+		css: [require_styles.tableBodyStyles, cssOverrides],
+		...props,
+		children
+	});
+}
+function TableRow({ theme = {}, cssOverrides, children, ...props }) {
+	const context = (0, react.useContext)(TableContext);
+	const mergedTheme = require_mergeDeep.mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Row, {
+		css: [require_styles.tableRowStyles(mergedTheme, context.columns), cssOverrides],
+		...props,
+		children
+	});
+}
+function TableColumnHeader({ theme = {}, cssOverrides, children, ...props }) {
+	const context = (0, react.useContext)(TableContext);
+	const mergedTheme = require_mergeDeep.mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Column, {
+		css: [require_styles.tableColumnHeaderStyles(mergedTheme), cssOverrides],
+		...props,
+		children
+	});
+}
+function TableCell({ compactLabel, gridColumn, gridRow, theme = {}, cssOverrides, children, ...props }) {
+	const context = (0, react.useContext)(TableContext);
+	const mergedTheme = require_mergeDeep.mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Cell, {
+		css: [require_styles.tableCellStyles(mergedTheme, gridColumn, gridRow), cssOverrides],
+		...props,
+		children: (0, react_aria_components.composeRenderProps)(children, (children) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [compactLabel && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+			css: require_styles.compactLabelStyles(mergedTheme, context.headerVisibleFrom),
+			"aria-hidden": "true",
+			children: compactLabel
+		}), children] }))
+	});
+}
+//#endregion
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableColumnHeader = TableColumnHeader;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;

package/dist/components/Table/Table.d.cts

@@ -0,0 +1,10 @@
+import { TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeaderProps, TableProps, TableRowProps } from "./types.cjs";
+//#region src/components/Table/Table.d.ts
+declare function Table({ columns, headerVisibleFrom, theme, cssOverrides, children, ...props }: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableHeader<T extends object = object>({ theme, cssOverrides, children, ...props }: TableHeaderProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableBody<T extends object = object>({ cssOverrides, children, ...props }: TableBodyProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableRow<T extends object = object>({ theme, cssOverrides, children, ...props }: TableRowProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableColumnHeader({ theme, cssOverrides, children, ...props }: TableColumnHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableCell({ compactLabel, gridColumn, gridRow, theme, cssOverrides, children, ...props }: TableCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Table, TableBody, TableCell, TableColumnHeader, TableHeader, TableRow };

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,10 @@
+import { TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeaderProps, TableProps, TableRowProps } from "./types.js";
+//#region src/components/Table/Table.d.ts
+declare function Table({ columns, headerVisibleFrom, theme, cssOverrides, children, ...props }: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableHeader<T extends object = object>({ theme, cssOverrides, children, ...props }: TableHeaderProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableBody<T extends object = object>({ cssOverrides, children, ...props }: TableBodyProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableRow<T extends object = object>({ theme, cssOverrides, children, ...props }: TableRowProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableColumnHeader({ theme, cssOverrides, children, ...props }: TableColumnHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TableCell({ compactLabel, gridColumn, gridRow, theme, cssOverrides, children, ...props }: TableCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Table, TableBody, TableCell, TableColumnHeader, TableHeader, TableRow };

package/dist/components/Table/Table.js

@@ -0,0 +1,75 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { compactLabelStyles, defaultTableTheme, tableBodyStyles, tableCellStyles, tableColumnHeaderStyles, tableHeaderStyles, tableRowStyles, tableStyles } from "./styles.js";
+import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Cell, Column, Row, Table, TableBody, TableHeader, composeRenderProps } from "react-aria-components";
+//#region src/components/Table/Table.tsx
+const TableContext = createContext({
+	columns: { sm: "minmax(0, 1fr)" },
+	headerVisibleFrom: "lg",
+	theme: defaultTableTheme
+});
+function Table$1({ columns, headerVisibleFrom = "lg", theme = {}, cssOverrides, children, ...props }) {
+	const mergedTheme = mergeDeep(defaultTableTheme, theme);
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: {
+			columns,
+			headerVisibleFrom,
+			theme: mergedTheme
+		},
+		children: /* @__PURE__ */ jsx(Table, {
+			css: [tableStyles(mergedTheme), cssOverrides],
+			...props,
+			children
+		})
+	});
+}
+function TableHeader$1({ theme = {}, cssOverrides, children, ...props }) {
+	const context = useContext(TableContext);
+	const mergedTheme = mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ jsx(TableHeader, {
+		css: [tableHeaderStyles(mergedTheme, context.columns, context.headerVisibleFrom), cssOverrides],
+		...props,
+		children
+	});
+}
+function TableBody$1({ cssOverrides, children, ...props }) {
+	return /* @__PURE__ */ jsx(TableBody, {
+		css: [tableBodyStyles, cssOverrides],
+		...props,
+		children
+	});
+}
+function TableRow({ theme = {}, cssOverrides, children, ...props }) {
+	const context = useContext(TableContext);
+	const mergedTheme = mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ jsx(Row, {
+		css: [tableRowStyles(mergedTheme, context.columns), cssOverrides],
+		...props,
+		children
+	});
+}
+function TableColumnHeader({ theme = {}, cssOverrides, children, ...props }) {
+	const context = useContext(TableContext);
+	const mergedTheme = mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ jsx(Column, {
+		css: [tableColumnHeaderStyles(mergedTheme), cssOverrides],
+		...props,
+		children
+	});
+}
+function TableCell({ compactLabel, gridColumn, gridRow, theme = {}, cssOverrides, children, ...props }) {
+	const context = useContext(TableContext);
+	const mergedTheme = mergeDeep(context.theme, theme);
+	return /* @__PURE__ */ jsx(Cell, {
+		css: [tableCellStyles(mergedTheme, gridColumn, gridRow), cssOverrides],
+		...props,
+		children: composeRenderProps(children, (children) => /* @__PURE__ */ jsxs(Fragment, { children: [compactLabel && /* @__PURE__ */ jsx("span", {
+			css: compactLabelStyles(mergedTheme, context.headerVisibleFrom),
+			"aria-hidden": "true",
+			children: compactLabel
+		}), children] }))
+	});
+}
+//#endregion
+export { Table$1 as Table, TableBody$1 as TableBody, TableCell, TableColumnHeader, TableHeader$1 as TableHeader, TableRow };

package/dist/components/Table/styles.cjs

@@ -0,0 +1,133 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_table = require("../../styleD/build/typescript/component/table.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Table/styles.ts
+const defaultTableTheme = require_table.componentTable;
+const responsiveValue = (value, breakpoint) => {
+	if (breakpoint === "lg") return value.lg ?? value.md ?? value.sm;
+	if (breakpoint === "md") return value.md ?? value.sm;
+	return value.sm;
+};
+const gridTemplateStyles = (columns) => _emotion_react.css`
+	grid-template-columns: ${responsiveValue(columns, "sm") ?? "minmax(0, 1fr)"};
+
+	${require_mq.from.md} {
+		grid-template-columns: ${responsiveValue(columns, "md") ?? "minmax(0, 1fr)"};
+	}
+
+	${require_mq.from.lg} {
+		grid-template-columns: ${responsiveValue(columns, "lg") ?? "minmax(0, 1fr)"};
+	}
+`;
+const visuallyHiddenStyles = _emotion_react.css`
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+`;
+const tableStyles = (theme) => _emotion_react.css`
+	display: block;
+	box-sizing: border-box;
+	width: ${theme.table.width};
+	border: ${theme.table.border};
+	border-radius: ${theme.table.borderRadius};
+	border-collapse: collapse;
+	border-spacing: 0;
+	overflow: hidden;
+	background-color: ${theme.table.backgroundColor};
+	color: ${theme.table.color};
+`;
+const tableHeaderStyles = (theme, columns, headerVisibleFrom) => _emotion_react.css`
+	display: block;
+	background-color: ${theme.header.backgroundColor};
+	border-bottom: ${theme.header.border};
+
+	& > tr {
+		display: grid;
+		${gridTemplateStyles(columns)}
+	}
+
+	${headerVisibleFrom === "sm" ? "" : _emotion_react.css`
+					${require_mq.until[headerVisibleFrom]} {
+						${visuallyHiddenStyles}
+					}
+				`}
+`;
+const tableBodyStyles = _emotion_react.css`
+	display: block;
+`;
+const tableRowStyles = (theme, columns) => _emotion_react.css`
+	display: grid;
+	${gridTemplateStyles(columns)}
+	align-items: center;
+	background-color: ${theme.row.backgroundColor};
+	border-bottom: ${theme.row.border};
+	outline: none;
+
+	&:last-child {
+		border-bottom: 0;
+	}
+
+	&[data-hovered] {
+		background-color: ${theme.row.hoverBackgroundColor};
+	}
+
+	&[data-focus-visible] {
+		outline: ${theme.row.focusVisible.outline};
+		outline-offset: ${theme.row.focusVisible.outlineOffset};
+	}
+`;
+const tableColumnHeaderStyles = (theme) => _emotion_react.css`
+	min-width: 0;
+	padding: ${theme.cell.paddingBlock} ${theme.cell.paddingInline};
+	${require_typography.convertTypographyToEmotionStringStyle(theme.columnHeader.typography)}
+
+	text-align: left;
+`;
+const responsivePlacementStyles = (gridColumn, gridRow) => _emotion_react.css`
+	${gridColumn?.sm ? `grid-column: ${gridColumn.sm};` : ""}
+	${gridRow?.sm ? `grid-row: ${gridRow.sm};` : ""}
+
+	${require_mq.from.md} {
+		${responsiveValue(gridColumn ?? {}, "md") ? `grid-column: ${responsiveValue(gridColumn ?? {}, "md")};` : ""}
+		${responsiveValue(gridRow ?? {}, "md") ? `grid-row: ${responsiveValue(gridRow ?? {}, "md")};` : ""}
+	}
+
+	${require_mq.from.lg} {
+		${responsiveValue(gridColumn ?? {}, "lg") ? `grid-column: ${responsiveValue(gridColumn ?? {}, "lg")};` : ""}
+		${responsiveValue(gridRow ?? {}, "lg") ? `grid-row: ${responsiveValue(gridRow ?? {}, "lg")};` : ""}
+	}
+`;
+const tableCellStyles = (theme, gridColumn, gridRow) => _emotion_react.css`
+	min-width: 0;
+	box-sizing: border-box;
+	overflow-wrap: anywhere;
+	padding: ${theme.cell.paddingBlock} ${theme.cell.paddingInline};
+	${require_typography.convertTypographyToEmotionStringStyle(theme.cell.typography)}
+	${responsivePlacementStyles(gridColumn, gridRow)}
+`;
+const compactLabelStyles = (theme, headerVisibleFrom) => _emotion_react.css`
+	display: inline;
+	margin-right: ${theme.compactLabel.gap};
+	color: ${theme.compactLabel.color};
+	${require_typography.convertTypographyToEmotionStringStyle(theme.compactLabel.typography)}
+
+	${require_mq.from[headerVisibleFrom]} {
+		display: none;
+	}
+`;
+//#endregion
+exports.compactLabelStyles = compactLabelStyles;
+exports.defaultTableTheme = defaultTableTheme;
+exports.tableBodyStyles = tableBodyStyles;
+exports.tableCellStyles = tableCellStyles;
+exports.tableColumnHeaderStyles = tableColumnHeaderStyles;
+exports.tableHeaderStyles = tableHeaderStyles;
+exports.tableRowStyles = tableRowStyles;
+exports.tableStyles = tableStyles;

package/dist/components/Table/styles.d.cts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentTable } from "../../styleD/build/typescript/component/table.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Table/styles.d.ts
+type TableTheme = Prettify<ComponentTable>;
+type PartialTableTheme = Prettify<DeepPartial<TableTheme>>;
+//#endregion
+export { PartialTableTheme, TableTheme };

package/dist/components/Table/styles.d.ts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentTable } from "../../styleD/build/typescript/component/table.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Table/styles.d.ts
+type TableTheme = Prettify<ComponentTable>;
+type PartialTableTheme = Prettify<DeepPartial<TableTheme>>;
+//#endregion
+export { PartialTableTheme, TableTheme };

package/dist/components/Table/styles.js

@@ -0,0 +1,126 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { from, until } from "../../styleD/utils/semantic/mq.js";
+import { componentTable } from "../../styleD/build/typescript/component/table.js";
+import { css } from "@emotion/react";
+//#region src/components/Table/styles.ts
+const defaultTableTheme = componentTable;
+const responsiveValue = (value, breakpoint) => {
+	if (breakpoint === "lg") return value.lg ?? value.md ?? value.sm;
+	if (breakpoint === "md") return value.md ?? value.sm;
+	return value.sm;
+};
+const gridTemplateStyles = (columns) => css`
+	grid-template-columns: ${responsiveValue(columns, "sm") ?? "minmax(0, 1fr)"};
+
+	${from.md} {
+		grid-template-columns: ${responsiveValue(columns, "md") ?? "minmax(0, 1fr)"};
+	}
+
+	${from.lg} {
+		grid-template-columns: ${responsiveValue(columns, "lg") ?? "minmax(0, 1fr)"};
+	}
+`;
+const visuallyHiddenStyles = css`
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+`;
+const tableStyles = (theme) => css`
+	display: block;
+	box-sizing: border-box;
+	width: ${theme.table.width};
+	border: ${theme.table.border};
+	border-radius: ${theme.table.borderRadius};
+	border-collapse: collapse;
+	border-spacing: 0;
+	overflow: hidden;
+	background-color: ${theme.table.backgroundColor};
+	color: ${theme.table.color};
+`;
+const tableHeaderStyles = (theme, columns, headerVisibleFrom) => css`
+	display: block;
+	background-color: ${theme.header.backgroundColor};
+	border-bottom: ${theme.header.border};
+
+	& > tr {
+		display: grid;
+		${gridTemplateStyles(columns)}
+	}
+
+	${headerVisibleFrom === "sm" ? "" : css`
+					${until[headerVisibleFrom]} {
+						${visuallyHiddenStyles}
+					}
+				`}
+`;
+const tableBodyStyles = css`
+	display: block;
+`;
+const tableRowStyles = (theme, columns) => css`
+	display: grid;
+	${gridTemplateStyles(columns)}
+	align-items: center;
+	background-color: ${theme.row.backgroundColor};
+	border-bottom: ${theme.row.border};
+	outline: none;
+
+	&:last-child {
+		border-bottom: 0;
+	}
+
+	&[data-hovered] {
+		background-color: ${theme.row.hoverBackgroundColor};
+	}
+
+	&[data-focus-visible] {
+		outline: ${theme.row.focusVisible.outline};
+		outline-offset: ${theme.row.focusVisible.outlineOffset};
+	}
+`;
+const tableColumnHeaderStyles = (theme) => css`
+	min-width: 0;
+	padding: ${theme.cell.paddingBlock} ${theme.cell.paddingInline};
+	${convertTypographyToEmotionStringStyle(theme.columnHeader.typography)}
+
+	text-align: left;
+`;
+const responsivePlacementStyles = (gridColumn, gridRow) => css`
+	${gridColumn?.sm ? `grid-column: ${gridColumn.sm};` : ""}
+	${gridRow?.sm ? `grid-row: ${gridRow.sm};` : ""}
+
+	${from.md} {
+		${responsiveValue(gridColumn ?? {}, "md") ? `grid-column: ${responsiveValue(gridColumn ?? {}, "md")};` : ""}
+		${responsiveValue(gridRow ?? {}, "md") ? `grid-row: ${responsiveValue(gridRow ?? {}, "md")};` : ""}
+	}
+
+	${from.lg} {
+		${responsiveValue(gridColumn ?? {}, "lg") ? `grid-column: ${responsiveValue(gridColumn ?? {}, "lg")};` : ""}
+		${responsiveValue(gridRow ?? {}, "lg") ? `grid-row: ${responsiveValue(gridRow ?? {}, "lg")};` : ""}
+	}
+`;
+const tableCellStyles = (theme, gridColumn, gridRow) => css`
+	min-width: 0;
+	box-sizing: border-box;
+	overflow-wrap: anywhere;
+	padding: ${theme.cell.paddingBlock} ${theme.cell.paddingInline};
+	${convertTypographyToEmotionStringStyle(theme.cell.typography)}
+	${responsivePlacementStyles(gridColumn, gridRow)}
+`;
+const compactLabelStyles = (theme, headerVisibleFrom) => css`
+	display: inline;
+	margin-right: ${theme.compactLabel.gap};
+	color: ${theme.compactLabel.color};
+	${convertTypographyToEmotionStringStyle(theme.compactLabel.typography)}
+
+	${from[headerVisibleFrom]} {
+		display: none;
+	}
+`;
+//#endregion
+export { compactLabelStyles, defaultTableTheme, tableBodyStyles, tableCellStyles, tableColumnHeaderStyles, tableHeaderStyles, tableRowStyles, tableStyles };

package/dist/components/Table/types.d.cts

@@ -0,0 +1,27 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { Breakpoint } from "../../styleD/utils/semantic/mq.cjs";
+import { TableTheme } from "./styles.cjs";
+import { CellProps, ColumnProps, RowProps, TableBodyProps, TableHeaderProps, TableProps } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/components/Table/types.d.ts
+type ResponsiveTableValue<T> = Partial<Record<Breakpoint, T>>;
+interface TableProps$1 extends DefaultPropsWithChildren<TableTheme>, Omit<TableProps, 'children' | 'className'> {
+  /** CSS grid tracks for each responsive breakpoint. Values cascade upward. */
+  columns: ResponsiveTableValue<string>;
+  /** Breakpoint at which the visible column header is restored. */
+  headerVisibleFrom?: Breakpoint;
+}
+interface TableHeaderProps$1<T extends object = object> extends DefaultPropsWithChildren<TableTheme, undefined, TableHeaderProps<T>['children']>, Omit<TableHeaderProps<T>, 'children' | 'className'> {}
+interface TableBodyProps$1<T extends object = object> extends Omit<DefaultPropsWithChildren<TableTheme, undefined, TableBodyProps<T>['children']>, 'theme'>, Omit<TableBodyProps<T>, 'children' | 'className'> {}
+interface TableRowProps<T extends object = object> extends DefaultPropsWithChildren<TableTheme, undefined, RowProps<T>['children']>, Omit<RowProps<T>, 'children' | 'className'> {}
+interface TableColumnHeaderProps extends DefaultPropsWithChildren<TableTheme, undefined, ColumnProps['children']>, Omit<ColumnProps, 'children' | 'className'> {}
+interface TableCellProps extends DefaultPropsWithChildren<TableTheme, undefined, CellProps['children']>, Omit<CellProps, 'children' | 'className'> {
+  /** Visual label shown while the column header is visually hidden. */
+  compactLabel?: ReactNode;
+  /** Responsive CSS `grid-column` placement. */
+  gridColumn?: ResponsiveTableValue<string>;
+  /** Responsive CSS `grid-row` placement. */
+  gridRow?: ResponsiveTableValue<string>;
+}
+//#endregion
+export { ResponsiveTableValue, TableBodyProps$1 as TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeaderProps$1 as TableHeaderProps, TableProps$1 as TableProps, TableRowProps };

package/dist/components/Table/types.d.ts

@@ -0,0 +1,27 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { Breakpoint } from "../../styleD/utils/semantic/mq.js";
+import { TableTheme } from "./styles.js";
+import { ReactNode } from "react";
+import { CellProps, ColumnProps, RowProps, TableBodyProps, TableHeaderProps, TableProps } from "react-aria-components";
+//#region src/components/Table/types.d.ts
+type ResponsiveTableValue<T> = Partial<Record<Breakpoint, T>>;
+interface TableProps$1 extends DefaultPropsWithChildren<TableTheme>, Omit<TableProps, 'children' | 'className'> {
+  /** CSS grid tracks for each responsive breakpoint. Values cascade upward. */
+  columns: ResponsiveTableValue<string>;
+  /** Breakpoint at which the visible column header is restored. */
+  headerVisibleFrom?: Breakpoint;
+}
+interface TableHeaderProps$1<T extends object = object> extends DefaultPropsWithChildren<TableTheme, undefined, TableHeaderProps<T>['children']>, Omit<TableHeaderProps<T>, 'children' | 'className'> {}
+interface TableBodyProps$1<T extends object = object> extends Omit<DefaultPropsWithChildren<TableTheme, undefined, TableBodyProps<T>['children']>, 'theme'>, Omit<TableBodyProps<T>, 'children' | 'className'> {}
+interface TableRowProps<T extends object = object> extends DefaultPropsWithChildren<TableTheme, undefined, RowProps<T>['children']>, Omit<RowProps<T>, 'children' | 'className'> {}
+interface TableColumnHeaderProps extends DefaultPropsWithChildren<TableTheme, undefined, ColumnProps['children']>, Omit<ColumnProps, 'children' | 'className'> {}
+interface TableCellProps extends DefaultPropsWithChildren<TableTheme, undefined, CellProps['children']>, Omit<CellProps, 'children' | 'className'> {
+  /** Visual label shown while the column header is visually hidden. */
+  compactLabel?: ReactNode;
+  /** Responsive CSS `grid-column` placement. */
+  gridColumn?: ResponsiveTableValue<string>;
+  /** Responsive CSS `grid-row` placement. */
+  gridRow?: ResponsiveTableValue<string>;
+}
+//#endregion
+export { ResponsiveTableValue, TableBodyProps$1 as TableBodyProps, TableCellProps, TableColumnHeaderProps, TableHeaderProps$1 as TableHeaderProps, TableProps$1 as TableProps, TableRowProps };

package/dist/index.cjs

@@ -15,6 +15,7 @@ const require_intendedAudienceSignifier = require("./styleD/build/typescript/com
 const require_favicon = require("./styleD/build/typescript/component/favicon.cjs");
 const require_datePicker = require("./styleD/build/typescript/component/datePicker.cjs");
 const require_grid = require("./styleD/build/typescript/component/grid.cjs");
+const require_table = require("./styleD/build/typescript/component/table.cjs");
 const require_form = require("./styleD/build/typescript/component/form.cjs");
 const require_inlineMessage = require("./styleD/build/typescript/component/inlineMessage.cjs");
 const require_menu = require("./styleD/build/typescript/component/menu.cjs");
@@ -71,6 +72,7 @@ exports.componentModal = require_modal.componentModal;
 exports.componentRadioGroup = require_radioGroup.componentRadioGroup;
 exports.componentSelect = require_select.componentSelect;
 exports.componentSidebarStepperNavigation = require_sidebarStepperNavigation.componentSidebarStepperNavigation;
+exports.componentTable = require_table.componentTable;
 exports.componentTabs = require_tabs.componentTabs;
 exports.componentTagTable = require_tagTable.componentTagTable;
 exports.componentTextArea = require_textArea.componentTextArea;

package/dist/index.d.cts

@@ -22,6 +22,7 @@ import { ComponentModal, componentModal } from "./styleD/build/typescript/compon
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.cjs";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.cjs";
 import { ComponentSidebarStepperNavigation, componentSidebarStepperNavigation } from "./styleD/build/typescript/component/sidebarStepperNavigation.cjs";
+import { ComponentTable, componentTable } from "./styleD/build/typescript/component/table.cjs";
 import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.cjs";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.cjs";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.cjs";
@@ -43,4 +44,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTable, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -22,6 +22,7 @@ import { ComponentModal, componentModal } from "./styleD/build/typescript/compon
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.js";
 import { ComponentSidebarStepperNavigation, componentSidebarStepperNavigation } from "./styleD/build/typescript/component/sidebarStepperNavigation.js";
+import { ComponentTable, componentTable } from "./styleD/build/typescript/component/table.js";
 import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.js";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.js";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
@@ -43,4 +44,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTable, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -14,6 +14,7 @@ import { componentIntendedAudienceSignifier } from "./styleD/build/typescript/co
 import { componentFavicon } from "./styleD/build/typescript/component/favicon.js";
 import { componentDatePicker } from "./styleD/build/typescript/component/datePicker.js";
 import { componentGrid } from "./styleD/build/typescript/component/grid.js";
+import { componentTable } from "./styleD/build/typescript/component/table.js";
 import { componentForm } from "./styleD/build/typescript/component/form.js";
 import { componentInlineMessage } from "./styleD/build/typescript/component/inlineMessage.js";
 import { componentMenu } from "./styleD/build/typescript/component/menu.js";
@@ -43,4 +44,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/styleD/build/css/component/table.css

@@ -0,0 +1,33 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-table-table-width: 100%;
+	--component-table-table-color: #000000;
+	--component-table-table-background-color: #ffffff;
+	--component-table-table-border: 0.0625rem solid #cccccc;
+	--component-table-table-border-radius: 0.25rem;
+	--component-table-header-background-color: #ededed;
+	--component-table-header-border: 0.0625rem solid #cccccc;
+	--component-table-row-background-color: #ffffff;
+	--component-table-row-hover-background-color: #f6f6f6;
+	--component-table-row-border: 0.0625rem solid #cccccc;
+	--component-table-row-focus-visible-outline: 0.125rem solid #0072a9;
+	--component-table-row-focus-visible-outline-offset: -0.0625rem;
+	--component-table-cell-padding-block: 0.5rem;
+	--component-table-cell-padding-inline: 0.75rem;
+	--component-table-cell-typography-font: normal 460 0.875rem/1.3 'Open Sans';
+	--component-table-cell-typography-letter-spacing: 0rem;
+	--component-table-cell-typography-font-width: 95;
+	--component-table-column-header-typography-font: normal 700 0.75rem/1.15
+		'Open Sans';
+	--component-table-column-header-typography-letter-spacing: 0rem;
+	--component-table-column-header-typography-font-width: 95;
+	--component-table-compact-label-color: #545454;
+	--component-table-compact-label-gap: 0.25rem;
+	--component-table-compact-label-typography-font: normal 460 0.75rem/1.3
+		'Open Sans';
+	--component-table-compact-label-typography-letter-spacing: 0rem;
+	--component-table-compact-label-typography-font-width: 95;
+}

package/dist/styleD/build/typescript/component/table.cjs

@@ -0,0 +1,51 @@
+//#region src/styleD/build/typescript/component/table.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTable = {
+	table: {
+		width: "100%",
+		color: "#000000",
+		backgroundColor: "#ffffff",
+		border: "0.0625rem solid #cccccc",
+		borderRadius: "0.25rem"
+	},
+	header: {
+		backgroundColor: "#ededed",
+		border: "0.0625rem solid #cccccc"
+	},
+	row: {
+		backgroundColor: "#ffffff",
+		hoverBackgroundColor: "#f6f6f6",
+		border: "0.0625rem solid #cccccc",
+		focusVisible: {
+			outline: "0.125rem solid #0072a9",
+			outlineOffset: "-0.0625rem"
+		}
+	},
+	cell: {
+		paddingBlock: "0.5rem",
+		paddingInline: "0.75rem",
+		typography: {
+			font: "normal 460 0.875rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	},
+	columnHeader: { typography: {
+		font: "normal 700 0.75rem/1.15 Open Sans",
+		letterSpacing: "0rem",
+		fontWidth: 95
+	} },
+	compactLabel: {
+		color: "#545454",
+		gap: "0.25rem",
+		typography: {
+			font: "normal 460 0.75rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	}
+};
+//#endregion
+exports.componentTable = componentTable;

package/dist/styleD/build/typescript/component/table.d.cts

@@ -0,0 +1,54 @@
+//#region src/styleD/build/typescript/component/table.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTable: {
+  table: {
+    width: string;
+    color: string;
+    backgroundColor: string;
+    border: string;
+    borderRadius: string;
+  };
+  header: {
+    backgroundColor: string;
+    border: string;
+  };
+  row: {
+    backgroundColor: string;
+    hoverBackgroundColor: string;
+    border: string;
+    focusVisible: {
+      outline: string;
+      outlineOffset: string;
+    };
+  };
+  cell: {
+    paddingBlock: string;
+    paddingInline: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  columnHeader: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  compactLabel: {
+    color: string;
+    gap: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+};
+type ComponentTable = typeof componentTable;
+//#endregion
+export { ComponentTable, componentTable };

package/dist/styleD/build/typescript/component/table.d.ts

@@ -0,0 +1,54 @@
+//#region src/styleD/build/typescript/component/table.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTable: {
+  table: {
+    width: string;
+    color: string;
+    backgroundColor: string;
+    border: string;
+    borderRadius: string;
+  };
+  header: {
+    backgroundColor: string;
+    border: string;
+  };
+  row: {
+    backgroundColor: string;
+    hoverBackgroundColor: string;
+    border: string;
+    focusVisible: {
+      outline: string;
+      outlineOffset: string;
+    };
+  };
+  cell: {
+    paddingBlock: string;
+    paddingInline: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  columnHeader: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+  compactLabel: {
+    color: string;
+    gap: string;
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+  };
+};
+type ComponentTable = typeof componentTable;
+//#endregion
+export { ComponentTable, componentTable };

package/dist/styleD/build/typescript/component/table.js

@@ -0,0 +1,51 @@
+//#region src/styleD/build/typescript/component/table.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTable = {
+	table: {
+		width: "100%",
+		color: "#000000",
+		backgroundColor: "#ffffff",
+		border: "0.0625rem solid #cccccc",
+		borderRadius: "0.25rem"
+	},
+	header: {
+		backgroundColor: "#ededed",
+		border: "0.0625rem solid #cccccc"
+	},
+	row: {
+		backgroundColor: "#ffffff",
+		hoverBackgroundColor: "#f6f6f6",
+		border: "0.0625rem solid #cccccc",
+		focusVisible: {
+			outline: "0.125rem solid #0072a9",
+			outlineOffset: "-0.0625rem"
+		}
+	},
+	cell: {
+		paddingBlock: "0.5rem",
+		paddingInline: "0.75rem",
+		typography: {
+			font: "normal 460 0.875rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	},
+	columnHeader: { typography: {
+		font: "normal 700 0.75rem/1.15 Open Sans",
+		letterSpacing: "0rem",
+		fontWidth: 95
+	} },
+	compactLabel: {
+		color: "#545454",
+		gap: "0.25rem",
+		typography: {
+			font: "normal 460 0.75rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		}
+	}
+};
+//#endregion
+export { componentTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -257,6 +257,16 @@
         "default": "./dist/Grid.cjs"
       }
     },
+    "./Table": {
+      "import": {
+        "types": "./dist/Table.d.ts",
+        "default": "./dist/Table.js"
+      },
+      "require": {
+        "types": "./dist/Table.d.cts",
+        "default": "./dist/Table.cjs"
+      }
+    },
     "./Byline": {
       "import": {
         "types": "./dist/Byline.d.ts",
@@ -440,6 +450,7 @@
     "./component/intendedAudienceSignifier.css": "./dist/styleD/build/css/component/intendedAudienceSignifier.css",
     "./component/link.css": "./dist/styleD/build/css/component/link.css",
     "./component/grid.css": "./dist/styleD/build/css/component/grid.css",
+    "./component/table.css": "./dist/styleD/build/css/component/table.css",
     "./component/layout.css": "./dist/styleD/build/css/component/layout.css",
     "./component/modal.css": "./dist/styleD/build/css/component/modal.css",
     "./component/tabs.css": "./dist/styleD/build/css/component/tabs.css",
@@ -546,6 +557,9 @@
       "Grid": [
         "./dist/Grid.d.ts"
       ],
+      "Table": [
+        "./dist/Table.d.ts"
+      ],
       "Layout": [
         "./dist/Layout.d.ts"
       ],