@povio/ui 2.2.7 → 2.2.8

package/README.md

@@ -31,6 +31,7 @@ This is required for buttons to behave as expected. It is based on [Tailwind Upg
 
 In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config.
 In your globals.css add (make sure path is correct):
+
 ```css
 @source "../../node_modules/@povio/ui/dist";
 ```
@@ -42,6 +43,7 @@ We are using `react-aria-components` for our UI components including their plugi
 ### Custom Tailwind plugin
 
 We also use a custom tailwind plugin to shorten some selectors inside the @povio/ui package. Install it by adding the following line to your `base.css`.
+
 ```css
 @plugin "@povio/ui/tw-ui-plugin";
 ```

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,9 +1,10 @@
 import { FC, SVGProps } from 'react';
 import { Key } from 'react-aria-components';
+import { LinkNavigationProps } from '../text/Link/Link';
 export interface BreadcrumbItem {
     id: Key;
     label: string;
-    href?: string;
+    link?: LinkNavigationProps;
     icon?: FC<SVGProps<SVGSVGElement>>;
 }
 export interface BreadcrumbsProps {

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -37,7 +37,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 	const lastItem = items[items.length - 1];
 	const LinkComponent = LinkContext.useLinkContext()?.LinkComponent ?? Link;
 	const renderBreadcrumbLink = (item, isCurrent, iconOnly) => /* @__PURE__ */ jsxs(LinkComponent, {
-		href: item.href,
+		...item.link,
 		className: breadcrumbItem$1({ isCurrent }),
 		children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
 			className: breadcrumbIconCva({}),
@@ -52,7 +52,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 		const menuItems = hiddenItems.map((item) => ({
 			id: item.id,
 			label: item.label,
-			href: item.href
+			link: item.link
 		}));
 		const renderEllipsis = () => /* @__PURE__ */ jsx(MenuDesktop, {
 			trigger: /* @__PURE__ */ jsx(Tooltip$1, {

package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts

@@ -12,6 +12,7 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -7,6 +7,7 @@ import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { useLocale, useTimeField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -17,7 +18,7 @@ import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -90,7 +91,7 @@ var TimePickerBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: "relative inline-flex w-full flex-col text-left",
+			className: clsx("relative inline-flex w-full flex-col text-left", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(TimePickerInput, {
 				ref: mergeRefs(ref, timeFieldRef),
@@ -107,7 +108,8 @@ var TimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				disableManualEntry,
-				placeholder
+				placeholder,
+				className: inputClassName
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts

@@ -15,7 +15,8 @@ interface DatePickerInputProps extends InputVariantProps {
     isClearable?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    className?: string;
     onPress: () => void;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
-var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress, ...props }) => {
+var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -23,12 +23,11 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInva
 	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: inputBaseCva({
+		className: clsx(inputBaseCva({
 			variant,
 			as,
-			...props,
-			className: clsx("group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements")
-		}),
+			...props
+		}), "group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements", className),
 		"data-rac": "",
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,

package/dist/components/inputs/File/InputUpload.js

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/File/InputUpload.tsx
-var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes, ...rest }) => {
+var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes, size, ...rest }) => {
 	const ui = UIConfig.useConfig();
 	const [internalFiles, setInternalFiles] = useState(() => {
 		if (value !== void 0) {
@@ -77,7 +77,8 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 		children: files.length > 0 ? /* @__PURE__ */ jsx(InputUploadFilled, {
 			files,
 			onRemove: handleRemove,
-			isDisabled
+			isDisabled,
+			size
 		}) : /* @__PURE__ */ jsx(InputUploadContent, {
 			...rest,
 			label,
@@ -87,7 +88,8 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 			variant,
 			isDisabled,
 			onSelect: handleSelect,
-			onDrop: handleDrop
+			onDrop: handleDrop,
+			size
 		})
 	});
 };

package/dist/components/inputs/File/inputUpload.types.d.ts

@@ -4,6 +4,8 @@ import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../FormField/FormField';
 import { ControlProps } from '../shared/form.types';
 import { InputUploadButtonProps } from './shared/inputUploadButton.cva';
+import { InputSizeProps } from '../shared/input.cva';
+import { ButtonVariantProps } from '../../buttons/Button/button.cva.js';
 export interface SingleFileUploadProps {
     allowsMultiple?: false;
     value?: File | null;
@@ -30,5 +32,6 @@ export type InputUploadBaseProps = {
     className?: string;
     placeholder?: string;
     buttonText?: string;
-} & FormFieldProps & InputUploadButtonProps & Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> & Omit<DropZoneProps, "children" | "onDrop"> & GroupedFileUploadProps;
+} & FormFieldProps & InputUploadButtonProps & Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> & Omit<DropZoneProps, "children" | "onDrop"> & GroupedFileUploadProps & Pick<InputSizeProps, "size">;
 export type InputUploadProps<TFieldValues extends FieldValues = FieldValues> = InputUploadBaseProps & GroupedFileUploadControlProps<TFieldValues>;
+export declare const inputButtonSizeMapping: Record<NonNullable<InputSizeProps["size"]>, ButtonVariantProps["size"]>;

package/dist/components/inputs/File/inputUpload.types.js

@@ -0,0 +1,9 @@
+//#region src/components/inputs/File/inputUpload.types.ts
+var inputButtonSizeMapping = {
+	"extra-small": "xs",
+	small: "s",
+	default: "m",
+	large: "l"
+};
+//#endregion
+export { inputButtonSizeMapping };

package/dist/components/inputs/File/shared/FileUploadContentFilled.js

@@ -97,12 +97,14 @@ var FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, fil
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
-						icon: CloseIcon
+						icon: CloseIcon,
+						isDisabled
 					}) : /* @__PURE__ */ jsx(TextButton, {
 						color: "secondary",
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
+						isDisabled,
 						children: t(($) => $.ui.fileUpload.removeFile)
 					})]
 				})

package/dist/components/inputs/File/shared/InputUploadContent.d.ts

@@ -1,6 +1,7 @@
 import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
 import { InputUploadBaseProps } from '../inputUpload.types';
-interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref"> {
+import { InputSizeProps } from '../../shared/input.cva';
+interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref">, Pick<InputSizeProps, "size"> {
     onSelect: FileTriggerProps["onSelect"];
     onDrop: DropZoneProps["onDrop"];
 }

package/dist/components/inputs/File/shared/InputUploadContent.js

@@ -5,6 +5,7 @@ import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { inputSize } from "../../shared/input.cva.js";
 import { UploadIcon } from "../../../../assets/icons/Upload.js";
+import { inputButtonSizeMapping } from "../inputUpload.types.js";
 import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -12,7 +13,7 @@ import { DropZone, FileTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/File/shared/InputUploadContent.tsx
 var InputUploadContent = (props) => {
-	const { variant, isDisabled, error, placeholder, buttonText, ...rest } = props;
+	const { variant, isDisabled, error, placeholder, buttonText, size, ...rest } = props;
 	const { t } = useTranslation("ui");
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	return /* @__PURE__ */ jsx(FileTrigger, {
@@ -28,7 +29,7 @@ var InputUploadContent = (props) => {
 			children: [/* @__PURE__ */ jsxs(DropZone, {
 				...rest,
 				isDisabled,
-				className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size: "default" })),
+				className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size })),
 				children: [/* @__PURE__ */ jsx(Typography, {
 					variant: "default",
 					size: "label-1",
@@ -41,7 +42,7 @@ var InputUploadContent = (props) => {
 					children: buttonText ?? t(($) => $.ui.fileUpload.upload)
 				})]
 			}), variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
-				size: "m",
+				size: inputButtonSizeMapping[size ?? "default"],
 				width: "hug",
 				isDisabled,
 				className: "truncate",

package/dist/components/inputs/File/shared/InputUploadFilled.d.ts

@@ -1,7 +1,8 @@
-interface InputUploadFilledProps {
+import { InputSizeProps } from '../../shared/input.cva';
+interface InputUploadFilledProps extends Pick<InputSizeProps, "size"> {
     files: File[];
     onRemove: () => void;
     isDisabled?: boolean;
 }
-export declare const InputUploadFilled: ({ files, onRemove, isDisabled }: InputUploadFilledProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputUploadFilled: ({ files, onRemove, isDisabled, size }: InputUploadFilledProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/File/shared/InputUploadFilled.js

@@ -6,9 +6,9 @@ import { inputSize } from "../../shared/input.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/File/shared/InputUploadFilled.tsx
-var InputUploadFilled = ({ files, onRemove, isDisabled }) => {
+var InputUploadFilled = ({ files, onRemove, isDisabled, size }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIStyle.useCva("input.sizeCva", inputSize)({ size: "default" })),
+		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIStyle.useCva("input.sizeCva", inputSize)({ size })),
 		children: [/* @__PURE__ */ jsx(Typography, {
 			variant: "default",
 			size: "label-1",

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -101,7 +101,7 @@ var NumberInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-empty": value === null || value === void 0 || void 0,
-						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {
 							inputProps.onFocus?.(e);

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -94,7 +94,7 @@ var TextInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-disabled": isDisabled || void 0,
-						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {
 							inputProps.onFocus?.(e);

package/dist/components/inputs/Selection/shared/SelectListBoxItem.d.ts

@@ -4,5 +4,4 @@ interface SelectListBoxItemProps extends Pick<SelectBaseProps, "isSearchable" |
     isNewItem?: boolean;
 }
 export declare const SelectListBoxItem: ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled, }: SelectListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const selectListBoxItemClass: string;
 export {};

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

@@ -1,13 +1,15 @@
+import { UIStyle } from "../../../../config/uiStyle.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 { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 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 ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectedIds, isMultiple } = SelectContext.useSelect();
@@ -26,7 +28,10 @@ var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, co
 		id,
 		textValue: label,
 		isDisabled,
-		className: clsx(selectListBoxItemClass, !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle", isNewItem ? "text-interactive-text-primary-idle" : "text-interactive-text-secondary-idle"),
+		className: selectListItemCva({
+			isSingle: !isMultiple,
+			isNewItem
+		}),
 		children: [
 			isMultiple && !isSearchable && /* @__PURE__ */ jsx(CheckboxCheckmark, {
 				variant: "default",
@@ -45,6 +50,5 @@ var SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, co
 		]
 	});
 };
-var selectListBoxItemClass = clsx("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-interactive-text-secondary-idle 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");
 //#endregion
-export { SelectListBoxItem, selectListBoxItemClass };
+export { SelectListBoxItem };

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

@@ -1,13 +1,15 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import "../../../../config/i18n.js";
 import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { selectListBoxItemCva } 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 ref = useRef(null);
 	const { t } = useTranslation("ui");
 	const { selectableListItems, selectedIds } = SelectContext.useSelect();
@@ -16,7 +18,7 @@ var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
 		id,
 		textValue: label || t(($) => $.ui.select.allOption),
 		isDisabled,
-		className: selectListBoxItemClass,
+		className: selectListItemCva({}),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "group",
 			"data-rac": "",
@@ -24,7 +26,7 @@ var SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
 			"data-indeterminate": selectedIds.length > 0 && selectedIds.length < selectableListItems.length || void 0,
 			children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
 				variant: "default",
-				className: "group-focus-visible:!outline-none"
+				className: "group-focus-visible:outline-none!"
 			})
 		}), t(($) => $.ui.select.allOption)]
 	});

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

@@ -1,7 +1,8 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Loader } from "../../../status/Loader/Loader.js";
 import "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
-import { selectListBoxItemClass } from "./SelectListBoxItem.js";
+import { selectListBoxItemCva } from "./selectItem.cva.js";
 import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
@@ -9,6 +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 { t } = useTranslation("ui");
 	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
 	const { ref } = useIntersectionObserver({
@@ -26,7 +28,7 @@ var SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
 		id,
 		textValue: label || t(($) => $.ui.loadingState.text),
 		isDisabled: true,
-		className: selectListBoxItemClass,
+		className: selectListItemCva({}),
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			className: "flex flex-1 justify-center text-interactive-text-primary-idle",

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

@@ -14,7 +14,7 @@ import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 //#region src/components/inputs/Selection/shared/SelectMobile.tsx
 var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -68,6 +68,7 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				placeholder,
 				variant,
 				as,
+				size,
 				isDisabled,
 				isInvalid: !!error,
 				className,

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

@@ -0,0 +1,6 @@
+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>;

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

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+//#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 }
+});
+//#endregion
+export { selectListBoxItemCva };

package/dist/config/uiStyle.context.d.ts

@@ -24,6 +24,7 @@ import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
 import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
+import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 export declare namespace UIStyle {
     export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
     type OptionKey = {
@@ -147,6 +148,9 @@ export declare namespace UIStyle {
             errorLabelCva?: Cva<FormFieldErrorVariantProps>;
             helperLabelCva?: Cva<FormFieldHelperVariantProps>;
         };
+        select: {
+            listBoxItemCva?: Cva<SelectListBoxItemCva>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",