@guardian/stand 0.0.71 → 0.0.73

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

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

package/dist/components/Pagination/styles.js

@@ -0,0 +1,105 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { until } from "../../styleD/utils/semantic/mq.js";
+import { componentPagination } from "../../styleD/build/typescript/component/pagination.js";
+import { css } from "@emotion/react";
+//#region src/components/Pagination/styles.ts
+const defaultPaginationTheme = componentPagination;
+const paginationStyles = (theme) => css`
+	display: ${theme.shared.display};
+	align-items: ${theme.shared.alignItems};
+	gap: ${theme.shared.gap};
+`;
+const listStyles = (theme, collapseBelow) => css`
+	display: ${theme.shared.display};
+	align-items: ${theme.shared.alignItems};
+	gap: ${theme.shared.gap};
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	${until[collapseBelow]} {
+		display: none;
+	}
+`;
+const itemStyles = (theme, isCurrent) => {
+	const item = theme.item;
+	const typography = isCurrent ? item.current.typography : item.typography;
+	return css`
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		min-width: ${item.minWidth};
+		height: ${item.height};
+		padding: ${item.paddingY} ${item.paddingX};
+		border-radius: ${item.borderRadius};
+		border: ${item.borderWidth} ${item.borderStyle}
+			${isCurrent ? item.current.borderColor : item.borderColor};
+		background-color: ${isCurrent ? item.current.backgroundColor : item.backgroundColor};
+		color: ${isCurrent ? item.current.color : item.color};
+		cursor: ${isCurrent ? "default" : item.cursor};
+		${convertTypographyToEmotionStringStyle(typography)}
+
+		&[data-hovered]:not([aria-current='page']) {
+			background-color: ${item.hover.backgroundColor};
+			border-color: ${item.hover.borderColor};
+		}
+
+		&[data-pressed]:not([aria-current='page']) {
+			background-color: ${item.active.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${item.focusVisible.outlineWidth} solid
+				${item.focusVisible.outlineColor};
+			outline-offset: ${item.focusVisible.outlineOffset};
+		}
+
+		&[data-disabled] {
+			color: ${item.disabled.color};
+			background-color: ${item.disabled.backgroundColor};
+			border-color: ${item.disabled.borderColor};
+			cursor: ${item.disabled.cursor};
+		}
+	`;
+};
+const ellipsisStyles = (theme) => css`
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: ${theme.ellipsis.minWidth};
+	min-width: ${theme.ellipsis.minWidth};
+	height: ${theme.item.height};
+	color: ${theme.ellipsis.color};
+`;
+const arrowStyles = (theme) => css`
+	box-sizing: border-box;
+	width: ${theme.item.height};
+	min-width: ${theme.item.height};
+	height: ${theme.item.height};
+`;
+const summaryStyles = (theme, collapseBelow) => css`
+	margin-left: ${theme.summary.marginLeft};
+	color: ${theme.summary.color};
+	white-space: nowrap;
+	${convertTypographyToEmotionStringStyle(theme.summary.typography)}
+
+	${until[collapseBelow]} {
+		display: none;
+	}
+`;
+const compactStatusStyles = (theme, collapseBelow) => css`
+	display: none;
+	flex: 1;
+	text-align: center;
+	white-space: nowrap;
+	color: ${theme.summary.color};
+	${convertTypographyToEmotionStringStyle(theme.summary.typography)}
+
+	${until[collapseBelow]} {
+		display: block;
+	}
+`;
+//#endregion
+export { arrowStyles, compactStatusStyles, defaultPaginationTheme, ellipsisStyles, itemStyles, listStyles, paginationStyles, summaryStyles };

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

