@guardian/stand 0.0.65 → 0.0.67

package/dist/components/Modal/Modal.cjs

@@ -43,11 +43,12 @@ const DialogRoot = ({ children, theme = {}, cssOverrides, ...props }) => {
 	});
 };
 const DialogHeader = ({ variant = "headingLg", element = "h2", theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.title, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
 		slot: "title",
 		variant,
 		element,
-		cssOverrides: [require_styles.dialogHeadingStyles(require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.title, theme)), ...cssOverrides == null ? [] : Array.isArray(cssOverrides) ? cssOverrides : [cssOverrides]],
+		cssOverrides: [require_styles.dialogHeadingStyles(mergedTheme), ...cssOverrides == null ? [] : Array.isArray(cssOverrides) ? cssOverrides : [cssOverrides]],
 		...props
 	});
 };
@@ -69,18 +70,20 @@ const DialogButtons = ({ children, theme = {}, cssOverrides, ...props }) => {
 	});
 };
 const DialogContent = ({ children, theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.children, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-		css: [require_styles.dialogContentStyles(require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.children, theme)), cssOverrides],
+		css: [require_styles.dialogContentStyles(mergedTheme), cssOverrides],
 		...props,
 		children
 	});
 };
 const DialogDismiss = ({ theme = {}, size = "lg", symbol = "close", variant = "tertiary", ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.dismiss, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {
 		size,
 		symbol,
 		variant,
-		cssOverrides: require_styles.dialogDismissStyles(require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.dismiss, theme)),
+		cssOverrides: require_styles.dialogDismissStyles(mergedTheme),
 		slot: "close",
 		...props
 	});

package/dist/components/Modal/Modal.js

