@povio/ui 2.3.3 → 3.0.0-rc.2

package/dist/components/navigation/Accordion/accordion.cva.js

@@ -1,99 +1,129 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/navigation/Accordion/accordion.cva.ts
-var accordionCva = cva("flex w-full flex-col", {
-	variants: {
-		variant: {
-			filled: "gap-1",
-			outlined: ""
+var accordionDefinition = UIOverrides.defineConfig({
+	base: ["flex w-full flex-col"],
+	config: {
+		variants: {
+			variant: {
+				filled: "gap-1",
+				outlined: ""
+			},
+			singleItem: {
+				true: "",
+				false: ""
+			}
 		},
-		singleItem: {
-			true: "",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		variant: "filled",
-		singleItem: false
-	},
-	compoundVariants: [{
-		variant: "outlined",
-		singleItem: false,
-		className: "rounded-global-rounding-s border border-elevation-outline-default-1"
-	}]
-});
-var accordionItemCva = cva("flex w-full flex-col", {
-	variants: {
-		variant: {
-			filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2",
-			outlined: ""
+		defaultVariants: {
+			variant: "filled",
+			singleItem: false
 		},
-		singleItem: {
-			true: "",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		variant: "filled",
-		singleItem: false
-	},
-	compoundVariants: [{
-		singleItem: true,
-		variant: "outlined",
-		className: "border-elevation-outline-default-1 border-b"
-	}, {
-		singleItem: false,
-		variant: "outlined",
-		className: "not-last:border-elevation-outline-default-1 not-last:border-b"
-	}]
+		compoundVariants: [{
+			variant: "outlined",
+			singleItem: false,
+			className: "rounded-global-rounding-s border border-elevation-outline-default-1"
+		}]
+	}
 });
-var accordionTriggerCva = cva([
-	"group flex w-full items-center gap-accordion-gap-content-to-arrow",
-	"px-accordion-side-accordion py-accordion-height-accordion",
-	"outline-none focus-visible:ring-2 focus-visible:ring-interactive-contained-primary-focus"
-], {
-	variants: {
-		variant: {
-			outlined: "rounded-accordion-rounding-outlined hover:bg-elevation-fill-default-2",
-			filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2 hover:bg-elevation-fill-default-3"
+var accordionItemDefinition = UIOverrides.defineConfig({
+	base: ["flex w-full flex-col"],
+	config: {
+		variants: {
+			variant: {
+				filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2",
+				outlined: ""
+			},
+			singleItem: {
+				true: "",
+				false: ""
+			}
 		},
-		actionPosition: {
-			left: "flex-row-reverse",
-			right: "flex-row"
+		defaultVariants: {
+			variant: "filled",
+			singleItem: false
 		},
-		disabled: { true: "opacity-50" }
-	},
-	defaultVariants: {
-		variant: "filled",
-		actionPosition: "right"
+		compoundVariants: [{
+			singleItem: true,
+			variant: "outlined",
+			className: "border-elevation-outline-default-1 border-b"
+		}, {
+			singleItem: false,
+			variant: "outlined",
+			className: "not-last:border-elevation-outline-default-1 not-last:border-b"
+		}]
 	}
 });
-var accordionHeadingCva = cva("flex flex-1 items-center justify-between gap-accordion-gap-content-to-arrow", {
-	variants: {},
-	defaultVariants: {}
+var accordionTriggerDefinition = UIOverrides.defineConfig({
+	base: [
+		"group flex w-full items-center gap-accordion-gap-content-to-arrow",
+		"px-accordion-side-accordion py-accordion-height-accordion",
+		"outline-none focus-visible:ring-2 focus-visible:ring-interactive-contained-primary-focus"
+	],
+	config: {
+		variants: {
+			variant: {
+				outlined: "rounded-accordion-rounding-outlined hover:bg-elevation-fill-default-2",
+				filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2 hover:bg-elevation-fill-default-3"
+			},
+			actionPosition: {
+				left: "flex-row-reverse",
+				right: "flex-row"
+			},
+			disabled: { true: "opacity-50" }
+		},
+		defaultVariants: {
+			variant: "filled",
+			actionPosition: "right"
+		}
+	}
 });
-var accordionHeadingTitleCva = cva("flex-1 text-left text-text-default-1", {
-	variants: {},
-	defaultVariants: {}
+var accordionHeadingDefinition = UIOverrides.defineConfig({
+	base: ["flex flex-1 items-center justify-between gap-accordion-gap-content-to-arrow"],
+	config: {
+		variants: {},
+		defaultVariants: {}
+	}
 });
-var accordionHeadingSubtitleCva = cva("flex-1 text-left text-text-default-2", {
-	variants: {},
-	defaultVariants: {}
+var accordionHeadingTitleDefinition = UIOverrides.defineConfig({
+	base: ["flex-1 text-left text-text-default-1"],
+	config: {
+		variants: {},
+		defaultVariants: {}
+	}
 });
-var accordionChevronCva = cva("size-6 shrink-0 text-interactive-text-secondary-idle transition-transform duration-200", {
-	variants: { isExpanded: {
-		true: "rotate-180",
-		false: "rotate-0"
-	} },
-	defaultVariants: { isExpanded: false }
+var accordionHeadingSubtitleDefinition = UIOverrides.defineConfig({
+	base: ["flex-1 text-left text-text-default-2"],
+	config: {
+		variants: {},
+		defaultVariants: {}
+	}
 });
-var accordionIconCva = cva("size-6 shrink-0 text-text-default-3", {
-	variants: {},
-	defaultVariants: {}
+var accordionChevronDefinition = UIOverrides.defineConfig({
+	base: ["size-6 shrink-0 text-interactive-text-secondary-idle transition-transform duration-200"],
+	config: {
+		variants: { isExpanded: {
+			true: "rotate-180",
+			false: "rotate-0"
+		} },
+		defaultVariants: { isExpanded: false }
+	}
 });
-var accordionPanelCva = cva("", { variants: { isExpanded: { true: "px-accordion-side-accordion pt-0 pb-accordion-height-accordion" } } });
-var accordionPanelContentCva = cva("py-accordion-height-content", {
-	variants: {},
-	defaultVariants: {}
+var accordionIconDefinition = UIOverrides.defineConfig({
+	base: ["size-6 shrink-0 text-text-default-3"],
+	config: {
+		variants: {},
+		defaultVariants: {}
+	}
+});
+var accordionPanelDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: { variants: { isExpanded: { true: "px-accordion-side-accordion pt-0 pb-accordion-height-accordion" } } }
+});
+var accordionPanelContentDefinition = UIOverrides.defineConfig({
+	base: ["py-accordion-height-content"],
+	config: {
+		variants: {},
+		defaultVariants: {}
+	}
 });
 //#endregion
-export { accordionChevronCva, accordionCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva };
+export { accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition };

package/dist/components/navigation/Stepper/Stepper.js

@@ -1,34 +1,79 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { stepperCva } from "./stepper.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { stepperDefinition } from "./stepper.cva.js";
 import { StepperItem } from "./StepperItem.js";
 import { StepperSeparator } from "./StepperSeparator.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 //#region src/components/navigation/Stepper/Stepper.tsx
-var Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: UIStyle.useCva("stepper.cva", stepperCva)({
+var Stepper = (t0) => {
+	const $ = c(23);
+	const { steps, currentStep, orientation: t1, contentOrientation: t2, iconsOnly, titlesOnly, onStepClick, className } = t0;
+	const orientation = t1 === void 0 ? "horizontal" : t1;
+	const contentOrientation = t2 === void 0 ? "horizontal" : t2;
+	const stepperCva = UIOverrides.useCva("stepper.cva", stepperDefinition);
+	let t3;
+	if ($[0] !== className || $[1] !== orientation || $[2] !== stepperCva) {
+		t3 = stepperCva({
 			orientation,
 			className
-		}),
-		role: "group",
-		"aria-label": "Progress",
-		children: steps.map((step, index) => {
-			const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
-			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
-				step,
-				stepNumber: index + 1,
-				status,
-				contentOrientation,
-				iconsOnly,
-				titlesOnly,
-				onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
-			}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
-				orientation,
-				contentOrientation
-			})] }, step.id);
-		})
-	});
+		});
+		$[0] = className;
+		$[1] = orientation;
+		$[2] = stepperCva;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== contentOrientation || $[5] !== currentStep || $[6] !== iconsOnly || $[7] !== onStepClick || $[8] !== orientation || $[9] !== steps || $[10] !== titlesOnly) {
+		let t5;
+		if ($[12] !== contentOrientation || $[13] !== currentStep || $[14] !== iconsOnly || $[15] !== onStepClick || $[16] !== orientation || $[17] !== steps.length || $[18] !== titlesOnly) {
+			t5 = (step, index) => {
+				const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
+					step,
+					stepNumber: index + 1,
+					status,
+					contentOrientation,
+					iconsOnly,
+					titlesOnly,
+					onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
+				}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
+					orientation,
+					contentOrientation
+				})] }, step.id);
+			};
+			$[12] = contentOrientation;
+			$[13] = currentStep;
+			$[14] = iconsOnly;
+			$[15] = onStepClick;
+			$[16] = orientation;
+			$[17] = steps.length;
+			$[18] = titlesOnly;
+			$[19] = t5;
+		} else t5 = $[19];
+		t4 = steps.map(t5);
+		$[4] = contentOrientation;
+		$[5] = currentStep;
+		$[6] = iconsOnly;
+		$[7] = onStepClick;
+		$[8] = orientation;
+		$[9] = steps;
+		$[10] = titlesOnly;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[20] !== t3 || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			role: "group",
+			"aria-label": "Progress",
+			children: t4
+		});
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
 };
 //#endregion
 export { Stepper };

package/dist/components/navigation/Stepper/StepperItem.js

@@ -1,53 +1,126 @@
 import { CheckIcon } from "../../../assets/icons/Check.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
-import { stepperIconCva, stepperItemCva, stepperNumberCva, stepperSubtextCva, stepperTitleCva } from "./stepper.cva.js";
+import { stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSubtextDefinition, stepperTitleDefinition } from "./stepper.cva.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
 //#region src/components/navigation/Stepper/StepperItem.tsx
-var StepperItem = ({ step, stepNumber, status, contentOrientation, iconsOnly, titlesOnly, onPress }) => {
-	const stepperItemCva$1 = UIStyle.useCva("stepper.itemCva", stepperItemCva);
-	const stepperIconCva$1 = UIStyle.useCva("stepper.iconCva", stepperIconCva);
-	const stepperNumberCva$1 = UIStyle.useCva("stepper.numberCva", stepperNumberCva);
-	const stepperTitleCva$1 = UIStyle.useCva("stepper.titleCva", stepperTitleCva);
-	const stepperSubtextCva$1 = UIStyle.useCva("stepper.subtextCva", stepperSubtextCva);
+var StepperItem = (t0) => {
+	const $ = c(31);
+	const { step, stepNumber, status, contentOrientation, iconsOnly, titlesOnly, onPress } = t0;
+	const stepperItemCva = UIOverrides.useCva("stepper.itemCva", stepperItemDefinition);
+	const stepperIconCva = UIOverrides.useCva("stepper.iconCva", stepperIconDefinition);
+	const stepperNumberCva = UIOverrides.useCva("stepper.numberCva", stepperNumberDefinition);
+	const stepperTitleCva = UIOverrides.useCva("stepper.titleCva", stepperTitleDefinition);
+	const stepperSubtextCva = UIOverrides.useCva("stepper.subtextCva", stepperSubtextDefinition);
 	const showTitle = !iconsOnly;
 	const showSubtext = !iconsOnly && !titlesOnly && !!step.subtext;
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: stepperIconCva$1({ status }),
-		children: status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-5 text-interactive-contained-primary-on-idle" }) : /* @__PURE__ */ jsx(Typography, {
-			className: stepperNumberCva$1({ status }),
+	let t1;
+	if ($[0] !== status || $[1] !== stepperIconCva) {
+		t1 = stepperIconCva({ status });
+		$[0] = status;
+		$[1] = stepperIconCva;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== status || $[4] !== stepNumber || $[5] !== stepperNumberCva) {
+		t2 = status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-5 text-interactive-contained-primary-on-idle" }) : /* @__PURE__ */ jsx(Typography, {
+			className: stepperNumberCva({ status }),
 			variant: "prominent-1",
 			size: "label-3",
 			children: stepNumber
-		})
-	}), showTitle && /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-stepper-gap-text-to-subtext",
-		children: [/* @__PURE__ */ jsx(Typography, {
-			className: stepperTitleCva$1({ status }),
-			size: "label-2",
-			variant: "default",
-			children: step.title
-		}), showSubtext && /* @__PURE__ */ jsx(Typography, {
-			className: stepperSubtextCva$1({ status }),
-			size: "label-3",
-			variant: "default",
-			children: step.subtext
-		})]
-	})] });
-	const className = stepperItemCva$1({ contentOrientation });
-	if (onPress) return /* @__PURE__ */ jsx(Button, {
-		onPress,
-		className: clsx("group cursor-pointer", className),
-		"aria-current": status === "active" ? "step" : void 0,
-		children: content
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		"aria-current": status === "active" ? "step" : void 0,
-		children: content
-	});
+		});
+		$[3] = status;
+		$[4] = stepNumber;
+		$[5] = stepperNumberCva;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== showSubtext || $[11] !== showTitle || $[12] !== status || $[13] !== step || $[14] !== stepperSubtextCva || $[15] !== stepperTitleCva) {
+		t4 = showTitle && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-stepper-gap-text-to-subtext",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				className: stepperTitleCva({ status }),
+				size: "label-2",
+				variant: "default",
+				children: step.title
+			}), showSubtext && /* @__PURE__ */ jsx(Typography, {
+				className: stepperSubtextCva({ status }),
+				size: "label-3",
+				variant: "default",
+				children: step.subtext
+			})]
+		});
+		$[10] = showSubtext;
+		$[11] = showTitle;
+		$[12] = status;
+		$[13] = step;
+		$[14] = stepperSubtextCva;
+		$[15] = stepperTitleCva;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	const content = t5;
+	let className;
+	let t6;
+	if ($[20] !== content || $[21] !== contentOrientation || $[22] !== onPress || $[23] !== status || $[24] !== stepperItemCva) {
+		t6 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			className = stepperItemCva({ contentOrientation });
+			if (onPress) {
+				t6 = /* @__PURE__ */ jsx(Button, {
+					onPress,
+					className: clsx("group cursor-pointer", className),
+					"aria-current": status === "active" ? "step" : void 0,
+					children: content
+				});
+				break bb0;
+			}
+		}
+		$[20] = content;
+		$[21] = contentOrientation;
+		$[22] = onPress;
+		$[23] = status;
+		$[24] = stepperItemCva;
+		$[25] = className;
+		$[26] = t6;
+	} else {
+		className = $[25];
+		t6 = $[26];
+	}
+	if (t6 !== Symbol.for("react.early_return_sentinel")) return t6;
+	const t7 = status === "active" ? "step" : void 0;
+	let t8;
+	if ($[27] !== className || $[28] !== content || $[29] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			className,
+			"aria-current": t7,
+			children: content
+		});
+		$[27] = className;
+		$[28] = content;
+		$[29] = t7;
+		$[30] = t8;
+	} else t8 = $[30];
+	return t8;
 };
 //#endregion
 export { StepperItem };