@@ -0,0 +1,59 @@
+import { DefaultProps } from "../../util/types.cjs";
+import { Breakpoint } from "../../styleD/utils/semantic/mq.cjs";
+import { PaginationTheme } from "./styles.cjs";
+import { ReactNode } from "react";
+//#region src/components/Pagination/types.d.ts
+interface PaginationSummaryInfo {
+  /** The currently active page (1-based). */
+  currentPage: number;
+  /** Total number of pages. */
+  totalPages: number;
+  /** Total number of items across all pages. */
+  totalItems: number;
+  /** Number of items shown per page. */
+  pageSize: number;
+  /** 1-based index of the first item on the current page. */
+  startItem: number;
+  /** 1-based index of the last item on the current page. */
+  endItem: number;
+}
+interface PaginationLabels {
+  /** Accessible label for the surrounding `nav` element. */
+  nav?: string;
+  /** Accessible label for the previous-page button. */
+  previous?: string;
+  /** Accessible label for the next-page button. */
+  next?: string;
+  /** Accessible label for a page button, given the page number. */
+  page?: (page: number) => string;
+  /** Text shown in the compact (collapsed) view below the `collapseBelow` breakpoint. */
+  status?: (currentPage: number, totalPages: number) => string;
+}
+type PaginationProps = DefaultProps<PaginationTheme> & {
+  /** The currently active page (1-based). */
+  currentPage: number;
+  /** Total number of items across all pages. */
+  totalItems: number;
+  /** Number of items shown per page. Used to derive the total page count. */
+  pageSize: number;
+  /** Called with the requested page number when the user navigates. */
+  onPageChange: (page: number) => void;
+  /** Number of page buttons to show either side of the current page. Defaults to 1. */
+  siblingCount?: number;
+  /** Number of page buttons to always show at the start and end. Defaults to 1. */
+  boundaryCount?: number;
+  /** Whether to render the results summary. Defaults to true. */
+  showSummary?: boolean;
+  /** Render prop to customise the results summary text. */
+  renderSummary?: (info: PaginationSummaryInfo) => ReactNode;
+  /**
+   * Below this breakpoint the page-number list and results summary collapse to a
+   * compact previous/next + "Page X of Y" view to avoid horizontal overflow.
+   * Defaults to 'md'.
+   */
+  collapseBelow?: Breakpoint;
+  /** Overrides for the accessible labels. */
+  labels?: PaginationLabels;
+};
+//#endregion
+export { PaginationLabels, PaginationProps, PaginationSummaryInfo };

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

@@ -0,0 +1,59 @@
+import { DefaultProps } from "../../util/types.js";
+import { Breakpoint } from "../../styleD/utils/semantic/mq.js";
+import { PaginationTheme } from "./styles.js";
+import { ReactNode } from "react";
+//#region src/components/Pagination/types.d.ts
+interface PaginationSummaryInfo {
+  /** The currently active page (1-based). */
+  currentPage: number;
+  /** Total number of pages. */
+  totalPages: number;
+  /** Total number of items across all pages. */
+  totalItems: number;
+  /** Number of items shown per page. */
+  pageSize: number;
+  /** 1-based index of the first item on the current page. */
+  startItem: number;
+  /** 1-based index of the last item on the current page. */
+  endItem: number;
+}
+interface PaginationLabels {
+  /** Accessible label for the surrounding `nav` element. */
+  nav?: string;
+  /** Accessible label for the previous-page button. */
+  previous?: string;
+  /** Accessible label for the next-page button. */
+  next?: string;
+  /** Accessible label for a page button, given the page number. */
+  page?: (page: number) => string;
+  /** Text shown in the compact (collapsed) view below the `collapseBelow` breakpoint. */
+  status?: (currentPage: number, totalPages: number) => string;
+}
+type PaginationProps = DefaultProps<PaginationTheme> & {
+  /** The currently active page (1-based). */
+  currentPage: number;
+  /** Total number of items across all pages. */
+  totalItems: number;
+  /** Number of items shown per page. Used to derive the total page count. */
+  pageSize: number;
+  /** Called with the requested page number when the user navigates. */
+  onPageChange: (page: number) => void;
+  /** Number of page buttons to show either side of the current page. Defaults to 1. */
+  siblingCount?: number;
+  /** Number of page buttons to always show at the start and end. Defaults to 1. */
+  boundaryCount?: number;
+  /** Whether to render the results summary. Defaults to true. */
+  showSummary?: boolean;
+  /** Render prop to customise the results summary text. */
+  renderSummary?: (info: PaginationSummaryInfo) => ReactNode;
+  /**
+   * Below this breakpoint the page-number list and results summary collapse to a
+   * compact previous/next + "Page X of Y" view to avoid horizontal overflow.
+   * Defaults to 'md'.
+   */
+  collapseBelow?: Breakpoint;
+  /** Overrides for the accessible labels. */
+  labels?: PaginationLabels;
+};
+//#endregion
+export { PaginationLabels, PaginationProps, PaginationSummaryInfo };

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 };

package/dist/components/ToggleSwitch/ToggleSwitch.js

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

package/dist/components/ToggleSwitch/styles.cjs