@@ -41,11 +41,12 @@ const DialogRoot = ({ children, theme = {}, cssOverrides, ...props }) => {
 	});
 };
 const DialogHeader = ({ variant = "headingLg", element = "h2", theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = mergeDeep(defaultDialogTheme.title, theme);
 	return /* @__PURE__ */ jsx(Typography, {
 		slot: "title",
 		variant,
 		element,
-		cssOverrides: [dialogHeadingStyles(mergeDeep(defaultDialogTheme.title, theme)), ...cssOverrides == null ? [] : Array.isArray(cssOverrides) ? cssOverrides : [cssOverrides]],
+		cssOverrides: [dialogHeadingStyles(mergedTheme), ...cssOverrides == null ? [] : Array.isArray(cssOverrides) ? cssOverrides : [cssOverrides]],
 		...props
 	});
 };
@@ -67,18 +68,20 @@ const DialogButtons = ({ children, theme = {}, cssOverrides, ...props }) => {
 	});
 };
 const DialogContent = ({ children, theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = mergeDeep(defaultDialogTheme.children, theme);
 	return /* @__PURE__ */ jsx("div", {
-		css: [dialogContentStyles(mergeDeep(defaultDialogTheme.children, theme)), cssOverrides],
+		css: [dialogContentStyles(mergedTheme), cssOverrides],
 		...props,
 		children
 	});
 };
 const DialogDismiss = ({ theme = {}, size = "lg", symbol = "close", variant = "tertiary", ...props }) => {
+	const mergedTheme = mergeDeep(defaultDialogTheme.dismiss, theme);
 	return /* @__PURE__ */ jsx(IconButton, {
 		size,
 		symbol,
 		variant,
-		cssOverrides: dialogDismissStyles(mergeDeep(defaultDialogTheme.dismiss, theme)),
+		cssOverrides: dialogDismissStyles(mergedTheme),
 		slot: "close",
 		...props
 	});

package/dist/components/SidebarStepperNavigation/SidebarStepperNavigation.cjs

@@ -0,0 +1,161 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_Typography = require("../Typography/Typography.cjs");
+const require_useId = require("../../util/useId.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/SidebarStepperNavigation/SidebarStepperNavigation.tsx
+function StatusRow({ label, icon, iconColor, isDisabled, theme }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: require_styles.statusRowStyles(theme),
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: "bodySm",
+			element: "span",
+			theme: { color: isDisabled ? theme.statusRow.shared.text.disabledColor : theme.statusRow.shared.text.color },
+			children: label
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+			fill: isDisabled ? theme.statusRow.shared.text.disabledColor : iconColor,
+			size: "sm",
+			theme: { sm: { size: theme.statusRow.shared.icon.size } },
+			symbol: icon
+		})]
+	});
+}
+function CompletionCaption({ status, isDisabled, theme }) {
+	switch (status) {
+		case "no-fields": return null;
+		case "optional": return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StatusRow, {
+			label: "Optional",
+			isDisabled,
+			iconColor: theme.statusRow.shared.icon.optionalColor,
+			icon: "circle",
+			theme
+		});
+		case "complete": return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StatusRow, {
+			label: "Complete",
+			isDisabled,
+			iconColor: theme.statusRow.shared.icon.completeColor,
+			icon: "check_circle",
+			theme
+		});
+		case "incomplete": return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StatusRow, {
+			label: "Incomplete",
+			isDisabled,
+			iconColor: theme.statusRow.shared.icon.incompleteColor,
+			icon: "warning",
+			theme
+		});
+	}
+}
+function buildStepAriaLabel(description, isCurrent, status) {
+	return [
+		description,
+		(() => {
+			switch (status) {
+				case "complete": return "complete";
+				case "incomplete": return "incomplete";
+				case "optional": return "optional";
+				default: return;
+			}
+		})(),
+		isCurrent ? "current step" : void 0
+	].filter(Boolean).join(", ");
+}
+function getStepNumberColor(theme, isHovered, isCurrent, isDisabled) {
+	if (isHovered || isCurrent) return theme.step.shared.text.inverseColor;
+	if (isDisabled) return theme.step.shared.text.disabledColor;
+	return theme.step.shared.text.color;
+}
+function StepNumber({ stepNumber, isHovered, isCurrent, isDisabled, theme }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+		element: "div",
+		theme: { color: getStepNumberColor(theme, isHovered, isCurrent, isDisabled) },
+		cssOverrides: require_styles.stepNumberStyles(theme, isHovered, isCurrent),
+		children: stepNumber
+	});
+}
+function Step({ isDisabled, isCurrent, stepNumber, stepStatus, onPress, ariaLabel, description, theme }) {
+	const descriptionTypographyColor = isCurrent || !isDisabled ? theme.step.shared.text.color : theme.step.shared.text.disabledColor;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+		css: [require_styles.buttonStyleReset, require_styles.stepButtonStyles(theme, isCurrent, isDisabled)],
+		isDisabled,
+		"aria-label": ariaLabel,
+		"aria-current": isCurrent ? "step" : void 0,
+		onPress,
+		children: ({ isHovered }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StepNumber, {
+			stepNumber,
+			isHovered,
+			isCurrent,
+			isDisabled,
+			theme
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: require_styles.stepContentStyles(theme),
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+				element: "div",
+				theme: { color: descriptionTypographyColor },
+				variant: "headingMd",
+				children: description
+			}), stepStatus !== void 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CompletionCaption, {
+				status: stepStatus,
+				isDisabled: isDisabled && !isCurrent,
+				theme
+			})]
+		})] })
+	});
+}
+function SidebarStepperNavigation({ currentStepId, stepNavConfig, onPress, stepNavTitle = "Steps", theme = {}, cssOverrides, className }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSidebarStepperNavigationTheme, theme);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const stepNavId = require_useId.useId("sidebar-stepper-navigation");
+	const currentStep = stepNavConfig.steps.find((step) => step.id === currentStepId);
+	const visibleSteps = stepNavConfig.steps.filter((step) => !step.parentStepId && step.stepVisible !== false);
+	const isCurrent = (step) => step.id === currentStep?.id || step.id === currentStep?.parentStepId;
+	const canNavigateTo = (step) => Boolean(!currentStep || currentStep.canSkipFrom && stepNavConfig.isNonLinear && step.canSkipTo && !isCurrent(step));
+	const currentStepLabel = currentStep?.label ?? currentStep?.id;
+	const mobileToggleLabel = currentStepLabel ? `${stepNavTitle} / ${currentStepLabel}` : stepNavTitle;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Button, {
+		onPress: () => setIsOpen((open) => !open),
+		"aria-expanded": isOpen,
+		"aria-controls": stepNavId,
+		css: [require_styles.buttonStyleReset, require_styles.mobileToggleStyles(mergedTheme)],
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+			element: "div",
+			variant: "bodyBoldSm",
+			children: mobileToggleLabel
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+			size: "md",
+			symbol: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"
+		})]
+	}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("nav", {
+		css: [require_styles.navigationStyles(mergedTheme, isOpen), cssOverrides],
+		"aria-label": stepNavTitle,
+		id: stepNavId,
+		className,
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("ol", {
+			css: require_styles.listStyles,
+			children: visibleSteps.map((step, index) => {
+				const stepStatus = step.stepStatus;
+				const description = step.label ?? step.id;
+				const stepIsCurrent = isCurrent(step);
+				const stepIsDisabled = !stepIsCurrent && !canNavigateTo(step);
+				const onStepPress = () => {
+					if (!stepIsDisabled && !stepIsCurrent) onPress(step.id);
+				};
+				return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Step, {
+					isDisabled: stepIsDisabled,
+					onPress: onStepPress,
+					stepNumber: index + 1,
+					isCurrent: stepIsCurrent,
+					stepStatus,
+					theme: mergedTheme,
+					ariaLabel: buildStepAriaLabel(description, stepIsCurrent, stepStatus),
+					description
+				}) }, step.id);
+			})
+		})
+	})] });
+}
+//#endregion
+exports.SidebarStepperNavigation = SidebarStepperNavigation;

