@guardian/stand 0.0.66 → 0.0.68

package/dist/components/TagPicker/styles.js

@@ -94,10 +94,11 @@ const tagPickerStyles = (partialTheme = {}) => {
 	`;
 };
 const offlineSectionStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagPicker, partialTheme);
 	return css`
 		display: flex;
 		flex-direction: column;
-		gap: ${mergeDeep(componentTagPicker, partialTheme).offlineSection.gap};
+		gap: ${theme.offlineSection.gap};
 	`;
 };
 const tagSearchWithFilterStyles = (partialTheme = {}) => {
@@ -109,8 +110,9 @@ const tagSearchWithFilterStyles = (partialTheme = {}) => {
 	`;
 };
 const filterSelectCssOverrides = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagPicker, partialTheme);
 	return css`
-		flex-basis: ${mergeDeep(componentTagPicker, partialTheme).select.flexBasis};
+		flex-basis: ${theme.select.flexBasis};
 		display: flex;
 		button {
 			height: 100%;

package/dist/components/TagTable/styles.cjs

@@ -15,10 +15,11 @@ const tagTableHeaderStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableHeaderTextStyles = (partialTheme = {}) => {
+	const theme = require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme);
 	return _emotion_react.css`
 		display: flex;
 		flex-direction: column;
-		gap: ${require_mergeDeep.mergeDeep(require_tagTable.componentTagTable, partialTheme).header.gap};
+		gap: ${theme.header.gap};
 	`;
 };
 const tagTableHeadingStyles = (partialTheme = {}) => {

package/dist/components/TagTable/styles.js

@@ -15,10 +15,11 @@ const tagTableHeaderStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableHeaderTextStyles = (partialTheme = {}) => {
+	const theme = mergeDeep(componentTagTable, partialTheme);
 	return css`
 		display: flex;
 		flex-direction: column;