package/dist/components/navigation/Stepper/StepperSeparator.js

@@ -1,12 +1,30 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { stepperSeparatorCva } from "./stepper.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { stepperSeparatorDefinition } from "./stepper.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/Stepper/StepperSeparator.tsx
-var StepperSeparator = ({ orientation, contentOrientation }) => {
-	return /* @__PURE__ */ jsx("div", { className: UIStyle.useCva("stepper.separatorCva", stepperSeparatorCva)({
-		orientation,
-		contentOrientation
-	}) });
+var StepperSeparator = (t0) => {
+	const $ = c(6);
+	const { orientation, contentOrientation } = t0;
+	const stepperSeparatorCva = UIOverrides.useCva("stepper.separatorCva", stepperSeparatorDefinition);
+	let t1;
+	if ($[0] !== contentOrientation || $[1] !== orientation || $[2] !== stepperSeparatorCva) {
+		t1 = stepperSeparatorCva({
+			orientation,
+			contentOrientation
+		});
+		$[0] = contentOrientation;
+		$[1] = orientation;
+		$[2] = stepperSeparatorCva;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", { className: t1 });
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 };
 //#endregion
 export { StepperSeparator };

package/dist/components/navigation/Stepper/stepper.cva.d.ts

@@ -1,37 +1,93 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const stepperCva: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperVariantProps extends VariantProps<typeof stepperCva> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const stepperDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly orientation: {
+            readonly horizontal: "flex flex-row items-center gap-stepper-gap-step-to-line-horizontal";
+            readonly vertical: "inline-flex flex-col gap-stepper-gap-step-to-line-vertical";
+        };
+    }>;
+};
+export type StepperConfig = NonNullable<typeof stepperDefinition.config>;
+export interface StepperVariantProps extends UIOverrides.VariantProps<StepperConfig> {
 }
