@guardian/stand 0.0.70 → 0.0.72

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/ToggleSwitch.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_toggleSwitch = require("./styleD/build/typescript/component/toggleSwitch.cjs");
+const require_ToggleSwitch = require("./components/ToggleSwitch/ToggleSwitch.cjs");
+exports.ToggleSwitch = require_ToggleSwitch.ToggleSwitch;
+exports.componentToggleSwitch = require_toggleSwitch.componentToggleSwitch;

package/dist/ToggleSwitch.d.cts

@@ -0,0 +1,5 @@
+import { ComponentToggleSwitch, componentToggleSwitch } from "./styleD/build/typescript/component/toggleSwitch.cjs";
+import { PartialToggleSwitchTheme } from "./components/ToggleSwitch/styles.cjs";
+import { ToggleSwitchProps } from "./components/ToggleSwitch/types.cjs";
+import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.cjs";
+export { type ComponentToggleSwitch, ToggleSwitch, type ToggleSwitchProps, type PartialToggleSwitchTheme as ToggleSwitchTheme, componentToggleSwitch };

package/dist/ToggleSwitch.d.ts

@@ -0,0 +1,5 @@
+import { ComponentToggleSwitch, componentToggleSwitch } from "./styleD/build/typescript/component/toggleSwitch.js";
+import { PartialToggleSwitchTheme } from "./components/ToggleSwitch/styles.js";
+import { ToggleSwitchProps } from "./components/ToggleSwitch/types.js";
+import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
+export { type ComponentToggleSwitch, ToggleSwitch, type ToggleSwitchProps, type PartialToggleSwitchTheme as ToggleSwitchTheme, componentToggleSwitch };

package/dist/ToggleSwitch.js

@@ -0,0 +1,3 @@
+import { componentToggleSwitch } from "./styleD/build/typescript/component/toggleSwitch.js";
+import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
+export { ToggleSwitch, componentToggleSwitch };

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/components/ToggleSwitch/ToggleSwitch.cjs

@@ -0,0 +1,41 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/ToggleSwitch/ToggleSwitch.tsx
+function ToggleSwitch({ children, description, size = "md", theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultToggleSwitchTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Switch, {
+		css: [require_styles.toggleSwitchStyles(mergedTheme, { size }), cssOverrides],
+		...props,
+		children: ({ isSelected, isDisabled, isFocusVisible }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+			css: require_styles.toggleSwitchTrackStyles(mergedTheme, {
+				size,
+				isSelected,
+				isDisabled,
+				isFocusVisible
+			}),
+			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.toggleSwitchThumbStyles(mergedTheme, {
+					size,
+					isSelected,
+					isDisabled
+				}),
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+					symbol: "check",
+					size: size === "sm" ? "sm" : "md",
+					cssOverrides: require_styles.toggleSwitchIconStyles(isSelected)
+				})
+			})
+		}), children && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("span", {
+			css: require_styles.toggleSwitchLabelStyles(mergedTheme),
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children }), description && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+				css: require_styles.toggleSwitchDescriptionStyles(mergedTheme),
+				children: description
+			})]
+		})] })
+	});
+}
+//#endregion
+exports.ToggleSwitch = ToggleSwitch;

package/dist/components/ToggleSwitch/ToggleSwitch.d.cts

@@ -0,0 +1,5 @@
+import { ToggleSwitchProps } from "./types.cjs";
+//#region src/components/ToggleSwitch/ToggleSwitch.d.ts
+declare function ToggleSwitch({ children, description, size, theme, cssOverrides, ...props }: ToggleSwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { ToggleSwitch };

package/dist/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,5 @@
+import { ToggleSwitchProps } from "./types.js";
+//#region src/components/ToggleSwitch/ToggleSwitch.d.ts
+declare function ToggleSwitch({ children, description, size, theme, cssOverrides, ...props }: ToggleSwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { ToggleSwitch };