@povio/ui 2.2.1 → 2.2.3

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -1,49 +1,32 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { inputBase, inputSide, inputSize } from "../../shared/input.cva.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { ns } from "../../../../config/i18n.js";
 import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { use, useMemo, useState } from "react";
+import { use, useMemo, useRef, useState } from "react";
 import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import useMeasure from "react-use-measure";
 import { useTranslation } from "react-i18next";
 const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
-	const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
-	const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const { t } = useTranslation("ui");
 	const state = use(ComboBoxStateContext);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
-	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	const inputRef = useRef(null);
 	const { fieldState, isOpen, setIsOpen, listItems, selectedItems, onChange, onClear, onRemove, isMultiple, isLoading } = SelectContext.useSelect();
 	const isEmpty = selectedItems.length === 0;
 	const showTags = isMultiple && !isEmpty;
 	const showClearButton = isClearable && isHovered && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
-	const style = useMemo(() => {
-		if (as !== "filter") return {};
-		return { paddingLeft: `calc(${isSearchable || showTags ? "1 * " : "2 * "}var(${inputSideCva({
-			size,
-			type: "var"
-		})}) + ${labelWidth}px)` };
-	}, [
-		labelWidth,
-		as,
-		size,
-		isSearchable,
-		showTags,
-		inputSideCva
-	]);
 	const labelProps = useMemo(() => {
 		const { labelProps: headerLabelProps } = headerProps ?? {};
 		if (!(as && ["filter", "floating"].includes(as)) || isSearchable) return headerLabelProps;
@@ -64,13 +47,21 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		}
 		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) onChange(fieldState.value.slice(0, -1));
 	};
+	const onClick = () => {
+		if (isDisabled) return;
+		if (!isSearchable) {
+			setIsOpen(!isOpen);
+			return;
+		}
+		inputRef.current?.focus();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: inputBaseCva({
 			variant,
 			as,
 			...props,
-			className: clsx("group/select-content relative flex px-0!", isSearchable && "cursor-text", className)
+			className: clsx("group/select-content relative flex px-0!", !isDisabled && isSearchable && "cursor-text", className)
 		}),
 		"data-rac": "",
 		"data-disabled": isDisabled || void 0,
@@ -88,21 +79,20 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		...focusWithinProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx("relative flex flex-1 items-center truncate", showTags && inputSizeCva({
+				className: clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
 					as,
 					size,
 					...props
 				})),
+				onClick,
 				children: [
 					as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-						ref: labelContentRef,
 						as,
 						...headerProps,
 						labelProps
 					}),
 					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
-						className: clsx("flex flex-1 flex-wrap gap-2 truncate", !isSearchable && "pointer-events-none z-1"),
-						style,
+						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
 						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
 							selectedItems,
 							isDisabled,
@@ -110,14 +100,10 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 							selectedTagsType,
 							onRemove
 						}), isSearchable && /* @__PURE__ */ jsx(Input, {
+							ref: inputRef,
 							placeholder: as === "floating" ? void 0 : placeholder,
 							onBlur,
-							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", !showTags && inputSizeCva({
-								as,
-								size,
-								...props,
-								className: "rounded-input-rounding-default"
-							}), inputClassName),
+							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", inputClassName),
 							onKeyDown,
 							...fieldProps
 						})]
@@ -127,13 +113,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 						onPress: () => setIsOpen(!isOpen),
 						onBlur,
 						"data-type": "select-trigger",
-						className: inputSizeCva({
-							size,
-							as,
-							...props,
-							className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0")
-						}),
-						style,
+						className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0"),
 						...fieldProps,
 						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
 							size: "label-1",
@@ -143,7 +123,10 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 					})
 				]
 			}),
-			showClearButton && /* @__PURE__ */ jsx(InputClear, { onClear }),
+			isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: showClearButton
+			}),
 			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),

package/dist/components/inputs/Slider/Slider.js

@@ -1,6 +1,6 @@
 import { Typography } from "../../text/Typography/Typography.js";