-		gap: ${mergeDeep(componentTagTable, partialTheme).header.gap};
+		gap: ${theme.header.gap};
 	`;
 };
 const tagTableHeadingStyles = (partialTheme = {}) => {

package/dist/components/TopBar/TopBarItem/TopBarItem.cjs

@@ -3,8 +3,9 @@ const require_styles = require("./styles.cjs");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 //#region src/components/TopBar/TopBarItem/TopBarItem.tsx
 function TopBarItem({ children, alignment = "left", theme = {}, cssOverrides, className, size = "md", _menuOpen, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTopBarItemTheme, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-		css: [require_styles.topBarItemStyles(require_mergeDeep.mergeDeep(require_styles.defaultTopBarItemTheme, theme), alignment, { size }, _menuOpen), cssOverrides],
+		css: [require_styles.topBarItemStyles(mergedTheme, alignment, { size }, _menuOpen), cssOverrides],
 		className,
 		...props,
 		children

package/dist/components/TopBar/TopBarItem/TopBarItem.js

@@ -3,8 +3,9 @@ import { defaultTopBarItemTheme, topBarItemStyles } from "./styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/TopBar/TopBarItem/TopBarItem.tsx
 function TopBarItem({ children, alignment = "left", theme = {}, cssOverrides, className, size = "md", _menuOpen, ...props }) {
+	const mergedTheme = mergeDeep(defaultTopBarItemTheme, theme);
 	return /* @__PURE__ */ jsx("div", {
-		css: [topBarItemStyles(mergeDeep(defaultTopBarItemTheme, theme), alignment, { size }, _menuOpen), cssOverrides],
+		css: [topBarItemStyles(mergedTheme, alignment, { size }, _menuOpen), cssOverrides],
 		className,
 		...props,
 		children

package/dist/components/Typography/Typography.cjs

@@ -4,9 +4,10 @@ let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 //#region src/components/Typography/Typography.tsx
 const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTypographyTheme, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Text, {
 		elementType: element,
-		css: [require_styles.typographyStyles(require_mergeDeep.mergeDeep(require_styles.defaultTypographyTheme, theme), { variant }), cssOverrides],
+		css: [require_styles.typographyStyles(mergedTheme, { variant }), cssOverrides],
 		...props,
 		children
 	});

package/dist/components/Typography/Typography.js

@@ -4,9 +4,10 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { Text } from "react-aria-components";
 //#region src/components/Typography/Typography.tsx
 const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
+	const mergedTheme = mergeDeep(defaultTypographyTheme, theme);
 	return /* @__PURE__ */ jsx(Text, {
 		elementType: element,
-		css: [typographyStyles(mergeDeep(defaultTypographyTheme, theme), { variant }), cssOverrides],
+		css: [typographyStyles(mergedTheme, { variant }), cssOverrides],
 		...props,
 		children
 	});

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

@@ -2,17 +2,19 @@ import { DefaultProps } from "../../util/types.cjs";
 import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.cjs";
 import { TypographyTheme } from "./styles.cjs";
 import { TextProps } from "react-aria-components";
+import { JSX } from "react";
 //#region src/components/Typography/types.d.ts
 type TypographyVariant = keyof SemanticTypography;
+type TypographyElement = keyof JSX.IntrinsicElements | (string & {});
 interface TypographyProps extends DefaultProps<TypographyTheme, TextProps['className']>, Omit<TextProps, 'elementType' | 'className'> {
   /**
    * HTML element to render with font applied to
    */
-  element?: 'div' | 'span' | 'p' | 'b' | 'i' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  element?: TypographyElement;
   /**
    * Font variant to apply as a CSS style to the element
    */
   variant?: TypographyVariant;
 }
 //#endregion
-export { TypographyProps, TypographyVariant };
+export { TypographyElement, TypographyProps, TypographyVariant };

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

@@ -1,18 +1,20 @@
 import { DefaultProps } from "../../util/types.js";
 import { SemanticTypography } from "../../styleD/build/typescript/semantic/typography.js";
 import { TypographyTheme } from "./styles.js";
+import { JSX } from "react";
 import { TextProps } from "react-aria-components";
 //#region src/components/Typography/types.d.ts
 type TypographyVariant = keyof SemanticTypography;
+type TypographyElement = keyof JSX.IntrinsicElements | (string & {});
 interface TypographyProps extends DefaultProps<TypographyTheme, TextProps['className']>, Omit<TextProps, 'elementType' | 'className'> {
   /**
    * HTML element to render with font applied to
    */
-  element?: 'div' | 'span' | 'p' | 'b' | 'i' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  element?: TypographyElement;
   /**
    * Font variant to apply as a CSS style to the element
    */
   variant?: TypographyVariant;
 }
 //#endregion
-export { TypographyProps, TypographyVariant };
+export { TypographyElement, TypographyProps, TypographyVariant };

package/dist/index.cjs

@@ -30,6 +30,7 @@ const require_topBar = require("./styleD/build/typescript/component/topBar.cjs")
 const require_typography = require("./styleD/build/typescript/component/typography.cjs");
 const require_tabs = require("./styleD/build/typescript/component/tabs.cjs");
 const require_userFeedbackSummary = require("./styleD/build/typescript/component/userFeedbackSummary.cjs");
+const require_sidebarStepperNavigation = require("./styleD/build/typescript/component/sidebarStepperNavigation.cjs");
 const require_colors = require("./styleD/build/typescript/base/colors.cjs");
 const require_radius = require("./styleD/build/typescript/base/radius.cjs");
 const require_sizing = require("./styleD/build/typescript/base/sizing.cjs");
@@ -68,6 +69,7 @@ exports.componentMenu = require_menu.componentMenu;
 exports.componentModal = require_modal.componentModal;
 exports.componentRadioGroup = require_radioGroup.componentRadioGroup;
 exports.componentSelect = require_select.componentSelect;
+exports.componentSidebarStepperNavigation = require_sidebarStepperNavigation.componentSidebarStepperNavigation;
 exports.componentTabs = require_tabs.componentTabs;
 exports.componentTagTable = require_tagTable.componentTagTable;
 exports.componentTextArea = require_textArea.componentTextArea;

package/dist/index.d.cts

@@ -21,6 +21,7 @@ import { ComponentMenu, componentMenu } from "./styleD/build/typescript/componen
 import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.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";
 import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.cjs";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.cjs";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.cjs";
@@ -41,4 +42,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 ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, 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, componentTabs, componentTagTable, componentTextArea, componentTextInput, 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 ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import { ComponentMenu, componentMenu } from "./styleD/build/typescript/componen
 import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.js";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.js";
+import { ComponentSidebarStepperNavigation, componentSidebarStepperNavigation } from "./styleD/build/typescript/component/sidebarStepperNavigation.js";
 import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.js";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.js";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
@@ -41,4 +42,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 ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, 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, componentTabs, componentTagTable, componentTextArea, componentTextInput, 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 ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentSidebarStepperNavigation, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -29,6 +29,7 @@ import { componentTopBar } from "./styleD/build/typescript/component/topBar.js";
 import { componentTypography } from "./styleD/build/typescript/component/typography.js";
 import { componentTabs } from "./styleD/build/typescript/component/tabs.js";
 import { componentUserFeedbackSummary } from "./styleD/build/typescript/component/userFeedbackSummary.js";
+import { componentSidebarStepperNavigation } from "./styleD/build/typescript/component/sidebarStepperNavigation.js";
 import { baseColors } from "./styleD/build/typescript/base/colors.js";
 import { baseRadius } from "./styleD/build/typescript/base/radius.js";
 import { baseSizing } from "./styleD/build/typescript/base/sizing.js";
@@ -41,4 +42,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, componentTabs, componentTagTable, componentTextArea, componentTextInput, 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, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -0,0 +1,51 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-border: 0.125rem
+		solid #cccccc;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-display: flex;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-align-items: center;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-justify-content: space-between;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-height: 4.5rem;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-padding-inline: 1rem;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-width: 100%;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-background-color: #f6f6f6;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-hovered-background-color: #ededed;
+	--component-sidebar-stepper-navigation-mobile-toggle-shared-pressed-background-color: #e6e6e6;
+	--component-sidebar-stepper-navigation-navigation-shared-border: 0.0625rem
+		solid #8d8d8d;
+	--component-sidebar-stepper-navigation-navigation-shared-flex-direction: column;
+	--component-sidebar-stepper-navigation-navigation-shared-height: 100%;
+	--component-sidebar-stepper-navigation-status-row-shared-display: flex;
+	--component-sidebar-stepper-navigation-status-row-shared-gap: 0.375rem;
+	--component-sidebar-stepper-navigation-status-row-shared-align-items: center;
+	--component-sidebar-stepper-navigation-status-row-shared-text-color: #545454;
+	--component-sidebar-stepper-navigation-status-row-shared-text-disabled-color: #999999;
+	--component-sidebar-stepper-navigation-status-row-shared-icon-size: 1rem;
+	--component-sidebar-stepper-navigation-status-row-shared-icon-optional-color: #cde4c9;
+	--component-sidebar-stepper-navigation-status-row-shared-icon-complete-color: #326528;
+	--component-sidebar-stepper-navigation-status-row-shared-icon-incomplete-color: #8c2113;
+	--component-sidebar-stepper-navigation-step-shared-height: 4.5rem;
+	--component-sidebar-stepper-navigation-step-shared-background-color: #ffffff;
+	--component-sidebar-stepper-navigation-step-shared-current-background-color: #f6f6f6;
+	--component-sidebar-stepper-navigation-step-shared-cursor: pointer;
+	--component-sidebar-stepper-navigation-step-shared-disabled-cursor: default;
+	--component-sidebar-stepper-navigation-step-shared-border: 0.0625rem solid
+		#cccccc;
+	--component-sidebar-stepper-navigation-step-shared-text-color: #000000;
+	--component-sidebar-stepper-navigation-step-shared-text-disabled-color: #999999;
+	--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-display: flex;
+	--component-sidebar-stepper-navigation-step-number-shared-align-items: center;
+	--component-sidebar-stepper-navigation-step-number-shared-justify-content: center;
+	--component-sidebar-stepper-navigation-step-content-shared-display: flex;
+	--component-sidebar-stepper-navigation-step-content-shared-flex-direction: column;
+	--component-sidebar-stepper-navigation-step-content-shared-justify-content: center;
+	--component-sidebar-stepper-navigation-step-content-shared-gap: 0.25rem;
+	--component-sidebar-stepper-navigation-step-content-shared-margin-left: 0.75rem;
+}

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

@@ -0,0 +1,68 @@
+//#region src/styleD/build/typescript/component/sidebarStepperNavigation.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentSidebarStepperNavigation = {
+	mobileToggle: { shared: {
+		border: "0.125rem solid #cccccc",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		height: "4.5rem",
+		paddingInline: "1rem",
+		width: "100%",
+		backgroundColor: "#f6f6f6",
+		hovered: { backgroundColor: "#ededed" },
+		pressed: { backgroundColor: "#e6e6e6" }
+	} },
+	navigation: { shared: {
+		border: "0.0625rem solid #8d8d8d",
+		flexDirection: "column",
+		height: "100%"
+	} },
+	statusRow: { shared: {
+		display: "flex",
+		gap: "0.375rem",
+		alignItems: "center",
+		text: {
+			color: "#545454",
+			disabledColor: "#999999"
+		},
+		icon: {
+			size: "1rem",
+			optionalColor: "#cde4c9",
+			completeColor: "#326528",
+			incompleteColor: "#8c2113"
+		}
+	} },
+	step: { shared: {
+		height: "4.5rem",
+		backgroundColor: "#ffffff",
+		currentBackgroundColor: "#f6f6f6",
+		cursor: "pointer",
+		disabledCursor: "default",
+		border: "0.0625rem solid #cccccc",
+		text: {
+			color: "#000000",
+			disabledColor: "#999999",
+			inverseColor: "#ffffff"
+		},
+		numberColumnWidth: "2rem"
+	} },
+	stepNumber: { shared: {
+		height: "100%",
+		backgroundColor: "#005d8b",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	} },
+	stepContent: { shared: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		gap: "0.25rem",
+		marginLeft: "0.75rem"
+	} }
+};
+//#endregion
+exports.componentSidebarStepperNavigation = componentSidebarStepperNavigation;

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

@@ -0,0 +1,85 @@
+//#region src/styleD/build/typescript/component/sidebarStepperNavigation.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentSidebarStepperNavigation: {
+  mobileToggle: {
+    shared: {
+      border: string;
+      display: string;
+      alignItems: string;
+      justifyContent: string;
+      height: string;
+      paddingInline: string;
+      width: string;
+      backgroundColor: string;
+      hovered: {
+        backgroundColor: string;
+      };
+      pressed: {
+        backgroundColor: string;
+      };
+    };
+  };
+  navigation: {
+    shared: {
+      border: string;
+      flexDirection: string;
+      height: string;
+    };
+  };
+  statusRow: {
+    shared: {
+      display: string;
+      gap: string;
+      alignItems: string;
+      text: {
+        color: string;
+        disabledColor: string;
+      };
+      icon: {
+        size: string;
+        optionalColor: string;
+        completeColor: string;
+        incompleteColor: string;
+      };
+    };
+  };
+  step: {
+    shared: {
+      height: string;
+      backgroundColor: string;
+      currentBackgroundColor: string;
+      cursor: string;
+      disabledCursor: string;
+      border: string;
+      text: {
+        color: string;
+        disabledColor: string;
+        inverseColor: string;
+      };
+      numberColumnWidth: string;
+    };
+  };
+  stepNumber: {
+    shared: {
+      height: string;
+      backgroundColor: string;
+      display: string;
+      alignItems: string;
+      justifyContent: string;
+    };
+  };
+  stepContent: {
+    shared: {
+      display: string;
+      flexDirection: string;
+      justifyContent: string;
+      gap: string;
+      marginLeft: string;
+    };
+  };
+};
+type ComponentSidebarStepperNavigation = typeof componentSidebarStepperNavigation;
+//#endregion
+export { ComponentSidebarStepperNavigation, componentSidebarStepperNavigation };

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

@@ -0,0 +1,85 @@
+//#region src/styleD/build/typescript/component/sidebarStepperNavigation.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentSidebarStepperNavigation: {
+  mobileToggle: {
+    shared: {
+      border: string;
+      display: string;
+      alignItems: string;
+      justifyContent: string;
+      height: string;
+      paddingInline: string;
+      width: string;
+      backgroundColor: string;
+      hovered: {
+        backgroundColor: string;
+      };
+      pressed: {
+        backgroundColor: string;
+      };
+    };
+  };
+  navigation: {
+    shared: {
+      border: string;
+      flexDirection: string;
+      height: string;
+    };
+  };
+  statusRow: {
+    shared: {
+      display: string;
+      gap: string;
+      alignItems: string;
+      text: {
+        color: string;
+        disabledColor: string;
+      };
+      icon: {
+        size: string;
+        optionalColor: string;
+        completeColor: string;
+        incompleteColor: string;
+      };
+    };
+  };
+  step: {
+    shared: {
+      height: string;
+      backgroundColor: string;
+      currentBackgroundColor: string;
+      cursor: string;
+      disabledCursor: string;
+      border: string;
+      text: {
+        color: string;
+        disabledColor: string;
+        inverseColor: string;
+      };
+      numberColumnWidth: string;
+    };
+  };
+  stepNumber: {
+    shared: {
+      height: string;
+      backgroundColor: string;
+      display: string;
+      alignItems: string;
+      justifyContent: string;
+    };
+  };
+  stepContent: {
+    shared: {
+      display: string;
+      flexDirection: string;
+      justifyContent: string;
+      gap: string;
+      marginLeft: string;
+    };
+  };
+};
+type ComponentSidebarStepperNavigation = typeof componentSidebarStepperNavigation;
+//#endregion
+export { ComponentSidebarStepperNavigation, componentSidebarStepperNavigation };

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

@@ -0,0 +1,68 @@
+//#region src/styleD/build/typescript/component/sidebarStepperNavigation.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentSidebarStepperNavigation = {
+	mobileToggle: { shared: {
+		border: "0.125rem solid #cccccc",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		height: "4.5rem",
+		paddingInline: "1rem",
+		width: "100%",
+		backgroundColor: "#f6f6f6",
+		hovered: { backgroundColor: "#ededed" },
+		pressed: { backgroundColor: "#e6e6e6" }
+	} },
+	navigation: { shared: {
+		border: "0.0625rem solid #8d8d8d",
+		flexDirection: "column",
+		height: "100%"
+	} },
+	statusRow: { shared: {
+		display: "flex",
+		gap: "0.375rem",
+		alignItems: "center",
+		text: {
+			color: "#545454",
+			disabledColor: "#999999"
+		},
+		icon: {
+			size: "1rem",
+			optionalColor: "#cde4c9",
+			completeColor: "#326528",
+			incompleteColor: "#8c2113"
+		}
+	} },
+	step: { shared: {
+		height: "4.5rem",
+		backgroundColor: "#ffffff",
+		currentBackgroundColor: "#f6f6f6",
+		cursor: "pointer",
+		disabledCursor: "default",
+		border: "0.0625rem solid #cccccc",
+		text: {
+			color: "#000000",
+			disabledColor: "#999999",
+			inverseColor: "#ffffff"
+		},
+		numberColumnWidth: "2rem"
+	} },
+	stepNumber: { shared: {
+		height: "100%",
+		backgroundColor: "#005d8b",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	} },
+	stepContent: { shared: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		gap: "0.25rem",
+		marginLeft: "0.75rem"
+	} }
+};
+//#endregion
+export { componentSidebarStepperNavigation };

package/dist/util/useId.cjs

@@ -0,0 +1,16 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/util/useId.ts
+let nextId = 0;
+const reactUseId = react.useId;
+/**
+* Uses React's SSR-safe ID hook when available, falling back to a named counter
+* for React 17 compatibility.
+*/
+const useId = (fallbackName) => {
+	const [fallbackId] = react.useState(() => `${fallbackName}-${nextId++}`);
+	return reactUseId?.() ?? fallbackId;
+};
+//#endregion
+exports.useId = useId;

package/dist/util/useId.js

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+//#region src/util/useId.ts
+let nextId = 0;
+const reactUseId = React$1.useId;
+/**
+* Uses React's SSR-safe ID hook when available, falling back to a named counter
+* for React 17 compatibility.
+*/
+const useId = (fallbackName) => {
+	const [fallbackId] = React$1.useState(() => `${fallbackName}-${nextId++}`);
+	return reactUseId?.() ?? fallbackId;
+};
+//#endregion
+export { useId };