@povio/ui 5.0.0-rc.1 → 5.0.0-rc.3

package/dist/{staticDateTimeSegments-DR8bJw-F.js → staticDateTimeSegments-CsCE9Buo.js}

@@ -1,6 +1,7 @@
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, n as $f2ff30fde7b014be$export$3ddf2d174ce01153 } from "./Dialog-CXoVeIkU.js";
-import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, n as $f2ff30fde7b014be$export$3ddf2d174ce01153 } from "./Dialog-CKLkS00H.js";
+import { t as popoverAnimationClassName } from "./popoverAnimation-DEZSvKP8.js";
 import { n as $caaf0dd3060ed57c$export$95185d699e05d4d7, r as $1969ac565cfec8d0$export$de79e2c695e052f3 } from "./openLink-CQhMhfzO.js";
 import { c as $d447af545b77c9f1$export$f21a1ffae260145a, i as $23f2114a1b82827e$export$e58f029f0fbfdb29, n as $23f2114a1b82827e$export$4282f70798064fe0, r as $23f2114a1b82827e$export$cd4e5573fbe2b576, s as $d447af545b77c9f1$export$b204af158042fbac, t as $c4867b2f328c2698$export$e5c5a5f917a5871c } from "./useLayoutEffect-B2-1tbPJ.js";
 import { c as $a92dc41f639950be$export$525bc4921d56d4a, d as $a92dc41f639950be$export$cabe61c495ee3649, n as $081cb5757e08788e$export$24490316f764c430, o as $b5c62b033c25b96d$export$29bf1b5f2c56cf63, s as $b5c62b033c25b96d$export$60278871457622de, u as $a92dc41f639950be$export$c2b7abe5d61ec696 } from "./focusSafely-DCGrr2bb.js";
@@ -11,19 +12,19 @@ import { _ as $e8ac3c3f5d4bae7f$export$d6875122194c7b44, a as $eb76cf4feb040f77$
 import { n as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, r as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7, t as $3e6197669829fe11$export$40bfa8c7b0832715 } from "./useControlledState-DQxX6LMN.js";
 import { n as $901761b40e390936$export$2bb74740c4e19def, r as $2b2d34ff061957fb$export$2b85b721e524d74b, t as $3578607fe3d4b096$export$cfa2225e87938781 } from "./getScrollParent-kSR7EtoT.js";
 import { n as $535772f9d2c1f38d$export$c5251b9e124bf29, t as $535772f9d2c1f38d$export$2d6ec8fc375ceafa } from "./FocusScope-CO9oJ1sc.js";
-import { t as Typography } from "./Typography-B0Gp1lpc.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { BottomSheet } from "./components/bottom-sheet.js";
-import { t as useBreakpoint } from "./useBreakpoint-BOA-MyoT.js";
+import { t as useBreakpoint } from "./useBreakpoint-DQoMN-BG.js";
 import { TextButton } from "./components/text-button.js";
 import { t as $a8ea2faf2ebe4d2f$re_export$isFirefox } from "./import-BE0r63d8.js";
 import "./i18n-CX2EjhJI.js";
-import { t as popoverDefinition } from "./popover.cva-BJSkLndY.js";
-import { t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DB9PgioW.js";
+import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
+import { t as getStaticInputFocusTarget } from "./useStaticInputHandoff-CvSBPUB3.js";
 import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
 import $ahdqC$react, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CalendarDate, DateFormatter, GregorianCalendar, Time, getLocalTimeZone, isEqualCalendar, now, toCalendar, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
 import "react-dom";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region ../../node_modules/.bun/react-aria@3.52.1+67f6792bdf102c28/node_modules/react-aria/dist/private/interactions/textSelection.mjs
 let $cbf007e418543821$var$state = "default";
@@ -3449,27 +3450,25 @@ const useFirefoxDateSegmentSelectionGuard = (containerRef) => {
 //#region src/components/inputs/DateTime/shared/DateTimeDialog.tsx
 const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, bottomSheetProps, onOpenChange }) => {
 	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
-	if (useBreakpoint("md")) {
-		if (!isOpen) return null;
-		return /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
-			triggerRef,
-			isOpen,
-			placement: "bottom start",
-			onOpenChange,
-			children: /* @__PURE__ */ jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, {
-				...dialogProps,
-				className: "outline-none!",
-				"aria-label": label,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: clsx(popoverCva({}), "flex overflow-hidden"),
-					children: [!hideSidebar && sidebar, /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-1 flex-col justify-between",
-						children: [children, footer]
-					})]
-				})
+	if (useBreakpoint("md")) return /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+		triggerRef,
+		isOpen,
+		placement: "bottom start",
+		onOpenChange,
+		className: popoverAnimationClassName,
+		children: /* @__PURE__ */ jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, {
+			...dialogProps,
+			className: "outline-none!",
+			"aria-label": label,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx(popoverCva({}), "flex overflow-hidden"),
+				children: [!hideSidebar && sidebar, /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col justify-between",
+					children: [children, footer]
+				})]
 			})