-import { uiOutlineClass } from "../../outline.clsx.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
 import { FormField } from "../FormField/FormField.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -1,6 +1,8 @@
-import { uiOutlineClass } from "../../outline.clsx.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { isEqual } from "../../../utils/isEqual.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
 import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { inputSide } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
 import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -40,6 +42,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
+	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
 	const formFieldProps = {
 		error,
 		label,
@@ -112,7 +115,11 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 				className: clsx("relative overflow-auto", as === "floating" && "pt-3"),
 				children: [as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 					as,
-					...headerProps
+					...headerProps,
+					className: clsx(headerProps.className, inputSideCva({
+						size: "default",
+						type: "left"
+					}))
 				}), /* @__PURE__ */ jsx(EditorContent, {
 					editor,
 					placeholder: as === "floating" ? "" : placeholder,

package/dist/components/inputs/Toggle/Toggle.js

@@ -1,7 +1,7 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
 import { toggle, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -10,9 +10,8 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const uiStyle = UIStyle.useConfig();
-	const toggleCva = uiStyle?.toggle?.cva ?? toggle;
-	const toggleTypographyMap = uiStyle?.toggle?.typography ?? toggleTypography;
+	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
+	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,

package/dist/components/inputs/shared/CheckContent.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 const CheckContent = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx$1((UIStyle.useConfig()?.typography?.cva ?? typography)({
+		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
 			variant: "default",
 			...props.typography,

package/dist/components/inputs/shared/InputClear.d.ts

@@ -1,8 +1,9 @@
 import { CSSProperties } from 'react';
 interface InputClearProps {
     onClear: () => void;
+    show?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-export declare const InputClear: ({ onClear, className, style }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputClear: ({ onClear, className, style, show }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/InputClear.js

@@ -4,11 +4,11 @@ import { ns } from "../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-const InputClear = ({ onClear, className, style }) => {
+const InputClear = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",
-		className: clsx("group-hover/date-picker-content:flex! group-hover/select-content:flex! hidden! group-hover:flex! group-focus-within:flex! items-center", className),
+		className: clsx("invisible flex items-center", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
 		label: t(($) => $.ui.clearAlt),
 		icon: CloseIcon,
 		onPress: onClear,

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

@@ -16,9 +16,11 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"h-full",
 				"border-transparent border-b-0 bg-transparent text-text-default-1",
 				"hover:border-input-outlined-outline-hover",
-				"focus:border-input-outlined-outline-active",
+				"focus-within:border-input-outlined-outline-active",
 				"invalid:border-input-outlined-outline-error",
-				"disabled:hover:border-transparent"
+				"has-invalid:border-input-outlined-outline-error",
+				"disabled:hover:border-transparent",
+				"has-disabled:hover:border-transparent"
 			]
 		}
 	},
@@ -31,9 +33,12 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
 				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
-				"focus-visible:outline-interactive-contained-primary-focus"
+				"focus-visible:outline-interactive-contained-primary-focus",
+				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
 		},
 		{
@@ -44,9 +49,12 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
 				"focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
 				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+				"has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
 				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
+				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
-				"focus-visible:outline-interactive-contained-primary-focus"
+				"focus-visible:outline-interactive-contained-primary-focus",
+				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
 		},
 		{
@@ -57,9 +65,12 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
 				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
-				"focus-visible:outline-interactive-contained-primary-focus"
+				"focus-visible:outline-interactive-contained-primary-focus",
+				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
 		},
 		{
@@ -69,10 +80,13 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"border border-transparent border-solid bg-input-filled-idle text-text-default-1",
 				"hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
-				"invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+				"has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
 				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
+				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
-				"focus-visible:outline-interactive-contained-primary-focus"
+				"focus-visible:outline-interactive-contained-primary-focus",
+				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
 		},
 		{
@@ -83,9 +97,12 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
 				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
-				"focus-visible:outline-interactive-contained-primary-focus"
+				"focus-visible:outline-interactive-contained-primary-focus",
+				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
 		},
 		{
@@ -95,10 +112,13 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"border border-transparent border-solid bg-input-filled-idle text-text-default-1",
 				"hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
 				"focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+				"has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
 				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
 				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
+				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
-				"focus-visible:outline-interactive-contained-primary-focus"
+				"focus-visible:outline-interactive-contained-primary-focus",
+				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
 		}
 	],
@@ -119,19 +139,9 @@ const inputSize = cva("", {
 			default: "",
 			floating: [
 				"px-input-side-m",
-				"py-floating-label-input-height-empty!",
-				"group-has-[input:not(:placeholder-shown)]/input-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
-				"group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"group-has-[input:not(:placeholder-shown)]/select-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
-				"group-has-[input:not(:placeholder-shown)]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"group-data-[has-selection]/select-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
-				"group-data-[has-selection]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"group-data-[has-search]/select-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
-				"group-data-[has-search]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"data-[datetime-input]:data-[has-selection]:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
-				"data-[datetime-input]:data-[has-selection]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"data-[datetime-input]:data-[focus-within]:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
-				"data-[datetime-input]:data-[focus-within]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!"
+				"py-floating-label-input-height-empty",
+				"input-filled:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]",
+				"input-filled:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]"
 			],
 			filter: "",
 			inline: ""
@@ -259,9 +269,8 @@ const inputSide = cva("", {
 	defaultVariants: { size: "default" }
 });
 const useInputCva = () => {
-	const uiStyle = UIStyle.useConfig();
-	const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
-	const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	return ({ className, ...rest }) => {
 		return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
 	};

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

@@ -3,51 +3,23 @@ import { cva } from "class-variance-authority";
 const labelBase = cva("", {
 	variants: { as: {
 		default: ["flex items-start gap-1 text-text-default-1"],
-		filter: ["absolute top-1/2 -translate-y-1/2 text-text-default-1"],
+		filter: ["text-text-default-1"],
 		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 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
-			"group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
-			"group-disabled/text-editor:text-interactive-text-secondary-disabled",
-			"group-has-[input:disabled]/select-content:text-interactive-text-secondary-disabled",
-			"group-has-[textarea:disabled]/text-area:text-interactive-text-secondary-disabled",
+			"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-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-has-[input:not(:placeholder-shown)]/input-content:top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))] group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
 			"group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
-			"group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
-			"group-has-[textarea:placeholder-shown]/text-area:font-medium!",
-			"group-data-[is-filled=true]/text-editor:hidden",
-			"group-has-[data-text-editor:placeholder-shown]/text-editor:text-text-default-3",
-			"group-has-[data-text-editor:placeholder-shown]/text-editor:font-medium!",
-			"group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
-			"group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
-			"group-data-[has-selection]/select-content:top-1 group-data-[has-selection]/select-content:translate-y-0",
-			"group-data-[searchable-focus-within]/select-content:top-1 group-data-[searchable-focus-within]/select-content:translate-y-0",
-			"group-data-[has-search]/select-content:top-1 group-data-[has-search]/select-content:translate-y-0",
-			"group-has-[input:placeholder-shown]/input-content:text-text-default-3",
-			"group-has-[input:placeholder-shown]/input-content:font-medium!",
-			"group-has-[input:not(:placeholder-shown)]/input-content:font-semibold!",
-			"group-has-[input:not(:placeholder-shown)]/input-content:text-label-3!",
-			"group-has-[input:not(:placeholder-shown)]/input-content:text-text-default-1",
-			"group-data-[has-selection]/date-picker-content:font-semibold!",
-			"group-data-[has-selection]/date-picker-content:text-label-3!",
-			"group-data-[has-selection]/date-picker-content:text-text-default-1",
-			"group-focus-within/date-picker-content:font-semibold!",
-			"group-focus-within/date-picker-content:text-label-3!",
-			"group-focus-within/date-picker-content:text-text-default-1",
-			"group-data-[has-selection]/select-content:font-semibold!",
-			"group-data-[has-selection]/select-content:text-label-3!",
-			"group-data-[has-selection]/select-content:text-text-default-1",
-			"group-data-[searchable-focus-within]/select-content:font-semibold!",
-			"group-data-[searchable-focus-within]/select-content:text-label-3!",
-			"group-data-[searchable-focus-within]/select-content:text-text-default-1",
-			"group-data-[has-search]/select-content:font-semibold!",
-			"group-data-[has-search]/select-content:text-label-3!",
-			"group-data-[has-search]/select-content:text-text-default-1"
+			"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" }

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

@@ -10,7 +10,7 @@ const Accordion = ({ items, variant = "filled", actionPosition = "right", allows
 		expandedKeys,
 		defaultExpandedKeys,
 		onExpandedChange,
-		className: clsx((UIStyle.useConfig()?.accordion?.cva ?? accordionCva)({
+		className: clsx(UIStyle.useCva("accordion.cva", accordionCva)({
 			className,
 			variant,
 			singleItem: items.length === 1

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

@@ -5,16 +5,15 @@ import { accordionChevronCva, accordionHeadingCva, accordionHeadingSubtitleCva,
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
 const AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
-	const uiStyle = UIStyle.useConfig();
-	const itemCva = uiStyle?.accordion?.itemCva ?? accordionItemCva;
-	const triggerCva = uiStyle?.accordion?.triggerCva ?? accordionTriggerCva;
-	const headingCva = uiStyle?.accordion?.headingCva ?? accordionHeadingCva;
-	const headingTitleCva = uiStyle?.accordion?.headingTitleCva ?? accordionHeadingTitleCva;
-	const headingSubtitleCva = uiStyle?.accordion?.headingSubtitleCva ?? accordionHeadingSubtitleCva;
-	const chevronCva = uiStyle?.accordion?.chevronCva ?? accordionChevronCva;
-	const iconCva = uiStyle?.accordion?.iconCva ?? accordionIconCva;
-	const panelCva = uiStyle?.accordion?.panelCva ?? accordionPanelCva;
-	const panelContentCva = uiStyle?.accordion?.panelContentCva ?? accordionPanelContentCva;
+	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);
 	return /* @__PURE__ */ jsx(Disclosure, {
 		id,
 		className: itemCva({

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

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 const Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: (UIStyle.useConfig()?.stepper?.cva ?? stepperCva)({
+		className: UIStyle.useCva("stepper.cva", stepperCva)({
 			orientation,
 			className
 		}),

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

@@ -6,12 +6,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
 const StepperItem = ({ step, stepNumber, status, contentOrientation, iconsOnly, titlesOnly, onPress }) => {
-	const uiStyle = UIStyle.useConfig();
-	const stepperItemCva$1 = uiStyle?.stepper?.itemCva ?? stepperItemCva;
-	const stepperIconCva$1 = uiStyle?.stepper?.iconCva ?? stepperIconCva;
-	const stepperNumberCva$1 = uiStyle?.stepper?.numberCva ?? stepperNumberCva;
-	const stepperTitleCva$1 = uiStyle?.stepper?.titleCva ?? stepperTitleCva;
-	const stepperSubtextCva$1 = uiStyle?.stepper?.subtextCva ?? stepperSubtextCva;
+	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 showTitle = !iconsOnly;
 	const showSubtext = !iconsOnly && !titlesOnly && !!step.subtext;
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {

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

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { stepperSeparatorCva } from "./stepper.cva.js";
 import { jsx } from "react/jsx-runtime";
 const StepperSeparator = ({ orientation, contentOrientation }) => {
-	return /* @__PURE__ */ jsx("div", { className: (UIStyle.useConfig()?.stepper?.separatorCva ?? stepperSeparatorCva)({
+	return /* @__PURE__ */ jsx("div", { className: UIStyle.useCva("stepper.separatorCva", stepperSeparatorCva)({
 		orientation,
 		contentOrientation
 	}) });

package/dist/components/outline.clsx.js

@@ -1,4 +1,4 @@
 import { clsx } from "clsx";
-const uiOutlineClass = clsx("focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2");
+const uiOutlineClass = clsx("focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2", "has-focus-visible:outline has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:outline-offset-2");
 const uiGroupOutlineClass = clsx("group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2");
 export { uiGroupOutlineClass, uiOutlineClass };

package/dist/components/overlays/ActionModal/ActionModal.d.ts

@@ -1,5 +1,6 @@
 import { ButtonVariantProps } from '../../buttons/Button/button.cva';
 import { ModalProps } from '../Modal/Modal';
+import { TypographyPropsCva } from '../../text/Typography/Typography';
 interface ActionModalAction {
     label: string;
     onPress: () => void;
@@ -14,6 +15,10 @@ export interface ActionModalProps extends ModalProps {
     secondaryAction?: ActionModalAction;
     buttonSize?: ButtonVariantProps["size"];
     textAlign?: "left" | "center" | "right";
+    titleTypography?: TypographyPropsCva;
+    titleClassName?: string;
+    descriptionTypography?: TypographyPropsCva;
+    descriptionClassName?: string;
 }
-export declare const ActionModal: ({ heading, description, primaryAction, secondaryAction, buttonSize, textAlign, modalClassName, ...modalProps }: ActionModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionModal: ({ heading, description, primaryAction, secondaryAction, buttonSize, textAlign, modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }: ActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -1,4 +1,5 @@
 import { Typography } from "../../text/Typography/Typography.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
 import { Modal } from "../Modal/Modal.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +9,8 @@ var textAlignClassMap = {
 	center: "text-center",
 	right: "text-right"
 };
-const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, ...modalProps }) => {
+const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }) => {
+	const ui = UIConfig.useConfig();
 	const textAlignClass = textAlignClassMap[textAlign];
 	return /* @__PURE__ */ jsxs(Modal, {
 		modalClassName: clsx("w-modal", modalClassName),
@@ -16,14 +18,13 @@ const ActionModal = ({ heading, description, primaryAction, secondaryAction, but
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-modal-gap-text",
 			children: [/* @__PURE__ */ jsx(Typography, {
-				size: "title-5",
-				variant: "prominent-1",
+				...titleTypography ?? ui.actionModal.titleTypography,
 				as: "h2",
-				className: clsx("text-text-default-1", textAlignClass),
+				className: clsx("text-text-default-1", textAlignClass, titleClassName),
 				children: heading
 			}), /* @__PURE__ */ jsx(Typography, {
-				size: "body-3",
-				className: clsx("text-text-default-1", textAlignClass),
+				...descriptionTypography ?? ui.actionModal.descriptionTypography,
+				className: clsx("text-text-default-1", textAlignClass, descriptionClassName),
 				children: description
 			})]
 		}), /* @__PURE__ */ jsxs("div", {

package/dist/components/overlays/Modal/Modal.d.ts

@@ -9,6 +9,7 @@ export interface ModalProps extends ModalVariantProps {
     overlayClassName?: string;
     showCloseIcon?: boolean;
     isDismissable?: boolean;
+    isKeyboardDismissable?: boolean;
     shouldCloseOnInteractOutside?: () => boolean;
 }
-export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, shouldCloseOnInteractOutside, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, isKeyboardDismissable, shouldCloseOnInteractOutside, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.js

@@ -7,12 +7,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, shouldCloseOnInteractOutside }) => {
+const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
 	const { t } = useTranslation("ui");
-	const uiStyle = UIStyle.useConfig();
-	const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
-	const modalContentCva = uiStyle?.modal?.contentCva ?? modalContent;
-	const modalOverlayCva = uiStyle?.modal?.overlayCva ?? modalOverlay;
+	const modalMainCva = UIStyle.useCva("modal.mainCva", modalMain);
+	const modalContentCva = UIStyle.useCva("modal.contentCva", modalContent);
+	const modalOverlayCva = UIStyle.useCva("modal.overlayCva", modalOverlay);
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: modalOverlayCva({
@@ -20,6 +19,7 @@ const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalCl
 			className: overlayClassName
 		}),
 		isDismissable,
+		isKeyboardDismissDisabled: !(isKeyboardDismissable ?? isDismissable),
 		isOpen,
 		shouldCloseOnInteractOutside: () => {
 			if (shouldCloseOnInteractOutside) {