@povio/ui 2.2.5 → 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/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/DateRangePicker/DateRangePicker.js

@@ -14,11 +14,11 @@ 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();

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/DateTimeDialog.js

@@ -1,10 +1,8 @@
 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 { popover } from "../../../shared/popover.cva.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 }) => {
@@ -30,7 +28,7 @@ const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen,
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(BottomSheet, {
+	return /* @__PURE__ */ jsxs(BottomSheet, {
 		label,
 		footer,
 		isOpen,
@@ -39,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-list-height-title-bottom! 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/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, {

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

@@ -1,8 +1,8 @@
 import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { ns } from "../../../../config/i18n.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";

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

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { ns } from "../../../../config/i18n.js";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

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

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { ns } from "../../../../config/i18n.js";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.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 { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

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

@@ -1,10 +1,10 @@
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
-import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
-import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { FormField } from "../../FormField/FormField.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { SearchIcon } from "../../../../assets/icons/Search.js";
+import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
 import { TextInput } from "../../Input/TextInput/TextInput.js";
 import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -13,7 +13,7 @@ import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, 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, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -41,9 +41,15 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 	};
 	const { fieldState, isOpen, setIsOpen, onInputChange, isMultiple } = SelectContext.useSelect();
 	const searchInputRef = useRef(null);
+	const onBlurRef = useRef(onBlur);
+	onBlurRef.current = onBlur;
+	const handleOpenChange = (open) => {
+		if (!open) onBlurRef.current?.({});
+		setIsOpen(open);
+	};
 	const dialogTriggerProps = {
 		isOpen,
-		onOpenChange: setIsOpen
+		onOpenChange: handleOpenChange
 	};
 	return /* @__PURE__ */ jsx(FormField, {
 		...formFieldProps,
@@ -68,23 +74,24 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 				isSearchable: false,
 				isClearable,
 				showSelectionContent,
-				onBlur,
+				onBlur: void 0,
 				fieldProps,
 				headerProps,
 				collapseAfter,
 				selectedTagsType
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
-				onOpenChange: setIsOpen,
+				onOpenChange: handleOpenChange,
 				onStateChange: (state) => {
 					if (state === "opened") searchInputRef.current?.focus();
 				},
 				label,
 				footer: isMultiple && /* @__PURE__ */ jsx(SelectListBoxSelectionBar, {}),
 				isDismissable: true,
+				hideHeader: isSearchable,
 				children: (close) => /* @__PURE__ */ jsxs("div", {
 					className: "flex max-h-full flex-col overflow-hidden",
-					children: [isSearchable ? /* @__PURE__ */ jsx(TextInput, {
+					children: [isSearchable && /* @__PURE__ */ jsx(TextInput, {
 						ref: searchInputRef,
 						label,
 						placeholder,
@@ -92,11 +99,8 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 						onChange: onInputChange,
 						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
 						inputClassName,
-						className: "mb-1-5 px-4 pt-3"
-					}) : /* @__PURE__ */ jsx(FormFieldHeader, {
-						label,
-						rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-						className: "mb-1-5! px-4 pt-3"
+						className: "mb-list-height-title-bottom px-list-side-title",
+						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,

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

@@ -22,6 +22,7 @@ const toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspe
 });
 const toggleTypography = compoundMapper({ default: {
 	size: "label-1",
+	sizeMobile: "label-1",
 	variant: "default"
 } });
 export { toggle, toggleTypography };

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

@@ -6,6 +6,7 @@ const CheckContent = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
+			sizeMobile: "label-1",
 			variant: "default",
 			...props.typography,
 			className: "text-text-default-2"

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

@@ -30,6 +30,7 @@ const labelTypography = compoundMapper({
 			as: "default",
 			value: {
 				size: "label-2",
+				sizeMobile: "label-2",
 				variant: "prominent-1"
 			}
 		},
@@ -37,6 +38,7 @@ const labelTypography = compoundMapper({
 			as: "filter",
 			value: {
 				size: "label-1",
+				sizeMobile: "label-1",
 				variant: "default"
 			}
 		},
@@ -44,6 +46,7 @@ const labelTypography = compoundMapper({
 			as: "inline",
 			value: {
 				size: "label-2",
+				sizeMobile: "label-2",
 				variant: "prominent-1"
 			}
 		},
@@ -51,12 +54,14 @@ const labelTypography = compoundMapper({
 			as: "floating",
 			value: {
 				size: "label-1",
+				sizeMobile: "label-1",
 				variant: "default"
 			}
 		}
 	],
 	default: {
 		size: "label-2",
+		sizeMobile: "label-2",
 		variant: "prominent-1"
 	},
 	defaultVariants: { as: "default" }

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

@@ -1,4 +1,5 @@
 import { ReactNode, RefObject } from 'react';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 type BottomSheetState = "closed" | "opening" | "opened" | "closing";
 interface BottomSheetBaseProps {
     isOpen?: boolean;
@@ -6,6 +7,8 @@ interface BottomSheetBaseProps {
     onStateChange?: (state: BottomSheetState) => void;
     isDismissable?: boolean;
     isScrollable?: boolean;
+    hideHeader?: boolean;
+    hideThumb?: boolean;
     height?: "auto" | "full";
     label?: string;
     portalContainerRef?: RefObject<HTMLElement>;
@@ -19,6 +22,8 @@ interface BottomSheetBaseProps {
     closeVelocityThreshold?: number;
     shouldCloseOnInteractOutside?: () => boolean;
     containerClassName?: string;
+    overlayClassName?: string;
+    headerTypography?: TypographyVariantProps;
 }
 export interface BottomSheetProps extends BottomSheetBaseProps {
     trigger?: ReactNode;

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -1,4 +1,5 @@
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { BottomSheetHeader } from "./BottomSheetHeader.js";
 import { useStateAndRef } from "../../../hooks/useStateAndRef.js";
 import { DomUtils } from "../../../utils/dom.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -6,7 +7,7 @@ import { clsx } from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
-import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
 var MotionModal = motion.create(Modal);
 var MotionModalOverlay = motion.create(ModalOverlay);
 var inertiaTransition = {
@@ -24,10 +25,12 @@ var staticTransition = {
 		1
 	]
 };
-var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName }) => {
+var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
 	const uiConfig = UIConfig.useConfig();
 	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
 	const closeVelocityThreshold = closeVelocityThresholdProp ?? uiConfig.bottomSheet.closeVelocityThreshold;
+	const hideThumb = hideThumbProp ?? uiConfig.bottomSheet.hideThumb;
+	const headerTypography = headerTypographyProp ?? uiConfig.bottomSheet.headerTypography;
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
 		return {
@@ -36,6 +39,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		};
 	}, [viewport.height, sheetMarginTop]);
 	const y = useMotionValue(sheetHeight);
+	const dragControls = useDragControls();
 	const closeVelocityRef = useRef(true);
 	const overlayRef = useRef(null);
 	const containerRef = useRef(null);
@@ -78,12 +82,12 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		ref: overlayRef,
 		shouldCloseOnInteractOutside,
 		children: [/* @__PURE__ */ jsx(motion.div, {
-			className: "pointer-events-none absolute inset-0 bg-support-overlay",
+			className: clsx("pointer-events-none absolute inset-0 bg-support-overlay", overlayClassName),
 			animate: { opacity: 1 },
 			initial: { opacity: 0 },
 			exit: { opacity: 0 }
 		}), /* @__PURE__ */ jsx(MotionModal, {
-			isDismissable: true,
+			isDismissable,
 			className: clsx("pointer-events-none flex h-full w-full flex-col items-stretch justify-end outline-none will-change-transform"),
 			animate: {
 				y: 0,
@@ -109,6 +113,8 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 				minHeight: "100%"
 			},
 			drag: "y",
+			dragListener: false,
+			dragControls,
 			dragElastic: {
 				top: 0,
 				bottom: .5
@@ -157,10 +163,18 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 								ref: focusTrapRef,
 								tabIndex: -1
 							}),
-							/* @__PURE__ */ jsx("div", {
+							/* @__PURE__ */ jsxs("div", {
 								className: "flex max-h-full min-h-0 flex-col items-stretch",
 								ref: containerRef,
-								children: typeof children === "function" ? children(close) : children
+								children: [/* @__PURE__ */ jsx(BottomSheetHeader, {
+									label,
+									dragControls,
+									onClose: close,
+									isDismissable,
+									hideHeader,
+									hideThumb,
+									headerTypography
+								}), typeof children === "function" ? children(close) : children]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "shrink-0",

package/dist/components/overlays/BottomSheet/BottomSheetHeader.d.ts

@@ -0,0 +1,13 @@
+import { DragControls } from 'motion/react';
+import { ReactNode } from 'react';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+export interface BottomSheetHeaderProps {
+    label?: ReactNode;
+    isDismissable?: boolean;
+    dragControls?: DragControls;
+    hideHeader?: boolean;
+    hideThumb?: boolean;
+    headerTypography?: TypographyVariantProps;
+    onClose?: () => void;
+}
+export declare const BottomSheetHeader: ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose, }: BottomSheetHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/BottomSheet/BottomSheetHeader.js

@@ -0,0 +1,36 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { ns } from "../../../config/i18n.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("pb-list-height-title-bottom", !isDismissable && "pt-list-height-title-top"),
+		children: [isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
+			onPointerDown: (e) => {
+				e.preventDefault();
+				dragControls?.start(e);
+			},
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
+		}), !hideHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between px-list-side-title",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "label-2",
+				variant: "prominent-1",
+				...headerTypography,
+				children: label
+			}), onClose && isDismissable && /* @__PURE__ */ jsx(Button, {
+				onPress: onClose,
+				"aria-label": t(($) => $.ui.closeAlt),
+				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6" })
+			})]
+		})]
+	});
+};
+export { BottomSheetHeader };

package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js

@@ -1,10 +1,8 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
-import { FormFieldHeader } from "../../inputs/FormField/FormFieldHeader.js";
-import { FormFieldHeaderClose } from "../../inputs/FormField/FormFieldHeaderClose.js";
 import { popover } from "../../shared/popover.cva.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
 const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
@@ -15,14 +13,11 @@ const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverCla
 		trigger,
 		height: "auto",
 		isDismissable: true,
-		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormFieldHeader, {
-			label: sheetLabel,
-			rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-			className: "px-4 pt-3"
-		}), /* @__PURE__ */ jsx("div", {
+		label: sheetLabel,
+		children: /* @__PURE__ */ jsx("div", {
 			className: "p-4",
 			children
-		})] })
+		})
 	});
 	return /* @__PURE__ */ jsxs(DialogTrigger, {
 		isOpen,

package/dist/components/table/CellText.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, FC, ReactNode } from 'react';
-export interface CellTextProps {
+import { TypographyProps } from '../text/Typography/Typography';
+export interface CellTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
     children: ReactNode;
     className?: string;
     style?: CSSProperties;

package/dist/components/table/CellText.js

@@ -1,13 +1,19 @@
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { Typography } from "../text/Typography/Typography.js";
+import { UIConfig } from "../../config/uiConfig.context.js";
+import { tableCellText } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-const CellText = ({ children, style, className }) => /* @__PURE__ */ jsx(Typography, {
-	variant: "default",
-	size: "label-1",
-	as: "span",
-	className: clsx("block overflow-hidden text-ellipsis text-text-default-2", className),
-	style,
-	"data-rac": true,
-	children
-});
+const CellText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.tableCellText.variant, size = uiConfig.tableCellText.size, children, style, className } = props;
+	return /* @__PURE__ */ jsx(Typography, {
+		className: UIStyle.useCva("table.cellTextCva", tableCellText)({ className }),
+		as: "span",
+		variant,
+		size,
+		style,
+		"data-rac": true,
+		children
+	});
+};
 export { CellText };

package/dist/components/table/ColumnConfig.js

@@ -1,6 +1,6 @@
 import { Typography } from "../text/Typography/Typography.js";
-import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { ns } from "../../config/i18n.js";
+import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { Modal } from "../overlays/Modal/Modal.js";
 import { Table } from "./Table.js";
 import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";

package/dist/components/table/HeaderText.d.ts

@@ -1,5 +1,8 @@
-import { FC, ReactNode } from 'react';
-export interface HeaderTextProps {
+import { CSSProperties, FC, ReactNode } from 'react';
+import { TypographyProps } from '../text/Typography/Typography';
+export interface HeaderTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
     children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
 }
 export declare const HeaderText: FC<HeaderTextProps>;

package/dist/components/table/HeaderText.js

@@ -1,10 +1,18 @@
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { Typography } from "../text/Typography/Typography.js";
+import { UIConfig } from "../../config/uiConfig.context.js";
+import { tableHeaderText } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
-const HeaderText = ({ children }) => /* @__PURE__ */ jsx(Typography, {
-	variant: "default",
-	size: "label-1",
-	as: "span",
-	className: "overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1",
-	children
-});
+const HeaderText = (props) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.tableHeaderText.variant, size = uiConfig.tableHeaderText.size, children, style, className } = props;
+	return /* @__PURE__ */ jsx(Typography, {
+		className: UIStyle.useCva("table.headerTextCva", tableHeaderText)({ className }),
+		as: "span",
+		variant,
+		size,
+		style,
+		children
+	});
+};
 export { HeaderText };

package/dist/components/table/Table.js

@@ -3,11 +3,11 @@ import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
 import { UIStyle } from "../../config/uiStyle.context.js";
 import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
+import { tableData, tableHeadData, tableHeadRow, tableRow } from "./table.cva.js";
 import { CellText } from "./CellText.js";
 import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
 import { useTableNav } from "../../hooks/useTableNav.js";
-import { tableData, tableHeadData, tableHeadRow, tableRow } from "./table.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useMemo, useRef, useState } from "react";

package/dist/components/table/table.cva.d.ts

@@ -17,3 +17,9 @@ export declare const tableData: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TableDataVariantProps extends VariantProps<typeof tableData> {
 }
+export declare const tableHeaderText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TableHeaderTextVariantProps extends VariantProps<typeof tableHeaderText> {
+}
+export declare const tableCellText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TableCellTextVariantProps extends VariantProps<typeof tableCellText> {
+}

package/dist/components/table/table.cva.js

@@ -32,4 +32,6 @@ const tableData = cva([
 	} },
 	defaultVariants: { hasRightBorder: true }
 });
-export { tableData, tableHeadData, tableHeadRow, tableRow };
+const tableHeaderText = cva(["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"]);
+const tableCellText = cva(["block overflow-hidden text-ellipsis text-text-default-2"]);
+export { tableCellText, tableData, tableHeadData, tableHeadRow, tableHeaderText, tableRow };

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

@@ -10,6 +10,8 @@ import { SliderProps } from '../components/inputs/Slider/Slider';
 import { ToggleProps } from '../components/inputs/Toggle/Toggle';
 import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
 import { BottomSheetProps } from '../components/overlays/BottomSheet/BottomSheet';
+import { CellTextProps } from '../components/table/CellText';
+import { HeaderTextProps } from '../components/table/HeaderText';
 export declare namespace UIConfig {
     type DeepRequired<T> = {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
@@ -20,12 +22,14 @@ export declare namespace UIConfig {
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
         checkbox: Pick<CheckboxProps, "variant">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon">;
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
-        bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold">;
+        bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
+        tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;
+        tableCellText: Pick<CellTextProps, "variant" | "size">;
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/config/uiConfig.context.js

@@ -29,7 +29,8 @@ let UIConfig;
 			selectionMode: "single",
 			isSearchable: false,
 			selectedTagsType: "list",
-			collapseAfter: 3
+			collapseAfter: 3,
+			hideSearchIcon: false
 		},
 		toggle: { variant: "default" },
 		slider: {
@@ -50,7 +51,20 @@ let UIConfig;
 		},
 		bottomSheet: {
 			closeDragThreshold: 100,
-			closeVelocityThreshold: 200
+			closeVelocityThreshold: 200,
+			hideThumb: false,
+			headerTypography: {
+				size: "label-2",
+				variant: "prominent-1"
+			}
+		},
+		tableHeaderText: {
+			variant: "default",
+			size: "label-1"
+		},
+		tableCellText: {
+			variant: "default",
+			size: "label-1"
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);

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

@@ -4,6 +4,8 @@ import { BreadcrumbChevronVariantProps, BreadcrumbIconVariantProps, BreadcrumbIt
 import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
 import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
 import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
+import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
+import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
 import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
 import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
@@ -17,7 +19,7 @@ import { SegmentItemVariantProps, SegmentVariantProps } from '../components/segm
 import { PopoverVariantProps } from '../components/shared/popover.cva';
 import { AlertVariantProps } from '../components/status/Alert/alert.cva';
 import { ToastVariantProps } from '../components/status/Toast/toast.cva';
-import { TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantProps, TableRowVariantProps } from '../components/table/table.cva';
+import { TableCellTextVariantProps, TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantProps, TableHeaderTextVariantProps, TableRowVariantProps } from '../components/table/table.cva';
 import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
@@ -86,6 +88,8 @@ export declare namespace UIStyle {
             headDataCva?: Cva<TableHeadDataVariantProps>;
             rowCva?: Cva<TableRowVariantProps>;
             dataCva?: Cva<TableDataVariantProps>;
+            headerTextCva?: Cva<TableHeaderTextVariantProps>;
+            cellTextCva?: Cva<TableCellTextVariantProps>;
         };
         tooltip: {
             cva?: Cva<TooltipVariantProps>;
@@ -139,6 +143,10 @@ export declare namespace UIStyle {
         popover: {
             cva?: Cva<PopoverVariantProps>;
         };
+        formField: {
+            errorLabelCva?: Cva<FormFieldErrorVariantProps>;
+            helperLabelCva?: Cva<FormFieldHelperVariantProps>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/index.js

@@ -55,6 +55,7 @@ import { Button } from "./components/buttons/Button/Button.js";
 import { IconButton } from "./components/buttons/IconButton/IconButton.js";
 import { InlineIconButton } from "./components/buttons/InlineIconButton/InlineIconButton.js";
 import { PillButton } from "./components/buttons/PillButton/PillButton.js";
+import { ns, resources } from "./config/i18n.js";
 import { useStateAndRef } from "./hooks/useStateAndRef.js";
 import { DomUtils } from "./utils/dom.utils.js";
 import { BottomSheet } from "./components/overlays/BottomSheet/BottomSheet.js";
@@ -66,7 +67,6 @@ import { ToggleButton } from "./components/buttons/ToggleButton/ToggleButton.js"
 import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
-import { ns, resources } from "./config/i18n.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";

package/dist/utils/file.utils.d.ts

@@ -5,5 +5,9 @@ export declare namespace FileUtils {
     const downloadFile: (data: Blob | AxiosResponse<Blob>, fileName?: string, revokeTimeoutMs?: number) => void;
     const isFileTypeAccepted: (file: File, fileTypes?: readonly string[] | string[]) => boolean;
     const getCalculatedFileSize: (file?: File) => string;
+    const getFileDisplaySize: (state: {
+        file?: File;
+        displaySize?: number;
+    }) => string;
     const formatBytes: (size: number, decimals?: number) => string;
 }

package/dist/utils/file.utils.js

@@ -26,14 +26,19 @@ let FileUtils;
 			return file.name.toLowerCase().endsWith(type.toLowerCase());
 		});
 	};
-	_FileUtils.getCalculatedFileSize = (file) => {
+	const getCalculatedFileSize = _FileUtils.getCalculatedFileSize = (file) => {
 		if (!file) return "";
 		if (file.size < 1024) return `${file.size} B`;
 		if (file.size < 1024 * 1024) return `${(file.size / 1024).toFixed(2)} KB`;
 		if (file.size < 1024 * 1024 * 1024) return `${(file.size / 1024 / 1024).toFixed(2)} MB`;
 		return `${(file.size / 1024 / 1024 / 1024).toFixed(2)} GB`;
 	};
-	_FileUtils.formatBytes = (size, decimals = 2) => {
+	_FileUtils.getFileDisplaySize = (state) => {
+		if (state.file) return getCalculatedFileSize(state.file);
+		if (state.displaySize != null) return formatBytes(state.displaySize);
+		return "";
+	};
+	const formatBytes = _FileUtils.formatBytes = (size, decimals = 2) => {
 		if (size < 1024) return `${size} B`;
 		if (size < 1024 * 1024) return `${(size / 1024).toFixed(decimals)} KB`;
 		if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(decimals)} MB`;

package/package.json

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