@povio/ui 2.2.4 → 2.2.6

package/dist/assets/icons/Search.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const SearchIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M9.712 16.212q-2.724 0-4.612-1.887T3.212 9.712q0-2.724 1.888-4.612t4.612-1.888q2.726 0 4.613 1.888t1.887 4.612a6.1 6.1 0 0 1-1.3 3.8l5.6 5.6a.95.95 0 0 1 .276.7.95.95 0 0 1-.276.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275l-5.6-5.6q-.75.6-1.725.95t-2.075.35m0-2q1.875 0 3.188-1.312t1.313-3.188T12.9 6.525 9.712 5.212 6.525 6.525 5.212 9.712 6.525 12.9t3.187 1.312"
+	})
+});
+export { SearchIcon };

package/dist/components/Menu/Menu.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Placement } from 'react-aria';
 import { Key, MenuItemProps } from 'react-aria-components';
 import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from './menu.cva';
 export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
@@ -10,6 +11,7 @@ export interface MenuProps {
     trigger: ReactElement;
     items: MenuItem[];
     closeDelay?: number;
+    placement?: Placement;
     onAction?: (key: Key, e: any) => void;
 }
 export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuMobile.js

@@ -43,6 +43,7 @@ const MenuMobile = ({ trigger, items, onAction, ...props }) => {
 		onOpenChange: setIsOpen,
 		trigger,
 		isDismissable: true,
+		hideHeader: true,
 		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [activeItem && /* @__PURE__ */ jsxs(Button, {
 			className: clsx(menuItemCva$1({
 				...props,

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -24,7 +24,7 @@ var CheckboxBase = (props) => {
 		"aria-errormessage": error || void 0,
 		"data-is-dirty": props.isDirty || void 0,
 		"data-is-required": props.isRequired || void 0,
-		className: clsx(checkboxIndicatorClass, className),
+		className: clsx("relative", checkboxIndicatorClass, className),
 		children: [/* @__PURE__ */ jsx(CheckboxCheckmark, {
 			variant,
 			...rest

package/dist/components/inputs/Checkbox/checkbox.cva.js

@@ -35,6 +35,7 @@ const checkbox = cva([
 const checkboxIndicatorClass = "group flex items-center gap-2";
 const checkboxTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
 const checkboxIcon = cva(["absolute hidden size-3"], {

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

@@ -15,6 +15,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;

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

@@ -17,7 +17,7 @@ import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -126,7 +126,8 @@ var DatePickerBase = (props) => {
 				headerProps,
 				todayIcon,
 				onOpenDropdown: () => state.toggle(),
-				placeholder
+				placeholder,
+				className: inputClassName
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

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

@@ -17,6 +17,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {

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

@@ -14,15 +14,15 @@ import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "rea
 import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
+import { useTranslation } from "react-i18next";
 import { Controller } from "react-hook-form";
 import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
-import { useTranslation } from "react-i18next";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -477,6 +477,7 @@ var DateRangePickerBase = (props) => {
 				isDirty,
 				disableManualEntry,
 				placeholder,
+				className: inputClassName,
 				onOpenDropdown: () => state.toggle()
 			}), /* @__PURE__ */ jsx(DateTimeDialog, {
 				hideSidebar,

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

@@ -15,6 +15,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

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

@@ -15,7 +15,7 @@ import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today
 import { useCalendarState, useDatePickerState } from "react-stately";
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -147,7 +147,8 @@ var DateTimePickerBase = (props) => {
 				isRequired,
 				disableManualEntry,
 				placeholder,
-				onOpenDropdown: () => state.toggle()
+				onOpenDropdown: () => state.toggle(),
+				className: inputClassName
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

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

@@ -9,8 +9,8 @@ import { ns } from "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useDateFormatter } from "@react-aria/i18n";
 import { useTranslation } from "react-i18next";
+import { useDateFormatter } from "@react-aria/i18n";
 const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
 	const { t } = useTranslation("ui");
 	const displayDate = state.visibleRange.start.add(offset);

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

@@ -23,7 +23,8 @@ interface DatePickerInputProps extends InputVariantProps {
     isRequired?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    className?: string;
     onOpenDropdown?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,7 +15,7 @@ import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
-const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown, ...props }) => {
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const [canClear, setCanClear] = useState(false);
@@ -65,12 +65,11 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: inputBaseCva({
+		className: clsx(inputBaseCva({
 			variant,
 			as,
-			...props,
-			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
-		}),
+			...props
+		}), "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", className),
 		"data-rac": "",
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,

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

@@ -1,10 +1,12 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
-import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
-import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { popover } from "../../../shared/popover.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
 import { Dialog, Popover } from "react-aria-components";
 const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange }) => {
+	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	if (useBreakpoint("md")) {
 		if (!isOpen) return null;
 		return /* @__PURE__ */ jsx(Popover, {
@@ -17,7 +19,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 				className: "outline-none!",
 				"aria-label": label,
 				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex overflow-hidden rounded-input-rounding-default border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5",
+					className: clsx$1(popoverCva({}), "flex overflow-hidden"),
 					children: [!hideSidebar && sidebar, /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-1 flex-col justify-between",
 						children: [children, footer]
@@ -26,7 +28,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(BottomSheet, {
+	return /* @__PURE__ */ jsxs(BottomSheet, {
 		label,
 		footer,
 		isOpen,
@@ -35,15 +37,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 		isScrollable: true,
 		height: "auto",
 		isDismissable: true,
-		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(FormFieldHeader, {
-				label,
-				className: "mb-8! shrink-0 px-4 pt-3",
-				rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close })
-			}),
-			children,
-			!hideSidebar && sidebar
-		] })
+		children: [children, !hideSidebar && sidebar]
 	});
 };
 export { DateTimeDialog };

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

@@ -1,5 +1,5 @@
-import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { ns } from "../../../../config/i18n.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/components/inputs/File/FileUpload.d.ts

@@ -1,4 +1,4 @@
 import { FieldValues } from 'react-hook-form';
 import { FileUploadProps } from './fileUpload.types';
-export type { FileUploadBaseProps, FileUploadError, FileUploadProps, FileUploadRequest, FileUploadResponse, FileUploadState, } from './fileUpload.types';
+export type { DefaultFile, FileUploadBaseProps, FileUploadError, FileUploadProps, FileUploadRequest, FileUploadResponse, FileUploadState, } from './fileUpload.types';
 export declare const FileUpload: <TFieldValues extends FieldValues = FieldValues>(props: FileUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,13 +11,25 @@ import { clsx } from "clsx";
 import { useCallback, useState } from "react";
 import { DropZone } from "react-aria-components";
 import { mergeRefs, useLabels } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { Controller } from "react-hook-form";
 var FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
-	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType, ...rest } = props;
+	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType, defaultState, ...rest } = props;
 	const ui = UIConfig.useConfig();
-	const [uploadState, setUploadState] = useState(props.value ?? []);
+	const getInitialState = () => {
+		if (props.value != null && props.value.length > 0) return props.value;
+		if (!defaultState?.length) return [];
+		const items = defaultState.map((item, index) => ({
+			state: "uploaded",
+			displayName: item.name,
+			displaySize: item.size,
+			displayType: item.type,
+			id: item.id ?? `default-${index}`
+		}));
+		return allowsMultiple ? items : items.slice(0, 1);
+	};
+	const [uploadState, setUploadState] = useState(getInitialState);
 	const formFieldProps = {
 		error,
 		label,

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

@@ -38,6 +38,12 @@ export interface FileUploadRequest {
         method: string;
     };
 }
+export interface DefaultFile {
+    name: string;
+    size: number;
+    type?: string;
+    id?: string;
+}
 export interface FileUploadCallbacks {
     fileUpload?: (request: FileUploadRequest, file: File, options?: {
         abortController?: AbortController;
@@ -53,7 +59,10 @@ export interface FileUploadCallbacks {
 export type FileUploadError = ApplicationException<GeneralErrorCodes>;
 export interface FileUploadState {
     state: "idle" | "uploading" | "uploaded" | "error";
-    file: File;
+    file?: File;
+    displayName?: string;
+    displaySize?: number;
+    displayType?: string;
     src?: string;
     id?: string;
     progress?: number;
@@ -74,6 +83,7 @@ export type FileUploadBaseProps = {
     uploadText?: string;
     browseText?: string;
     value?: FileUploadState[];
+    defaultState?: DefaultFile[];
     clearOnSuccess?: boolean;
     children?: (props: FileUploadContainerChildrenProps) => ReactNode;
     listRenderer?: (props: FileUploadContainerChildrenProps) => ReactNode;

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

@@ -11,7 +11,7 @@ const FileCardList = ({ uploadState, as, isDisabled, className, onRemove, onCanc
 			isDisabled,
 			onRemove,
 			onCancel
-		}, state.file.name || state.id || state.src))
+		}, state.file?.name ?? state.displayName ?? state.id ?? state.src))
 	});
 };
 export { FileCardList };

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

@@ -2,8 +2,8 @@ import { CloseIcon } from "../../../../assets/icons/Close.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { Button as Button$1 } from "../../../buttons/Button/Button.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { ns } from "../../../../config/i18n.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { WarningFilledIcon } from "../../../../assets/icons/WarningFilled.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -36,7 +36,7 @@ const FileUploadContentError = ({ variant, as, isDisabled, state, browseText, fi
 						size: "label-1",
 						as: "span",
 						className: clsx("self-stretch truncate text-text-default-1", { "text-center": variant === "vertical" }),
-						children: state.file.name
+						children: state.file?.name ?? state.displayName ?? ""
 					}), /* @__PURE__ */ jsx(Typography, {
 						variant: "default",
 						size: singleFile ? "label-2" : "label-3",

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

@@ -2,8 +2,8 @@ import { CloseIcon } from "../../../../assets/icons/Close.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { Button as Button$1 } from "../../../buttons/Button/Button.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { ns } from "../../../../config/i18n.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { FileUtils } from "../../../../utils/file.utils.js";
 import { CheckCircleIcon } from "../../../../assets/icons/CheckCircle.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -37,13 +37,13 @@ const FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, f
 						size: "label-1",
 						as: "span",
 						className: "self-stretch truncate text-center text-text-default-1",
-						children: state.file.name
+						children: state.file?.name ?? state.displayName ?? ""
 					}), /* @__PURE__ */ jsx(Typography, {
 						variant: "default",
 						size: singleFile ? "label-2" : "label-3",
 						as: "span",
 						className: "text-text-default-2",
-						children: FileUtils.getCalculatedFileSize(state.file)
+						children: FileUtils.getFileDisplaySize(state)
 					})]
 				})]
 			}), /* @__PURE__ */ jsx("div", {

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

@@ -38,13 +38,13 @@ const FileUploadContentLoading = ({ index, variant, as, state, isDisabled, singl
 						size: "label-1",
 						as: "span",
 						className: "self-stretch truncate text-center text-text-default-1",
-						children: state.file.name
+						children: state.file?.name ?? state.displayName ?? ""
 					}), /* @__PURE__ */ jsx(Typography, {
 						variant: "default",
 						size: singleFile ? "label-2" : "label-3",
 						as: "span",
 						className: "text-text-default-2",
-						children: FileUtils.getCalculatedFileSize(state.file)
+						children: FileUtils.getFileDisplaySize(state)
 					})]
 				})]
 			}), /* @__PURE__ */ jsxs("div", {

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

@@ -1,8 +1,8 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { Button as Button$1 } from "../../../buttons/Button/Button.js";
-import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { ns } from "../../../../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 { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";

package/dist/components/inputs/File/shared/fileUpload.cva.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
-const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-default"], {
+const fileUploadDropZoneBase = cva(["relative w-full rounded-file-upload-container-rounding-default"], {
 	variants: {
 		variant: {
 			vertical: ["flex-col justify-center"],

package/dist/components/inputs/FormField/FormField.js

@@ -1,5 +1,6 @@
 import { FormFieldError } from "./FormFieldError.js";
 import { FormFieldHeader } from "./FormFieldHeader.js";
+import { FormFieldHelper } from "./FormFieldHelper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const FormField = ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture }) => {
 	const headerProps = {
@@ -13,6 +14,12 @@ const FormField = ({ ref, as, label, tooltipText, helperText, isRequired, rightC
 		className: headerClassName,
 		labelProps
 	};
+	const helperProps = {
+		helperText,
+		isDisabled,
+		isHidden: !["filter", "floating"].includes(as ?? ""),
+		hasError: !!error
+	};
 	const errorProps = {
 		error,
 		isDisabled,
@@ -28,6 +35,7 @@ const FormField = ({ ref, as, label, tooltipText, helperText, isRequired, rightC
 		children: [
 			!["filter", "floating"].includes(as ?? "") && /* @__PURE__ */ jsx(FormFieldHeader, { ...headerProps }),
 			children,
+			/* @__PURE__ */ jsx(FormFieldHelper, { ...helperProps }),
 			/* @__PURE__ */ jsx(FormFieldError, { ...errorProps })
 		]
 	});

package/dist/components/inputs/FormField/FormFieldError.js

@@ -1,10 +1,10 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
-import { typography } from "../../text/Typography/typography.cva.js";
+import { formFieldError } from "./formFieldError.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 const FormFieldError = ({ error, isDisabled, isHidden, className }) => {
 	return /* @__PURE__ */ jsx("p", {
-		className: clsx(UIStyle.useCva("typography.cva", typography)({ size: "label-3" }), "text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className),
+		className: clsx(UIStyle.useCva("formField.errorLabelCva", formFieldError)({ visible: !!error && !isDisabled && !isHidden }), className),
 		children: error
 	});
 };

package/dist/components/inputs/FormField/FormFieldHelper.d.ts

@@ -0,0 +1,8 @@
+export interface FormFieldHelperProps {
+    helperText?: string;
+    isDisabled?: boolean;
+    isHidden?: boolean;
+    hasError?: boolean;
+    className?: string;
+}
+export declare const FormFieldHelper: ({ helperText, isDisabled, isHidden, hasError, className }: FormFieldHelperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/FormField/FormFieldHelper.js

@@ -0,0 +1,12 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { formFieldHelper } from "./formFieldHelper.cva.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const FormFieldHelper = ({ helperText, isDisabled, isHidden, hasError, className }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: clsx(UIStyle.useCva("formField.helperLabelCva", formFieldHelper)({ visible: !!helperText && !isDisabled && !isHidden && !hasError }), className),
+		slot: "description",
+		children: helperText
+	});
+};
+export { FormFieldHelper };

package/dist/components/inputs/FormField/FormFieldLabel.js

@@ -13,6 +13,7 @@ const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, cl
 		ref,
 		className: clsx(typographyCva({
 			size: "label-2",
+			sizeMobile: "label-2",
 			variant: "prominent-1",
 			...labelTypographyMap({ as })
 		}), labelBaseCva({ as }), className, labelProps?.className),

package/dist/components/inputs/FormField/formFieldError.cva.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const formFieldError: (props?: ({
+    visible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FormFieldErrorVariantProps extends VariantProps<typeof formFieldError> {
+}

package/dist/components/inputs/FormField/formFieldError.cva.js

@@ -0,0 +1,9 @@
+import { cva } from "class-variance-authority";
+const formFieldError = cva("text-label-3 text-text-error-1", {
+	variants: { visible: {
+		true: "mt-1-5",
+		false: "sr-only"
+	} },
+	defaultVariants: { visible: false }
+});
+export { formFieldError };

package/dist/components/inputs/FormField/formFieldHelper.cva.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const formFieldHelper: (props?: ({
+    visible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FormFieldHelperVariantProps extends VariantProps<typeof formFieldHelper> {
+}

package/dist/components/inputs/FormField/formFieldHelper.cva.js

@@ -0,0 +1,9 @@
+import { cva } from "class-variance-authority";
+const formFieldHelper = cva("text-label-3 text-text-default-2", {
+	variants: { visible: {
+		true: "mt-1-5",
+		false: "sr-only"
+	} },
+	defaultVariants: { visible: false }
+});
+export { formFieldHelper };

package/dist/components/inputs/Input/shared/InputContent.js

@@ -48,6 +48,7 @@ const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, un
 				unit && /* @__PURE__ */ jsx("span", {
 					className: typographyCva({
 						size: "label-2",
+						sizeMobile: "label-2",
 						variant: "prominent-1",
 						className: "text-text-default-3"
 					}),

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -4,7 +4,7 @@ import { CheckContent } from "../shared/CheckContent.js";
 import { FormField } from "../FormField/FormField.js";
 import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx$1 from "clsx";
+import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
@@ -36,10 +36,10 @@ var RadioGroupBase = (props) => {
 		children: /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
 			children: /* @__PURE__ */ jsx("div", {
-				className: clsx$1("flex flex-col", inputClassName),
+				className: clsx("flex flex-col", inputClassName),
 				children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
 					value: option.value,
-					className: radioIndicatorClass,
+					className: clsx("relative", radioIndicatorClass),
 					children: [/* @__PURE__ */ jsx("div", { className: radioCva({
 						variant,
 						...rest

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -27,6 +27,7 @@ const radio = cva([
 const radioIndicatorClass = "group flex items-center gap-2";
 const radioTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
 export { radio, radioIndicatorClass, radioTypography };

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

@@ -9,6 +9,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     className?: string;
     placeholder?: string;
     hideDropdownIcon?: boolean;
+    hideSearchIcon?: boolean;
     isSearchable?: boolean;
     isClearable?: boolean;
     isClientSearchDisabled?: boolean;

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

@@ -17,7 +17,8 @@ const SelectBase = (dProps) => {
 		isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
 		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
 		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
-		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter
+		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
+		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon
 	};
 	const isDesktop = useBreakpoint("md");
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {