@guardian/stand 0.0.71 → 0.0.72

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

@@ -12,6 +12,7 @@ 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_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");
@@ -78,6 +79,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

@@ -29,6 +29,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 +45,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 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, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -29,6 +29,7 @@ import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.js";
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.js";
 import { ComponentTextListInput, componentTextListInput } from "./styleD/build/typescript/component/textListInput.js";
+import { ComponentToggleSwitch, componentToggleSwitch } from "./styleD/build/typescript/component/toggleSwitch.js";
 import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.js";
 import { ComponentUserFeedbackSummary, componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
@@ -44,4 +45,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 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 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, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTable, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTextListInput, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -11,6 +11,7 @@ import { componentAutocomplete } from "./styleD/build/typescript/component/autoc
 import { componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
 import { componentUserMenu } from "./styleD/build/typescript/component/userMenu.js";
 import { componentIntendedAudienceSignifier } from "./styleD/build/typescript/component/intendedAudienceSignifier.js";
+import { componentToggleSwitch } from "./styleD/build/typescript/component/toggleSwitch.js";
 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";
@@ -44,4 +45,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, componentTable, 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, componentToggleSwitch, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -21,7 +21,7 @@
 	--component-checkbox-input-shared-indicator-check-height: 20px;
 	--component-checkbox-input-shared-indicator-indeterminate-width: 12px;
 	--component-checkbox-input-shared-indicator-indeterminate-height: 2px;
-	--component-checkbox-input-shared-indicator-selected-background-color: #005d8b;
+	--component-checkbox-input-shared-indicator-selected-background-color: #0072a9;
 	--component-checkbox-input-shared-indicator-selected-border: 0.0625rem solid
 		#0072a9;
 	--component-checkbox-input-shared-indicator-selected-svg-fill: #ffffff;

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

@@ -28,7 +28,7 @@
 	--component-radio-group-shared-indicator-invalid-after-background-color: #b42a19;
 	--component-radio-group-shared-indicator-disabled-border: 0.0625rem solid
 		#dcdcdc;
-	--component-radio-group-shared-indicator-selected-after-background-color: #005d8b;
+	--component-radio-group-shared-indicator-selected-after-background-color: #0072a9;
 	--component-radio-group-shared-indicator-selected-after-scale: 0.6;
 	--component-radio-group-shared-indicator-selected-border: 0.125rem solid
 		#0072a9;

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

@@ -39,7 +39,7 @@
 	--component-sidebar-stepper-navigation-step-shared-text-inverse-color: #ffffff;
 	--component-sidebar-stepper-navigation-step-shared-number-column-width: 2rem;
 	--component-sidebar-stepper-navigation-step-number-shared-height: 100%;
-	--component-sidebar-stepper-navigation-step-number-shared-background-color: #005d8b;
+	--component-sidebar-stepper-navigation-step-number-shared-background-color: #0072a9;
 	--component-sidebar-stepper-navigation-step-number-shared-display: flex;
 	--component-sidebar-stepper-navigation-step-number-shared-align-items: center;
 	--component-sidebar-stepper-navigation-step-number-shared-justify-content: center;

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

@@ -0,0 +1,55 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-toggle-switch-shared-display: flex;
+	--component-toggle-switch-shared-align-items: center;
+	--component-toggle-switch-shared-gap: 0.5rem;
+	--component-toggle-switch-shared-cursor: pointer;
+	--component-toggle-switch-shared-color: #000000;
+	--component-toggle-switch-shared-label-display: flex;
+	--component-toggle-switch-shared-label-flex-direction: column;
+	--component-toggle-switch-shared-label-align-items: flex-start;
+	--component-toggle-switch-shared-label-padding-block: 0.125rem;
+	--component-toggle-switch-shared-description-color: #545454;
+	--component-toggle-switch-shared-description-typography-font: normal 460
+		0.75rem/1.3 'Open Sans';
+	--component-toggle-switch-shared-description-typography-letter-spacing: 0rem;
+	--component-toggle-switch-shared-description-typography-font-width: 95;
+	--component-toggle-switch-shared-track-display: flex;
+	--component-toggle-switch-shared-track-align-items: center;
+	--component-toggle-switch-shared-track-padding: 0.25rem;
+	--component-toggle-switch-shared-track-border-radius: 100px;
+	--component-toggle-switch-shared-track-background-color: #666666;
+	--component-toggle-switch-shared-track-transition: background-color 200ms;
+	--component-toggle-switch-shared-track-selected-background-color: #0072a9;
+	--component-toggle-switch-shared-track-disabled-background-color: #dcdcdc;
+	--component-toggle-switch-shared-track-focus-visible-outline: 0.125rem solid
+		#0072a9;
+	--component-toggle-switch-shared-track-focus-visible-outline-offset: 0.125rem;
+	--component-toggle-switch-shared-thumb-border-radius: 50%;
+	--component-toggle-switch-shared-thumb-background-color: #ffffff;
+	--component-toggle-switch-shared-thumb-color: #0072a9;
+	--component-toggle-switch-shared-thumb-disabled-color: #dcdcdc;
+	--component-toggle-switch-shared-thumb-transition: transform 200ms;
+	--component-toggle-switch-shared-disabled-color: #999999;
+	--component-toggle-switch-shared-disabled-cursor: not-allowed;
+	--component-toggle-switch-sm-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-toggle-switch-sm-typography-letter-spacing: 0rem;
+	--component-toggle-switch-sm-typography-font-width: 95;
+	--component-toggle-switch-sm-track-width: 2.75rem;
+	--component-toggle-switch-sm-track-height: 1.5rem;
+	--component-toggle-switch-sm-thumb-size: 1.125rem;
+	--component-toggle-switch-sm-thumb-translate-x: 1.25rem;
+	--component-toggle-switch-sm-thumb-icon-size: 1rem;
+	--component-toggle-switch-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-toggle-switch-md-typography-letter-spacing: 0rem;
+	--component-toggle-switch-md-typography-font-width: 95;
+	--component-toggle-switch-md-track-width: 3.75rem;
+	--component-toggle-switch-md-track-height: 2rem;
+	--component-toggle-switch-md-thumb-size: 1.5rem;
+	--component-toggle-switch-md-thumb-translate-x: 1.75rem;
+	--component-toggle-switch-md-thumb-icon-size: 1.25rem;
+}

package/dist/styleD/build/css/semantic/colors.css

@@ -72,13 +72,24 @@
 	--semantic-colors-fill-orange-weak: #fcddc6;
 	--semantic-colors-fill-orange-medium: #fac7a1;
 	--semantic-colors-fill-yellow-weak: #ffedac;
-	--semantic-colors-fill-selected: #005d8b;
+	--semantic-colors-fill-unselected-strong: #ffffff;
+	--semantic-colors-fill-unselected-hover-strong: #005d8b;
+	--semantic-colors-fill-unselected-pressed-strong: #00496c;
+	--semantic-colors-fill-selected-strong: #0072a9;
+	--semantic-colors-fill-selected-hover-strong: #00496c;
+	--semantic-colors-fill-selected-pressed-strong: #00344e;
 	--semantic-colors-fill-selected-weaker: #e6f1f6;
-	--semantic-colors-fill-selected-weak: #c5dfec;
 	--semantic-colors-fill-selected-hover-weaker: #c5dfec;
-	--semantic-colors-fill-selected-hover-weak: #8abed7;
 	--semantic-colors-fill-selected-pressed-weaker: #8abed7;
+	--semantic-colors-fill-unselected-weaker: #ffffff;
+	--semantic-colors-fill-unselected-hover-weaker: #e6f1f6;
+	--semantic-colors-fill-unselected-pressed-weaker: #c5dfec;
+	--semantic-colors-fill-selected-weak: #c5dfec;
+	--semantic-colors-fill-selected-hover-weak: #8abed7;
 	--semantic-colors-fill-selected-pressed-weak: #5ca5c8;
+	--semantic-colors-fill-unselected-weak: #ffffff;
+	--semantic-colors-fill-unselected-hover-weak: #c5dfec;
+	--semantic-colors-fill-unselected-pressed-weak: #8abed7;
 	--semantic-colors-fill-draft-strong: #f1c21b;
 	--semantic-colors-fill-live-weak: #aed2a6;
 	--semantic-colors-fill-warning-weak: #ffedac;
@@ -90,4 +101,5 @@
 	--semantic-colors-fill-success-weak: #cde4c9;
 	--semantic-colors-fill-success-strong: #326528;
 	--semantic-colors-fill-neutral-weak: #ededed;
+	--semantic-colors-fill-neutral-medium: #666666;
 }