@@ -0,0 +1,70 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_toggleSwitch = require("../../styleD/build/typescript/component/toggleSwitch.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/ToggleSwitch/styles.ts
+const defaultToggleSwitchTheme = require_toggleSwitch.componentToggleSwitch;
+const toggleSwitchStyles = (theme, { size }) => _emotion_react.css`
+	display: ${theme.shared.display};
+	align-items: ${theme.shared.alignItems};
+	gap: ${theme.shared.gap};
+	cursor: ${theme.shared.cursor};
+	${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+	color: ${theme.shared.color};
+
+	&[data-disabled] {
+		color: ${theme.shared.disabled.color};
+		cursor: ${theme.shared.disabled.cursor};
+	}
+`;
+const toggleSwitchLabelStyles = (theme) => _emotion_react.css`
+	display: ${theme.shared.label.display};
+	flex-direction: ${theme.shared.label.flexDirection};
+	align-items: ${theme.shared.label.alignItems};
+	padding-block: ${theme.shared.label.paddingBlock};
+`;
+const toggleSwitchDescriptionStyles = (theme) => _emotion_react.css`
+	${require_typography.convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
+	color: ${theme.shared.description.color};
+`;
+const toggleSwitchTrackStyles = (theme, { size, isSelected, isDisabled, isFocusVisible }) => {
+	let backgroundColor = theme.shared.track.backgroundColor;
+	if (isSelected) backgroundColor = theme.shared.track.selected.backgroundColor;
+	if (isDisabled) backgroundColor = theme.shared.track.disabled.backgroundColor;
+	return _emotion_react.css`
+		display: ${theme.shared.track.display};
+		align-items: ${theme.shared.track.alignItems};
+		width: ${theme[size].track.width};
+		height: ${theme[size].track.height};
+		padding: ${theme.shared.track.padding};
+		border-radius: ${theme.shared.track.borderRadius};
+		background-color: ${backgroundColor};
+		transition: ${theme.shared.track.transition};
+		${isFocusVisible && _emotion_react.css`
+				outline: ${theme.shared.track.focusVisible.outline};
+				outline-offset: ${theme.shared.track.focusVisible.outlineOffset};
+			`}
+	`;
+};
+const toggleSwitchThumbStyles = (theme, { size, isSelected, isDisabled }) => _emotion_react.css`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: ${theme[size].thumb.size};
+	height: ${theme[size].thumb.size};
+	border-radius: ${theme.shared.thumb.borderRadius};
+	background-color: ${theme.shared.thumb.backgroundColor};
+	color: ${isDisabled ? theme.shared.thumb.disabled.color : theme.shared.thumb.color};
+	transform: ${isSelected ? `translateX(${theme[size].thumb.translateX})` : "none"};
+	transition: ${theme.shared.thumb.transition};
+`;
+const toggleSwitchIconStyles = (isSelected) => _emotion_react.css`
+	opacity: ${isSelected ? 1 : 0};
+`;
+//#endregion
+exports.defaultToggleSwitchTheme = defaultToggleSwitchTheme;
+exports.toggleSwitchDescriptionStyles = toggleSwitchDescriptionStyles;
+exports.toggleSwitchIconStyles = toggleSwitchIconStyles;
+exports.toggleSwitchLabelStyles = toggleSwitchLabelStyles;
+exports.toggleSwitchStyles = toggleSwitchStyles;
+exports.toggleSwitchThumbStyles = toggleSwitchThumbStyles;
+exports.toggleSwitchTrackStyles = toggleSwitchTrackStyles;

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

@@ -0,0 +1,10 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentToggleSwitch } from "../../styleD/build/typescript/component/toggleSwitch.cjs";
+import "./types.cjs";
+import { SerializedStyles } from "@emotion/react";
+import "react-aria-components";
+//#region src/components/ToggleSwitch/styles.d.ts
+type ToggleSwitchTheme = Prettify<ComponentToggleSwitch>;
+type PartialToggleSwitchTheme = Prettify<DeepPartial<ToggleSwitchTheme>>;
+//#endregion
+export { PartialToggleSwitchTheme, ToggleSwitchTheme };

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

@@ -0,0 +1,10 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentToggleSwitch } from "../../styleD/build/typescript/component/toggleSwitch.js";
+import "./types.js";
+import { SerializedStyles } from "@emotion/react";
+import "react-aria-components";
+//#region src/components/ToggleSwitch/styles.d.ts
+type ToggleSwitchTheme = Prettify<ComponentToggleSwitch>;
+type PartialToggleSwitchTheme = Prettify<DeepPartial<ToggleSwitchTheme>>;
+//#endregion
+export { PartialToggleSwitchTheme, ToggleSwitchTheme };

package/dist/components/ToggleSwitch/styles.js