-export declare const stepperItemCva: (props?: ({
-    contentOrientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperItemVariantProps extends VariantProps<typeof stepperItemCva> {
+export declare const stepperItemDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly contentOrientation: {
+            readonly horizontal: "flex-row items-center gap-stepper-gap-icon-to-text-horizontal text-left";
+            readonly vertical: "flex-col items-center gap-stepper-gap-icon-to-text-vertical text-center";
+        };
+    }>;
+};
+export type StepperItemConfig = NonNullable<typeof stepperItemDefinition.config>;
+export interface StepperItemVariantProps extends UIOverrides.VariantProps<StepperItemConfig> {
 }
-export declare const stepperIconCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperIconVariantProps extends VariantProps<typeof stepperIconCva> {
+export declare const stepperIconDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: ["border border-interactive-outlined-primary-outline-idle border-solid bg-interactive-contained-primary-idle", "group-hover:border-interactive-outlined-primary-outline-hover group-hover:bg-interactive-contained-primary-hover", "group-pressed:border-interactive-outlined-primary-outline-pressed group-pressed:bg-interactive-contained-primary-pressed"];
+            readonly active: "border border-interactive-outlined-primary-on-idle border-solid bg-interactive-outlined-primary-idle";
+            readonly todo: "border border-interactive-outlined-primary-outline-disabled border-solid bg-interactive-outlined-primary-disabled";
+        };
+    }>;
+};
+export type StepperIconConfig = NonNullable<typeof stepperIconDefinition.config>;
+export interface StepperIconVariantProps extends UIOverrides.VariantProps<StepperIconConfig> {
 }