package/dist/styleD/build/css/semantic/sizing.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+	--semantic-sizing-height-xxxxs: 1rem;
 	--semantic-sizing-height-xxxs: 1.125rem;
 	--semantic-sizing-height-xxs: 1.25rem;
 	--semantic-sizing-height-xs: 1.5rem;

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

@@ -29,7 +29,7 @@ const componentCheckbox = {
 					height: "2px"
 				},
 				selected: {
-					backgroundColor: "#005d8b",
+					backgroundColor: "#0072a9",
 					border: "0.0625rem solid #0072a9",
 					svg: { fill: "#ffffff" }
 				},

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

@@ -29,7 +29,7 @@ const componentCheckbox = {
 					height: "2px"
 				},
 				selected: {
-					backgroundColor: "#005d8b",
+					backgroundColor: "#0072a9",
 					border: "0.0625rem solid #0072a9",
 					svg: { fill: "#ffffff" }
 				},

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

@@ -39,7 +39,7 @@ const componentRadioGroup = {
 			disabled: { border: "0.0625rem solid #dcdcdc" },
 			selected: {
 				after: {
-					backgroundColor: "#005d8b",
+					backgroundColor: "#0072a9",
 					scale: .6
 				},
 				border: "0.125rem solid #0072a9",

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

@@ -39,7 +39,7 @@ const componentRadioGroup = {
 			disabled: { border: "0.0625rem solid #dcdcdc" },
 			selected: {
 				after: {
-					backgroundColor: "#005d8b",
+					backgroundColor: "#0072a9",
 					scale: .6
 				},
 				border: "0.125rem solid #0072a9",

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

@@ -51,7 +51,7 @@ const componentSidebarStepperNavigation = {
 	} },
 	stepNumber: { shared: {
 		height: "100%",
-		backgroundColor: "#005d8b",
+		backgroundColor: "#0072a9",
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center"

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

@@ -51,7 +51,7 @@ const componentSidebarStepperNavigation = {
 	} },
 	stepNumber: { shared: {
 		height: "100%",
-		backgroundColor: "#005d8b",
+		backgroundColor: "#0072a9",
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center"

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

@@ -0,0 +1,86 @@
+//#region src/styleD/build/typescript/component/toggleSwitch.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentToggleSwitch = {
+	shared: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		cursor: "pointer",
+		color: "#000000",
+		label: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			paddingBlock: "0.125rem"
+		},
+		description: {
+			color: "#545454",
+			typography: {
+				font: "normal 460 0.75rem/1.3 Open Sans",
+				letterSpacing: "0rem",
+				fontWidth: 95
+			}
+		},
+		track: {
+			display: "flex",
+			alignItems: "center",
+			padding: "0.25rem",
+			borderRadius: "100px",
+			backgroundColor: "#666666",
+			transition: "background-color 200ms",
+			selected: { backgroundColor: "#0072a9" },
+			disabled: { backgroundColor: "#dcdcdc" },
+			focusVisible: {
+				outline: "0.125rem solid #0072a9",
+				outlineOffset: "0.125rem"
+			}
+		},
+		thumb: {
+			borderRadius: "50%",
+			backgroundColor: "#ffffff",
+			color: "#0072a9",
+			disabled: { color: "#dcdcdc" },
+			transition: "transform 200ms"
+		},
+		disabled: {
+			color: "#999999",
+			cursor: "not-allowed"
+		}
+	},
+	sm: {
+		typography: {
+			font: "normal 460 0.875rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		},
+		track: {
+			width: "2.75rem",
+			height: "1.5rem"
+		},
+		thumb: {
+			size: "1.125rem",
+			translateX: "1.25rem",
+			iconSize: "1rem"
+		}
+	},
+	md: {
+		typography: {
+			font: "normal 460 1rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		},
+		track: {
+			width: "3.75rem",
+			height: "2rem"
+		},
+		thumb: {
+			size: "1.5rem",
+			translateX: "1.75rem",
+			iconSize: "1.25rem"
+		}
+	}
+};
+//#endregion
+exports.componentToggleSwitch = componentToggleSwitch;

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

@@ -0,0 +1,93 @@
+//#region src/styleD/build/typescript/component/toggleSwitch.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentToggleSwitch: {
+  shared: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    cursor: string;
+    color: string;
+    label: {
+      display: string;
+      flexDirection: string;
+      alignItems: string;
+      paddingBlock: string;
+    };
+    description: {
+      color: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+    track: {
+      display: string;
+      alignItems: string;
+      padding: string;
+      borderRadius: string;
+      backgroundColor: string;
+      transition: string;
+      selected: {
+        backgroundColor: string;
+      };
+      disabled: {
+        backgroundColor: string;
+      };
+      focusVisible: {
+        outline: string;
+        outlineOffset: string;
+      };
+    };
+    thumb: {
+      borderRadius: string;
+      backgroundColor: string;
+      color: string;
+      disabled: {
+        color: string;
+      };
+      transition: string;
+    };
+    disabled: {
+      color: string;
+      cursor: string;
+    };
+  };
+  sm: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+  md: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+};
+type ComponentToggleSwitch = typeof componentToggleSwitch;
+//#endregion
+export { ComponentToggleSwitch, componentToggleSwitch };

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

@@ -0,0 +1,93 @@
+//#region src/styleD/build/typescript/component/toggleSwitch.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentToggleSwitch: {
+  shared: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    cursor: string;
+    color: string;
+    label: {
+      display: string;
+      flexDirection: string;
+      alignItems: string;
+      paddingBlock: string;
+    };
+    description: {
+      color: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+    track: {
+      display: string;
+      alignItems: string;
+      padding: string;
+      borderRadius: string;
+      backgroundColor: string;
+      transition: string;
+      selected: {
+        backgroundColor: string;
+      };
+      disabled: {
+        backgroundColor: string;
+      };
+      focusVisible: {
+        outline: string;
+        outlineOffset: string;
+      };
+    };
+    thumb: {
+      borderRadius: string;
+      backgroundColor: string;
+      color: string;
+      disabled: {
+        color: string;
+      };
+      transition: string;
+    };
+    disabled: {
+      color: string;
+      cursor: string;
+    };
+  };
+  sm: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+  md: {
+    typography: {
+      font: string;
+      letterSpacing: string;
+      fontWidth: number;
+    };
+    track: {
+      width: string;
+      height: string;
+    };
+    thumb: {
+      size: string;
+      translateX: string;
+      iconSize: string;
+    };
+  };
+};
+type ComponentToggleSwitch = typeof componentToggleSwitch;
+//#endregion
+export { ComponentToggleSwitch, componentToggleSwitch };

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

@@ -0,0 +1,86 @@
+//#region src/styleD/build/typescript/component/toggleSwitch.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentToggleSwitch = {
+	shared: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		cursor: "pointer",
+		color: "#000000",
+		label: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			paddingBlock: "0.125rem"
+		},
+		description: {
+			color: "#545454",
+			typography: {
+				font: "normal 460 0.75rem/1.3 Open Sans",
+				letterSpacing: "0rem",
+				fontWidth: 95
+			}
+		},
+		track: {
+			display: "flex",
+			alignItems: "center",
+			padding: "0.25rem",
+			borderRadius: "100px",
+			backgroundColor: "#666666",
+			transition: "background-color 200ms",
+			selected: { backgroundColor: "#0072a9" },
+			disabled: { backgroundColor: "#dcdcdc" },
+			focusVisible: {
+				outline: "0.125rem solid #0072a9",
+				outlineOffset: "0.125rem"
+			}
+		},
+		thumb: {
+			borderRadius: "50%",
+			backgroundColor: "#ffffff",
+			color: "#0072a9",
+			disabled: { color: "#dcdcdc" },
+			transition: "transform 200ms"
+		},
+		disabled: {
+			color: "#999999",
+			cursor: "not-allowed"
+		}
+	},
+	sm: {
+		typography: {
+			font: "normal 460 0.875rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		},
+		track: {
+			width: "2.75rem",
+			height: "1.5rem"
+		},
+		thumb: {
+			size: "1.125rem",
+			translateX: "1.25rem",
+			iconSize: "1rem"
+		}
+	},
+	md: {
+		typography: {
+			font: "normal 460 1rem/1.3 Open Sans",
+			letterSpacing: "0rem",
+			fontWidth: 95
+		},
+		track: {
+			width: "3.75rem",
+			height: "2rem"
+		},
+		thumb: {
+			size: "1.5rem",
+			translateX: "1.75rem",
+			iconSize: "1.25rem"
+		}
+	}
+};
+//#endregion
+export { componentToggleSwitch };

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -79,13 +79,24 @@ const semanticColors = {
 		orangeWeak: "#fcddc6",
 		orangeMedium: "#fac7a1",
 		yellowWeak: "#ffedac",
-		selected: "#005d8b",
+		unselectedStrong: "#ffffff",
+		unselectedHoverStrong: "#005d8b",
+		unselectedPressedStrong: "#00496c",
+		selectedStrong: "#0072a9",
+		selectedHoverStrong: "#00496c",
+		selectedPressedStrong: "#00344e",
 		selectedWeaker: "#e6f1f6",
-		selectedWeak: "#c5dfec",
 		selectedHoverWeaker: "#c5dfec",
-		selectedHoverWeak: "#8abed7",
 		selectedPressedWeaker: "#8abed7",
+		unselectedWeaker: "#ffffff",
+		unselectedHoverWeaker: "#e6f1f6",
+		unselectedPressedWeaker: "#c5dfec",
+		selectedWeak: "#c5dfec",
+		selectedHoverWeak: "#8abed7",
 		selectedPressedWeak: "#5ca5c8",
+		unselectedWeak: "#ffffff",
+		unselectedHoverWeak: "#c5dfec",
+		unselectedPressedWeak: "#8abed7",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
 		warningWeak: "#ffedac",
@@ -96,7 +107,8 @@ const semanticColors = {
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",
-		neutralWeak: "#ededed"
+		neutralWeak: "#ededed",
+		neutralMedium: "#666666"
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/semantic/colors.d.cts

@@ -79,13 +79,24 @@ declare const semanticColors: {
     orangeWeak: string;
     orangeMedium: string;
     yellowWeak: string;
-    selected: string;
+    unselectedStrong: string;
+    unselectedHoverStrong: string;
+    unselectedPressedStrong: string;
+    selectedStrong: string;
+    selectedHoverStrong: string;
+    selectedPressedStrong: string;
     selectedWeaker: string;
-    selectedWeak: string;
     selectedHoverWeaker: string;
-    selectedHoverWeak: string;
     selectedPressedWeaker: string;
+    unselectedWeaker: string;
+    unselectedHoverWeaker: string;
+    unselectedPressedWeaker: string;
+    selectedWeak: string;
+    selectedHoverWeak: string;
     selectedPressedWeak: string;
+    unselectedWeak: string;
+    unselectedHoverWeak: string;
+    unselectedPressedWeak: string;
     draftStrong: string;
     liveWeak: string;
     warningWeak: string;
@@ -97,6 +108,7 @@ declare const semanticColors: {
     successWeak: string;
     successStrong: string;
     neutralWeak: string;
+    neutralMedium: string;
   };
 };
 type SemanticColors = typeof semanticColors;

package/dist/styleD/build/typescript/semantic/colors.d.ts

@@ -79,13 +79,24 @@ declare const semanticColors: {
     orangeWeak: string;
     orangeMedium: string;
     yellowWeak: string;
-    selected: string;
+    unselectedStrong: string;
+    unselectedHoverStrong: string;
+    unselectedPressedStrong: string;
+    selectedStrong: string;
+    selectedHoverStrong: string;
+    selectedPressedStrong: string;
     selectedWeaker: string;
-    selectedWeak: string;
     selectedHoverWeaker: string;
-    selectedHoverWeak: string;
     selectedPressedWeaker: string;
+    unselectedWeaker: string;
+    unselectedHoverWeaker: string;
+    unselectedPressedWeaker: string;
+    selectedWeak: string;
+    selectedHoverWeak: string;
     selectedPressedWeak: string;
+    unselectedWeak: string;
+    unselectedHoverWeak: string;
+    unselectedPressedWeak: string;
     draftStrong: string;
     liveWeak: string;
     warningWeak: string;
@@ -97,6 +108,7 @@ declare const semanticColors: {
     successWeak: string;
     successStrong: string;
     neutralWeak: string;
+    neutralMedium: string;
   };
 };
 type SemanticColors = typeof semanticColors;

package/dist/styleD/build/typescript/semantic/colors.js

@@ -79,13 +79,24 @@ const semanticColors = {
 		orangeWeak: "#fcddc6",
 		orangeMedium: "#fac7a1",
 		yellowWeak: "#ffedac",
-		selected: "#005d8b",
+		unselectedStrong: "#ffffff",
+		unselectedHoverStrong: "#005d8b",
+		unselectedPressedStrong: "#00496c",
+		selectedStrong: "#0072a9",
+		selectedHoverStrong: "#00496c",
+		selectedPressedStrong: "#00344e",
 		selectedWeaker: "#e6f1f6",
-		selectedWeak: "#c5dfec",
 		selectedHoverWeaker: "#c5dfec",
-		selectedHoverWeak: "#8abed7",
 		selectedPressedWeaker: "#8abed7",
+		unselectedWeaker: "#ffffff",
+		unselectedHoverWeaker: "#e6f1f6",
+		unselectedPressedWeaker: "#c5dfec",
+		selectedWeak: "#c5dfec",
+		selectedHoverWeak: "#8abed7",
 		selectedPressedWeak: "#5ca5c8",
+		unselectedWeak: "#ffffff",
+		unselectedHoverWeak: "#c5dfec",
+		unselectedPressedWeak: "#8abed7",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
 		warningWeak: "#ffedac",
@@ -96,7 +107,8 @@ const semanticColors = {
 		errorStrong: "#b42a19",
 		successWeak: "#cde4c9",
 		successStrong: "#326528",
-		neutralWeak: "#ededed"
+		neutralWeak: "#ededed",
+		neutralMedium: "#666666"
 	}
 };
 //#endregion

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -4,6 +4,7 @@
 */
 const semanticSizing = {
 	height: {
+		xxxxs: "1rem",
 		xxxs: "1.125rem",
 		xxs: "1.25rem",
 		xs: "1.5rem",

package/dist/styleD/build/typescript/semantic/sizing.d.cts

@@ -4,6 +4,7 @@
  */
 declare const semanticSizing: {
   height: {
+    xxxxs: string;
     xxxs: string;
     xxs: string;
     xs: string;

package/dist/styleD/build/typescript/semantic/sizing.d.ts

@@ -4,6 +4,7 @@
  */
 declare const semanticSizing: {
   height: {
+    xxxxs: string;
     xxxs: string;
     xxs: string;
     xs: string;

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -4,6 +4,7 @@
 */
 const semanticSizing = {
 	height: {
+		xxxxs: "1rem",
 		xxxs: "1.125rem",
 		xxs: "1.25rem",
 		xs: "1.5rem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -217,6 +217,16 @@
         "default": "./dist/Checkbox.cjs"
       }
     },
+    "./ToggleSwitch": {
+      "import": {
+        "types": "./dist/ToggleSwitch.d.ts",
+        "default": "./dist/ToggleSwitch.js"
+      },
+      "require": {
+        "types": "./dist/ToggleSwitch.d.cts",
+        "default": "./dist/ToggleSwitch.cjs"
+      }
+    },
     "./TextArea": {
       "import": {
         "types": "./dist/TextArea.d.ts",
@@ -444,6 +454,7 @@
     "./component/textInput.css": "./dist/styleD/build/css/component/textInput.css",
     "./component/radioGroup.css": "./dist/styleD/build/css/component/radioGroup.css",
     "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
+    "./component/toggleSwitch.css": "./dist/styleD/build/css/component/toggleSwitch.css",
     "./component/textArea.css": "./dist/styleD/build/css/component/textArea.css",
     "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
     "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css",
@@ -539,6 +550,9 @@
       "Checkbox": [
         "./dist/Checkbox.d.ts"
       ],
+      "ToggleSwitch": [
+        "./dist/ToggleSwitch.d.ts"
+      ],
       "TextArea": [
         "./dist/TextArea.d.ts"
       ],