@povio/ui 2.2.0 → 2.2.2

package/dist/{select.context.js → components/inputs/Selection/shared/select.context.js}

@@ -1,5 +1,5 @@
 import { NewItemId, useSelectItems } from "./useSelectItems.js";
-import { useDebounceCallback } from "./useDebounceCallback.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 let SelectContext;
@@ -9,7 +9,7 @@ let SelectContext;
 		id: item.id,
 		label: item.label ?? item.name ?? ""
 	});
-	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem = defaultMapInitialToSelectItem,...props }) => {
+	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;

package/dist/{Slider.js → components/inputs/Slider/Slider.js}

@@ -1,7 +1,7 @@
-import { Typography } from "./Typography.js";
-import { uiOutlineClass } from "./outline.clsx.js";
-import { UIConfig } from "./uiConfig.context.js";
-import { FormField } from "./FormField.js";
+import { Typography } from "../../text/Typography/Typography.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";
 import { Slider, SliderThumb, SliderTrack } from "react-aria-components";
@@ -9,7 +9,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 var SliderBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel = ui.input.hideLabel, minValue = ui.slider.minValue, maxValue = ui.slider.maxValue,...rest } = props;
+	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel = ui.input.hideLabel, minValue = ui.slider.minValue, maxValue = ui.slider.maxValue, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -74,7 +74,7 @@ var SliderBase = (props) => {
 };
 const Slider$1 = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{TextEditor.js → components/inputs/TextEditor/TextEditor.js}

@@ -1,8 +1,10 @@
-import { uiOutlineClass } from "./outline.clsx.js";
-import { isEqual } from "./isEqual.js";
-import { FormFieldLabel } from "./FormFieldLabel.js";
-import { FormField } from "./FormField.js";
-import { TextEditorToolbar } from "./TextEditorToolbar.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";
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
@@ -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,
@@ -124,7 +131,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 };
 const TextEditor = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{ColorPickerDropdown.js → components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js}

@@ -1,6 +1,6 @@
-import { ArrowDropDownIcon } from "./ArrowDropDown.js";
-import { Typography } from "./Typography.js";
-import { useInputCva } from "./input.cva.js";
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { useInputCva } from "../../shared/input.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{HyperlinkAction.js → components/inputs/TextEditor/Toolbar/HyperlinkAction.js}

@@ -1,9 +1,9 @@
-import { LinkIcon } from "./Link.js";
-import { Button } from "./Button.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
-import { TextInput } from "./TextInput.js";
-import { ResponsivePopover } from "./ResponsivePopover.js";
+import { LinkIcon } from "../../../../assets/icons/Link.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
+import { TextInput } from "../../Input/TextInput/TextInput.js";
+import { ResponsivePopover } from "../../../overlays/ResponsivePopover/ResponsivePopover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useState } from "react";

package/dist/{TextAlignSelect.js → components/inputs/TextEditor/Toolbar/TextAlignSelect.js}