package/dist/components/SidebarStepperNavigation/SidebarStepperNavigation.d.cts

@@ -0,0 +1,5 @@
+import { SidebarStepperNavigationProps } from "./types.cjs";
+//#region src/components/SidebarStepperNavigation/SidebarStepperNavigation.d.ts
+declare function SidebarStepperNavigation({ currentStepId, stepNavConfig, onPress, stepNavTitle, theme, cssOverrides, className }: SidebarStepperNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { SidebarStepperNavigation };

package/dist/components/SidebarStepperNavigation/SidebarStepperNavigation.d.ts

@@ -0,0 +1,5 @@
+import { SidebarStepperNavigationProps } from "./types.js";
+//#region src/components/SidebarStepperNavigation/SidebarStepperNavigation.d.ts
+declare function SidebarStepperNavigation({ currentStepId, stepNavConfig, onPress, stepNavTitle, theme, cssOverrides, className }: SidebarStepperNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { SidebarStepperNavigation };

package/dist/components/SidebarStepperNavigation/SidebarStepperNavigation.js

@@ -0,0 +1,161 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { Typography } from "../Typography/Typography.js";
+import { useId } from "../../util/useId.js";
+import { buttonStyleReset, defaultSidebarStepperNavigationTheme, listStyles, mobileToggleStyles, navigationStyles, statusRowStyles, stepButtonStyles, stepContentStyles, stepNumberStyles } from "./styles.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Button } from "react-aria-components";
+//#region src/components/SidebarStepperNavigation/SidebarStepperNavigation.tsx
+function StatusRow({ label, icon, iconColor, isDisabled, theme }) {
+	return /* @__PURE__ */ jsxs("div", {
+		css: statusRowStyles(theme),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "bodySm",
+			element: "span",
+			theme: { color: isDisabled ? theme.statusRow.shared.text.disabledColor : theme.statusRow.shared.text.color },
+			children: label
+		}), /* @__PURE__ */ jsx(Icon, {
+			fill: isDisabled ? theme.statusRow.shared.text.disabledColor : iconColor,
+			size: "sm",
+			theme: { sm: { size: theme.statusRow.shared.icon.size } },
+			symbol: icon
+		})]
+	});
+}
+function CompletionCaption({ status, isDisabled, theme }) {
+	switch (status) {
+		case "no-fields": return null;
+		case "optional": return /* @__PURE__ */ jsx(StatusRow, {
+			label: "Optional",
+			isDisabled,
+			iconColor: theme.statusRow.shared.icon.optionalColor,
+			icon: "circle",
+			theme
+		});
+		case "complete": return /* @__PURE__ */ jsx(StatusRow, {
+			label: "Complete",
+			isDisabled,
+			iconColor: theme.statusRow.shared.icon.completeColor,
+			icon: "check_circle",
+			theme
+		});
+		case "incomplete": return /* @__PURE__ */ jsx(StatusRow, {
+			label: "Incomplete",
+			isDisabled,
+			iconColor: theme.statusRow.shared.icon.incompleteColor,
+			icon: "warning",
+			theme
+		});
+	}
+}
+function buildStepAriaLabel(description, isCurrent, status) {
+	return [
+		description,
+		(() => {
+			switch (status) {
+				case "complete": return "complete";
+				case "incomplete": return "incomplete";
+				case "optional": return "optional";
+				default: return;
+			}
+		})(),
+		isCurrent ? "current step" : void 0
+	].filter(Boolean).join(", ");
+}
+function getStepNumberColor(theme, isHovered, isCurrent, isDisabled) {
+	if (isHovered || isCurrent) return theme.step.shared.text.inverseColor;
+	if (isDisabled) return theme.step.shared.text.disabledColor;
+	return theme.step.shared.text.color;
+}
+function StepNumber({ stepNumber, isHovered, isCurrent, isDisabled, theme }) {
+	return /* @__PURE__ */ jsx(Typography, {
+		element: "div",
+		theme: { color: getStepNumberColor(theme, isHovered, isCurrent, isDisabled) },
+		cssOverrides: stepNumberStyles(theme, isHovered, isCurrent),
+		children: stepNumber
+	});
+}
+function Step({ isDisabled, isCurrent, stepNumber, stepStatus, onPress, ariaLabel, description, theme }) {
+	const descriptionTypographyColor = isCurrent || !isDisabled ? theme.step.shared.text.color : theme.step.shared.text.disabledColor;
+	return /* @__PURE__ */ jsx(Button, {
+		css: [buttonStyleReset, stepButtonStyles(theme, isCurrent, isDisabled)],
+		isDisabled,
+		"aria-label": ariaLabel,
+		"aria-current": isCurrent ? "step" : void 0,
+		onPress,
+		children: ({ isHovered }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StepNumber, {
+			stepNumber,
+			isHovered,
+			isCurrent,
+			isDisabled,
+			theme
+		}), /* @__PURE__ */ jsxs("div", {
+			css: stepContentStyles(theme),
+			children: [/* @__PURE__ */ jsx(Typography, {
+				element: "div",
+				theme: { color: descriptionTypographyColor },
+				variant: "headingMd",
+				children: description
+			}), stepStatus !== void 0 && /* @__PURE__ */ jsx(CompletionCaption, {
+				status: stepStatus,
+				isDisabled: isDisabled && !isCurrent,
+				theme
+			})]
+		})] })
+	});
+}
+function SidebarStepperNavigation({ currentStepId, stepNavConfig, onPress, stepNavTitle = "Steps", theme = {}, cssOverrides, className }) {
+	const mergedTheme = mergeDeep(defaultSidebarStepperNavigationTheme, theme);
+	const [isOpen, setIsOpen] = useState(false);
+	const stepNavId = useId("sidebar-stepper-navigation");
+	const currentStep = stepNavConfig.steps.find((step) => step.id === currentStepId);
+	const visibleSteps = stepNavConfig.steps.filter((step) => !step.parentStepId && step.stepVisible !== false);
+	const isCurrent = (step) => step.id === currentStep?.id || step.id === currentStep?.parentStepId;
+	const canNavigateTo = (step) => Boolean(!currentStep || currentStep.canSkipFrom && stepNavConfig.isNonLinear && step.canSkipTo && !isCurrent(step));
+	const currentStepLabel = currentStep?.label ?? currentStep?.id;
+	const mobileToggleLabel = currentStepLabel ? `${stepNavTitle} / ${currentStepLabel}` : stepNavTitle;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		onPress: () => setIsOpen((open) => !open),
+		"aria-expanded": isOpen,
+		"aria-controls": stepNavId,
+		css: [buttonStyleReset, mobileToggleStyles(mergedTheme)],
+		children: [/* @__PURE__ */ jsx(Typography, {
+			element: "div",
+			variant: "bodyBoldSm",
+			children: mobileToggleLabel
+		}), /* @__PURE__ */ jsx(Icon, {
+			size: "md",
+			symbol: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"
+		})]
+	}), /* @__PURE__ */ jsx("nav", {
+		css: [navigationStyles(mergedTheme, isOpen), cssOverrides],
+		"aria-label": stepNavTitle,
+		id: stepNavId,
+		className,
+		children: /* @__PURE__ */ jsx("ol", {
+			css: listStyles,
+			children: visibleSteps.map((step, index) => {
+				const stepStatus = step.stepStatus;
+				const description = step.label ?? step.id;
+				const stepIsCurrent = isCurrent(step);
+				const stepIsDisabled = !stepIsCurrent && !canNavigateTo(step);
+				const onStepPress = () => {
+					if (!stepIsDisabled && !stepIsCurrent) onPress(step.id);
+				};
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Step, {
+					isDisabled: stepIsDisabled,
+					onPress: onStepPress,
+					stepNumber: index + 1,
+					isCurrent: stepIsCurrent,
+					stepStatus,
+					theme: mergedTheme,
+					ariaLabel: buildStepAriaLabel(description, stepIsCurrent, stepStatus),
+					description
+				}) }, step.id);
+			})
+		})
+	})] });
+}
+//#endregion
+export { SidebarStepperNavigation };

