@povio/ui 2.3.3 → 3.0.0

package/dist/components/inputs/shared/label.cva.js

@@ -1,29 +1,32 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
-import { cva } from "class-variance-authority";
 //#region src/components/inputs/shared/label.cva.ts
-var labelBase = cva("", {
-	variants: { as: {
-		default: ["flex items-start gap-1 text-text-default-1 input-disabled:text-text-default-3"],
-		filter: ["text-text-default-1 input-disabled:text-text-default-3"],
-		inline: ["flex items-start gap-1 text-text-default-1"],
-		floating: [
-			"pointer-events-none",
-			"absolute transition-all duration-75",
-			"top-1/2 -translate-y-1/2",
-			"text-text-default-3",
-			"input-disabled:text-interactive-text-secondary-disabled!",
-			"input-filled:top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))]",
-			"input-filled:translate-y-0",
-			"input-filled:text-text-default-1",
-			"input-filled:font-semibold!",
-			"input-filled:text-label-3!",
-			"group-data-[text-area]/text-area:top-floating-label-input-height-empty group-data-[text-area]/text-area:translate-y-0",
-			"group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
-			"group-data-[text-editor]/text-editor:top-floating-label-input-height-empty group-data-[text-editor]/text-editor:left-input-side-default group-data-[text-editor]/text-editor:translate-y-0",
-			"group-data-[is-filled=true]/text-editor:hidden"
-		]
-	} },
-	defaultVariants: { as: "default" }
+var labelDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { as: {
+			default: ["flex items-start gap-1 text-text-default-1 input-disabled:text-text-default-3"],
+			filter: ["text-text-default-1 input-disabled:text-text-default-3"],
+			inline: ["flex items-start gap-1 text-text-default-1"],
+			floating: [
+				"pointer-events-none",
+				"absolute transition-all duration-75",
+				"top-1/2 -translate-y-1/2",
+				"text-text-default-3",
+				"input-disabled:text-interactive-text-secondary-disabled!",
+				"input-filled:top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))]",
+				"input-filled:translate-y-0",
+				"input-filled:text-text-default-1",
+				"input-filled:font-semibold!",
+				"input-filled:text-label-3!",
+				"group-data-[text-area]/text-area:top-floating-label-input-height-empty group-data-[text-area]/text-area:translate-y-0",
+				"group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
+				"group-data-[text-editor]/text-editor:top-floating-label-input-height-empty group-data-[text-editor]/text-editor:left-input-side-default group-data-[text-editor]/text-editor:translate-y-0",
+				"group-data-[is-filled=true]/text-editor:hidden"
+			]
+		} },
+		defaultVariants: { as: "default" }
+	}
 });
 var labelTypography = compoundMapper({
 	compoundVariants: [
@@ -68,4 +71,4 @@ var labelTypography = compoundMapper({
 	defaultVariants: { as: "default" }
 });
 //#endregion
-export { labelBase, labelTypography };
+export { labelDefinition, labelTypography };

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

@@ -1,5 +1,5 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { accordionCva } from "./accordion.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { accordionDefinition } from "./accordion.cva.js";
 import { AccordionItem } from "./AccordionItem.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -11,7 +11,7 @@ var Accordion = ({ items, variant = "filled", actionPosition = "right", allowsMu
 		expandedKeys,
 		defaultExpandedKeys,
 		onExpandedChange,
-		className: clsx(UIStyle.useCva("accordion.cva", accordionCva)({
+		className: clsx(UIOverrides.useCva("accordion.cva", accordionDefinition)({
 			className,
 			variant,
 			singleItem: items.length === 1

package/dist/components/navigation/Accordion/AccordionItem.js

@@ -1,20 +1,20 @@
 import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
-import { accordionChevronCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva } from "./accordion.cva.js";
+import { accordionChevronDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition } from "./accordion.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
 //#region src/components/navigation/Accordion/AccordionItem.tsx
 var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
-	const itemCva = UIStyle.useCva("accordion.itemCva", accordionItemCva);
-	const triggerCva = UIStyle.useCva("accordion.triggerCva", accordionTriggerCva);
-	const headingCva = UIStyle.useCva("accordion.headingCva", accordionHeadingCva);
-	const headingTitleCva = UIStyle.useCva("accordion.headingTitleCva", accordionHeadingTitleCva);
-	const headingSubtitleCva = UIStyle.useCva("accordion.headingSubtitleCva", accordionHeadingSubtitleCva);
-	const chevronCva = UIStyle.useCva("accordion.chevronCva", accordionChevronCva);
-	const iconCva = UIStyle.useCva("accordion.iconCva", accordionIconCva);
-	const panelCva = UIStyle.useCva("accordion.panelCva", accordionPanelCva);
-	const panelContentCva = UIStyle.useCva("accordion.panelContentCva", accordionPanelContentCva);
+	const itemCva = UIOverrides.useCva("accordion.itemCva", accordionItemDefinition);
+	const triggerCva = UIOverrides.useCva("accordion.triggerCva", accordionTriggerDefinition);
+	const headingCva = UIOverrides.useCva("accordion.headingCva", accordionHeadingDefinition);
+	const headingTitleCva = UIOverrides.useCva("accordion.headingTitleCva", accordionHeadingTitleDefinition);
+	const headingSubtitleCva = UIOverrides.useCva("accordion.headingSubtitleCva", accordionHeadingSubtitleDefinition);
+	const chevronCva = UIOverrides.useCva("accordion.chevronCva", accordionChevronDefinition);
+	const iconCva = UIOverrides.useCva("accordion.iconCva", accordionIconDefinition);
+	const panelCva = UIOverrides.useCva("accordion.panelCva", accordionPanelDefinition);
+	const panelContentCva = UIOverrides.useCva("accordion.panelContentCva", accordionPanelContentDefinition);
 	return /* @__PURE__ */ jsx(Disclosure, {
 		id,
 		className: itemCva({

package/dist/components/navigation/Accordion/accordion.cva.d.ts

@@ -1,45 +1,110 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const accordionCva: (props?: ({
-    variant?: "outlined" | "filled" | null | undefined;
-    singleItem?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionVariantProps extends VariantProps<typeof accordionCva> {
-}
-export declare const accordionItemCva: (props?: ({
-    variant?: "outlined" | "filled" | null | undefined;
-    singleItem?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionItemVariantProps extends VariantProps<typeof accordionItemCva> {
-}
-export declare const accordionTriggerCva: (props?: ({
-    variant?: "outlined" | "filled" | null | undefined;
-    actionPosition?: "left" | "right" | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionTriggerVariantProps extends VariantProps<typeof accordionTriggerCva> {
-}
-export declare const accordionHeadingCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionHeadingVariantProps extends VariantProps<typeof accordionHeadingCva> {
-}
-export declare const accordionHeadingTitleCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionHeadingTitleVariantProps extends VariantProps<typeof accordionHeadingTitleCva> {
-}
-export declare const accordionHeadingSubtitleCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionHeadingSubtitleVariantProps extends VariantProps<typeof accordionHeadingSubtitleCva> {
-}
-export declare const accordionChevronCva: (props?: ({
-    isExpanded?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionChevronVariantProps extends VariantProps<typeof accordionChevronCva> {
-}
-export declare const accordionIconCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionIconVariantProps extends VariantProps<typeof accordionIconCva> {
-}
-export declare const accordionPanelCva: (props?: ({
-    isExpanded?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionPanelVariantProps extends VariantProps<typeof accordionPanelCva> {
-}
-export declare const accordionPanelContentCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AccordionPanelContentVariantProps extends VariantProps<typeof accordionPanelContentCva> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const accordionDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly filled: "gap-1";
+            readonly outlined: "";
+        };
+        readonly singleItem: {
+            readonly true: "";
+            readonly false: "";
+        };
+    }>;
+};
+export type AccordionConfig = NonNullable<typeof accordionDefinition.config>;
+export interface AccordionVariantProps extends UIOverrides.VariantProps<AccordionConfig> {
+}
+export declare const accordionItemDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2";
+            readonly outlined: "";
+        };
+        readonly singleItem: {
+            readonly true: "";
+            readonly false: "";
+        };
+    }>;
+};
+export type AccordionItemConfig = NonNullable<typeof accordionItemDefinition.config>;
+export interface AccordionItemVariantProps extends UIOverrides.VariantProps<AccordionItemConfig> {
+}
+export declare const accordionTriggerDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "rounded-accordion-rounding-outlined hover:bg-elevation-fill-default-2";
+            readonly filled: "rounded-accordion-rounding-filled bg-elevation-fill-default-2 hover:bg-elevation-fill-default-3";
+        };
+        readonly actionPosition: {
+            readonly left: "flex-row-reverse";
+            readonly right: "flex-row";
+        };
+        readonly disabled: {
+            readonly true: "opacity-50";
+        };
+    }>;
+};
+export type AccordionTriggerConfig = NonNullable<typeof accordionTriggerDefinition.config>;
+export interface AccordionTriggerVariantProps extends UIOverrides.VariantProps<AccordionTriggerConfig> {
+}
+export declare const accordionHeadingDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{}>;
+};
+export type AccordionHeadingConfig = NonNullable<typeof accordionHeadingDefinition.config>;
+export interface AccordionHeadingVariantProps extends UIOverrides.VariantProps<AccordionHeadingConfig> {
+}
+export declare const accordionHeadingTitleDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{}>;
+};
+export type AccordionHeadingTitleConfig = NonNullable<typeof accordionHeadingTitleDefinition.config>;
+export interface AccordionHeadingTitleVariantProps extends UIOverrides.VariantProps<AccordionHeadingTitleConfig> {
+}
+export declare const accordionHeadingSubtitleDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{}>;
+};
+export type AccordionHeadingSubtitleConfig = NonNullable<typeof accordionHeadingSubtitleDefinition.config>;
+export interface AccordionHeadingSubtitleVariantProps extends UIOverrides.VariantProps<AccordionHeadingSubtitleConfig> {
+}
+export declare const accordionChevronDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isExpanded: {
+            readonly true: "rotate-180";
+            readonly false: "rotate-0";
+        };
+    }>;
+};
+export type AccordionChevronConfig = NonNullable<typeof accordionChevronDefinition.config>;
+export interface AccordionChevronVariantProps extends UIOverrides.VariantProps<AccordionChevronConfig> {
+}
+export declare const accordionIconDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{}>;
+};
+export type AccordionIconConfig = NonNullable<typeof accordionIconDefinition.config>;
+export interface AccordionIconVariantProps extends UIOverrides.VariantProps<AccordionIconConfig> {
+}
+export declare const accordionPanelDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isExpanded: {
+            readonly true: "px-accordion-side-accordion pt-0 pb-accordion-height-accordion";
+        };
+    }>;
+};
+export type AccordionPanelConfig = NonNullable<typeof accordionPanelDefinition.config>;
+export interface AccordionPanelVariantProps extends UIOverrides.VariantProps<AccordionPanelConfig> {
+}
+export declare const accordionPanelContentDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{}>;
+};
+export type AccordionPanelContentConfig = NonNullable<typeof accordionPanelContentDefinition.config>;
+export interface AccordionPanelContentVariantProps extends UIOverrides.VariantProps<AccordionPanelContentConfig> {
 }

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,5 +1,5 @@
-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 { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +7,7 @@ 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)({
+		className: UIOverrides.useCva("stepper.cva", stepperDefinition)({
 			orientation,
 			className
 		}),

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

@@ -1,23 +1,23 @@
 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 { 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);
+	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 }),
+		className: stepperIconCva({ status }),
 		children: status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-5 text-interactive-contained-primary-on-idle" }) : /* @__PURE__ */ jsx(Typography, {
-			className: stepperNumberCva$1({ status }),
+			className: stepperNumberCva({ status }),
 			variant: "prominent-1",
 			size: "label-3",
 			children: stepNumber
@@ -25,18 +25,18 @@ var StepperItem = ({ step, stepNumber, status, contentOrientation, iconsOnly, ti
 	}), showTitle && /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-stepper-gap-text-to-subtext",
 		children: [/* @__PURE__ */ jsx(Typography, {
-			className: stepperTitleCva$1({ status }),
+			className: stepperTitleCva({ status }),
 			size: "label-2",
 			variant: "default",
 			children: step.title
 		}), showSubtext && /* @__PURE__ */ jsx(Typography, {
-			className: stepperSubtextCva$1({ status }),
+			className: stepperSubtextCva({ status }),
 			size: "label-3",
 			variant: "default",
 			children: step.subtext
 		})]
 	})] });
-	const className = stepperItemCva$1({ contentOrientation });
+	const className = stepperItemCva({ contentOrientation });
 	if (onPress) return /* @__PURE__ */ jsx(Button, {
 		onPress,
 		className: clsx("group cursor-pointer", className),

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

@@ -1,9 +1,9 @@
-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 { 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)({
+	return /* @__PURE__ */ jsx("div", { className: UIOverrides.useCva("stepper.separatorCva", stepperSeparatorDefinition)({
 		orientation,
 		contentOrientation
 	}) });