-export declare const stepperNumberCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperNumberVariantProps extends VariantProps<typeof stepperNumberCva> {
+export declare const stepperNumberDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: "";
+            readonly active: "text-interactive-outlined-primary-on-idle";
+            readonly todo: "text-interactive-outlined-primary-on-disabled";
+        };
+    }>;
+};
+export type StepperNumberConfig = NonNullable<typeof stepperNumberDefinition.config>;
+export interface StepperNumberVariantProps extends UIOverrides.VariantProps<StepperNumberConfig> {
 }
-export declare const stepperTitleCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperTitleVariantProps extends VariantProps<typeof stepperTitleCva> {
+export declare const stepperTitleDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: ["text-interactive-text-secondary-idle", "group-hover:text-interactive-text-secondary-hover", "group-pressed:text-interactive-text-secondary-pressed"];
+            readonly active: "text-interactive-text-primary-idle";
+            readonly todo: "text-interactive-text-secondary-disabled";
+        };
+    }>;
+};
+export type StepperTitleConfig = NonNullable<typeof stepperTitleDefinition.config>;
+export interface StepperTitleVariantProps extends UIOverrides.VariantProps<StepperTitleConfig> {
 }
-export declare const stepperSubtextCva: (props?: ({
-    status?: "completed" | "active" | "todo" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperSubtextVariantProps extends VariantProps<typeof stepperSubtextCva> {
+export declare const stepperSubtextDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly status: {
+            readonly completed: ["text-interactive-text-secondary-idle", "group-hover:text-interactive-text-secondary-hover", "group-pressed:text-interactive-text-secondary-pressed"];
+            readonly active: "text-interactive-text-secondary-idle";
+            readonly todo: "text-interactive-text-secondary-disabled";
+        };
+    }>;
+};
+export type StepperSubtextConfig = NonNullable<typeof stepperSubtextDefinition.config>;
+export interface StepperSubtextVariantProps extends UIOverrides.VariantProps<StepperSubtextConfig> {
 }
-export declare const stepperSeparatorCva: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    contentOrientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperSeparatorVariantProps extends VariantProps<typeof stepperSeparatorCva> {
+export declare const stepperSeparatorDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly orientation: {
+            readonly horizontal: "h-px min-w-4 flex-1";
+            readonly vertical: "min-h-16 w-px";
+        };
+        readonly contentOrientation: {
+            readonly horizontal: "";
+            readonly vertical: "";
+        };
+    }>;
+};
+export type StepperSeparatorConfig = NonNullable<typeof stepperSeparatorDefinition.config>;
+export interface StepperSeparatorVariantProps extends UIOverrides.VariantProps<StepperSeparatorConfig> {
 }