@@ -1,9 +1,9 @@
-import { AlignCenterIcon } from "./AlignCenter.js";
-import { AlignLeftIcon } from "./AlignLeft.js";
-import { AlignLeftRightIcon } from "./AlignLeftRight.js";
-import { AlignRightIcon } from "./AlignRight.js";
-import { ns } from "./i18n.js";
-import { Select } from "./Select.js";
+import { AlignCenterIcon } from "../../../../assets/icons/AlignCenter.js";
+import { AlignLeftIcon } from "../../../../assets/icons/AlignLeft.js";
+import { AlignLeftRightIcon } from "../../../../assets/icons/AlignLeftRight.js";
+import { AlignRightIcon } from "../../../../assets/icons/AlignRight.js";
+import { ns } from "../../../../config/i18n.js";
+import { Select } from "../../Selection/Select/Select.js";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 const TextAlignSelect = ({ editor }) => {

package/dist/{TextColorSelect.js → components/inputs/TextEditor/Toolbar/TextColorSelect.js}

@@ -1,6 +1,6 @@
-import { TextColorIcon } from "./TextColor.js";
+import { TextColorIcon } from "../../../../assets/icons/TextColor.js";
 import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "./textEditor.types.js";
+import { defaultColors } from "../textEditor.types.js";
 import { jsx } from "react/jsx-runtime";
 const TextColorSelect = ({ editor }) => {
 	if (!editor.extensionManager.extensions.some((extension) => extension.name === "color")) return null;

package/dist/{TextHighlightSelect.js → components/inputs/TextEditor/Toolbar/TextHighlightSelect.js}

@@ -1,7 +1,7 @@
-import { HighlightIcon } from "./Highlight.js";
-import { HighlightOnIcon } from "./HighlightOn.js";
+import { HighlightIcon } from "../../../../assets/icons/Highlight.js";
+import { HighlightOnIcon } from "../../../../assets/icons/HighlightOn.js";
 import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "./textEditor.types.js";
+import { defaultColors } from "../textEditor.types.js";
 import { jsx } from "react/jsx-runtime";
 const TextHighlightSelect = ({ editor }) => {
 	if (!editor.extensionManager.extensions.some((extension) => extension.name === "highlight")) return null;

package/dist/{TextListActions.js → components/inputs/TextEditor/Toolbar/TextListActions.js}

@@ -1,7 +1,7 @@
-import { BulletedListIcon } from "./BulletedList.js";
-import { NumberedListIcon } from "./NumberedList.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
+import { BulletedListIcon } from "../../../../assets/icons/BulletedList.js";
+import { NumberedListIcon } from "../../../../assets/icons/NumberedList.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/{TextMarksActions.js → components/inputs/TextEditor/Toolbar/TextMarksActions.js}

@@ -1,9 +1,9 @@
-import { BoldIcon } from "./Bold.js";
-import { ItalicIcon } from "./Italic.js";
-import { StrikethroughIcon } from "./Strikethrough.js";
-import { UnderlinedIcon } from "./Underlined.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
+import { BoldIcon } from "../../../../assets/icons/Bold.js";
+import { ItalicIcon } from "../../../../assets/icons/Italic.js";
+import { StrikethroughIcon } from "../../../../assets/icons/Strikethrough.js";
+import { UnderlinedIcon } from "../../../../assets/icons/Underlined.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/{TextStyleSelect.js → components/inputs/TextEditor/Toolbar/TextStyleSelect.js}

@@ -1,6 +1,6 @@
-import { Typography } from "./Typography.js";
-import { ns } from "./i18n.js";
-import { Select } from "./Select.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { Select } from "../../Selection/Select/Select.js";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 const TextStyleSelect = ({ editor }) => {

package/dist/{Toggle.js → components/inputs/Toggle/Toggle.js}

@@ -1,7 +1,7 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { FormFieldError } from "./FormFieldError.js";
-import { CheckContent } from "./CheckContent.js";
-import { UIConfig } from "./uiConfig.context.js";
+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 { toggle, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -10,10 +10,9 @@ 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 { className, children, isDisabled, error, variant = ui.toggle.variant,...rest } = props;
+	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,
 		isDisabled
@@ -38,7 +37,7 @@ var ToggleBase = (props) => {
 };
 const Toggle = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{toggle.cva.js → components/inputs/Toggle/toggle.cva.js}

@@ -1,5 +1,5 @@
-import { uiGroupOutlineClass } from "./outline.clsx.js";
-import { compoundMapper } from "./compoundMapper.js";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
 const toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4", uiGroupOutlineClass], {
 	variants: { variant: { default: [

package/dist/{CheckContent.js → components/inputs/shared/CheckContent.js}

@@ -1,10 +1,10 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { typography } from "./typography.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
-const CheckContent = ({ children, className,...props }) => {
+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

@@ -0,0 +1,19 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+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, show }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		color: "secondary",
+		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,
+		excludeFromTabOrder: true,
+		style
+	});
+};
+export { InputClear };

package/dist/{TooltipWrapper.js → components/inputs/shared/TooltipWrapper.js}

@@ -1,4 +1,4 @@
-import { Tooltip } from "./Tooltip.js";
+import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { jsx } from "react/jsx-runtime";
 const TooltipWrapper = (props) => {
 	if (props.as !== "inline") return props.children;

package/dist/components/inputs/shared/input.cva.d.ts

@@ -2,18 +2,18 @@ import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
 export declare const inputBase: (props?: ({
     variant?: "outlined" | "filled" | null | undefined;
-    as?: "default" | "filter" | "floating" | "inline" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 } & ClassProp) | undefined) => string;
 export interface InputBaseProps extends VariantProps<typeof inputBase> {
 }
 export declare const inputSize: (props?: ({
-    size?: "default" | "small" | "extra-small" | "large" | null | undefined;
-    as?: "default" | "filter" | "floating" | "inline" | null | undefined;
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
 export declare const inputSide: (props?: ({
-    size?: "default" | "small" | "extra-small" | "large" | null | undefined;
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;
 } & ClassProp) | undefined) => string;
 export interface InputSideProps extends VariantProps<typeof inputSide> {

package/dist/{input.cva.js → components/inputs/shared/input.cva.js}

@@ -1,8 +1,8 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { uiOutlineClass } from "./outline.clsx.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
-const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
+const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 	variants: {
 		variant: {
 			outlined: "",
@@ -16,9 +16,11 @@ const inputBase = cva([uiOutlineClass, "flex w-full 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 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 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 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 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 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 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,10 +269,9 @@ const inputSide = cva("", {
 	defaultVariants: { size: "default" }
 });
 const useInputCva = () => {
-	const uiStyle = UIStyle.useConfig();
-	const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
-	const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
-	return ({ className,...rest }) => {
+	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.d.ts

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const labelBase: (props?: ({
-    as?: "default" | "filter" | "floating" | "inline" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface LabelBaseProps extends VariantProps<typeof labelBase> {
 }
 export declare const labelTypography: (props: {
-    as?: "default" | "filter" | "floating" | "inline" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 }) => TypographyVariantProps | undefined;

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

@@ -0,0 +1,64 @@
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+import { cva } from "class-variance-authority";
+const labelBase = cva("", {
+	variants: { as: {
+		default: ["flex items-start gap-1 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",
+			"input-disabled:text-interactive-text-secondary-disabled!",
+			"input-filled:top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))]",
+			"input-filled:translate-y-0",
+			"input-filled:text-text-default-1",
+			"input-filled:font-semibold!",
+			"input-filled:text-label-3!",
+			"group-data-[text-area]/text-area:top-floating-label-input-height-empty group-data-[text-area]/text-area:translate-y-0",
+			"group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
+			"group-data-[text-editor]/text-editor:top-floating-label-input-height-empty group-data-[text-editor]/text-editor:left-input-side-default group-data-[text-editor]/text-editor:translate-y-0",
+			"group-data-[is-filled=true]/text-editor:hidden"
+		]
+	} },
+	defaultVariants: { as: "default" }
+});
+const labelTypography = compoundMapper({
+	compoundVariants: [
+		{
+			as: "default",
+			value: {
+				size: "label-2",
+				variant: "prominent-1"
+			}
+		},
+		{
+			as: "filter",
+			value: {
+				size: "label-1",
+				variant: "default"
+			}
+		},
+		{
+			as: "inline",
+			value: {
+				size: "label-2",
+				variant: "prominent-1"
+			}
+		},
+		{
+			as: "floating",
+			value: {
+				size: "label-1",
+				variant: "default"
+			}
+		}
+	],
+	default: {
+		size: "label-2",
+		variant: "prominent-1"
+	},
+	defaultVariants: { as: "default" }
+});
+export { labelBase, labelTypography };

package/dist/{Accordion.js → components/navigation/Accordion/Accordion.js}

@@ -1,4 +1,4 @@
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { accordionCva } from "./accordion.cva.js";
 import { AccordionItem } from "./AccordionItem.js";
 import { jsx } from "react/jsx-runtime";
@@ -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/{AccordionItem.js → components/navigation/Accordion/AccordionItem.js}

@@ -1,20 +1,19 @@
-import { ChevronDownIcon } from "./ChevronDown.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
+import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { Typography } from "../../text/Typography/Typography.js";
 import { accordionChevronCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva } from "./accordion.cva.js";
 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({