@povio/ui 2.3.2 → 3.0.0

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

@@ -1,5 +1,5 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { popover } from "../../../shared/popover.cva.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
+import { popoverDefinition } from "../../../shared/popover.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import "./useSelectItems.js";
@@ -15,7 +15,7 @@ import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
 var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
 	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
-	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	const formFieldProps = {
 		error,
 		label,

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

@@ -1,10 +1,10 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -15,8 +15,8 @@ import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
 var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }) => {
-	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const { t } = useTranslation("ui");
 	const state = use(ComboBoxStateContext);
 	const { hoverProps, isHovered } = useHover({ isDisabled });

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

@@ -1,15 +1,15 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemCva } from "./selectItem.cva.js";
+import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
 var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
-	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
+	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectedIds, isMultiple } = SelectContext.useSelect();

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

@@ -1,15 +1,15 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemCva } from "./selectItem.cva.js";
+import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
 var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
-	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
+	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
 	const ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectableListItems, selectedIds } = SelectContext.useSelect();

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

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Loader } from "../../../status/Loader/Loader.js";
 import "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemCva } from "./selectItem.cva.js";
+import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
@@ -10,7 +10,7 @@ import { ListBoxItem } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
 var SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
-	const selectListItemCva = UIStyle.useCva("select.listBoxItemCva", selectListBoxItemCva);
+	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
 	const { t } = useTranslation("ui");
 	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
 	const { ref } = useIntersectionObserver({

package/dist/components/inputs/Selection/shared/selectItem.cva.d.ts

@@ -1,6 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const selectListBoxItemCva: (props?: ({
-    isSingle?: boolean | null | undefined;
-    isNewItem?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type SelectListBoxItemCva = VariantProps<typeof selectListBoxItemCva>;
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const selectListBoxItemDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isSingle: {
+            readonly true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle";
+        };
+        readonly isNewItem: {
+            readonly true: "text-interactive-text-primary-idle";
+            readonly false: "text-interactive-text-secondary-idle";
+        };
+    }>;
+};
+export type SelectListBoxItemConfig = NonNullable<typeof selectListBoxItemDefinition.config>;
+export interface SelectListBoxItemCva extends UIOverrides.VariantProps<SelectListBoxItemConfig> {
+}

package/dist/components/inputs/Selection/shared/selectItem.cva.js

@@ -1,21 +1,24 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 //#region src/components/inputs/Selection/shared/selectItem.cva.ts
-var selectListBoxItemCva = cva([
-	"group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item",
-	"border-b border-b-elevation-outline-default-1 outline-none",
-	"font-labels-default text-label-2",
-	"hover:text-interactive-text-secondary-hover",
-	"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
-	"disabled:cursor-default disabled:text-interactive-text-secondary-disabled"
-], {
-	variants: {
-		isSingle: { true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle" },
-		isNewItem: {
-			true: "text-interactive-text-primary-idle",
-			false: "text-interactive-text-secondary-idle"
-		}
-	},
-	defaultVariants: { isNewItem: false }
+var 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-elevation-outline-default-1 outline-none",
+		"font-labels-default text-label-2",
+		"hover:text-interactive-text-secondary-hover",
+		"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
+		"disabled:cursor-default disabled:text-interactive-text-secondary-disabled"
+	],
+	config: {
+		variants: {
+			isSingle: { true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle" },
+			isNewItem: {
+				true: "text-interactive-text-primary-idle",
+				false: "text-interactive-text-secondary-idle"
+			}
+		},
+		defaultVariants: { isNewItem: false }
+	}
 });
 //#endregion
-export { selectListBoxItemCva };
+export { selectListBoxItemDefinition };

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

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.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 { inputSideDefinition } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
 import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,7 +43,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 inputSideCva = UIOverrides.useCva("input.sideCva", inputSideDefinition);
 	const formFieldProps = {
 		error,
 		label,

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

@@ -1,8 +1,8 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { useInputCva } from "../../shared/input.cva.js";
-import { popover } from "../../../shared/popover.cva.js";
+import { popoverDefinition } from "../../../shared/popover.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -11,7 +11,7 @@ import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 //#region src/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.tsx
 var ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
-	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	const [isOpen, setIsOpen] = useState(false);
 	const handleChange = (color) => {
 		onChange(color);

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

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.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 { toggleDefinition, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -11,8 +11,8 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
-	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
+	const toggleCva = UIOverrides.useCva("toggle.cva", toggleDefinition);
+	const toggleTypographyMap = UIOverrides.useMapper("toggle.typography", toggleTypography);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -1,10 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
-export declare const toggle: (props?: ({
-    variant?: "default" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ToggleVariantProps extends VariantProps<typeof toggle> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const toggleDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly default: ["bg-interactive-contained-secondary-idle", "group-disabled:bg-interactive-contained-secondary-disabled", "group-hover:bg-interactive-contained-secondary-hover", "group-pressed:bg-interactive-contained-secondary-pressed", "group-selected:bg-interactive-contained-primary-idle", "group-selected:group-hover:bg-interactive-contained-primary-hover", "group-selected:group-pressed:bg-interactive-contained-primary-pressed", "group-focus-visible:outline-interactive-text-secondary-focus", "before:bg-interactive-contained-secondary-on-idle", "group-hover:before:bg-interactive-contained-secondary-on-hover", "group-disabled:before:bg-interactive-contained-secondary-on-disabled", "group-selected:before:bg-interactive-contained-primary-on-idle", "group-selected:group-hover:before:bg-interactive-contained-primary-on-hover", "group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed", "group-selected:group-disabled:bg-interactive-contained-primary-disabled"];
+        };
+    }>;
+};
+export type ToggleConfig = NonNullable<typeof toggleDefinition.config>;
+export interface ToggleVariantProps extends UIOverrides.VariantProps<ToggleConfig> {
 }
 export declare const toggleTypography: (props: {
-    variant?: "default" | null | undefined;
+    readonly variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;

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

@@ -1,26 +1,29 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
-import { cva } from "class-variance-authority";
 //#region src/components/inputs/Toggle/toggle.cva.ts
-var 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: [
-		"bg-interactive-contained-secondary-idle",
-		"group-disabled:bg-interactive-contained-secondary-disabled",
-		"group-hover:bg-interactive-contained-secondary-hover",
-		"group-pressed:bg-interactive-contained-secondary-pressed",
-		"group-selected:bg-interactive-contained-primary-idle",
-		"group-selected:group-hover:bg-interactive-contained-primary-hover",
-		"group-selected:group-pressed:bg-interactive-contained-primary-pressed",
-		"group-focus-visible:outline-interactive-text-secondary-focus",
-		"before:bg-interactive-contained-secondary-on-idle",
-		"group-hover:before:bg-interactive-contained-secondary-on-hover",
-		"group-disabled:before:bg-interactive-contained-secondary-on-disabled",
-		"group-selected:before:bg-interactive-contained-primary-on-idle",
-		"group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
-		"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
-		"group-selected:group-disabled:bg-interactive-contained-primary-disabled"
-	] } },
-	defaultVariants: { variant: "default" }
+var toggleDefinition = UIOverrides.defineConfig({
+	base: ["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],
+	config: {
+		variants: { variant: { default: [
+			"bg-interactive-contained-secondary-idle",
+			"group-disabled:bg-interactive-contained-secondary-disabled",
+			"group-hover:bg-interactive-contained-secondary-hover",
+			"group-pressed:bg-interactive-contained-secondary-pressed",
+			"group-selected:bg-interactive-contained-primary-idle",
+			"group-selected:group-hover:bg-interactive-contained-primary-hover",
+			"group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+			"group-focus-visible:outline-interactive-text-secondary-focus",
+			"before:bg-interactive-contained-secondary-on-idle",
+			"group-hover:before:bg-interactive-contained-secondary-on-hover",
+			"group-disabled:before:bg-interactive-contained-secondary-on-disabled",
+			"group-selected:before:bg-interactive-contained-primary-on-idle",
+			"group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
+			"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
+			"group-selected:group-disabled:bg-interactive-contained-primary-disabled"
+		] } },
+		defaultVariants: { variant: "default" }
+	}
 });
 var toggleTypography = compoundMapper({ default: {
 	size: "label-1",
@@ -28,4 +31,4 @@ var toggleTypography = compoundMapper({ default: {
 	variant: "default"
 } });
 //#endregion
-export { toggle, toggleTypography };
+export { toggleDefinition, toggleTypography };

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

@@ -1,11 +1,11 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { typography } from "../../text/Typography/typography.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { typographyDefinition } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
 var CheckContent = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
+		className: clsx$1(UIOverrides.useCva("typography.cva", typographyDefinition)({
 			size: "label-1",
 			sizeMobile: "label-1",
 			variant: "default",

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

@@ -1,22 +1,61 @@
-import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
-export declare const inputBase: (props?: ({
-    variant?: "outlined" | "filled" | null | undefined;
-    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
-} & ClassProp) | undefined) => string;
-export interface InputBaseProps extends VariantProps<typeof inputBase> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const inputBaseDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "";
+            readonly filled: "";
+        };
+        readonly as: {
+            readonly default: "rounded-input-rounding-default";
+            readonly floating: "rounded-input-rounding-default";
+            readonly filter: "rounded-input-rounding-default";
+            readonly inline: ["h-full", "border-transparent border-b-0 bg-transparent text-text-default-1", "hover:border-input-outlined-outline-hover", "focus-within:border-input-outlined-outline-active", "invalid:border-input-outlined-outline-error", "has-invalid:border-input-outlined-outline-error", "disabled:hover:border-transparent", "has-disabled:hover:border-transparent"];
+        };
+    }>;
+};
+export type InputBaseConfig = NonNullable<typeof inputBaseDefinition.config>;
+export interface InputBaseProps extends UIOverrides.VariantProps<InputBaseConfig> {
 }
-export declare const inputSize: (props?: ({
-    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 inputSizeDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly "extra-small": "text-label-1";
+            readonly small: "text-label-1";
+            readonly default: "text-label-1";
+            readonly large: "text-label-1";
+        };
+        readonly as: {
+            readonly default: "";
+            readonly floating: ["px-input-side-m", "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))]"];
+            readonly filter: "";
+            readonly inline: "";
+        };
+    }>;
+};
+export type InputSizeConfig = NonNullable<typeof inputSizeDefinition.config>;
+export interface InputSizeProps extends UIOverrides.VariantProps<InputSizeConfig> {
 }
-export declare const inputSide: (props?: ({
-    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
-    type?: "left" | "right" | "var" | null | undefined;
-} & ClassProp) | undefined) => string;
-export interface InputSideProps extends VariantProps<typeof inputSide> {
+export declare const inputSideDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly "extra-small": "";
+            readonly small: "";
+            readonly default: "";
+            readonly large: "";
+        };
+        readonly type: {
+            readonly left: "";
+            readonly right: "";
+            readonly var: "";
+        };
+    }>;
+};
+export type InputSideConfig = NonNullable<typeof inputSideDefinition.config>;
+export interface InputSideProps extends UIOverrides.VariantProps<InputSideConfig> {
 }
 export interface InputVariantProps extends InputBaseProps, InputSizeProps {
 }