-		});
-	}
+		})
+	});
 	return /* @__PURE__ */ jsxs(BottomSheet, {
 		sheetMarginBottom: 0,
 		isScrollable: true,

package/dist/{staticSelect.utils-Cm7MoDVG.js → staticSelect.utils-BemUyaaA.js}

@@ -1,38 +1,41 @@
-import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { t as UIConfig } from "./uiConfig.context-D2eUIPHn.js";
+import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
-import { t as CheckboxCheckmark } from "./CheckboxCheckmark-B3lnOjsU.js";
+import { t as CheckboxCheckmark } from "./CheckboxCheckmark-usHsolNj.js";
+import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
 import { c as $7230ffa83bc0c2cf$export$ef03459518577ad4, i as $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8, l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "./utils-Czcqspm7.js";
-import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, f as $263ab7fc0f95ccdb$export$2dbbd341daed716d, h as $4b38b5b75ecc6208$export$698f465ec27e93df, l as $542a13ca2fa5b484$export$9b9a0cd73afb7ca4, p as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5, r as $f2ff30fde7b014be$export$d2f961adcb0afbe, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CXoVeIkU.js";
+import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, g as $4b38b5b75ecc6208$export$698f465ec27e93df, l as $542a13ca2fa5b484$export$9b9a0cd73afb7ca4, m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5, p as $263ab7fc0f95ccdb$export$2dbbd341daed716d, r as $f2ff30fde7b014be$export$d2f961adcb0afbe, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CKLkS00H.js";
 import { t as $43a3b93638fe5db9$export$75b6ee27786ba447 } from "./Label-B2-B-uFY.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$export$24d547caef80ccd1 } from "./Button-D6KlWSFL.js";
 import { t as $efe09c6d1c304b50$export$9afb8bc826b033ea } from "./Text-D2MPZ3sY.js";
 import { n as $1f3c3b1a70cec653$export$ff05c3ac10437e03, t as $cdaed739b1139372$export$c24727297075ec6a } from "./Form-DlQcyN1f.js";
 import { n as $41fb335299a4a39e$export$f5b8910cec6cf069, t as $41fb335299a4a39e$export$37fb8590cf2c088c } from "./Input-BsbLZDtC.js";
-import { i as $928221da08ecbc62$export$a11e76429ed99b4, n as $928221da08ecbc62$export$7c5906fe4f1f2af2, r as $928221da08ecbc62$export$7ff8f37d2d81a48d, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-B7DW1S7n.js";
+import { i as $928221da08ecbc62$export$a11e76429ed99b4, n as $928221da08ecbc62$export$7c5906fe4f1f2af2, r as $928221da08ecbc62$export$7ff8f37d2d81a48d, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CL8Ar4Q_.js";
 import { i as $a3be900807531178$re_export$useFilter, n as $a3be900807531178$re_export$ListLayout, r as $a3be900807531178$re_export$Rect } from "./exports-BNrTn8Tj.js";
-import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import "./popoverAnimation-DEZSvKP8.js";
 import { a as $d447af545b77c9f1$export$37a5fde709c1db82, i as $23f2114a1b82827e$export$e58f029f0fbfdb29, l as $d447af545b77c9f1$export$f531f92e2a15358f, r as $23f2114a1b82827e$export$cd4e5573fbe2b576, t as $c4867b2f328c2698$export$e5c5a5f917a5871c } from "./useLayoutEffect-B2-1tbPJ.js";
 import { n as $2add3ce32c6007eb$export$78551043582a6a98, s as $2add3ce32c6007eb$export$fedb369cb70207f1 } from "./platform-BXNIIAfU.js";
 import { t as $a4e76a5424781910$export$e08e3b67e392101e } from "./chain-DIXr2VAT.js";
 import { n as $901761b40e390936$export$2bb74740c4e19def, r as $2b2d34ff061957fb$export$2b85b721e524d74b, t as $3578607fe3d4b096$export$cfa2225e87938781 } from "./getScrollParent-kSR7EtoT.js";
-import { t as Spinner } from "./Spinner-BEYBu85B.js";
+import { t as Spinner } from "./Spinner-BeVTUzzx.js";
 import { BottomSheet } from "./components/bottom-sheet.js";
-import { t as useBreakpoint } from "./useBreakpoint-BOA-MyoT.js";
+import { t as useBreakpoint } from "./useBreakpoint-DQoMN-BG.js";
 import { TextButton } from "./components/text-button.js";
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-BE0r63d8.js";
-import { r as FormFieldLabel, t as FormField } from "./FormField-CHD4OJOt.js";
-import { t as Tag } from "./Tag-HiDH438e.js";
+import { r as FormFieldLabel, t as FormField } from "./FormField-U_-d4V_g.js";
+import { t as Tag } from "./Tag-DPg5sL1Z.js";
 import "./i18n-CX2EjhJI.js";
-import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-BcXyC1vZ.js";
-import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CRf-JFeo.js";
+import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-DJA8ovm_.js";
+import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-DznDgVJB.js";
 import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
-import { t as popoverDefinition } from "./popover.cva-BJSkLndY.js";
+import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
 import { Input } from "./components/input.js";
 import $ahdqC$react, { Fragment, createContext, use, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import "react-aria/mergeProps";
 import { CollectionBuilder } from "react-aria/CollectionBuilder";
 import { filterDOMProps } from "react-aria/filterDOMProps";
@@ -47,33 +50,9 @@ import "react-aria/useListFormatter";
 import { useVirtualizerState } from "react-stately/useVirtualizerState";
 import { useScrollView } from "react-aria/private/virtualizer/ScrollView";
 import { VirtualizerItem } from "react-aria/private/virtualizer/VirtualizerItem";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useLabel } from "@react-aria/label";
 import { useFocusVisible, useFocusWithin, useHover as useHover$1 } from "@react-aria/interactions";
 import { useTranslation } from "react-i18next";
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/search.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData = {
-	name: "search",
-	size: 24,
-	node: [["path", {
-		d: "m21 21-4.34-4.34",
-		key: "14j7rj"
-	}], ["circle", {
-		cx: "11",
-		cy: "11",
-		r: "8",
-		key: "4ej97u"
-	}]]
-};
-__iconData.node;
-const Search = createLucideIcon(__iconData);
-//#endregion
 //#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Group.mjs
 const $3a442827418ebe87$export$f9c6924e160136d1 = /*#__PURE__*/ createContext({});
 //#endregion
@@ -883,12 +862,6 @@ let SelectContext;
 	};
 })(SelectContext || (SelectContext = {}));
 //#endregion
-//#region src/components/inputs/Selection/shared/selectInput.cva.ts
-const selectInputTagsContentWrapperDefinition = UIOverrides.defineConfig({
-	base: ["flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate"],
-	config: { variants: { isSearchable: { false: "pointer-events-none z-raised" } } }
-});
-//#endregion
 //#region src/hooks/useKeyInteractions.ts
 const KEY_TO_ACTION = {
 	ArrowUp: "up",
@@ -1127,50 +1100,17 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 				onPress: () => {
 					if (!isSearchable) setIsOpen(!isOpen);
 				},
-				children: /* @__PURE__ */ jsx("span", {
-					className: clsx("flex h-[1lh] w-6 shrink-0 items-center justify-center", isOpen && "rotate-180", "text-inherit"),
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-full max-h-5 fill-current stroke-0" })
+				children: /* @__PURE__ */ jsx(IconSlot, {
+					icon: ChevronDown,
+					className: clsx("text-inherit", isOpen && "rotate-180"),
+					iconClassName: "fill-current stroke-0",
+					"aria-hidden": "true"
 				})
 			})
 		]
 	});
 };
 //#endregion
-//#region src/components/inputs/Selection/shared/selectItem.cva.ts
-const selectListBoxItemDefinition = UIOverrides.defineConfig({
-	base: [
-		"group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item",
-		"border-b border-b-border-default-subtle outline-none bg-support-transparent-outline",
-		"font-body font-normal text-small",
-		"disabled:cursor-default",
-		"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-interactive-ring"
-	],
-	config: {
-		variants: {
-			isSingle: {
-				false: "",
-				true: "selected:bg-interactive-primary-background selected:text-interactive-primary-foreground selected:disabled:text-tint-interactive-primary-foreground/50"
-			},
-			isNewItem: {
-				true: "text-interactive-primary-background disabled:text-tint-interactive-primary-background/50",
-				false: "text-surface-default-foreground disabled:text-tint-surface-default-foreground/50"
-			}
-		},
-		compoundVariants: [{
-			isSingle: false,
-			className: ["not-disabled:not-focus-visible:hover:bg-tint-interactive-subtle-secondary-background/80 not-disabled:not-focus-visible:hover:text-tint-interactive-subtle-secondary-foreground/80", "not-disabled:focus-visible:bg-tint-interactive-subtle-secondary-background/60 not-disabled:focus-visible:text-tint-interactive-subtle-secondary-foreground/60"]
-		}, {
-			isSingle: true,
-			className: ["not-selected:not-disabled:not-focus-visible:hover:bg-tint-interactive-subtle-secondary-background/80 not-selected:not-disabled:not-focus-visible:hover:text-tint-interactive-subtle-secondary-foreground/80", "not-selected:not-disabled:focus-visible:bg-tint-interactive-subtle-secondary-background/60 not-selected:not-disabled:focus-visible:text-tint-interactive-subtle-secondary-foreground/60"]
-		}],
-		defaultVariants: {
-			isSingle: false,
-			isNewItem: false
-		}
-	}
-});
-//#endregion
 //#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
 const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
 	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
@@ -1419,9 +1359,6 @@ const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true
 	});
 };
 //#endregion
-//#region src/components/inputs/Selection/shared/selectDesktop.cva.ts
-const selectPopoverDefinition = UIOverrides.defineConfig({ base: ["my-4 outline-none"] });
-//#endregion
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
 const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isClearableIfDisabled, isLoading, as, size, collapseAfter, selectedTagsType } = props;
@@ -1582,7 +1519,7 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					triggerRef,
 					isOpen,
 					onOpenChange: setIsOpen,
-					className: selectPopoverCva({}),
+					className: clsx("origin-(--trigger-anchor-point) transition-[opacity,scale] duration-150 ease-out starting:scale-96 starting:opacity-0 entering:scale-96 entering:opacity-0 exiting:scale-96 exiting:opacity-0 exiting:duration-100 motion-reduce:transition-none", selectPopoverCva({})),
 					style: { width: !ignoreTriggerWidth ? popoverWidth : void 0 },
 					offset: 0,
 					children: /* @__PURE__ */ jsx(SelectListBox, {
@@ -1604,7 +1541,10 @@ const FormFieldHeaderClose = ({ onClose }) => {
 		onPress: onClose,
 		"aria-label": t(($) => $.ui.closeAlt),
 		className: "shrink-0 focus-visible:outline-interactive-ring",
-		children: /* @__PURE__ */ jsx(X, { className: "size-6 text-surface-default-foreground" })
+		children: /* @__PURE__ */ jsx(IconSlot, {
+			icon: X,
+			className: "text-surface-default-foreground"
+		})
 	});
 };
 //#endregion
@@ -1783,9 +1723,10 @@ const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size }
 		tabIndex: -1,
 		className: clsx("self-stretch border-0! pl-1.5 outline-none", inputSizeCva({ size })),
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("span", {
-			className: clsx("flex h-[1lh] w-6 shrink-0 items-center justify-center", "text-inherit"),
-			children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-full max-h-5 fill-current stroke-0" })
+		children: /* @__PURE__ */ jsx(IconSlot, {
+			icon: ChevronDown,
+			className: "text-inherit",
+			iconClassName: "fill-current stroke-0"
 		})
 	}) : void 0] });
 };
@@ -1841,4 +1782,4 @@ const getStaticSelectValue = ({ items, value, selectionMode, initialSelection, m
 	};
 };
 //#endregion
-export { selectListBoxItemDefinition as a, useKeyInteractions as c, selectPopoverDefinition as i, selectInputTagsContentWrapperDefinition as l, StaticSelectTrailingContent as n, createKeyInteractionsHandler as o, SelectBase as r, getKeyInteractionAction as s, getStaticSelectValue as t, useDebounceCallback as u };
+export { getKeyInteractionAction as a, createKeyInteractionsHandler as i, StaticSelectTrailingContent as n, useKeyInteractions as o, SelectBase as r, useDebounceCallback as s, getStaticSelectValue as t };

package/dist/stepper.cva-CZ0Kj-s7.js

@@ -0,0 +1,116 @@
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+//#region src/components/navigation/Stepper/stepper.cva.ts
+const stepperDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { orientation: {
+			horizontal: "flex flex-row items-center gap-stepper-gap-step-to-line-horizontal",
+			vertical: "inline-flex flex-col gap-stepper-gap-step-to-line-vertical"
+		} },
+		defaultVariants: { orientation: "horizontal" }
+	}
+});
+const stepperItemDefinition = UIOverrides.defineConfig({
+	base: ["flex shrink-0"],
+	config: {
+		variants: { contentOrientation: {
+			horizontal: "flex-row items-center gap-stepper-gap-icon-to-text-horizontal text-left",
+			vertical: "flex-col items-center gap-stepper-gap-icon-to-text-vertical text-center"
+		} },
+		defaultVariants: { contentOrientation: "horizontal" }
+	}
+});
+const stepperIconDefinition = UIOverrides.defineConfig({
+	base: ["inline-flex size-5 shrink-0 items-center justify-center rounded-stepper-rounding-icon"],
+	config: {
+		variants: { status: {
+			completed: [
+				"border border-interactive-primary-background border-solid bg-interactive-primary-background",
+				"group-hover:border-state-interactive-primary-background/hover group-hover:bg-state-interactive-primary-background/hover",
+				"group-pressed:border-state-interactive-primary-background/pressed group-pressed:bg-state-interactive-primary-background/pressed"
+			],
+			active: "border border-interactive-subtle-primary-foreground border-solid bg-support-transparent-outline",
+			todo: "border border-state-interactive-subtle-primary-foreground/disabled border-solid bg-support-transparent-outline"
+		} },
+		defaultVariants: { status: "todo" }
+	}
+});
+const stepperNumberDefinition = UIOverrides.defineConfig({
+	base: ["text-center align-middle"],
+	config: {
+		variants: { status: {
+			completed: "",
+			active: "text-interactive-subtle-primary-foreground",
+			todo: "text-state-interactive-subtle-primary-foreground/disabled"
+		} },
+		defaultVariants: { status: "todo" }
+	}
+});
+const stepperTitleDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { status: {
+			completed: [
+				"text-surface-default-foreground",
+				"group-hover:text-state-surface-default-foreground/hover",
+				"group-pressed:text-state-surface-default-foreground/pressed"
+			],
+			active: "text-interactive-primary-background",
+			todo: "text-state-surface-default-popover-foreground/disabled"
+		} },
+		defaultVariants: { status: "todo" }
+	}
+});
+const stepperSubtextDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { status: {
+			completed: [
+				"text-surface-default-foreground",
+				"group-hover:text-state-surface-default-foreground/hover",
+				"group-pressed:text-state-surface-default-foreground/pressed"
+			],
+			active: "text-surface-default-foreground",
+			todo: "text-state-surface-default-popover-foreground/disabled"
+		} },
+		defaultVariants: { status: "todo" }
+	}
+});
+const stepperSeparatorDefinition = UIOverrides.defineConfig({
+	base: ["bg-border-default-subtle"],
+	config: {
+		variants: {
+			orientation: {
+				horizontal: "h-px min-w-4 flex-1",
+				vertical: "min-h-16 w-px"
+			},
+			contentOrientation: {
+				horizontal: "",
+				vertical: ""
+			}
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+			contentOrientation: "horizontal"
+		},
+		compoundVariants: [
+			{
+				orientation: "horizontal",
+				contentOrientation: "vertical",
+				className: "mt-2.5 self-start"
+			},
+			{
+				orientation: "vertical",
+				contentOrientation: "vertical",
+				className: "self-center"
+			},
+			{
+				orientation: "vertical",
+				contentOrientation: "horizontal",
+				className: "ml-2.5"
+			}
+		]
+	}
+});
+//#endregion
+export { stepperSeparatorDefinition as a, stepperNumberDefinition as i, stepperIconDefinition as n, stepperSubtextDefinition as o, stepperItemDefinition as r, stepperTitleDefinition as s, stepperDefinition as t };

package/dist/style-merge.util-zLimKwt6.d.ts