package/dist/components/SidebarStepperNavigation/styles.cjs

@@ -0,0 +1,96 @@
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_sidebarStepperNavigation = require("../../styleD/build/typescript/component/sidebarStepperNavigation.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/SidebarStepperNavigation/styles.ts
+const defaultSidebarStepperNavigationTheme = require_sidebarStepperNavigation.componentSidebarStepperNavigation;
+const buttonStyleReset = _emotion_react.css`
+	appearance: none;
+	-webkit-appearance: none;
+	background-color: transparent;
+	font: inherit;
+	color: inherit;
+	border: none;
+	padding: 0;
+	margin: 0;
+`;
+const mobileToggleStyles = (theme) => _emotion_react.css`
+	border-bottom: ${theme.mobileToggle.shared.border};
+	display: ${theme.mobileToggle.shared.display};
+	align-items: ${theme.mobileToggle.shared.alignItems};
+	justify-content: ${theme.mobileToggle.shared.justifyContent};
+	height: ${theme.mobileToggle.shared.height};
+	padding: 0 ${theme.mobileToggle.shared.paddingInline};
+	width: ${theme.mobileToggle.shared.width};
+	background-color: ${theme.mobileToggle.shared.backgroundColor};
+
+	${require_mq.from.md} {
+		display: none;
+	}
+
+	&[data-hovered] {
+		background-color: ${theme.mobileToggle.shared.hovered.backgroundColor};
+	}
+
+	&[data-pressed] {
+		background-color: ${theme.mobileToggle.shared.pressed.backgroundColor};
+	}
+`;
+const navigationStyles = (theme, isOpen) => _emotion_react.css`
+	border-right: ${theme.navigation.shared.border};
+	display: ${isOpen ? "flex" : "none"};
+	flex-direction: ${theme.navigation.shared.flexDirection};
+	height: ${theme.navigation.shared.height};
+
+	${require_mq.from.md} {
+		display: flex;
+	}
+`;
+const listStyles = _emotion_react.css`
+	list-style: none;
+	padding: 0;
+	margin: 0;
+`;
+const statusRowStyles = (theme) => _emotion_react.css`
+	display: ${theme.statusRow.shared.display};
+	gap: ${theme.statusRow.shared.gap};
+	align-items: ${theme.statusRow.shared.alignItems};
+`;
+const stepNumberStyles = (theme, isHovered, isCurrent) => _emotion_react.css`
+	width: ${theme.step.shared.numberColumnWidth};
+	height: ${theme.stepNumber.shared.height};
+	background-color: ${isCurrent || isHovered ? theme.stepNumber.shared.backgroundColor : "transparent"};
+	display: ${theme.stepNumber.shared.display};
+	align-items: ${theme.stepNumber.shared.alignItems};
+	justify-content: ${theme.stepNumber.shared.justifyContent};
+`;
+const stepButtonStyles = (theme, isCurrent, isDisabled) => _emotion_react.css`
+	background-color: ${isCurrent ? theme.step.shared.currentBackgroundColor : theme.step.shared.backgroundColor};
+	height: ${theme.step.shared.height};
+	cursor: ${isDisabled ? theme.step.shared.disabledCursor : theme.step.shared.cursor};
+	border-bottom: ${theme.step.shared.border};
+	display: grid;
+	grid-template-columns: ${theme.step.shared.numberColumnWidth} 1fr;
+	text-align: left;
+	width: 100%;
+
+	&[data-pressed] {
+		background-color: ${theme.step.shared.currentBackgroundColor};
+	}
+`;
+const stepContentStyles = (theme) => _emotion_react.css`
+	gap: ${theme.stepContent.shared.gap};
+	display: ${theme.stepContent.shared.display};
+	flex-direction: ${theme.stepContent.shared.flexDirection};
+	justify-content: ${theme.stepContent.shared.justifyContent};
+	margin-left: ${theme.stepContent.shared.marginLeft};
+`;
+//#endregion
+exports.buttonStyleReset = buttonStyleReset;
+exports.defaultSidebarStepperNavigationTheme = defaultSidebarStepperNavigationTheme;
+exports.listStyles = listStyles;
+exports.mobileToggleStyles = mobileToggleStyles;
+exports.navigationStyles = navigationStyles;
+exports.statusRowStyles = statusRowStyles;
+exports.stepButtonStyles = stepButtonStyles;
+exports.stepContentStyles = stepContentStyles;
+exports.stepNumberStyles = stepNumberStyles;

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

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

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

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

package/dist/components/SidebarStepperNavigation/styles.js

@@ -0,0 +1,88 @@
+import { from } from "../../styleD/utils/semantic/mq.js";
+import { componentSidebarStepperNavigation } from "../../styleD/build/typescript/component/sidebarStepperNavigation.js";
+import { css } from "@emotion/react";
+//#region src/components/SidebarStepperNavigation/styles.ts
+const defaultSidebarStepperNavigationTheme = componentSidebarStepperNavigation;
+const buttonStyleReset = css`
+	appearance: none;
+	-webkit-appearance: none;
+	background-color: transparent;
+	font: inherit;
+	color: inherit;
+	border: none;
+	padding: 0;
+	margin: 0;
+`;
+const mobileToggleStyles = (theme) => css`
+	border-bottom: ${theme.mobileToggle.shared.border};
+	display: ${theme.mobileToggle.shared.display};
+	align-items: ${theme.mobileToggle.shared.alignItems};
+	justify-content: ${theme.mobileToggle.shared.justifyContent};
+	height: ${theme.mobileToggle.shared.height};
+	padding: 0 ${theme.mobileToggle.shared.paddingInline};
+	width: ${theme.mobileToggle.shared.width};
+	background-color: ${theme.mobileToggle.shared.backgroundColor};
+
+	${from.md} {
+		display: none;
+	}
+
+	&[data-hovered] {
+		background-color: ${theme.mobileToggle.shared.hovered.backgroundColor};
+	}
+
+	&[data-pressed] {
+		background-color: ${theme.mobileToggle.shared.pressed.backgroundColor};
+	}
+`;
+const navigationStyles = (theme, isOpen) => css`
+	border-right: ${theme.navigation.shared.border};
+	display: ${isOpen ? "flex" : "none"};
+	flex-direction: ${theme.navigation.shared.flexDirection};
+	height: ${theme.navigation.shared.height};
+
+	${from.md} {
+		display: flex;
+	}
+`;
+const listStyles = css`
+	list-style: none;
+	padding: 0;
+	margin: 0;
+`;
+const statusRowStyles = (theme) => css`
+	display: ${theme.statusRow.shared.display};
+	gap: ${theme.statusRow.shared.gap};
+	align-items: ${theme.statusRow.shared.alignItems};
+`;
+const stepNumberStyles = (theme, isHovered, isCurrent) => css`
+	width: ${theme.step.shared.numberColumnWidth};
+	height: ${theme.stepNumber.shared.height};
+	background-color: ${isCurrent || isHovered ? theme.stepNumber.shared.backgroundColor : "transparent"};
+	display: ${theme.stepNumber.shared.display};
+	align-items: ${theme.stepNumber.shared.alignItems};
+	justify-content: ${theme.stepNumber.shared.justifyContent};
+`;
+const stepButtonStyles = (theme, isCurrent, isDisabled) => css`
+	background-color: ${isCurrent ? theme.step.shared.currentBackgroundColor : theme.step.shared.backgroundColor};
+	height: ${theme.step.shared.height};
+	cursor: ${isDisabled ? theme.step.shared.disabledCursor : theme.step.shared.cursor};
+	border-bottom: ${theme.step.shared.border};
+	display: grid;
+	grid-template-columns: ${theme.step.shared.numberColumnWidth} 1fr;
+	text-align: left;
+	width: 100%;
+
+	&[data-pressed] {
+		background-color: ${theme.step.shared.currentBackgroundColor};
+	}
+`;
+const stepContentStyles = (theme) => css`
+	gap: ${theme.stepContent.shared.gap};
+	display: ${theme.stepContent.shared.display};
+	flex-direction: ${theme.stepContent.shared.flexDirection};
+	justify-content: ${theme.stepContent.shared.justifyContent};
+	margin-left: ${theme.stepContent.shared.marginLeft};
+`;
+//#endregion
+export { buttonStyleReset, defaultSidebarStepperNavigationTheme, listStyles, mobileToggleStyles, navigationStyles, statusRowStyles, stepButtonStyles, stepContentStyles, stepNumberStyles };

package/dist/components/SidebarStepperNavigation/types.cjs

@@ -0,0 +1,9 @@
+//#region src/components/SidebarStepperNavigation/types.ts
+const StepStatus = [
+	"complete",
+	"incomplete",
+	"optional",
+	"no-fields"
+];
+//#endregion
+exports.StepStatus = StepStatus;

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

@@ -0,0 +1,26 @@
+import { DefaultProps } from "../../util/types.cjs";
+import { SidebarStepperNavigationTheme } from "./styles.cjs";
+//#region src/components/SidebarStepperNavigation/types.d.ts
+declare const StepStatus: readonly ["complete", "incomplete", "optional", "no-fields"];
+type StepStatus = (typeof StepStatus)[number];
+type StepNavStep = {
+  id: string;
+  label?: string;
+  parentStepId?: string;
+  canSkipTo?: boolean;
+  canSkipFrom?: boolean;
+  stepStatus?: StepStatus;
+  stepVisible?: boolean;
+};
+type StepNavConfig = {
+  steps: StepNavStep[];
+  isNonLinear: boolean;
+};
+interface SidebarStepperNavigationProps extends DefaultProps<SidebarStepperNavigationTheme> {
+  currentStepId?: string;
+  stepNavConfig: StepNavConfig;
+  onPress: (stepId: string) => void;
+  stepNavTitle?: string;
+}
+//#endregion
+export { SidebarStepperNavigationProps, StepNavConfig, StepNavStep, StepStatus };