@@ -0,0 +1,64 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentToggleSwitch } from "../../styleD/build/typescript/component/toggleSwitch.js";
+import { css } from "@emotion/react";
+//#region src/components/ToggleSwitch/styles.ts
+const defaultToggleSwitchTheme = componentToggleSwitch;
+const toggleSwitchStyles = (theme, { size }) => css`
+	display: ${theme.shared.display};
+	align-items: ${theme.shared.alignItems};
+	gap: ${theme.shared.gap};
+	cursor: ${theme.shared.cursor};
+	${convertTypographyToEmotionStringStyle(theme[size].typography)}
+	color: ${theme.shared.color};
+
+	&[data-disabled] {
+		color: ${theme.shared.disabled.color};
+		cursor: ${theme.shared.disabled.cursor};
+	}
+`;
+const toggleSwitchLabelStyles = (theme) => css`
+	display: ${theme.shared.label.display};
+	flex-direction: ${theme.shared.label.flexDirection};
+	align-items: ${theme.shared.label.alignItems};
+	padding-block: ${theme.shared.label.paddingBlock};
+`;
+const toggleSwitchDescriptionStyles = (theme) => css`
+	${convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
+	color: ${theme.shared.description.color};
+`;
+const toggleSwitchTrackStyles = (theme, { size, isSelected, isDisabled, isFocusVisible }) => {
+	let backgroundColor = theme.shared.track.backgroundColor;
+	if (isSelected) backgroundColor = theme.shared.track.selected.backgroundColor;
+	if (isDisabled) backgroundColor = theme.shared.track.disabled.backgroundColor;
+	return css`
+		display: ${theme.shared.track.display};
+		align-items: ${theme.shared.track.alignItems};
+		width: ${theme[size].track.width};
+		height: ${theme[size].track.height};
+		padding: ${theme.shared.track.padding};
+		border-radius: ${theme.shared.track.borderRadius};
+		background-color: ${backgroundColor};
+		transition: ${theme.shared.track.transition};
+		${isFocusVisible && css`
+				outline: ${theme.shared.track.focusVisible.outline};
+				outline-offset: ${theme.shared.track.focusVisible.outlineOffset};
+			`}
+	`;
+};
+const toggleSwitchThumbStyles = (theme, { size, isSelected, isDisabled }) => css`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: ${theme[size].thumb.size};
+	height: ${theme[size].thumb.size};
+	border-radius: ${theme.shared.thumb.borderRadius};
+	background-color: ${theme.shared.thumb.backgroundColor};
+	color: ${isDisabled ? theme.shared.thumb.disabled.color : theme.shared.thumb.color};
+	transform: ${isSelected ? `translateX(${theme[size].thumb.translateX})` : "none"};
+	transition: ${theme.shared.thumb.transition};
+`;
+const toggleSwitchIconStyles = (isSelected) => css`
+	opacity: ${isSelected ? 1 : 0};
+`;
+//#endregion
+export { defaultToggleSwitchTheme, toggleSwitchDescriptionStyles, toggleSwitchIconStyles, toggleSwitchLabelStyles, toggleSwitchStyles, toggleSwitchThumbStyles, toggleSwitchTrackStyles };

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

@@ -0,0 +1,17 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { ToggleSwitchTheme } from "./styles.cjs";
+import { SwitchProps } from "react-aria-components";
+//#region src/components/ToggleSwitch/types.d.ts
+interface ToggleSwitchProps extends DefaultPropsWithChildren<ToggleSwitchTheme, SwitchProps['className']>, Omit<SwitchProps, 'children'> {
+  /**
+   * Size variant of the ToggleSwitch.
+   * @default 'md'
+   */
+  size?: keyof Omit<ToggleSwitchTheme, 'shared'>;
+  /**
+   * Supporting text rendered below the switch label.
+   */
+  description?: React.ReactNode;
+}
+//#endregion
+export { ToggleSwitchProps };

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

@@ -0,0 +1,17 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { ToggleSwitchTheme } from "./styles.js";
+import { SwitchProps } from "react-aria-components";
+//#region src/components/ToggleSwitch/types.d.ts
+interface ToggleSwitchProps extends DefaultPropsWithChildren<ToggleSwitchTheme, SwitchProps['className']>, Omit<SwitchProps, 'children'> {
+  /**
+   * Size variant of the ToggleSwitch.
+   * @default 'md'
+   */
+  size?: keyof Omit<ToggleSwitchTheme, 'shared'>;
+  /**
+   * Supporting text rendered below the switch label.
+   */
+  description?: React.ReactNode;
+}
+//#endregion
+export { ToggleSwitchProps };

package/dist/components/UserMenu/UserMenu.d.cts

@@ -1,10 +1,9 @@
-import { DeepPartial } from "../../util/types.cjs";
-import { ComponentUserMenu } from "../../styleD/build/typescript/component/userMenu.cjs";
 import { Option } from "./model.cjs";