@@ -0,0 +1,40 @@
+import { ClassProp, ClassValue, StringToBoolean } from "class-variance-authority/types";
+//#region src/utils/style-merge.util.d.ts
+declare namespace StyleMergeUtils {
+  export type OverrideMode = "merge" | "overrideEntry" | "overrideCva";
+  export interface CvaVariantMap {
+    [variant: string]: {
+      [value: string]: ClassValue;
+    };
+  }
+  export type ConfigSchema = CvaVariantMap;
+  export type ConfigVariants<TSchema extends ConfigSchema> = { [K in keyof TSchema]?: StringToBoolean<keyof NonNullable<TSchema[K]>> | null | undefined; };
+  export type ConfigVariantsMulti<TSchema extends ConfigSchema> = { [K in keyof TSchema]?: StringToBoolean<keyof NonNullable<TSchema[K]>> | StringToBoolean<keyof NonNullable<TSchema[K]>>[] | undefined; };
+  export interface Config<TSchema extends ConfigSchema> {
+    variants?: TSchema;
+    defaultVariants?: ConfigVariants<TSchema>;
+    compoundVariants?: Array<(ConfigVariants<TSchema> | ConfigVariantsMulti<TSchema>) & ClassProp>;
+  }
+  export interface CvaCompoundEntry {
+    [key: string]: unknown;
+    class?: ClassValue;
+    className?: ClassValue;
+  }
+  export interface CvaConfigShape {
+    variants?: CvaVariantMap;
+    compoundVariants?: CvaCompoundEntry[];
+    defaultVariants?: Record<string, unknown>;
+  }
+  export interface CvaDefinition<TConfig extends CvaConfigShape> {
+    base: string[];
+    config?: TConfig;
+  }
+  type DeepOptionalOverride<T> = T extends string ? string : T extends (infer U)[] ? DeepOptionalOverride<U>[] : T extends object ? { [K in keyof T]?: DeepOptionalOverride<T[K]>; } : T;
+  export type CvaConfigOverride<TConfig extends CvaConfigShape = CvaConfigShape> = DeepOptionalOverride<CvaDefinition<TConfig>> & {
+    mode: OverrideMode;
+  };
+  export const mergeCvaDefinition: <TConfig extends CvaConfigShape>(baseDefinition: CvaDefinition<TConfig>, override?: CvaConfigOverride<TConfig>) => CvaDefinition<TConfig>;
+  export {};
+}
+//#endregion
+export { StyleMergeUtils as t };

package/dist/styles/color-utilities.css

@@ -1,32 +1,20 @@
-/* /80 keeps 80% of the theme color and mixes in 20% white.
- * Opaque theme colors stay opaque. Use modifiers from 0 through 100.
- * Example: hover:bg-tint-interactive-primary-background/80
- */
-@utility bg-tint-* {
-  background-color: color-mix(in srgb, --value(--color-*) calc(--modifier(integer) * 1%), white);
+/* Example: hover:bg-state-interactive-primary-background/hover */
+@utility bg-state-* {
+  background-color: color-mix(in srgb, --value(--color-*), --modifier(--state-color-*) --modifier(--state-opacity-*));
 }
 
-/* Shade modifiers retain the same percentage of the theme color, mixing in black. */
-@utility bg-shade-* {
-  background-color: color-mix(in srgb, --value(--color-*) calc(--modifier(integer) * 1%), black);
+@utility border-state-* {
+  border-color: color-mix(in srgb, --value(--color-*), --modifier(--state-color-*) --modifier(--state-opacity-*));
 }
 
-@utility border-tint-* {
-  border-color: color-mix(in srgb, --value(--color-*) calc(--modifier(integer) * 1%), white);
+@utility border-b-state-* {
+  border-bottom-color: color-mix(
+    in srgb,
+    --value(--color-*),
+    --modifier(--state-color-*) --modifier(--state-opacity-*)
+  );
 }
 
-@utility border-shade-* {
-  border-color: color-mix(in srgb, --value(--color-*) calc(--modifier(integer) * 1%), black);
-}
-
-@utility border-b-tint-* {
-  border-bottom-color: color-mix(in srgb, --value(--color-*) calc(--modifier(integer) * 1%), white);
-}
-
-@utility text-tint-* {
-  color: color-mix(in srgb, --value(--color-*) calc(--modifier(integer) * 1%), white);
-}
-
-@utility text-shade-* {
-  color: color-mix(in srgb, --value(--color-*) calc(--modifier(integer) * 1%), black);
+@utility text-state-* {
+  color: color-mix(in srgb, --value(--color-*), --modifier(--state-color-*) --modifier(--state-opacity-*));
 }