@povio/ui 3.0.0 → 3.1.0

package/README.md

@@ -48,6 +48,45 @@ We also use a custom tailwind plugin to shorten some selectors inside the @povio
 @plugin "@povio/ui/tw-ui-plugin";
 ```
 
+### Z-Index
+
+`@povio/ui` uses named z-index theme tokens instead of hardcoded Tailwind values. These must be defined in your `base.css` inside the `@theme static` block so components stack correctly and can be overridden per app.
+
+```css
+@theme static {
+  --z-index-base: 0;
+  --z-index-raised: 1;
+  --z-index-sticky: 10;
+  --z-index-drawer: 20;
+  --z-index-modal: 30;
+  --z-index-bottom-sheet: 40;
+  --z-index-drop-target: 50;
+  --z-index-overlay-above: 100;
+}
+```
+
+| Token                     | Default | Utility class     | Used for                                                                                |
+| ------------------------- | ------- | ----------------- | --------------------------------------------------------------------------------------- |
+| `--z-index-base`          | `0`     | `z-base`          | Local stacking within a component (e.g. input trigger)                                  |
+| `--z-index-raised`        | `1`     | `z-raised`        | Elements raised above siblings within a component (e.g. clear button, tags)             |
+| `--z-index-sticky`        | `10`    | `z-sticky`        | Sticky elements like table headers                                                      |
+| `--z-index-drawer`        | `20`    | `z-drawer`        | Drawer overlay and panel                                                                |
+| `--z-index-modal`         | `30`    | `z-modal`         | Modal overlay                                                                           |
+| `--z-index-bottom-sheet`  | `40`    | `z-bottom-sheet`  | Bottom sheet overlay                                                                    |
+| `--z-index-drop-target`   | `50`    | `z-drop-target`   | File upload drop-target pseudo-elements                                                 |
+| `--z-index-overlay-above` | `100`   | `z-overlay-above` | Content that floats above its own overlay (e.g. bottom sheet footer, drop-zone content) |
+
+Tailwind 4 registers these as utility classes automatically — the `index` segment is dropped from the class name (e.g. `--z-index-drawer` becomes `z-drawer`). Each overlay type has its own token so they can stack independently — for example, a bottom sheet opened from within a drawer will render above the drawer by default.
+
+To adjust stacking for your app, override the values in your `@theme static` block:
+
+```css
+@theme static {
+  --z-index-drawer: 50;
+  --z-index-bottom-sheet: 60;
+}
+```
+
 ### Translations
 
 We're using `i18next` for translations. Make sure the package versions match in your project. Out of sync major version might cause issues.

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

@@ -1,17 +1,21 @@
 import { ReactElement } from 'react';
 import { Placement } from 'react-aria';
 import { Key, MenuItemProps } from 'react-aria-components';
+import { BottomSheetProps } from '../overlays/BottomSheet/BottomSheet';
 import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from './menu.cva';
 export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
     label: string;
     content?: string | ReactElement;
     children?: MenuItem[];
 }
+type MenuBottomSheetProps = Partial<Omit<BottomSheetProps, "children" | "isOpen" | "onOpenChange" | "trigger">>;
 export interface MenuProps {
     trigger: ReactElement;
     items: MenuItem[];
     closeDelay?: number;
     placement?: Placement;
     onAction?: (key: Key, e: any) => void;
+    bottomSheetProps?: MenuBottomSheetProps;
 }
 export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,2 +1,2 @@
 import { MenuProps } from './Menu';
-export declare const MenuMobile: ({ trigger, items, onAction, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuMobile: ({ trigger, items, onAction, bottomSheetProps, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuMobile.js

@@ -8,7 +8,7 @@ import { clsx } from "clsx";
 import { useRef, useState } from "react";
 import { Button, Menu } from "react-aria-components";
 //#region src/components/Menu/MenuMobile.tsx
-var MenuMobile = ({ trigger, items, onAction, ...props }) => {
+var MenuMobile = ({ trigger, items, onAction, bottomSheetProps, ...props }) => {
 	const menuItemCva = UIOverrides.useCva("menu.itemCva", menuItemDefinition);
 	const menuCva = UIOverrides.useCva("menu.cva", menuDefinition);
 	const activeItemRef = useRef(null);
@@ -40,11 +40,12 @@ var MenuMobile = ({ trigger, items, onAction, ...props }) => {
 		setActiveItem(activeItemRef.current);
 	};
 	return /* @__PURE__ */ jsx(BottomSheet, {
+		isDismissable: true,
+		hideHeader: true,
+		...bottomSheetProps,
 		isOpen,
 		onOpenChange: setIsOpen,
 		trigger,
-		isDismissable: true,
-		hideHeader: true,
 		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [activeItem && /* @__PURE__ */ jsxs(Button, {
 			className: clsx(menuItemCva({
 				...props,

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

@@ -194,7 +194,8 @@ var DateTimePickerBase = (props) => {
 					datePickerState: dialogState,
 					onApply,
 					onMonthYearChange,
-					granularity: "day"
+					granularity: "day",
+					isTimeOptional
 				})
 			})]
 		})

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

@@ -19,7 +19,8 @@ type CalendarProps = DateTimeCalendarProps & {
     onMonthYearCommit?: () => void;
     selectedDate?: CalendarDate | null;
     granularity?: "day" | "month" | "year";
+    isTimeOptional?: boolean;
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,7 +8,7 @@ import { clsx } from "clsx";
 import { useEffect, useState } from "react";
 import { useCalendar } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/Calendar.tsx
-var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity = "day", ...props }) => {
+var Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity = "day", ...props }) => {
 	const [toggleState, setToggleState] = useState(() => {
 		if (granularity === "year") return "year";
 		if (granularity === "month") return "month";
@@ -139,6 +139,7 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			prevButtonProps: headerPrevButtonProps,
 			nextButtonProps: headerNextButtonProps,
 			includesTime,
+			isTimeOptional,
 			hourCycle,
 			granularity,
 			toggleState,

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

@@ -8,10 +8,11 @@ interface CalendarProps {
     prevButtonProps: AriaButtonProps;
     nextButtonProps: AriaButtonProps;
     includesTime?: boolean;
+    isTimeOptional?: boolean;
     hourCycle?: 12 | 24;
     granularity?: "day" | "month" | "year";
     toggleState: ToggleState | null;
     setToggleState: (state: ToggleState | null) => void;
 }
-export declare const CalendarHeader: ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity, toggleState, setToggleState, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarHeader: ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity, toggleState, setToggleState, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ var HourCycle = {
 	12: "h12",
 	24: "h23"
 };
-var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity = "day", toggleState, setToggleState }) => {
+var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity = "day", toggleState, setToggleState }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: calendarState.timeZone
@@ -25,9 +25,14 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 	});
 	const year = calendarState.focusedDate.year.toString();
 	const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
-	const timeValue = datePickerState?.timeValue || new Time();
-	const date = /* @__PURE__ */ new Date();
-	date.setHours(timeValue.hour, timeValue.minute);
+	const hasTimeValue = !!datePickerState?.timeValue;
+	let timeLabel = "--:--";
+	if (isTimeOptional || hasTimeValue) {
+		const timeValue = datePickerState?.timeValue || new Time();
+		const date = /* @__PURE__ */ new Date();
+		date.setHours(timeValue.hour, timeValue.minute);
+		timeLabel = timeFormatter.format(date);
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
 		children: [
@@ -95,7 +100,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 						toggle: true,
 						isSelected: toggleState === "time",
 						onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
-						children: timeFormatter.format(date)
+						children: timeLabel
 					})
 				]
 			}),

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

@@ -100,7 +100,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 				children: [
 					disableManualEntry && /* @__PURE__ */ jsx(Button, {
 						onPress: onOpenDropdown,
-						className: "absolute inset-0 z-0",
+						className: "absolute inset-0 z-base",
 						isDisabled
 					}),
 					todayIcon && /* @__PURE__ */ jsx(IconButton, {
@@ -108,7 +108,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						icon: TodayIcon,
 						size: "none",
 						onPress: onToday,
-						className: "relative z-1",
+						className: "relative z-raised",
 						isDisabled
 					}),
 					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {

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

@@ -1,5 +1,7 @@
 import { ReactNode, RefObject } from 'react';
 import { AriaDialogProps } from 'react-aria';
+import { BottomSheetProps } from '../../../overlays/BottomSheet/BottomSheet';
+type DateTimeDialogBottomSheetProps = Partial<Omit<BottomSheetProps, "children" | "isOpen" | "onOpenChange" | "label" | "footer">>;
 interface DateTimeDialogProps {
     children: ReactNode;
     footer: ReactNode;
@@ -9,7 +11,8 @@ interface DateTimeDialogProps {
     isOpen: boolean;
     triggerRef?: RefObject<HTMLElement | null>;
     dialogProps?: AriaDialogProps;
+    bottomSheetProps?: DateTimeDialogBottomSheetProps;
     onOpenChange: (open: boolean) => void;
 }
-export declare const DateTimeDialog: ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange, }: DateTimeDialogProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DateTimeDialog: ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, bottomSheetProps, onOpenChange, }: DateTimeDialogProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 import { Dialog, Popover } from "react-aria-components";
 //#region src/components/inputs/DateTime/shared/DateTimeDialog.tsx
-var DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange }) => {
+var DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, bottomSheetProps, onOpenChange }) => {
 	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	if (useBreakpoint("md")) {
 		if (!isOpen) return null;
@@ -30,14 +30,15 @@ var DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, t
 		});
 	}
 	return /* @__PURE__ */ jsxs(BottomSheet, {
-		label,
-		footer,
-		isOpen,
-		onOpenChange,
 		sheetMarginBottom: 0,
 		isScrollable: true,
 		height: "auto",
 		isDismissable: true,
+		...bottomSheetProps,
+		label,
+		footer,
+		isOpen,
+		onOpenChange,
 		children: [children, !hideSidebar && sidebar]
 	});
 };

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

@@ -49,7 +49,7 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInva
 			children: [
 				disableManualEntry && /* @__PURE__ */ jsx(Button, {
 					onPress,
-					className: "absolute inset-0 z-0"
+					className: "absolute inset-0 z-base"
 				}),
 				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 					as,

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

@@ -151,7 +151,7 @@ var FileUploadBase = (props) => {
 					title: emptyText,
 					uploadText,
 					browseText,
-					className: "group-drop-target/file-upload-drop-zone:flex! absolute top-1/2 left-1/2 z-50 hidden -translate-x-1/2 -translate-y-1/2 flex-col"
+					className: "group-drop-target/file-upload-drop-zone:flex! absolute top-1/2 left-1/2 z-overlay-above hidden -translate-x-1/2 -translate-y-1/2 flex-col"
 				})] }) : /* @__PURE__ */ jsx(FileUploadContent, {
 					...rest,
 					variant,

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

@@ -1,6 +1,6 @@
-interface ProgressBarProps {
+import { ProgressBarVariantProps } from './progressBar.cva';
+interface ProgressBarProps extends ProgressBarVariantProps {
     progress?: number;
-    valueLabel?: "leading" | "trailing" | "none";
 }
 export declare const ProgressBar: ({ progress, valueLabel }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,22 @@
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import { progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition } from "./progressBar.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx$1 from "clsx";
 //#region src/components/inputs/File/shared/ProgressBar.tsx
 var ProgressBar = ({ progress = 0, valueLabel = "trailing" }) => {
+	const progressBarCva = UIOverrides.useCva("progressBar.cva", progressBarDefinition);
+	const progressBarTrackWrapperCva = UIOverrides.useCva("progressBar.trackWrapperCva", progressBarTrackWrapperDefinition);
+	const progressBarTrackCva = UIOverrides.useCva("progressBar.trackCva", progressBarTrackDefinition);
+	const progressBarFillCva = UIOverrides.useCva("progressBar.fillCva", progressBarFillDefinition);
+	const progressBarValueCva = UIOverrides.useCva("progressBar.valueCva", progressBarValueDefinition);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx$1("flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", valueLabel === "leading" && "flex-row-reverse"),
+		className: progressBarCva({ valueLabel }),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height",
+			className: progressBarTrackWrapperCva(),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "relative h-1 w-full",
-				children: [/* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0 rounded-xs bg-input-filled-idle" }), /* @__PURE__ */ jsx("div", {
-					className: "absolute top-0 left-0 h-1 shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
+				className: progressBarTrackCva({ part: "container" }),
+				children: [/* @__PURE__ */ jsx("div", { className: progressBarTrackCva({ part: "background" }) }), /* @__PURE__ */ jsx("div", {
+					className: progressBarFillCva(),
 					style: { width: `${progress}%` }
 				})]
 			})
@@ -18,7 +24,7 @@ var ProgressBar = ({ progress = 0, valueLabel = "trailing" }) => {
 			variant: "default",
 			size: "label-2",
 			as: "span",
-			className: "text-center text-text-default-3",
+			className: progressBarValueCva(),
 			children: [progress, "%"]
 		})]
 	});

package/dist/components/inputs/File/shared/fileUpload.cva.d.ts

@@ -8,7 +8,7 @@ export declare const fileUploadDropZoneDefinition: {
             readonly horizontal: ["flex-row justify-between"];
         };
         readonly isContainer: {
-            readonly true: ["data-[drop-target]:before:content-['']", "data-[drop-target]:before:absolute", "data-[drop-target]:before:z-40", "data-[drop-target]:before:width-full", "data-[drop-target]:before:height-full", "data-[drop-target]:before:top-0", "data-[drop-target]:before:left-0", "data-[drop-target]:border data-[drop-target]:border-dashed", "data-[drop-target]:border-elevation-outline-default-2", "data-[drop-target]:before:pointer-events-none data-[drop-target]:before:inset-0", "data-[drop-target]:before:bg-elevation-fill-default-2"];
+            readonly true: ["data-[drop-target]:before:content-['']", "data-[drop-target]:before:absolute", "data-[drop-target]:before:z-drop-target", "data-[drop-target]:before:width-full", "data-[drop-target]:before:height-full", "data-[drop-target]:before:top-0", "data-[drop-target]:before:left-0", "data-[drop-target]:border data-[drop-target]:border-dashed", "data-[drop-target]:border-elevation-outline-default-2", "data-[drop-target]:before:pointer-events-none data-[drop-target]:before:inset-0", "data-[drop-target]:before:bg-elevation-fill-default-2"];
             readonly false: ["flex items-center", "py-file-upload-container-height-top-bottom", "px-file-upload-container-side-default", "gap-gap-file-upload-content-gap-icon-to-content", "border border-input-outlined-outline-idle border-dashed bg-input-outlined-idle", "hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2", "invalid:border invalid:border-input-outlined-outline-error", "data-[drop-target]:border-elevation-outline-default-2 data-[drop-target]:bg-elevation-fill-default-2", "data-[has-files]:border-solid"];
         };
     }>;

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

@@ -14,7 +14,7 @@ var fileUploadDropZoneDefinition = UIOverrides.defineConfig({
 				true: [
 					"data-[drop-target]:before:content-['']",
 					"data-[drop-target]:before:absolute",
-					"data-[drop-target]:before:z-40",
+					"data-[drop-target]:before:z-drop-target",
 					"data-[drop-target]:before:width-full",
 					"data-[drop-target]:before:height-full",
 					"data-[drop-target]:before:top-0",

package/dist/components/inputs/File/shared/progressBar.cva.d.ts

@@ -0,0 +1,38 @@
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const progressBarDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly valueLabel: {
+            readonly leading: ["flex-row-reverse"];
+            readonly trailing: [];
+            readonly none: [];
+        };
+    }>;
+};
+export type ProgressBarConfig = NonNullable<typeof progressBarDefinition.config>;
+export interface ProgressBarVariantProps extends UIOverrides.VariantProps<ProgressBarConfig> {
+}
+export declare const progressBarTrackWrapperDefinition: {
+    base: string[];
+    config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export declare const progressBarTrackDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly part: {
+            readonly container: ["relative h-1 w-full"];
+            readonly background: ["h-1 w-full shrink-0 rounded-xs bg-input-filled-idle"];
+        };
+    }>;
+};
+export type ProgressBarTrackConfig = NonNullable<typeof progressBarTrackDefinition.config>;
+export interface ProgressBarTrackVariantProps extends UIOverrides.VariantProps<ProgressBarTrackConfig> {
+}
+export declare const progressBarFillDefinition: {
+    base: string[];
+    config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export declare const progressBarValueDefinition: {
+    base: string[];
+    config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};

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

@@ -0,0 +1,28 @@
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
+//#region src/components/inputs/File/shared/progressBar.cva.ts
+var progressBarDefinition = UIOverrides.defineConfig({
+	base: ["flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions"],
+	config: {
+		variants: { valueLabel: {
+			leading: ["flex-row-reverse"],
+			trailing: [],
+			none: []
+		} },
+		defaultVariants: { valueLabel: "trailing" }
+	}
+});
+var progressBarTrackWrapperDefinition = UIOverrides.defineConfig({ base: ["flex flex-fill flex-col items-start gap-2 py-progress-height-height"] });
+var progressBarTrackDefinition = UIOverrides.defineConfig({
+	base: [],
+	config: {
+		variants: { part: {
+			container: ["relative h-1 w-full"],
+			background: ["h-1 w-full shrink-0 rounded-xs bg-input-filled-idle"]
+		} },
+		defaultVariants: { part: "container" }
+	}
+});
+var progressBarFillDefinition = UIOverrides.defineConfig({ base: ["absolute top-0 left-0 h-1 shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300"] });
+var progressBarValueDefinition = UIOverrides.defineConfig({ base: ["text-center text-text-default-3"] });
+//#endregion
+export { progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition };

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

@@ -63,7 +63,7 @@ var TextAreaBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: clsx("group w-full", className),
+			className: clsx("group w-full flex flex-col", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "group/text-area relative h-full",

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

@@ -2,6 +2,7 @@ import { ReactElement, Ref } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { Key } from 'react-aria-components';
 import { FormFieldProps } from '../../FormField/FormField';
+import { BottomSheetProps } from '../../../overlays/BottomSheet/BottomSheet';
 import { DefaultInitialSelectItem, GroupedSelectProps, SelectAsyncProps, SelectItem, SelectNewItemProps, SelectVirtualizationProps } from './select.types';
 import { InputVariantProps } from '../../shared/input.cva';
 export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = FormFieldProps & GroupedSelectProps<TKey, TInitialSelectItem> & SelectNewItemProps & SelectAsyncProps & SelectVirtualizationProps & InputVariantProps & Pick<AriaButtonProps, "onBlur"> & {
@@ -23,5 +24,6 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+    bottomSheetProps?: Partial<Omit<BottomSheetProps, "children" | "isOpen" | "onOpenChange" | "onStateChange" | "label" | "footer">>;
 };
 export declare const SelectBase: <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(dProps: SelectBaseProps<TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

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

@@ -93,7 +93,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 						labelProps
 					}),
 					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
-						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
+						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-raised"),
 						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
 							selectedItems,
 							isDisabled,
@@ -114,7 +114,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 						onPress: () => setIsOpen(!isOpen),
 						onBlur,
 						"data-type": "select-trigger",
-						className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-0"),
+						className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-base"),
 						...fieldProps,
 						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
 							size: "label-1",

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

@@ -18,7 +18,7 @@ var SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAf
 		isDisabled,
 		onDismiss: () => onRemove(item.id),
 		excludeFromTabOrder: true,
-		className: "z-1",
+		className: "z-raised",
 		children: item.label
 	}, item.id)), remainingCount > 0 && /* @__PURE__ */ jsx(Tag, {
 		isDisabled,

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

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
 type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
-export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, bottomSheetProps, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ import { useRef } from "react";
 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 }) => {
+var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, bottomSheetProps, ...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,
@@ -82,6 +82,9 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				collapseAfter,
 				selectedTagsType
 			}), /* @__PURE__ */ jsx(BottomSheet, {
+				isDismissable: true,
+				hideHeader: isSearchable,
+				...bottomSheetProps,
 				isOpen,
 				onOpenChange: handleOpenChange,
 				onStateChange: (state) => {
@@ -89,8 +92,6 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				},
 				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, {

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

@@ -11,7 +11,7 @@ var InputClear = ({ onClear, className, style, show }) => {
 	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",
-		className: clsx("relative z-1 flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		className: clsx("relative z-raised flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
 		label: t(($) => $.ui.clearAlt),
 		icon: CloseIcon,
 		onPress: onClear,

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

@@ -98,7 +98,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(MotionModalOverlay, {
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
-		className: clsx("fixed top-0 left-0 z-10 w-screen h-dvh", containerClassName),
+		className: clsx("fixed top-0 left-0 z-bottom-sheet w-screen h-dvh", containerClassName),
 		style: { "--bottom-sheet-keyboard-inset": `${keyboardInset}px` },
 		onOpenChange,
 		isDismissable,
@@ -212,7 +212,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
+						className: clsx("pointer-events-auto absolute z-overlay-above w-full bg-elevation-fill-default-2", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
 						children: footer
 					})
 				] })

package/dist/components/overlays/Drawer/Drawer.js

@@ -36,11 +36,11 @@ var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children
 		isOpen,
 		onOpenChange,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
-		className: clsx(modalOverlay(), overlayClassName),
+		className: clsx(modalOverlay(), "z-drawer", overlayClassName),
 		isDismissable,
 		shouldCloseOnInteractOutside,
 		children: /* @__PURE__ */ jsx(Modal, {
-			className: clsx("fixed inset-y-0 right-0 z-10 w-fit entering:animate-drawer-enter-right exiting:animate-drawer-exit-right bg-elevation-fill-default-1", className),
+			className: clsx("fixed inset-y-0 right-0 z-drawer w-fit entering:animate-drawer-enter-right exiting:animate-drawer-exit-right bg-elevation-fill-default-1", className),
 			children: /* @__PURE__ */ jsx(Dialog, {
 				"aria-label": label,
 				className: clsx("outline-none", dialogClassName),

package/dist/components/overlays/Modal/modal.cva.js

@@ -18,7 +18,7 @@ var modalContentDefinition = UIOverrides.defineConfig({
 	}
 });
 var modalOverlayDefinition = UIOverrides.defineConfig({
-	base: ["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"],
+	base: ["fixed inset-0 z-modal flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"],
 	config: {
 		variants: { aside: {
 			left: "p-0",

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

@@ -1,4 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
+import { BottomSheetProps } from '../BottomSheet/BottomSheet';
+type ResponsivePopoverBottomSheetProps = Partial<Omit<BottomSheetProps, "children" | "isOpen" | "onOpenChange" | "trigger">>;
 export interface ResponsivePopoverProps {
     trigger: ReactElement;
     children: ReactNode;
@@ -6,5 +8,7 @@ export interface ResponsivePopoverProps {
     onOpenChange: (isOpen: boolean) => void;
     popoverClassName?: string;
     sheetLabel: string;
+    bottomSheetProps?: ResponsivePopoverBottomSheetProps;
 }
-export declare const ResponsivePopover: ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, }: ResponsivePopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ResponsivePopover: ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, }: ResponsivePopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -6,15 +6,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
 //#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
-var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
+var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps }) => {
 	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
-		isOpen,
-		onOpenChange,
-		trigger,
 		height: "auto",
 		isDismissable: true,
 		label: sheetLabel,
+		...bottomSheetProps,
+		isOpen,
+		onOpenChange,
+		trigger,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "p-4",
 			children

package/dist/components/status/Toast/Toast.js

@@ -3,7 +3,7 @@ import { Typography } from "../../text/Typography/Typography.js";
 import { Loader } from "../Loader/Loader.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
-import { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainer, toastDefinition, toastWrapper } from "./toast.cva.js";
+import { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainerDefinition, toastDefinition, toastWrapper } from "./toast.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer } from "react-toastify";
 //#region src/components/status/Toast/Toast.tsx
@@ -47,10 +47,13 @@ var Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) =>
 	});
 };
 var ToastContainer$1 = () => {
+	const uiConfig = UIConfig.useConfig();
+	const containerCva = UIOverrides.useCva("toast.containerCva", toastContainerDefinition);
 	return /* @__PURE__ */ jsx(ToastContainer, {
+		position: uiConfig.toast.position,
 		className: (params) => {
-			return toastContainer({
-				position: params?.position,
+			return containerCva({
+				position: params?.position ?? uiConfig.toast.position,
 				className: params?.defaultClassName
 			});
 		},

package/dist/components/status/Toast/toast.cva.d.ts

@@ -1,8 +1,19 @@
 import { ButtonVariantProps } from '../../buttons/Button/button.cva';
 import { UIOverrides } from '../../../config/uiOverrides.context';
-export declare const toastContainer: (props?: ({
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastContainerDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly position: {
+            readonly "bottom-right": "right-0 bottom-0";
+            readonly "bottom-left": "bottom-0 left-0";
+            readonly "top-right": "top-0 right-0";
+            readonly "top-left": "top-0 left-0";
+            readonly "bottom-center": "bottom-0";
+            readonly "top-center": "top-0";
+        };
+    }>;
+};
+export type ToastContainerConfig = NonNullable<typeof toastContainerDefinition.config>;
 export declare const toastWrapper: string;
 export declare const toastDefinition: {
     base: string[];

package/dist/components/status/Toast/toast.cva.js

@@ -1,16 +1,18 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { clsx } from "clsx";
-import { cva } from "class-variance-authority";
 //#region src/components/status/Toast/toast.cva.ts
-var toastContainer = cva("m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-mobile p-0 md:m-toast-gap-margin-desktop md:gap-toast-gap-margin-desktop", { variants: { position: {
-	"bottom-right": "right-0 bottom-0",
-	"bottom-left": "bottom-0 left-0",
-	"top-right": "top-0 right-0",
-	"top-left": "top-0 left-0",
-	"bottom-center": "bottom-0",
-	"top-center": "top-0"
-} } });
+var toastContainerDefinition = UIOverrides.defineConfig({
+	base: ["m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-mobile p-0 md:m-toast-gap-margin-desktop md:gap-toast-gap-margin-desktop"],
+	config: { variants: { position: {
+		"bottom-right": "right-0 bottom-0",
+		"bottom-left": "bottom-0 left-0",
+		"top-right": "top-0 right-0",
+		"top-left": "top-0 left-0",
+		"bottom-center": "bottom-0",
+		"top-center": "top-0"
+	} } }
+});
 var toastWrapper = clsx("m-0! min-h-0! w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
 var toastDefinition = UIOverrides.defineConfig({
 	base: ["m-0 inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row"],
@@ -206,4 +208,4 @@ var statusSeparatorDefinition = UIOverrides.defineConfig({
 	}
 });
 //#endregion
-export { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainer, toastDefinition, toastWrapper };
+export { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainerDefinition, toastDefinition, toastWrapper };

package/dist/components/table/Table.js

@@ -3,7 +3,7 @@ import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
 import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
-import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableRowDefinition } from "./table.cva.js";
+import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableRowDefinition, theadDefinition } from "./table.cva.js";
 import { CellText } from "./CellText.js";
 import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
@@ -75,6 +75,7 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 };
 var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
 	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
+	const theadCva = UIOverrides.useCva("table.theadCva", theadDefinition);
 	const tableHeadRowCva = UIOverrides.useCva("table.headRowCva", tableHeadRowDefinition);
 	const tableHeadDataCva = UIOverrides.useCva("table.headDataCva", tableHeadDataDefinition);
 	const tableDataCva = UIOverrides.useCva("table.dataCva", tableDataDefinition);
@@ -175,7 +176,7 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 		className: clsx("w-full", className),
 		...listeners,
 		children: [/* @__PURE__ */ jsxs("thead", {
-			className: "group/table-head sticky top-0 z-10 data-is-sticky:shadow-2",
+			className: clsx(theadCva({})),
 			"data-is-sticky": isSticky || void 0,
 			children: [/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
 				ref: stickyRef,

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

@@ -11,6 +11,13 @@ export declare const tableRowDefinition: {
 export type TableRowConfig = NonNullable<typeof tableRowDefinition.config>;
 export interface TableRowVariantProps extends UIOverrides.VariantProps<TableRowConfig> {
 }
+export declare const theadDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type TheadConfig = NonNullable<typeof theadDefinition.config>;
+export interface TheadVariantProps extends UIOverrides.VariantProps<TheadConfig> {
+}
 export declare const tableHeadRowDefinition: {
     base: string[];
     config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;

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

@@ -15,6 +15,7 @@ var tableRowDefinition = UIOverrides.defineConfig({
 		odd: "odd:bg-elevation-fill-inverted-4/5"
 	} } }
 });
+var theadDefinition = UIOverrides.defineConfig({ base: ["group/table-head sticky top-0 z-sticky data-is-sticky:shadow-2"] });
 var tableHeadRowDefinition = UIOverrides.defineConfig({ base: ["h-8 w-full"] });
 var tableHeadDataDefinition = UIOverrides.defineConfig({
 	base: ["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"],
@@ -45,4 +46,4 @@ var tableDataDefinition = UIOverrides.defineConfig({
 var tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"] });
 var tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-text-default-2"] });
 //#endregion
-export { tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition };
+export { tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, theadDefinition };

package/dist/components/text/Pill/Pill.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { PillButtonVariants } from '../../buttons/PillButton/pillButton.cva';
+import { TypographyProps } from '../Typography/Typography';
+export interface PillProps extends PillButtonVariants, AriaButtonProps {
+    className?: string;
+    children: string;
+    dismissable?: boolean;
+    isDisabled?: boolean;
+    contentRef?: Ref<HTMLElement>;
+    textVariant?: TypographyProps["variant"];
+    textSize?: TypographyProps["size"];
+    onDismiss?: () => void;
+}
+export declare const Pill: ({ className, children, dismissable, isDisabled, onDismiss, contentRef, variant, ...props }: PillProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text/Pill/Pill.js

@@ -0,0 +1,44 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { Typography } from "../Typography/Typography.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { pillButtonDefinition } from "../../buttons/PillButton/pillButton.cva.js";
+import "../../../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";
+//#region src/components/text/Pill/Pill.tsx
+var Pill = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, variant = "subtle", ...props }) => {
+	const uiConfig = UIConfig.useConfig();
+	const { textVariant = uiConfig.tag.textVariant, textSize = uiConfig.tag.textSize } = props;
+	const pillCva = UIOverrides.useCva("pillButton.cva", pillButtonDefinition);
+	const { t } = useTranslation("ui");
+	const buttonProps = {
+		isDisabled,
+		onPress: onDismiss,
+		label: t(($) => $.ui.tag.dismiss),
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: pillCva({
+			...props,
+			variant,
+			className: clsx("pointer-events-none inline-flex gap-list-gap-icon-to-label overflow-hidden", className)
+		}),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			ref: contentRef,
+			variant: textVariant,
+			size: textSize,
+			as: "span",
+			className: "truncate",
+			children
+		}), dismissable && /* @__PURE__ */ jsx(Button, {
+			...buttonProps,
+			className: "pointer-events-auto shrink-0",
+			children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+		})]
+	});
+};
+//#endregion
+export { Pill };

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

@@ -11,6 +11,7 @@ import { ToggleProps } from '../components/inputs/Toggle/Toggle';
 import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
 import { BottomSheetProps } from '../components/overlays/BottomSheet/BottomSheet';
 import { ToastProps } from '../components/status/Toast/Toast';
+import { ToastPosition } from 'react-toastify';
 import { CellTextProps } from '../components/table/CellText';
 import { HeaderTextProps } from '../components/table/HeaderText';
 import { TagProps } from '../components/text/Tag/Tag';
@@ -35,7 +36,9 @@ export declare namespace UIConfig {
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;
         tableCellText: Pick<CellTextProps, "variant" | "size">;
         tag: Pick<TagProps, "textVariant" | "textSize">;
-        toast: Pick<ToastProps, "variant">;
+        toast: Pick<ToastProps, "variant"> & {
+            position: ToastPosition;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/config/uiConfig.context.js

@@ -75,7 +75,10 @@ var UIConfig;
 			textVariant: "default",
 			textSize: "label-2"
 		},
-		toast: { variant: "outlined" }
+		toast: {
+			variant: "outlined",
+			position: "top-right"
+		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);
 	_UIConfig.Provider = ({ config = {}, children }) => {

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

@@ -1,7 +1,7 @@
 import { ClassProp } from 'class-variance-authority/types';
 import { PropsWithChildren } from 'react';
 import { ButtonConfig, ButtonContentConfig, ButtonIconSizeConfig, ButtonSizeConfig } from '../components/buttons/Button/button.cva';
-import { StatusIconConfig, StatusSeparatorConfig, ToastConfig } from '../components/status/Toast/toast.cva';
+import { StatusIconConfig, StatusSeparatorConfig, ToastConfig, ToastContainerConfig } from '../components/status/Toast/toast.cva';
 import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
 import { StyleMergeUtils } from '../utils/style-merge.util';
 export declare namespace UIOverrides {
@@ -52,6 +52,7 @@ export declare namespace UIOverrides {
         };
         toast: {
             cva?: CvaOption<ToastConfig>;
+            containerCva?: CvaOption<ToastContainerConfig>;
             buttonColor?: Mapper;
         };
         alert: {
@@ -80,6 +81,7 @@ export declare namespace UIOverrides {
             cva?: GenericCvaOption;
         };
         table: {
+            theadCva?: GenericCvaOption;
             headRowCva?: GenericCvaOption;
             headDataCva?: GenericCvaOption;
             rowCva?: GenericCvaOption;
@@ -146,6 +148,13 @@ export declare namespace UIOverrides {
         select: {
             listBoxItemCva?: GenericCvaOption;
         };
+        progressBar: {
+            cva?: GenericCvaOption;
+            trackWrapperCva?: GenericCvaOption;
+            trackCva?: GenericCvaOption;
+            fillCva?: GenericCvaOption;
+            valueCva?: GenericCvaOption;
+        };
     }
     export type Config = Partial<Options>;
     interface ProviderProps {

package/dist/index.d.ts

@@ -159,6 +159,8 @@ export type { TableRowVariantProps } from './components/table/table.cva';
 export type { LinkNavigationProps, LinkProps } from './components/text/Link/Link';
 export { Link } from './components/text/Link/Link';
 export type { LinkVariantProps } from './components/text/Link/link.cva';
+export type { PillProps } from './components/text/Pill/Pill';
+export { Pill } from './components/text/Pill/Pill';
 export type { TagProps } from './components/text/Tag/Tag';
 export { Tag } from './components/text/Tag/Tag';
 export type { TagVariantProps } from './components/text/Tag/tag.cva';
@@ -178,9 +180,12 @@ export { pillButtonContentDefinition, pillButtonDefinition } from './components/
 export { checkboxDefinition, checkboxIconDefinition } from './components/inputs/Checkbox/checkbox.cva';
 export { fileCardListDefinition, fileUploadDropZoneDefinition } from './components/inputs/File/shared/fileUpload.cva';
 export { inputUploadButtonDefinition, inputUploadDropZoneDefinition, } from './components/inputs/File/shared/inputUploadButton.cva';
+export { progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition, } from './components/inputs/File/shared/progressBar.cva';
+export type { ProgressBarConfig, ProgressBarTrackConfig, ProgressBarVariantProps, } from './components/inputs/File/shared/progressBar.cva';
 export { formFieldErrorDefinition } from './components/inputs/FormField/formFieldError.cva';
 export { formFieldHelperDefinition } from './components/inputs/FormField/formFieldHelper.cva';
 export { inputBaseDefinition, inputSideDefinition, inputSizeDefinition } from './components/inputs/shared/input.cva';
+export type { LabelBaseProps, LabelConfig } from './components/inputs/shared/label.cva';
 export { labelDefinition } from './components/inputs/shared/label.cva';
 export { radioDefinition } from './components/inputs/RadioGroup/radio.cva';
 export { selectListBoxItemDefinition } from './components/inputs/Selection/shared/selectItem.cva';

package/dist/index.js

@@ -95,6 +95,7 @@ import { DateTimePicker } from "./components/inputs/DateTime/DateTimePicker/Date
 import { TimePicker } from "./components/inputs/DateTime/TimePicker/TimePicker.js";
 import { RestUtils } from "./utils/rest.utils.js";
 import { FileUtils } from "./utils/file.utils.js";
+import { progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition } from "./components/inputs/File/shared/progressBar.cva.js";
 import { ProgressBar } from "./components/inputs/File/shared/ProgressBar.js";
 import { fileCardListDefinition, fileUploadDropZoneDefinition } from "./components/inputs/File/shared/fileUpload.cva.js";
 import { FileUpload } from "./components/inputs/File/FileUpload.js";
@@ -147,6 +148,7 @@ import { InfiniteTable } from "./components/table/InfiniteTable.js";
 import { PaginatedTable } from "./components/table/PaginatedTable.js";
 import { linkDefinition } from "./components/text/Link/link.cva.js";
 import { Link } from "./components/text/Link/Link.js";
+import { Pill } from "./components/text/Pill/Pill.js";
 import { Confirmation } from "./config/confirmation.context.js";
 import { UIRouter } from "./config/router.context.js";
 import { useLocalStorage } from "./hooks/useLocalStorage.js";
@@ -163,4 +165,4 @@ import { useSorting } from "./hooks/useSorting.js";
 import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";
-export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIOverrides, UIRouter, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition, alertDefinition, breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition, buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, checkboxDefinition, checkboxIconDefinition, compoundMapper, dynamicColumns, dynamicInputs, fileCardListDefinition, fileUploadDropZoneDefinition, formFieldErrorDefinition, formFieldHelperDefinition, inputBaseDefinition, inputSideDefinition, inputSizeDefinition, inputUploadButtonDefinition, inputUploadDropZoneDefinition, isEqual, labelDefinition, linkDefinition, loaderDefinition, loaderWrapperDefinition, logger, menuDefinition, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition, modalContentDefinition, modalMainDefinition, modalOverlayDefinition, ns, pillButtonContentDefinition, pillButtonDefinition, popoverDefinition, radioDefinition, resources, segmentDefinition, segmentItemDefinition, selectListBoxItemDefinition, statusIconDefinition, statusSeparatorDefinition, stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition, tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, tagDefinition, toastDefinition, statusIconDefinition$1 as toastStatusIconDefinition, statusSeparatorDefinition$1 as toastStatusSeparatorDefinition, toggleDefinition, tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition, typographyDefinition, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
+export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, Pill, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIOverrides, UIRouter, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition, alertDefinition, breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition, buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, checkboxDefinition, checkboxIconDefinition, compoundMapper, dynamicColumns, dynamicInputs, fileCardListDefinition, fileUploadDropZoneDefinition, formFieldErrorDefinition, formFieldHelperDefinition, inputBaseDefinition, inputSideDefinition, inputSizeDefinition, inputUploadButtonDefinition, inputUploadDropZoneDefinition, isEqual, labelDefinition, linkDefinition, loaderDefinition, loaderWrapperDefinition, logger, menuDefinition, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition, modalContentDefinition, modalMainDefinition, modalOverlayDefinition, ns, pillButtonContentDefinition, pillButtonDefinition, popoverDefinition, progressBarDefinition, progressBarFillDefinition, progressBarTrackDefinition, progressBarTrackWrapperDefinition, progressBarValueDefinition, radioDefinition, resources, segmentDefinition, segmentItemDefinition, selectListBoxItemDefinition, statusIconDefinition, statusSeparatorDefinition, stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition, tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, tagDefinition, toastDefinition, statusIconDefinition$1 as toastStatusIconDefinition, statusSeparatorDefinition$1 as toastStatusSeparatorDefinition, toggleDefinition, tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition, typographyDefinition, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

package/package.json

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