+import { PartialUserMenuTheme } from "./theme.cjs";
 import { UserPreferences } from "./types.cjs";
 //#region src/components/UserMenu/UserMenu.d.ts
 interface UserMenuProps {
-  theme?: DeepPartial<ComponentUserMenu>;
+  theme?: PartialUserMenuTheme;
   feedBacklink?: string;
   preferences: UserPreferences;
   updatePreferences: {

package/dist/components/UserMenu/UserMenu.d.ts

@@ -1,10 +1,9 @@
-import { DeepPartial } from "../../util/types.js";
-import { ComponentUserMenu } from "../../styleD/build/typescript/component/userMenu.js";
 import { Option } from "./model.js";
+import { PartialUserMenuTheme } from "./theme.js";
 import { UserPreferences } from "./types.js";
 //#region src/components/UserMenu/UserMenu.d.ts
 interface UserMenuProps {
-  theme?: DeepPartial<ComponentUserMenu>;
+  theme?: PartialUserMenuTheme;
   feedBacklink?: string;
   preferences: UserPreferences;
   updatePreferences: {

package/dist/components/UserMenu/theme.d.cts

@@ -0,0 +1,6 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentUserMenu } from "../../styleD/build/typescript/component/userMenu.cjs";
+//#region src/components/UserMenu/theme.d.ts
+type PartialUserMenuTheme = Prettify<DeepPartial<ComponentUserMenu>>;
+//#endregion
+export { PartialUserMenuTheme };

package/dist/components/UserMenu/theme.d.ts

@@ -0,0 +1,6 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentUserMenu } from "../../styleD/build/typescript/component/userMenu.js";
+//#region src/components/UserMenu/theme.d.ts
+type PartialUserMenuTheme = Prettify<DeepPartial<ComponentUserMenu>>;
+//#endregion
+export { PartialUserMenuTheme };

package/dist/index.cjs

@@ -12,6 +12,8 @@ const require_autocomplete = require("./styleD/build/typescript/component/autoco
 const require_tagTable = require("./styleD/build/typescript/component/tagTable.cjs");
 const require_userMenu = require("./styleD/build/typescript/component/userMenu.cjs");
 const require_intendedAudienceSignifier = require("./styleD/build/typescript/component/intendedAudienceSignifier.cjs");
+const require_pagination = require("./styleD/build/typescript/component/pagination.cjs");
+const require_toggleSwitch = require("./styleD/build/typescript/component/toggleSwitch.cjs");
 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");
@@ -69,6 +71,7 @@ exports.componentLayout = require_layout.componentLayout;
 exports.componentLink = require_link.componentLink;
 exports.componentMenu = require_menu.componentMenu;
 exports.componentModal = require_modal.componentModal;
+exports.componentPagination = require_pagination.componentPagination;
 exports.componentRadioGroup = require_radioGroup.componentRadioGroup;
 exports.componentSelect = require_select.componentSelect;
 exports.componentSidebarStepperNavigation = require_sidebarStepperNavigation.componentSidebarStepperNavigation;
@@ -78,6 +81,7 @@ exports.componentTagTable = require_tagTable.componentTagTable;
 exports.componentTextArea = require_textArea.componentTextArea;
 exports.componentTextInput = require_textInput.componentTextInput;
 exports.componentTextListInput = require_textListInput.componentTextListInput;
+exports.componentToggleSwitch = require_toggleSwitch.componentToggleSwitch;
 exports.componentTooltip = require_tooltip.componentTooltip;
 exports.componentTopBar = require_topBar.componentTopBar;
 exports.componentTypography = require_typography.componentTypography;

package/dist/index.d.cts

@@ -19,6 +19,7 @@ import { ComponentLayout, componentLayout } from "./styleD/build/typescript/comp
 import { ComponentLink, componentLink } from "./styleD/build/typescript/component/link.cjs";
 import { ComponentMenu, componentMenu } from "./styleD/build/typescript/component/menu.cjs";
 import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.cjs";
+import { ComponentPagination, componentPagination } from "./styleD/build/typescript/component/pagination.cjs";
 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";
@@ -29,6 +30,7 @@ import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.cjs";
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.cjs";
 import { ComponentTextListInput, componentTextListInput } from "./styleD/build/typescript/component/textListInput.cjs";
+import { ComponentToggleSwitch, componentToggleSwitch } from "./styleD/build/typescript/component/toggleSwitch.cjs";
 import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.cjs";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.cjs";
 import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.cjs";
@@ -44,4 +46,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 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 };
+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 ComponentPagination, type ComponentRadioGroup, type ComponentSelect, type ComponentSidebarStepperNavigation, type ComponentTable, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTextListInput, type ComponentToggleSwitch, 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, componentPagination, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };