@povio/ui 5.0.0-rc.2 → 5.0.0-rc.4

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

@@ -1,38 +1,37 @@
-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-CpC3wlMs.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 { 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 "./popoverAnimation-DEZSvKP8.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-B99dLt8o.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-3jyN0Wss.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 +46,10 @@ 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 { usePreventScroll } from "react-aria";
 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
@@ -355,142 +331,6 @@ function $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView,
 	return indicator;
 }
 //#endregion
-//#region ../../node_modules/.bun/react-aria@3.52.1+67f6792bdf102c28/node_modules/react-aria/dist/private/utils/keyboard.mjs
-const $bb39c0fc1c19b34c$var$nonTextInputTypes = /* @__PURE__ */ new Set([
-	"checkbox",
-	"radio",
-	"range",
-	"color",
-	"file",
-	"image",
-	"button",
-	"submit",
-	"reset"
-]);
-function $bb39c0fc1c19b34c$export$c57958e35f31ed73(target) {
-	return target instanceof HTMLInputElement && !$bb39c0fc1c19b34c$var$nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
-}
-//#endregion
-//#region ../../node_modules/.bun/react-aria@3.52.1+67f6792bdf102c28/node_modules/react-aria/dist/private/overlays/usePreventScroll.mjs
-const $0644e3663365bfe5$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
-let $0644e3663365bfe5$var$preventScrollCount = 0;
-let $0644e3663365bfe5$var$restore;
-function $0644e3663365bfe5$export$ee0f7cc6afcd1c18(options = {}) {
-	let { isDisabled } = options;
-	$c4867b2f328c2698$export$e5c5a5f917a5871c(() => {
-		if (isDisabled) return;
-		$0644e3663365bfe5$var$preventScrollCount++;
-		if ($0644e3663365bfe5$var$preventScrollCount === 1) {
-			if ($2add3ce32c6007eb$export$fedb369cb70207f1() && $2add3ce32c6007eb$export$78551043582a6a98()) $0644e3663365bfe5$var$restore = $0644e3663365bfe5$var$preventScrollMobileWebKit();
-			else $0644e3663365bfe5$var$restore = $0644e3663365bfe5$var$preventScrollStandard();
-		}
-		return () => {
-			$0644e3663365bfe5$var$preventScrollCount--;
-			if ($0644e3663365bfe5$var$preventScrollCount === 0) $0644e3663365bfe5$var$restore();
-		};
-	}, [isDisabled]);
-}
-function $0644e3663365bfe5$var$preventScrollStandard() {
-	let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-	return $a4e76a5424781910$export$e08e3b67e392101e(scrollbarWidth > 0 && ("scrollbarGutter" in document.documentElement.style ? $d447af545b77c9f1$export$37a5fde709c1db82(document.documentElement, "scrollbar-gutter", "stable") : $d447af545b77c9f1$export$37a5fde709c1db82(document.documentElement, "padding-right", `${scrollbarWidth}px`)), $d447af545b77c9f1$export$37a5fde709c1db82(document.documentElement, "overflow", "hidden"));
-}
-function $0644e3663365bfe5$var$preventScrollMobileWebKit() {
-	let restoreOverflow = $d447af545b77c9f1$export$37a5fde709c1db82(document.documentElement, "overflow", "hidden");
-	let scrollable;
-	let allowTouchMove = false;
-	let onTouchStart = (e) => {
-		let target = $23f2114a1b82827e$export$e58f029f0fbfdb29(e);
-		scrollable = $901761b40e390936$export$2bb74740c4e19def(target) ? target : $3578607fe3d4b096$export$cfa2225e87938781(target, true);
-		allowTouchMove = false;
-		let selection = target.ownerDocument.defaultView.getSelection();
-		if (selection && !selection.isCollapsed && selection.containsNode(target, true)) allowTouchMove = true;
-		if (e.composedPath().some((el) => el instanceof HTMLInputElement && el.type === "range")) allowTouchMove = true;
-		if ("selectionStart" in target && "selectionEnd" in target && target.selectionStart < target.selectionEnd && target.ownerDocument.activeElement === target) allowTouchMove = true;
-	};
-	let style = document.createElement("style");
-	let nonce = $2b2d34ff061957fb$export$2b85b721e524d74b();
-	if (nonce) style.nonce = nonce;
-	style.textContent = `
-@layer {
-  * {
-    overscroll-behavior: contain;
-  }
-}`.trim();
-	document.head.prepend(style);
-	let onTouchMove = (e) => {
-		if (e.touches.length === 2 || allowTouchMove) return;
-		if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
-			e.preventDefault();
-			return;
-		}
-		if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) e.preventDefault();
-	};
-	let onBlur = (e) => {
-		let target = $23f2114a1b82827e$export$e58f029f0fbfdb29(e);
-		let relatedTarget = e.relatedTarget;
-		if (relatedTarget && $bb39c0fc1c19b34c$export$c57958e35f31ed73(relatedTarget)) {
-			relatedTarget.focus({ preventScroll: true });
-			$0644e3663365bfe5$var$scrollIntoViewWhenReady(relatedTarget, $bb39c0fc1c19b34c$export$c57958e35f31ed73(target));
-		} else if (!relatedTarget) (target.parentElement?.closest("[tabindex]"))?.focus({ preventScroll: true });
-	};
-	let focus = HTMLElement.prototype.focus;
-	Reflect.defineProperty(HTMLElement.prototype, "focus", {
-		configurable: true,
-		writable: true,
-		value: function(opts) {
-			let activeElement = $23f2114a1b82827e$export$cd4e5573fbe2b576();
-			let wasKeyboardVisible = activeElement != null && $bb39c0fc1c19b34c$export$c57958e35f31ed73(activeElement);
-			focus.call(this, {
-				...opts,
-				preventScroll: true
-			});
-			if (!opts || !opts.preventScroll) $0644e3663365bfe5$var$scrollIntoViewWhenReady(this, wasKeyboardVisible);
-		}
-	});
-	let removeEvents = $a4e76a5424781910$export$e08e3b67e392101e($d447af545b77c9f1$export$f531f92e2a15358f(document, "touchstart", onTouchStart, {
-		passive: false,
-		capture: true
-	}), $d447af545b77c9f1$export$f531f92e2a15358f(document, "touchmove", onTouchMove, {
-		passive: false,
-		capture: true
-	}), $d447af545b77c9f1$export$f531f92e2a15358f(document, "blur", onBlur, true));
-	return () => {
-		restoreOverflow();
-		removeEvents();
-		style.remove();
-		Reflect.defineProperty(HTMLElement.prototype, "focus", {
-			configurable: true,
-			writable: true,
-			value: focus
-		});
-	};
-}
-function $0644e3663365bfe5$var$scrollIntoViewWhenReady(target, wasKeyboardVisible) {
-	if (wasKeyboardVisible || !$0644e3663365bfe5$var$visualViewport) $0644e3663365bfe5$var$scrollIntoView(target);
-	else $0644e3663365bfe5$var$visualViewport.addEventListener("resize", () => $0644e3663365bfe5$var$scrollIntoView(target), { once: true });
-}
-function $0644e3663365bfe5$var$scrollIntoView(target) {
-	let root = document.scrollingElement || document.documentElement;
-	let nextTarget = target;
-	while (nextTarget && nextTarget !== root) {
-		let scrollable = $3578607fe3d4b096$export$cfa2225e87938781(nextTarget);
-		if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
-			let scrollableRect = scrollable.getBoundingClientRect();
-			let targetRect = nextTarget.getBoundingClientRect();
-			if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
-				let bottom = scrollableRect.bottom;
-				if ($0644e3663365bfe5$var$visualViewport) bottom = Math.min(bottom, $0644e3663365bfe5$var$visualViewport.offsetTop + $0644e3663365bfe5$var$visualViewport.height);
-				let adjustment = targetRect.top - scrollableRect.top - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
-				scrollable.scrollTo({
-					top: Math.max(0, Math.min(scrollable.scrollHeight - scrollable.clientHeight, scrollable.scrollTop + adjustment)),
-					behavior: "smooth"
-				});
-			}
-		}
-		nextTarget = scrollable.parentElement;
-	}
-}
-//#endregion
 //#region src/components/inputs/Selection/shared/SelectInputTags.tsx
 const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {
 	const { displayedItems, remainingCount } = useMemo(() => {
@@ -883,12 +723,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 +961,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 +1220,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;
@@ -1448,7 +1246,7 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 	const [popoverWidth, setPopoverWidth] = useState(void 0);
 	const [isPopoverAbove, setIsPopoverAbove] = useState(false);
 	const { fieldState, isOpen, setIsOpen, onInputChange, onChange, onClear, onSelectAll, listItems, selectableListItems, selectedIds, isMultiple } = SelectContext.useSelect();
-	$0644e3663365bfe5$export$ee0f7cc6afcd1c18({ isDisabled: !isOpen });
+	usePreventScroll({ isDisabled: !isOpen });
 	useLayoutEffect(() => {
 		if (!isOpen || !wrapperRef.current) return;
 		setPopoverWidth(wrapperRef.current.getBoundingClientRect().width);
@@ -1582,7 +1380,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 +1402,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 +1584,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 +1643,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-*));
 }