@marigold/components 16.0.1 → 17.0.0

package/dist/index.mjs

@@ -1,24 +1,24 @@
-import { useAsyncList, useListData } from "@react-stately/data";
-import { DateFormat, NumericFormat, SVG, ThemeProvider, ThemeProvider as ThemeProvider$1, alignment, aspect, cn, createVar, cursorStyle, ensureCssVar, fontWeight, gapSpace, height, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useSmallScreen, useStateProps, useTheme, whiteSpace, width } from "@marigold/system";
-import { Breadcrumb, Breadcrumbs, Button, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarStateContext, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupStateContext, ComboBox, ComboBoxStateContext, DateField, DateFieldStateContext, DateInput, DatePicker, DatePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosureGroup, DisclosurePanel, DisclosureStateContext, DropZone, FieldError, FieldErrorContext, FileTrigger, Form, GridList, GridListItem, Group, Header, Heading, Input, InputContext, Label, Link, ListBox, ListBoxItem, ListBoxSection, ListStateContext, Menu, MenuItem, MenuSection, MenuTrigger, Modal, ModalOverlay, NumberField, OverlayArrow, OverlayTriggerStateContext, Popover, ProgressBar, Provider, Radio, RadioGroup, RadioGroupStateContext, RouterProvider, SearchField, Select as Select$1, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextContext, TextField, TimeField, Tooltip, TooltipTrigger, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
+import { a as More, c as FieldBase, d as TriangleAlert, f as intlMessages, i as splitChildren, l as _Label, n as Minus, o as Collapsible, r as _CheckboxGroup, s as Check, t as _Checkbox, u as HelpText } from "./Checkbox-D6DudF_g.mjs";
+import { Autocomplete, Breadcrumb, Breadcrumbs, Button, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarStateContext, Cell, Collection, Column, ComboBox, ComboBoxStateContext, DateField, DateFieldStateContext, DateInput, DatePicker, DatePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosureGroup, DisclosurePanel, DisclosureStateContext, DropIndicator, DropZone, FieldErrorContext, FileTrigger, Form, GridList, GridListItem, Group, Header, Heading, Input, InputContext, Label, Link, ListBox, ListBoxItem, ListBoxSection, ListStateContext, Menu, MenuItem, MenuSection, MenuTrigger, Modal, ModalOverlay, NumberField, OverlayArrow, OverlayTriggerStateContext, Popover, ProgressBar, Provider, Radio, RadioGroup, RadioGroupStateContext, ResizableTableContainer, RouterProvider, Row, SearchField, Select as Select$1, SelectStateContext, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, TabList, TabPanel, Table as Table$1, TableBody, TableHeader, TableStateContext, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, useAsyncList, useDragAndDrop, useFilter, useListData, useTableOptions } from "react-aria-components";
+import { DateFormat, NumericFormat, SVG, ThemeProvider, ThemeProvider as ThemeProvider$1, alignment, aspect, cn, createSpacingVar, createVar, cursorStyle, ensureCssVar, fontWeight, height, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useSmallScreen, useTheme, verticalAlign, whiteSpace, width } from "@marigold/system";
 import * as React from "react";
 import { Children, Component, Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { I18nProvider, useDateFormatter, useLocale, useLocalizedStringFormatter } from "@react-aria/i18n";
+import { useIsHidden } from "@react-aria/collections";
+import { AnimatePresence, animate, cubicBezier, motion, useMotionValue } from "motion/react";
 import { CalendarDate, startOfWeek, today } from "@internationalized/date";
 import { useCalendarGrid } from "@react-aria/calendar";
-import { chain, filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useId, useObjectRef, useViewportSize } from "@react-aria/utils";
-import { PressResponder, useHover } from "@react-aria/interactions";
+import { chain, filterDOMProps, getActiveElement, getOwnerDocument, mergeProps, nodeContains, useEnterAnimation, useExitAnimation, useId, useObjectRef, useViewportSize } from "@react-aria/utils";
+import { PressResponder } from "@react-aria/interactions";
 import { useLandmark } from "@react-aria/landmark";
 import { useOverlayTriggerState } from "react-stately";
-import { FocusScope, useFocusManager, useFocusRing } from "@react-aria/focus";
+import { FocusScope, useFocusManager } from "@react-aria/focus";
 import { DismissButton, Overlay, UNSAFE_PortalProvider, useOverlay } from "@react-aria/overlays";
 import { useIsSSR } from "@react-aria/ssr";
 import { createPortal, flushSync } from "react-dom";
 import { useField } from "@react-aria/label";
 import { useButton } from "@react-aria/button";
-import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from "@react-aria/table";
-import { Cell, Column, Row, TableBody, TableHeader, useTableState } from "@react-stately/table";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 //#region rolldown:runtime
@@ -28,16 +28,18 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function() {
-	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __copyProps = (to, from$1, except, desc) => {
-	if (from$1 && typeof from$1 === "object" || typeof from$1 === "function") for (var keys = __getOwnPropNames(from$1), i$1 = 0, n$1 = keys.length, key; i$1 < n$1; i$1++) {
-		key = keys[i$1];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k$1) => from$1[k$1]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from$1, key)) || desc.enumerable
-		});
+	if (from$1 && typeof from$1 === "object" || typeof from$1 === "function") {
+		for (var keys = __getOwnPropNames(from$1), i$1 = 0, n$1 = keys.length, key; i$1 < n$1; i$1++) {
+			key = keys[i$1];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k$1) => from$1[k$1]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from$1, key)) || desc.enumerable
+				});
+			}
+		}
 	}
 	return to;
 };
@@ -58,7 +60,7 @@ const useAccordionContext = () => {
 
 //#endregion
 //#region src/icons/ChevronDown.tsx
-const ChevronDown = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx("svg", {
+const ChevronDown = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -108,7 +110,7 @@ const AccordionHeader = ({ children }) => {
 
 //#endregion
 //#region src/Accordion/AccordionItem.tsx
-const AccordionItem = ({ children, disabled, expanded,...props }) => {
+const AccordionItem = ({ children, disabled, expanded, ...props }) => {
 	const { classNames: classNames$2 } = useAccordionContext();
 	return /* @__PURE__ */ jsx(Disclosure, {
 		isDisabled: disabled,
@@ -134,7 +136,7 @@ const AccordionPanel = ({ children }) => {
 
 //#endregion
 //#region src/Accordion/Accordion.tsx
-const Accordion = ({ children, disabled, variant, size: size$1, stickyHeader = false, iconPosition = "right",...props }) => {
+const Accordion = ({ children, disabled, variant, size: size$1, stickyHeader = false, iconPosition = "right", ...props }) => {
 	const classNames$2 = useClassNames({
 		component: "Accordion",
 		variant,
@@ -158,6 +160,112 @@ Accordion.Header = AccordionHeader;
 Accordion.Content = AccordionPanel;
 Accordion.Item = AccordionItem;
 
+//#endregion
+//#region src/icons/X.tsx
+const X = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: cn("shrink-0", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+});
+
+//#endregion
+//#region src/CloseButton/CloseButton.tsx
+const CloseButton = forwardRef(({ className, size: size$1, variant, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		className: useClassNames({
+			component: "CloseButton",
+			className,
+			size: size$1,
+			variant
+		}),
+		...props,
+		children: /* @__PURE__ */ jsx(X, {})
+	});
+});
+
+//#endregion
+//#region src/Text/Text.tsx
+const _Text = ({ variant, size: size$1, color, align, cursor: cursor$1, weight, fontSize, fontStyle, lineHeight: lineHeight$1, wrap, whiteSpace: whiteSpace$1, children, as = "div", ...props }) => {
+	const classNames$2 = useClassNames({
+		component: "Text",
+		variant,
+		size: size$1
+	});
+	/**
+	* Use `<Text>` when a `slot` is used. Make sure `elementType`
+	* prop is only used in combination the `<Text>`.
+	*/
+	const Component$1 = props.slot ? Text : as;
+	const elementType = props.slot ? { elementType: as } : {};
+	return /* @__PURE__ */ jsx(Component$1, {
+		...props,
+		...elementType,
+		className: cn("max-w-(--maxTextWidth)", classNames$2, fontStyle && textStyle[fontStyle], align && textAlign[align], cursor$1 && cursorStyle[cursor$1], weight && fontWeight[weight], fontSize && textSize[fontSize], lineHeight$1 && lineHeight[lineHeight$1], wrap && textWrap[wrap], whiteSpace$1 && whiteSpace[whiteSpace$1]),
+		style: { color: color && ensureCssVar(color, "color") },
+		children
+	});
+};
+
+//#endregion
+//#region src/ActionBar/ActionButton.tsx
+const ActionButton = ({ onPress, children }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		onPress,
+		className: useClassNames({
+			component: "Button",
+			variant: "ghost",
+			size: "default"
+		}),
+		children
+	});
+};
+
+//#endregion
+//#region src/ActionBar/ActionBar.tsx
+const ActionBar = ({ children, id, onClearSelection, selectedItemCount = 0, variant, size: size$1 }) => {
+	const classNames$2 = useClassNames({
+		component: "ActionBar",
+		variant,
+		size: size$1
+	});
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	const isHidden = selectedItemCount === 0;
+	const countText = selectedItemCount === "all" ? "All items selected" : `${selectedItemCount} selected`;
+	if (isHidden) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cn("z-30", classNames$2.container),
+		role: "toolbar",
+		"aria-label": stringFormatter.format("bulkActionsAriaLabel"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: classNames$2.count,
+				children: /* @__PURE__ */ jsx(_Text, { children: countText })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: classNames$2.actions,
+				children
+			}),
+			onClearSelection && /* @__PURE__ */ jsx(CloseButton, {
+				"aria-label": stringFormatter.format("clearSelectionAriaLabel"),
+				onPress: onClearSelection,
+				className: classNames$2.clearButton
+			})
+		]
+	});
+};
+ActionBar.Button = ActionButton;
+
 //#endregion
 //#region src/Aside/Aside.tsx
 /**
@@ -174,7 +282,8 @@ const Aside = ({ children, sideWidth, space = 0, side = "left", wrap = "50%" })
 		content: createVar({ wrap })
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-wrap", gapSpace[space]),
+		className: cn("flex flex-wrap", "gap-(--space)"),
+		style: createSpacingVar("space", `${space}`),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: classNames$1[side === "left" ? "aside" : "content"],
 			style: vars[side === "left" ? "aside" : "content"],
@@ -199,124 +308,18 @@ const Aspect = ({ ratio = "square", maxWidth: maxWidth$1, children }) => {
 
 //#endregion
 //#region src/Center/Center.tsx
-const Center = ({ maxWidth: maxWidth$1 = "100%", space = 0, children,...props }) => {
+const Center = ({ maxWidth: maxWidth$1 = "100%", space = 0, children, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: cn("ms-[auto] me-[auto] box-content flex flex-col items-center justify-center", gapSpace[space], "max-w-(--maxWidth)"),
-		style: createVar({ maxWidth: maxWidth$1 }),
-		children
-	});
-};
-
-//#endregion
-//#region src/icons/TriangleAlert.tsx
-const TriangleAlert = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: size$1,
-	height: size$1,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	className: cn("shrink-0", className),
-	...props,
-	children: [
-		/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
-		/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
-	]
-});
-
-//#endregion
-//#region src/HelpText/HelpText.tsx
-const HelpText = ({ variant, size: size$1, description, errorMessage,...props }) => {
-	const classNames$2 = useClassNames({
-		component: "HelpText",
-		variant,
-		size: size$1
-	});
-	const ctx = useContext(FieldErrorContext);
-	if (!description && !ctx?.isInvalid) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn(classNames$2.container),
-		children: [/* @__PURE__ */ jsx(FieldError, {
-			...props,
-			className: "flex flex-col",
-			children: (validation) => {
-				/**
-				* Prefer custom error messages, fallback to native errors ones.
-				*
-				* Note that we can not merge custom and native error messages,
-				* because we can not distinguish the type of error messages
-				* in the native ones since it is just an array of strings.
-				*/
-				const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
-				return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-start gap-1",
-					children: [/* @__PURE__ */ jsx(TriangleAlert, { className: cn("h-4 w-4 shrink-0", classNames$2.icon) }), msg]
-				}, idx)) : /* @__PURE__ */ jsxs("div", {
-					className: "flex items-start justify-start gap-1",
-					children: [/* @__PURE__ */ jsx(TriangleAlert, { className: cn("h-4 w-4 shrink-0", classNames$2.icon) }), messages]
-				});
-			}
-		}), ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx(Text, {
-			slot: "description",
-			children: description
-		})]
-	});
-};
-
-//#endregion
-//#region src/Label/Label.tsx
-const _Label = ({ size: size$1, variant, children,...props }) => {
-	const className = useClassNames({
-		component: "Label",
-		size: size$1,
-		variant
-	});
-	return /* @__PURE__ */ jsx(Label, {
-		...props,
-		className: cn(className, "inline-flex"),
+		className: cn("mx-auto box-content flex flex-col items-center justify-center gap-y-(--space)", "max-w-(--maxWidth)"),
+		style: {
+			...createVar({ maxWidth: maxWidth$1 }),
+			...createSpacingVar("space", `${space}`)
+		},
 		children
 	});
 };
 
-//#endregion
-//#region src/FieldBase/FieldBase.tsx
-const fixedForwardRef = forwardRef;
-const _FieldBase = (props, ref) => {
-	const { as: Component$1 = "div", children, label, size: size$1, variant, width: width$1 = "full", description, errorMessage, className,...rest } = props;
-	const classNames$2 = useClassNames({
-		component: "Field",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ jsxs(Component$1, {
-		ref,
-		className: cn("group/field", "flex flex-col", width[width$1], classNames$2, className),
-		"data-required": props.isRequired ? true : void 0,
-		"data-error": props.isInvalid ? true : void 0,
-		...rest,
-		children: [
-			label ? /* @__PURE__ */ jsx(_Label, {
-				variant,
-				size: size$1,
-				children: label
-			}) : null,
-			children,
-			/* @__PURE__ */ jsx(HelpText, {
-				variant,
-				size: size$1,
-				description,
-				errorMessage
-			})
-		]
-	});
-};
-const FieldBase = fixedForwardRef(_FieldBase);
-
 //#endregion
 //#region src/ProgressCircle/ProgressCircle.tsx
 const ProgressCircleSvg = ({ size: size$1 = "16", variant }) => {
@@ -353,7 +356,7 @@ const ProgressCircleSvg = ({ size: size$1 = "16", variant }) => {
 		})]
 	});
 };
-const ProgressCircle = ({ size: size$1 = "16",...props }) => {
+const ProgressCircle = ({ size: size$1 = "16", ...props }) => {
 	return /* @__PURE__ */ jsx(ProgressBar, {
 		...props,
 		"aria-label": "loading",
@@ -364,7 +367,7 @@ const ProgressCircle = ({ size: size$1 = "16",...props }) => {
 
 //#endregion
 //#region src/icons/Search.tsx
-const Search = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const Search = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -383,26 +386,9 @@ const Search = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ js
 	})]
 });
 
-//#endregion
-//#region src/icons/X.tsx
-const X = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: size$1,
-	height: size$1,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	className: cn("shrink-0", className),
-	...props,
-	children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
-});
-
 //#endregion
 //#region src/Input/Input.tsx
-const _Input = forwardRef(({ type, icon, action, variant, size: size$1, className,...props }, ref) => {
+const _Input = forwardRef(({ type, icon, action, variant, size: size$1, className, ...props }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "Input",
 		variant,
@@ -417,17 +403,17 @@ const _Input = forwardRef(({ type, icon, action, variant, size: size$1, classNam
 		className: cn("absolute right-0 cursor-pointer", classNames$2.action, action.props.className)
 	}) : null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group/input relative flex items-center",
+		className: cn("group/input relative flex w-(--field-width) max-w-full min-w-0 items-center"),
 		"data-icon": icon && "",
 		"data-action": action && "",
 		children: [
-			inputIcon,
 			/* @__PURE__ */ jsx(Input, {
 				...props,
-				className: cn("w-full flex-1", "disabled:cursor-not-allowed", "[&[type=file]]:border-none [&[type=file]]:p-0", "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0", classNames$2.input, className),
+				className: cn("flex-1", "disabled:cursor-not-allowed", "[&[type=file]]:border-none [&[type=file]]:p-0", "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0", classNames$2.input, className),
 				ref,
 				type
 			}),
+			inputIcon,
 			inputAction
 		]
 	});
@@ -440,13 +426,16 @@ const intlMessages$1 = {
 	"en-US": { "Clear search": "Clear search" },
 	"fr-FR": { "Clear search": "Effacer la recherche" }
 };
-const SearchInput = forwardRef(({ className, loading, onClear,...props }, ref) => {
+const SearchInput = forwardRef(({ className, loading, onClear, ...props }, ref) => {
 	const stringFormatter = useLocalizedStringFormatter(intlMessages$1);
 	return /* @__PURE__ */ jsx(_Input, {
 		type: "search",
 		className: cn("[&::-webkit-search-cancel-button]:hidden", className?.input),
 		ref,
-		icon: /* @__PURE__ */ jsx(Search, { size: "16" }),
+		icon: /* @__PURE__ */ jsx(Search, {
+			"aria-hidden": "true",
+			size: "16"
+		}),
 		action: loading ? /* @__PURE__ */ jsx(ProgressCircle, {}) : /* @__PURE__ */ jsx(Button, {
 			className: className?.action,
 			onPress: () => onClear?.(),
@@ -464,23 +453,6 @@ const SearchInput = forwardRef(({ className, loading, onClear,...props }, ref) =
 const ListBoxContext = createContext({});
 const useListBoxContext = () => useContext(ListBoxContext);
 
-//#endregion
-//#region src/icons/Check.tsx
-const Check = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: size$1,
-	height: size$1,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	className: cn("shrink-0", className),
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
-});
-
 //#endregion
 //#region src/ListBox/ListBoxItem.tsx
 const _ListBoxItem = ({ ...props }) => {
@@ -502,7 +474,7 @@ const _ListBoxItem = ({ ...props }) => {
 
 //#endregion
 //#region src/ListBox/ListBoxSection.tsx
-const _Section = ({ header, children,...props }) => {
+const _Section = ({ header, children, ...props }) => {
 	const { classNames: classNames$2 } = useListBoxContext();
 	return /* @__PURE__ */ jsxs(ListBoxSection, {
 		...props,
@@ -513,7 +485,7 @@ const _Section = ({ header, children,...props }) => {
 
 //#endregion
 //#region src/ListBox/ListBox.tsx
-const _ListBox = forwardRef(({ variant, size: size$1,...props }, ref) => {
+const _ListBox = forwardRef(({ variant, size: size$1, ...props }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "ListBox",
 		variant,
@@ -526,7 +498,7 @@ const _ListBox = forwardRef(({ variant, size: size$1,...props }, ref) => {
 			className: classNames$2.container,
 			children: /* @__PURE__ */ jsx(ListBox, {
 				...props,
-				className: cn("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]", classNames$2.list),
+				className: cn("overflow-y-auto", classNames$2.list),
 				ref,
 				...listBoxProps,
 				children: props.children
@@ -537,31 +509,9 @@ const _ListBox = forwardRef(({ variant, size: size$1,...props }, ref) => {
 _ListBox.Item = _ListBoxItem;
 _ListBox.Section = _Section;
 
-//#endregion
-//#region src/Overlay/Underlay.tsx
-const Underlay = ({ size: size$1, variant, open, dismissable, keyboardDismissable,...rest }) => {
-	const classNames$2 = useClassNames({
-		component: "Underlay",
-		size: size$1,
-		variant
-	});
-	const props = {
-		isOpen: open,
-		isDismissable: dismissable,
-		isKeyboardDismissDisabled: keyboardDismissable,
-		...rest
-	};
-	return /* @__PURE__ */ jsx(ModalOverlay, {
-		className: ({ isEntering, isExiting }) => cn("fixed inset-0 z-40 grid place-items-center overflow-y-auto", isEntering ? "animate-in fade-in duration-300 ease-out" : "", isExiting ? "animate-out fade-out duration-200 ease-in" : "", classNames$2),
-		...props,
-		"data-testid": "underlay-id",
-		children: props.children
-	});
-};
-
 //#endregion
 //#region src/Overlay/Popover.tsx
-const _Popover = forwardRef(({ keyboardDismissDisabled, placement, open, children,...rest }, ref) => {
+const _Popover = forwardRef(({ keyboardDismissDisabled, placement, offset: offset$1 = 0, open, children, ...rest }, ref) => {
 	const props = {
 		isKeyboardDismissDisabled: keyboardDismissDisabled,
 		isOpen: open,
@@ -573,97 +523,272 @@ const _Popover = forwardRef(({ keyboardDismissDisabled, placement, open, childre
 		variant: placement,
 		className: "min-w-(--trigger-width)"
 	});
-	return /* @__PURE__ */ jsx(Fragment$1, { children: useSmallScreen() ? /* @__PURE__ */ jsxs(Popover, {
-		ref,
-		...props,
-		className: cn("fixed! top-auto! bottom-0! left-0! max-h-fit! w-full", classNames$2),
-		children: [children, /* @__PURE__ */ jsx(Underlay, { open })]
-	}) : /* @__PURE__ */ jsx(Popover, {
+	return /* @__PURE__ */ jsx(Popover, {
 		ref,
 		...props,
-		className: classNames$2,
+		className: cn("z-30 flex", classNames$2),
 		placement,
-		offset: 0,
+		offset: offset$1,
 		children
-	}) });
+	});
 });
 
 //#endregion
-//#region src/intl/messages.ts
-const intlMessages = {
-	"de-DE": {
-		cancel: "Abbrechen",
-		loadingMessage: "Lade...",
-		noResultsFound: "Kein Ergebnis gefunden",
-		removeAll: "Alle entfernen",
-		showMore: "Mehr anzeigen",
-		showMoreCount: "{count} weitere anzeigen",
-		showLess: "Weniger anzeigen",
-		showLessCount: "{count} weniger anzeigen",
-		dropZoneLabel: "Dateien hierher ziehen",
-		uploadLabel: "Hochladen",
-		moreInfo: "Mehr Informationen",
-		help: "Hilfe",
-		hiddenBreadcrumbs: "Diese Breadcrumbs sind ausgeblendet"
-	},
-	"en-US": {
-		cancel: "Cancel",
-		loadingMessage: "Loading...",
-		noResultsFound: "No result found",
-		removeAll: "Remove all",
-		showMore: "Show more",
-		showMoreCount: "Show {count} more",
-		showLess: "Show less",
-		showLessCount: "Show {count} less",
-		dropZoneLabel: "Drop files here",
-		uploadLabel: "Upload",
-		moreInfo: "More information",
-		help: "Help",
-		hiddenBreadcrumbs: "These breadcrumbs are hidden"
-	}
+//#region src/Button/Button.tsx
+const _Button = forwardRef(({ children, variant, size: size$1, disabled, loading, fullWidth, ...props }, ref) => {
+	const classNames$2 = useClassNames({
+		component: "Button",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		ref,
+		className: cn(classNames$2, fullWidth ? "w-full" : void 0, loading && "cursor-progress!"),
+		isPending: loading,
+		isDisabled: disabled,
+		children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute",
+			children: /* @__PURE__ */ jsx(ProgressCircle, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "invisible flex gap-[inherit]",
+			children
+		})] }) : children
+	});
+});
+
+//#endregion
+//#region src/Tray/Context.tsx
+const TrayContext = createContext(null);
+const useTrayContext = () => useContext(TrayContext);
+
+//#endregion
+//#region src/Tray/TrayActions.tsx
+const TrayActions = ({ children }) => {
+	const { classNames: classNames$2 } = useTrayContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("[grid-area:actions]", classNames$2.actions),
+		children
+	});
 };
 
 //#endregion
-//#region src/Autocomplete/Autocomplete.tsx
-const AutocompleteInput = ({ loading, onSubmit, onClear, ref }) => {
-	const state = useContext(ComboBoxStateContext);
-	const classNames$2 = useClassNames({ component: "ComboBox" });
-	return /* @__PURE__ */ jsx(SearchInput, {
-		ref,
-		loading,
-		className: { action: cn(state?.inputValue === "" ? "invisible" : "visible", classNames$2) },
-		onKeyDown: (e$1) => {
-			if (e$1.key === "Enter" || e$1.key === "Escape") e$1.preventDefault();
-			if (e$1.key === "Enter") {
-				if (state?.selectionManager.focusedKey === null) onSubmit?.(null, state?.inputValue);
-			}
+//#region src/Tray/TrayContent.tsx
+const TrayContent = ({ children, className }) => {
+	const { classNames: classNames$2 } = useTrayContext();
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node$1) => {
+			if (node$1 && !node$1.style.minHeight) node$1.style.minHeight = `${node$1.offsetHeight}px`;
 		},
-		onClear: () => {
-			state?.setInputValue("");
-			state?.setSelectedKey(null);
-			onClear?.();
-		}
+		className: cn("[grid-area:content]", classNames$2.content, className),
+		children
 	});
 };
-const _Autocomplete = forwardRef(({ children, defaultValue, value, disabled, error, readOnly, required, emptyState, loading, onChange, onClear, onSubmit,...rest }, ref) => {
-	const props = {
-		onSelectionChange: (key) => key !== null && onSubmit?.(key, null),
-		defaultInputValue: defaultValue,
-		inputValue: value,
-		onInputChange: onChange,
-		allowsCustomValue: true,
-		isDisabled: disabled,
-		isInvalid: error,
-		isReadOnly: readOnly,
+
+//#endregion
+//#region src/Tray/TrayModal.tsx
+const MotionModal = motion.create(Modal);
+const MotionModalOverlay = motion.create(ModalOverlay);
+const inertiaTransition = {
+	type: "inertia",
+	bounceStiffness: 300,
+	bounceDamping: 40,
+	timeConstant: 300
+};
+const staticTransition = {
+	duration: .5,
+	ease: cubicBezier(.32, .72, 0, 1)
+};
+const TrayModal = ({ open, onOpenChange, dismissable = true, keyboardDismissable = true, children }) => {
+	const classNames$2 = useClassNames({ component: "Tray" });
+	const state = useContext(OverlayTriggerStateContext);
+	const h$1 = typeof window !== "undefined" ? window.innerHeight : 0;
+	const y$1 = useMotionValue(h$1);
+	const handleOpenChange = (isOpen) => {
+		onOpenChange?.(isOpen);
+		if (!isOpen) state?.close();
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(MotionModalOverlay, {
+		isOpen: true,
+		onOpenChange: handleOpenChange,
+		isDismissable: dismissable,
+		isKeyboardDismissDisabled: !keyboardDismissable,
+		className: cn(classNames$2.overlay),
+		children: /* @__PURE__ */ jsx(MotionModal, {
+			className: classNames$2.container,
+			initial: { y: h$1 },
+			animate: { y: 0 },
+			exit: { y: h$1 },
+			transition: staticTransition,
+			style: { y: y$1 },
+			drag: "y",
+			dragConstraints: { top: 0 },
+			onDragEnd: (_e, { offset: offset$1, velocity }) => {
+				if (offset$1.y > window.innerHeight * .75 || velocity.y > 10) handleOpenChange(false);
+				else animate(y$1, 0, {
+					...inertiaTransition,
+					min: 0,
+					max: 0
+				});
+			},
+			children
+		})
+	}) });
+};
+
+//#endregion
+//#region src/Tray/TrayTitle.tsx
+const TrayTitle = ({ children }) => {
+	const { classNames: classNames$2 } = useTrayContext();
+	return /* @__PURE__ */ jsx(Header, {
+		className: cn("[grid-area:title]", classNames$2.header),
+		children: /* @__PURE__ */ jsx(Heading, {
+			slot: "title",
+			level: 2,
+			className: classNames$2.title,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/Tray/TrayTrigger.tsx
+const TrayTrigger = ({ open, children, ...props }) => /* @__PURE__ */ jsx(DialogTrigger, {
+	isOpen: open,
+	...props,
+	children
+});
+
+//#endregion
+//#region src/Tray/Tray.tsx
+const Tray = ({ open, onOpenChange, dismissable = true, keyboardDismissable = true, children, ...props }) => {
+	const state = useContext(OverlayTriggerStateContext);
+	const isHidden = useIsHidden();
+	const classNames$2 = useClassNames({ component: "Tray" });
+	const openState = open ?? state?.isOpen;
+	if (isHidden) return /* @__PURE__ */ jsx(TrayContext.Provider, {
+		value: { classNames: classNames$2 },
+		children
+	});
+	return /* @__PURE__ */ jsx(TrayContext.Provider, {
+		value: { classNames: classNames$2 },
+		children: /* @__PURE__ */ jsx(TrayModal, {
+			open: openState,
+			dismissable,
+			onOpenChange,
+			keyboardDismissable,
+			children: /* @__PURE__ */ jsxs(Dialog, {
+				...props,
+				className: cn("group/tray [grid-template-areas:'drag'_'title'_'content'_'actions']", classNames$2.container),
+				children: [/* @__PURE__ */ jsx("div", { className: cn("[grid-area:drag]", classNames$2.dragHandle) }), children]
+			})
+		})
+	});
+};
+Tray.Trigger = TrayTrigger;
+Tray.Title = TrayTitle;
+Tray.Content = TrayContent;
+Tray.Actions = TrayActions;
+
+//#endregion
+//#region src/Autocomplete/MobileAutocomplete.tsx
+const MobileAutocompleteTrigger = ({ placeholder }) => {
+	const state = useContext(ComboBoxStateContext);
+	const inputClassNames = useClassNames({ component: "Input" });
+	const autocompleteClassNames = useClassNames({ component: "Autocomplete" });
+	const displayText = state?.selectedItem?.textValue || "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: autocompleteClassNames.mobileTrigger,
+		"data-icon": "",
+		children: [/* @__PURE__ */ jsx(Search, {
+			"aria-hidden": "true",
+			size: "16",
+			className: cn("pointer-events-none absolute z-10", inputClassNames.icon)
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn("w-full flex-1 text-left", "group-data-error/field:ui-state-error", "group-data-focus-visible/trigger:ui-state-focus", inputClassNames.input),
+			children: displayText || /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: placeholder
+			})
+		})]
+	});
+};
+const MobileAutocomplete = ({ placeholder, label, emptyState, children, input }) => {
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	return /* @__PURE__ */ jsxs(Tray.Trigger, { children: [/* @__PURE__ */ jsx(Button, {
+		className: "group/trigger outline-none",
+		children: /* @__PURE__ */ jsx(MobileAutocompleteTrigger, { placeholder })
+	}), /* @__PURE__ */ jsxs(Tray, { children: [
+		/* @__PURE__ */ jsx(Tray.Title, { children: label }),
+		/* @__PURE__ */ jsxs(Tray.Content, {
+			className: "flex flex-col gap-2",
+			children: [input, /* @__PURE__ */ jsx(_ListBox, {
+				renderEmptyState: () => emptyState ?? /* @__PURE__ */ jsx(Center, { children: stringFormatter.format("noResultsFound") }),
+				children
+			})]
+		}),
+		/* @__PURE__ */ jsx(Tray.Actions, { children: /* @__PURE__ */ jsx(_Button, {
+			slot: "close",
+			children: stringFormatter.format("close")
+		}) })
+	] })] });
+};
+
+//#endregion
+//#region src/Autocomplete/Autocomplete.tsx
+const AutocompleteInput = ({ loading, onSubmit, onClear, ref, autoFocus }) => {
+	const state = useContext(ComboBoxStateContext);
+	const classNames$2 = useClassNames({ component: "ComboBox" });
+	return /* @__PURE__ */ jsx(SearchInput, {
+		ref,
+		loading,
+		autoFocus,
+		className: { action: cn(state?.inputValue === "" ? "invisible" : "visible", classNames$2) },
+		onKeyDown: (e$1) => {
+			if (e$1.key === "Enter" || e$1.key === "Escape") e$1.preventDefault();
+			if (e$1.key === "Enter") {
+				if (state?.selectionManager.focusedKey === null) onSubmit?.(null, state?.inputValue);
+			}
+		},
+		onClear: () => {
+			state?.setInputValue("");
+			state?.setSelectedKey(null);
+			onClear?.();
+		}
+	});
+};
+const _Autocomplete = forwardRef(({ children, defaultValue, value, disabled, error, readOnly, required, emptyState, loading, onChange, onClear, onSubmit, ...rest }, ref) => {
+	const props = {
+		onSelectionChange: (key) => key !== null && onSubmit?.(key, null),
+		defaultInputValue: defaultValue,
+		inputValue: value,
+		onInputChange: onChange,
+		allowsCustomValue: true,
+		isDisabled: disabled,
+		isInvalid: error,
+		isReadOnly: readOnly,
 		isRequired: required,
 		...rest
 	};
 	const stringFormatter = useLocalizedStringFormatter(intlMessages);
-	return /* @__PURE__ */ jsxs(FieldBase, {
+	const isSmallScreen = useSmallScreen();
+	return /* @__PURE__ */ jsx(FieldBase, {
 		as: ComboBox,
 		ref,
 		...props,
-		children: [/* @__PURE__ */ jsx(AutocompleteInput, {
+		children: isSmallScreen ? /* @__PURE__ */ jsx(MobileAutocomplete, {
+			placeholder: rest.placeholder,
+			label: rest.label,
+			emptyState,
+			input: /* @__PURE__ */ jsx(AutocompleteInput, {
+				loading,
+				onSubmit,
+				onClear,
+				ref,
+				autoFocus: true
+			}),
+			children
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AutocompleteInput, {
 			loading,
 			onSubmit,
 			onClear,
@@ -671,29 +796,61 @@ const _Autocomplete = forwardRef(({ children, defaultValue, value, disabled, err
 		}), /* @__PURE__ */ jsx(_Popover, { children: /* @__PURE__ */ jsx(_ListBox, {
 			renderEmptyState: () => emptyState ?? /* @__PURE__ */ jsx(Center, { children: stringFormatter.format("noResultsFound") }),
 			children
-		}) })]
+		}) })] })
 	});
 });
 _Autocomplete.Option = _ListBox.Item;
 _Autocomplete.Section = _ListBox.Section;
 
+//#endregion
+//#region src/icons/Lock.tsx
+const Lock = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
+	"data-testid": "lock-icon",
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: cn("shrink-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "16",
+			r: "1"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "10",
+			width: "18",
+			height: "12",
+			rx: "2"
+		}),
+		/* @__PURE__ */ jsx("path", { d: "M7 10V7a5 5 0 0 1 10 0v3" })
+	]
+});
+
 //#endregion
 //#region src/Badge/Badge.tsx
-const Badge = ({ variant, size: size$1, children,...props }) => {
-	return /* @__PURE__ */ jsx("div", {
+const Badge = ({ variant, size: size$1, children, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
 		className: useClassNames({
 			component: "Badge",
 			variant,
 			size: size$1
 		}),
 		...props,
-		children
+		children: [["master", "admin"].includes(variant ?? "") && /* @__PURE__ */ jsx(Lock, { size: 16 }), children]
 	});
 };
 
 //#endregion
 //#region src/icons/ChevronRight.tsx
-const ChevronRight = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx("svg", {
+const ChevronRight = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -710,7 +867,7 @@ const ChevronRight = ({ size: size$1 = 24, className,...props }) => /* @__PURE__
 
 //#endregion
 //#region src/IconButton/IconButton.tsx
-const IconButton = ({ className, children, variant, size: size$1,...props }) => {
+const IconButton = ({ className, children, variant, size: size$1, ...props }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		className: cn("shrink-0 cursor-pointer outline-0", useClassNames({
 			component: "IconButton",
@@ -751,7 +908,7 @@ const BreadcrumbsItem = (_) => null;
 
 //#endregion
 //#region src/Breadcrumbs/Breadcrumbs.tsx
-const _Breadcrumbs = forwardRef(({ children, variant, size: size$1, disabled, maxVisibleItems,...props }, ref) => {
+const _Breadcrumbs = forwardRef(({ children, variant, size: size$1, disabled, maxVisibleItems, ...props }, ref) => {
 	const { container, item: breadcrumbsItem, link, current } = useClassNames({
 		component: "Breadcrumbs",
 		variant,
@@ -777,7 +934,7 @@ const _Breadcrumbs = forwardRef(({ children, variant, size: size$1, disabled, ma
 		children: displayedItems.map((item, index$1) => {
 			if (!isValidElement(item)) return null;
 			const isLast = index$1 === displayedItems.length - 1;
-			const { href, children: itemChildren,...ariaProps } = item.props;
+			const { href, children: itemChildren, ...ariaProps } = item.props;
 			return /* @__PURE__ */ jsxs(Breadcrumb, {
 				...ariaProps,
 				className: breadcrumbsItem,
@@ -805,30 +962,6 @@ const Breakout = ({ children }) => /* @__PURE__ */ jsx("div", {
 	children
 });
 
-//#endregion
-//#region src/Button/Button.tsx
-const _Button = forwardRef(({ children, variant, size: size$1, disabled, loading, fullWidth,...props }, ref) => {
-	const classNames$2 = useClassNames({
-		component: "Button",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ jsx(Button, {
-		...props,
-		ref,
-		className: cn(classNames$2, fullWidth ? "w-full" : void 0, loading && "cursor-progress!"),
-		isPending: loading,
-		isDisabled: disabled,
-		children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: "absolute",
-			children: /* @__PURE__ */ jsx(ProgressCircle, {})
-		}), /* @__PURE__ */ jsx("span", {
-			className: "invisible flex gap-[inherit]",
-			children
-		})] }) : children
-	});
-});
-
 //#endregion
 //#region src/Calendar/CalendarGridHeader.tsx
 function CalendarGridHeader(props) {
@@ -862,9 +995,10 @@ function CalendarGridHeader(props) {
 
 //#endregion
 //#region src/Calendar/CalendarGrid.tsx
-const _CalendarGrid = () => {
+const _CalendarGrid = ({ offset: offset$1 }) => {
 	const classNames$2 = useClassNames({ component: "Calendar" });
 	return /* @__PURE__ */ jsxs(CalendarGrid, {
+		offset: offset$1,
 		className: classNames$2.calendarGrid,
 		children: [/* @__PURE__ */ jsx(CalendarGridHeader, {}), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
 			date,
@@ -874,8 +1008,8 @@ const _CalendarGrid = () => {
 };
 
 //#endregion
-//#region src/icons/ChevronsVertical.tsx
-const ChevronsVertical = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx("svg", {
+//#region src/icons/ChevronLeft.tsx
+const ChevronLeft = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -887,13 +1021,75 @@ const ChevronsVertical = ({ size: size$1 = 24, className,...props }) => /* @__PU
 	strokeLinejoin: "round",
 	className: cn("shrink-0", className),
 	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M7 15l5 5 5-5M7 9l5-5 5 5" })
+	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
 });
 
 //#endregion
 //#region src/Calendar/Context.tsx
-const CalendarContext = createContext({});
-const useCalendarContext = () => useContext(CalendarContext);
+const CalendarContext = createContext(null);
+const useCalendarContext = () => {
+	const ctx = useContext(CalendarContext);
+	if (!ctx) throw new Error("Calendar components must be used within <Calendar>");
+	return ctx;
+};
+
+//#endregion
+//#region src/Calendar/CalendarHeader.tsx
+const CalendarHeader = ({ monthOffset = 0, showPrevious = true, showNext = true }) => {
+	const state = useContext(CalendarStateContext);
+	const { classNames: classNames$2 } = useCalendarContext();
+	const monthFormatter = useDateFormatter({
+		month: "long",
+		year: "numeric",
+		timeZone: state.timeZone
+	});
+	const monthDate = state.visibleRange.start.add({ months: monthOffset });
+	const formattedMonth = monthFormatter.format(monthDate.toDate(state.timeZone));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 flex min-h-[36px] items-center justify-between",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1",
+				children: showPrevious && /* @__PURE__ */ jsx(IconButton, {
+					className: cn("inline-flex items-center justify-center gap-[0.5ch]", classNames$2.calendarControllers),
+					variant: "navigation",
+					slot: "previous",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { size: "20" })
+				})
+			}),
+			/* @__PURE__ */ jsx(Heading, {
+				className: "text-sm font-medium",
+				children: formattedMonth
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 justify-end",
+				children: showNext && /* @__PURE__ */ jsx(IconButton, {
+					className: cn("inline-flex items-center justify-center gap-[0.5ch]", classNames$2.calendarControllers),
+					variant: "navigation",
+					slot: "next",
+					children: /* @__PURE__ */ jsx(ChevronRight, { size: "20" })
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/icons/ChevronsVertical.tsx
+const ChevronsVertical = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: cn("shrink-0", className),
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M7 15l5 5 5-5M7 9l5-5 5 5" })
+});
 
 //#endregion
 //#region src/Calendar/useFormattedMonths.tsx
@@ -931,23 +1127,6 @@ const CalendarListBox = ({ type, isDisabled, setSelectedDropdown }) => {
 	});
 };
 
-//#endregion
-//#region src/icons/ChevronLeft.tsx
-const ChevronLeft = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: size$1,
-	height: size$1,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	className: cn("shrink-0", className),
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
-});
-
 //#endregion
 //#region src/Calendar/MonthControls.tsx
 function MonthControls() {
@@ -1058,335 +1237,123 @@ function hasOnlyOneSelectableYear(minValue, maxValue) {
 
 //#endregion
 //#region src/Calendar/Calendar.tsx
-const _Calendar = ({ disabled, readOnly, size: size$1, variant, width: width$1 = "fit", dateUnavailable, minValue: _minValue, maxValue: _maxValue,...rest }) => {
-	const minValue = _minValue;
-	const maxValue = _maxValue;
-	const props = {
-		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isDateUnavailable: dateUnavailable,
-		minValue,
-		maxValue,
-		...rest
-	};
-	const classNames$2 = useClassNames({
-		component: "Calendar",
-		size: size$1,
-		variant
-	});
-	const [selectedDropdown, setSelectedDropdown] = useState();
-	const ViewMap = {
-		month: /* @__PURE__ */ jsx(MonthListBox_default, {
-			setSelectedDropdown,
-			minValue,
-			maxValue
-		}),
-		year: /* @__PURE__ */ jsx(YearListBox_default, {
-			setSelectedDropdown,
-			minValue,
-			maxValue
-		})
-	};
-	return /* @__PURE__ */ jsx(CalendarContext.Provider, {
-		value: { classNames: classNames$2 },
-		children: /* @__PURE__ */ jsxs(Calendar, {
-			className: cn("relative flex min-h-[350px] flex-col rounded-xs p-4", width[width$1], classNames$2.calendar),
-			...props,
-			children: [/* @__PURE__ */ jsx("div", {
-				className: cn("pointer-events-none absolute top-1/2 left-0 w-full -translate-y-1/2 opacity-0", selectedDropdown && "pointer-events-auto opacity-100"),
-				children: ViewMap[selectedDropdown]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: cn("flex flex-col", selectedDropdown && "pointer-events-none opacity-0"),
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "mb-4 flex items-center justify-between",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex w-fit gap-4",
-						children: [/* @__PURE__ */ jsx(CalendarListBox, {
-							type: "month",
-							isDisabled: hasOnlyOneSelectableMonth(minValue, maxValue) || props.isDisabled,
-							setSelectedDropdown
-						}, "month"), /* @__PURE__ */ jsx(CalendarListBox, {
-							type: "year",
-							isDisabled: hasOnlyOneSelectableYear(minValue, maxValue) || props.isDisabled,
-							setSelectedDropdown
-						}, "year")]
-					}), /* @__PURE__ */ jsx(MonthControls_default, {})]
-				}), /* @__PURE__ */ jsx(_CalendarGrid, {})]
-			})]
-		})
-	});
-};
-
-//#endregion
-//#region src/Card/Card.tsx
-const Card = ({ children, variant, size: size$1, space = 0, p: p$1, px, py, pt, pb, pl, pr,...props }) => {
-	const classNames$2 = useClassNames({
-		component: "Card",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		className: cn("flex flex-col", classNames$2, gapSpace[space], paddingSpace !== void 0 && paddingSpace[p$1], paddingSpaceX !== void 0 && paddingSpaceX[px], paddingSpaceY !== void 0 && paddingSpaceY[py], paddingRight !== void 0 && paddingRight[pr], paddingLeft !== void 0 && paddingLeft[pl], paddingBottom !== void 0 && paddingBottom[pb], paddingTop !== void 0 && paddingTop[pt]),
-		children
-	});
-};
-
-//#endregion
-//#region src/Collapsible/Context.tsx
-const CollapsibleContext = createContext(void 0);
-const CollapsibleProvider = ({ value, children }) => /* @__PURE__ */ jsx(CollapsibleContext.Provider, {
-	value,
-	children
-});
-
-//#endregion
-//#region src/Collapsible/CollapsibleContent.tsx
-const CollapsibleContent = ({ variant, size: size$1, children,...props }) => {
-	const classNames$2 = useClassNames({
-		component: "Collapsible",
-		variant,
-		size: size$1,
-		context: CollapsibleContext
-	});
-	return /* @__PURE__ */ jsx(DisclosurePanel, {
-		...props,
-		className: classNames$2.content,
-		children
-	});
-};
-
-//#endregion
-//#region src/Collapsible/CollapsibleTrigger.tsx
-const CollapsibleTrigger = ({ variant, size: size$1, children, level,...props }) => {
-	const classNames$2 = useClassNames({
-		component: "Collapsible",
-		variant,
-		size: size$1,
-		context: CollapsibleContext
-	});
-	return /* @__PURE__ */ jsx(Heading, {
-		level,
-		children: /* @__PURE__ */ jsx(Button, {
-			...props,
-			slot: "trigger",
-			className: classNames$2.trigger,
-			children
-		})
-	});
-};
-
-//#endregion
-//#region src/Collapsible/Collapsible.tsx
-const Collapsible = ({ variant, size: size$1, children, unstyled,...props }) => {
-	const classNames$2 = useClassNames({
-		component: "Collapsible",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ jsx(CollapsibleProvider, {
-		value: {
-			variant,
-			size: size$1
-		},
-		children: /* @__PURE__ */ jsx(Disclosure, {
-			...props,
-			className: cn(classNames$2.container, unstyled && "expanded:contents expanded:[&_[role=group]]:contents"),
-			children
-		})
-	});
-};
-Collapsible.Trigger = CollapsibleTrigger;
-Collapsible.Content = CollapsibleContent;
-
-//#endregion
-//#region src/Collapsible/More.tsx
-const More = ({ children, defaultExpanded = false, unstyled = true, showCount = false,...props }) => {
-	/**
-	* We need to add state here, because toggling on a checkbox will
-	* force a rerender and without the state the <Collapsible> will be collapsed.
-	*/
-	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-	const stringFormatter = useLocalizedStringFormatter(intlMessages, "marigold");
-	const count = `${Children.count(children)}`;
-	return /* @__PURE__ */ jsxs(Collapsible, {
-		variant: "link",
-		unstyled,
-		isExpanded,
-		...props,
-		children: [/* @__PURE__ */ jsx(Collapsible.Content, { children }), /* @__PURE__ */ jsx(Collapsible.Trigger, {
-			onPress: () => setIsExpanded(!isExpanded),
-			children: isExpanded ? stringFormatter.format(showCount ? "showLessCount" : "showLess").replace("{count}", count) : stringFormatter.format(showCount ? "showMoreCount" : "showMore").replace("{count}", count)
-		})]
-	});
-};
-
-//#endregion
-//#region src/utils/children.utils.ts
-const splitChildren = (children, at) => {
-	const childArray = Children.toArray(children);
-	if (at === void 0) return [childArray, []];
-	return [childArray.slice(0, at), childArray.slice(at)];
-};
-
-//#endregion
-//#region src/Checkbox/Context.tsx
-const CheckboxGroupContext = createContext(null);
-const useCheckboxGroupContext = () => useContext(CheckboxGroupContext);
-
-//#endregion
-//#region src/Checkbox/CheckboxGroup.tsx
-const CollapsibleGroup$1 = ({ children }) => {
-	const state = useContext(CheckboxGroupStateContext);
-	if (!children || children.length === 0) return null;
-	return /* @__PURE__ */ jsx(More, {
-		defaultExpanded: children.some((child) => isValidElement(child) && state.value.includes(child.props.value)),
-		showCount: true,
-		children
-	});
-};
-const _CheckboxGroup = ({ children, variant, size: size$1, required, disabled, readOnly, error, width: width$1, orientation = "vertical", collapseAt,...rest }) => {
-	const classNames$2 = useClassNames({
-		component: "Checkbox",
-		variant,
-		size: size$1,
-		className: { group: "gap-x-2" }
-	});
+const _Calendar = ({ disabled, readOnly, size: size$1, variant, width: width$1 = "fit", dateUnavailable, minValue, maxValue, visibleDuration = { months: 1 }, pageBehavior = "visible", ...rest }) => {
+	const visibleMonths = visibleDuration?.months ?? 1;
+	const isMultiMonth = visibleMonths > 1;
 	const props = {
-		className: classNames$2.group,
-		isRequired: required,
 		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isInvalid: error,
-		...rest
-	};
-	const [visibleChildren, collapsedChildren] = splitChildren(children, collapseAt);
-	return /* @__PURE__ */ jsx(FieldBase, {
-		as: CheckboxGroup,
-		width: width$1,
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			role: "presentation",
-			"data-orientation": orientation,
-			className: cn(classNames$2.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
-			children: /* @__PURE__ */ jsxs(CheckboxGroupContext.Provider, {
-				value: {
-					width: width$1,
-					variant,
-					size: size$1
-				},
-				children: [visibleChildren, /* @__PURE__ */ jsx(CollapsibleGroup$1, { children: collapsedChildren })]
-			})
-		})
-	});
-};
-
-//#endregion
-//#region src/icons/Minus.tsx
-const Minus = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: size$1,
-	height: size$1,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	className: cn("shrink-0", className),
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
-});
-
-//#endregion
-//#region src/Checkbox/Checkbox.tsx
-const Field = ({ description, children }) => {
-	const className = useClassNames({ component: "Field" });
-	const descriptionId = useId();
-	if (!description) return children;
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		children: /* @__PURE__ */ jsxs(Provider, {
-			values: [[CheckboxContext, { "aria-describedby": descriptionId }], [TextContext, { id: descriptionId }]],
-			children: [children, /* @__PURE__ */ jsx(HelpText, { description })]
-		})
-	});
-};
-const Icon$1 = ({ className, checked, indeterminate,...props }) => {
-	return /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
-		className: cn("flex shrink-0 grow-0 basis-4 items-center justify-center", "h-4 w-4 p-px", "bg-white", "rounded-[3px] border border-solid border-black", className),
-		...props,
-		children: indeterminate ? /* @__PURE__ */ jsx(Minus, {
-			size: "12",
-			strokeWidth: "4"
-		}) : checked ? /* @__PURE__ */ jsx(Check, {
-			size: "12",
-			strokeWidth: "4"
-		}) : null
-	});
-};
-const _Checkbox = forwardRef(({ error, disabled, readOnly, required, checked, defaultChecked, indeterminate, variant, size: size$1, label, description,...rest }, ref) => {
-	const props = {
-		isIndeterminate: indeterminate,
-		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isRequired: required,
-		isInvalid: error,
-		isSelected: checked,
-		defaultSelected: defaultChecked,
+		isReadOnly: readOnly,
+		isDateUnavailable: dateUnavailable,
+		minValue,
+		maxValue,
+		visibleDuration,
+		pageBehavior,
 		...rest
 	};
-	const group = useCheckboxGroupContext();
 	const classNames$2 = useClassNames({
-		component: "Checkbox",
-		variant: variant || group?.variant,
-		size: size$1 || group?.size
+		component: "Calendar",
+		size: size$1,
+		variant
 	});
-	return /* @__PURE__ */ jsx(Field, {
-		description,
-		children: /* @__PURE__ */ jsx(Checkbox, {
-			ref,
-			className: cn("group/checkbox flex items-center", "cursor-pointer data-disabled:cursor-not-allowed", classNames$2.container),
+	const [selectedDropdown, setSelectedDropdown] = useState();
+	const ViewMap = {
+		month: /* @__PURE__ */ jsx(MonthListBox_default, {
+			setSelectedDropdown,
+			minValue,
+			maxValue
+		}),
+		year: /* @__PURE__ */ jsx(YearListBox_default, {
+			setSelectedDropdown,
+			minValue,
+			maxValue
+		})
+	};
+	if (isMultiMonth) return /* @__PURE__ */ jsx(CalendarContext.Provider, {
+		value: {
+			classNames: classNames$2,
+			visibleMonths,
+			minValue,
+			maxValue,
+			disabled
+		},
+		children: /* @__PURE__ */ jsx(Calendar, {
+			className: cn("relative flex min-h-[350px] flex-col", width[width$1], classNames$2.calendar),
 			...props,
-			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon$1, {
-				checked: isSelected,
-				indeterminate: isIndeterminate,
-				className: classNames$2.checkbox
-			}), label && /* @__PURE__ */ jsx("div", {
-				className: classNames$2.label,
-				children: label
-			})] })
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("flex gap-4", classNames$2.calendarContainer),
+				children: [...Array(visibleMonths).keys()].map((i$1) => /* @__PURE__ */ jsxs("div", {
+					className: cn("flex-1", classNames$2.calendarMonth),
+					children: [/* @__PURE__ */ jsx(CalendarHeader, {
+						monthOffset: i$1,
+						showPrevious: i$1 === 0,
+						showNext: i$1 === visibleMonths - 1
+					}), /* @__PURE__ */ jsx(_CalendarGrid, { offset: { months: i$1 } })]
+				}, i$1))
+			})
 		})
 	});
-});
-_Checkbox.Group = _CheckboxGroup;
+	return /* @__PURE__ */ jsx(CalendarContext.Provider, {
+		value: {
+			classNames: classNames$2,
+			visibleMonths,
+			minValue,
+			maxValue,
+			disabled
+		},
+		children: /* @__PURE__ */ jsxs(Calendar, {
+			className: cn("relative flex min-h-[350px] flex-col", width[width$1], classNames$2.calendar),
+			...props,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("pointer-events-none absolute top-1/2 left-0 w-full -translate-y-1/2 opacity-0", selectedDropdown && "pointer-events-auto opacity-100"),
+				children: ViewMap[selectedDropdown]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col", selectedDropdown && "pointer-events-none opacity-0"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "mb-4 flex items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex w-fit gap-4",
+						children: [/* @__PURE__ */ jsx(CalendarListBox, {
+							type: "month",
+							isDisabled: hasOnlyOneSelectableMonth(minValue, maxValue) || props.isDisabled,
+							setSelectedDropdown
+						}, "month"), /* @__PURE__ */ jsx(CalendarListBox, {
+							type: "year",
+							isDisabled: hasOnlyOneSelectableYear(minValue, maxValue) || props.isDisabled,
+							setSelectedDropdown
+						}, "year")]
+					}), /* @__PURE__ */ jsx(MonthControls_default, {})]
+				}), /* @__PURE__ */ jsx(_CalendarGrid, {})]
+			})]
+		})
+	});
+};
 
 //#endregion
-//#region src/CloseButton/CloseButton.tsx
-const CloseButton = forwardRef(({ className, size: size$1, variant,...props }, ref) => {
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		className: useClassNames({
-			component: "CloseButton",
-			className,
-			size: size$1,
-			variant
-		}),
+//#region src/Card/Card.tsx
+const Card = ({ children, variant, size: size$1, space = "0", stretch, p: p$1, px, py, pt, pb, pl, pr, ...props }) => {
+	const classNames$2 = useClassNames({
+		component: "Card",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ jsx("div", {
 		...props,
-		children: /* @__PURE__ */ jsx(X, {})
+		className: cn("flex flex-col gap-y-(--space)", stretch ? "" : "w-fit", classNames$2, paddingSpace !== void 0 && paddingSpace[p$1], paddingSpaceX !== void 0 && paddingSpaceX[px], paddingSpaceY !== void 0 && paddingSpaceY[py], paddingRight !== void 0 && paddingRight[pr], paddingLeft !== void 0 && paddingLeft[pl], paddingBottom !== void 0 && paddingBottom[pb], paddingTop !== void 0 && paddingTop[pt]),
+		style: createSpacingVar("space", `${space}`),
+		children
 	});
-});
+};
 
 //#endregion
 //#region src/Columns/Columns.tsx
-const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children,...props }) => {
+const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children, ...props }) => {
 	if (Children.count(children) !== columns.length) throw new Error(`Columns: expected ${columns.length} children, got ${Children.count(children)}`);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-wrap items-stretch", stretch && "h-full", gapSpace[space]),
+		className: cn("flex flex-wrap items-stretch gap-(--space)", stretch && "h-full"),
+		style: createSpacingVar("space", `${space}`),
 		...props,
 		children: Children.map(children, (child, idx) => /* @__PURE__ */ jsx("div", {
-			className: cn(columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)", "basis-[calc((var(--collapseAt)_-_100%)_*_999)]"),
+			className: cn(columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)", "basis-[calc((var(--collapseAt)-100%)*999)]"),
 			style: createVar({
 				collapseAt,
 				columnSize: columns[idx]
@@ -1396,9 +1363,51 @@ const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children,...
 	});
 };
 
+//#endregion
+//#region src/ComboBox/MobileCombobox.tsx
+const MobileComboBoxTrigger = ({ placeholder }) => {
+	const state = useContext(ComboBoxStateContext);
+	const inputClassNames = useClassNames({ component: "Input" });
+	const comboBoxClassNames = useClassNames({ component: "ComboBox" });
+	const displayText = state?.selectedItem?.textValue || "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: comboBoxClassNames.mobileTrigger,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("w-full flex-1 text-left", "group-data-error/field:ui-state-error", "group-data-focus-visible/trigger:ui-state-focus", inputClassNames.input),
+			children: displayText || /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: placeholder
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn("absolute right-2 cursor-pointer", inputClassNames.action, comboBoxClassNames),
+			children: /* @__PURE__ */ jsx(ChevronsVertical, { size: "16" })
+		})]
+	});
+};
+const MobileComboBox = ({ placeholder, label, emptyState, children }) => {
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	return /* @__PURE__ */ jsxs(Tray.Trigger, { children: [/* @__PURE__ */ jsx(Button, {
+		className: "group/trigger outline-none",
+		children: /* @__PURE__ */ jsx(MobileComboBoxTrigger, { placeholder })
+	}), /* @__PURE__ */ jsxs(Tray, { children: [
+		/* @__PURE__ */ jsx(Tray.Title, { children: label }),
+		/* @__PURE__ */ jsxs(Tray.Content, {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx(_Input, { autoFocus: true }), /* @__PURE__ */ jsx(_ListBox, {
+				renderEmptyState: () => emptyState ?? /* @__PURE__ */ jsx(Center, { children: stringFormatter.format("noResultsFound") }),
+				children
+			})]
+		}),
+		/* @__PURE__ */ jsx(Tray.Actions, { children: /* @__PURE__ */ jsx(_Button, {
+			slot: "close",
+			children: stringFormatter.format("close")
+		}) })
+	] })] });
+};
+
 //#endregion
 //#region src/ComboBox/ComboBox.tsx
-const _ComboBox = forwardRef(({ variant, size: size$1, required, disabled, readOnly, error, defaultValue, value, emptyState, onChange, children, loading,...rest }, ref) => {
+const _ComboBox = forwardRef(({ variant, size: size$1, required, disabled, readOnly, error, defaultValue, value, emptyState, onChange, children, loading, ...rest }, ref) => {
 	const props = {
 		isDisabled: disabled,
 		isReadOnly: readOnly,
@@ -1415,17 +1424,23 @@ const _ComboBox = forwardRef(({ variant, size: size$1, required, disabled, readO
 		size: size$1
 	});
 	const stringFormatter = useLocalizedStringFormatter(intlMessages);
-	return /* @__PURE__ */ jsxs(FieldBase, {
+	const isSmallScreen = useSmallScreen();
+	return /* @__PURE__ */ jsx(FieldBase, {
 		as: ComboBox,
 		ref,
 		...props,
-		children: [/* @__PURE__ */ jsx(_Input, { action: /* @__PURE__ */ jsx(IconButton, {
-			className: classNames$2,
+		children: isSmallScreen ? /* @__PURE__ */ jsx(MobileComboBox, {
+			placeholder: rest.placeholder,
+			label: rest.label,
+			emptyState,
+			children
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(_Input, { action: /* @__PURE__ */ jsx(IconButton, {
+			className: classNames$2.icon,
 			children: loading ? /* @__PURE__ */ jsx(ProgressCircle, {}) : /* @__PURE__ */ jsx(ChevronsVertical, { size: "16" })
 		}) }), /* @__PURE__ */ jsx(_Popover, { children: /* @__PURE__ */ jsx(_ListBox, {
 			renderEmptyState: () => emptyState ?? /* @__PURE__ */ jsx(Center, { children: stringFormatter.format("noResultsFound") }),
 			children
-		}) })]
+		}) })] })
 	});
 });
 _ComboBox.Option = _ListBox.Item;
@@ -1453,19 +1468,22 @@ const gridColumn = {
 	center: "*:col-[2]",
 	right: "*:col-[3]"
 };
-const Container = ({ contentLength = "default", align = "left", alignItems = "none", space = 0, children,...props }) => /* @__PURE__ */ jsx("div", {
+const Container = ({ contentLength = "default", align = "left", alignItems = "none", space = 0, children, ...props }) => /* @__PURE__ */ jsx("div", {
 	...props,
-	className: cn("grid", placeItems[alignItems], gridColsAlign[align], gridColumn[align], gapSpace[space]),
-	style: createVar({
-		maxTextWidth: containerTextLength[contentLength],
-		maxHeadlineWidth: containerHeadlineLength[contentLength]
-	}),
+	className: cn("grid gap-(--space)", placeItems[alignItems], gridColsAlign[align], gridColumn[align]),
+	style: {
+		...createVar({
+			maxTextWidth: containerTextLength[contentLength],
+			maxHeadlineWidth: containerHeadlineLength[contentLength]
+		}),
+		...createSpacingVar("space", `${space}`)
+	},
 	children
 });
 
 //#endregion
 //#region src/icons/CircleQuestionMark.tsx
-const CircleQuestionMark = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const CircleQuestionMark = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -1490,7 +1508,7 @@ const CircleQuestionMark = ({ size: size$1 = 24, className,...props }) => /* @__
 
 //#endregion
 //#region src/icons/Info.tsx
-const Info = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const Info = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -1517,11 +1535,11 @@ const Info = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs
 //#region src/ContextualHelp/ContextualHelpContent.tsx
 const ContextualHelpContent = ({ children, variant, size: size$1 }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: useClassNames({
+		className: cn("min-h-0 overflow-y-auto [grid-area:content]", useClassNames({
 			component: "ContextualHelp",
 			variant,
 			size: size$1
-		}).content,
+		}).content),
 		children
 	});
 };
@@ -1530,11 +1548,11 @@ const ContextualHelpContent = ({ children, variant, size: size$1 }) => {
 //#region src/ContextualHelp/ContextualHelpTitle.tsx
 const ContextualHelpTitle = ({ children, variant, size: size$1 }) => {
 	return /* @__PURE__ */ jsx(Heading, {
-		className: useClassNames({
+		className: cn("[grid-area:title]", useClassNames({
 			component: "ContextualHelp",
 			variant,
 			size: size$1
-		}).title,
+		}).title),
 		children
 	});
 };
@@ -1545,12 +1563,12 @@ const icons$2 = {
 	help: CircleQuestionMark,
 	info: Info
 };
-const DialogTrigger$1 = ({ open,...rest }) => /* @__PURE__ */ jsx(DialogTrigger, {
+const DialogTrigger$1 = ({ open, ...rest }) => /* @__PURE__ */ jsx(DialogTrigger, {
 	isOpen: open,
 	...rest
 });
 const _ContextualHelp = forwardRef(({ children, variant = "help", size: size$1, width: width$1, placement = "bottom start", offset: offset$1 = 0, defaultOpen, open, onOpenChange, ariaLabel }, ref) => {
-	const Icon$2 = icons$2[variant];
+	const Icon$1 = icons$2[variant];
 	const classNames$2 = useClassNames({
 		component: "ContextualHelp",
 		variant,
@@ -1565,14 +1583,13 @@ const _ContextualHelp = forwardRef(({ children, variant = "help", size: size$1,
 			ref,
 			className: classNames$2.trigger,
 			"aria-label": ariaLabel ?? (variant === "info" ? stringFormatter.format("moreInfo") : stringFormatter.format("help")),
-			children: /* @__PURE__ */ jsx(Icon$2, { size: 20 })
-		}), /* @__PURE__ */ jsx(Popover, {
+			children: /* @__PURE__ */ jsx(Icon$1, { size: 20 })
+		}), /* @__PURE__ */ jsx(_Popover, {
 			placement,
 			offset: offset$1,
-			className: classNames$2.popover,
-			[`data-${width$1 ?? "medium"}`]: true,
 			children: /* @__PURE__ */ jsx(Dialog, {
-				className: classNames$2.container,
+				className: cn("grid [grid-template-areas:'title'_'content']", classNames$2.container),
+				[`data-${width$1 ?? "medium"}`]: true,
 				children
 			})
 		})]
@@ -1583,7 +1600,7 @@ _ContextualHelp.Content = ContextualHelpContent;
 
 //#endregion
 //#region src/DateField/DateSegment.tsx
-const _DateSegment = ({ segment,...props }) => {
+const _DateSegment = ({ segment, ...props }) => {
 	return /* @__PURE__ */ jsx(DateSegment, {
 		...props,
 		segment,
@@ -1662,7 +1679,7 @@ const isValidDate = (year, month, day) => {
 	if (month === 2 && isLeapYear) return day <= 29;
 	return day <= daysInMonth[month - 1];
 };
-const _DateInput = ({ variant, size: size$1, action, onPaste,...props }) => {
+const _DateInput = ({ variant, size: size$1, action, onPaste, ...props }) => {
 	const classNames$2 = useClassNames({
 		component: "DateField",
 		variant,
@@ -1680,10 +1697,10 @@ const _DateInput = ({ variant, size: size$1, action, onPaste,...props }) => {
 		}
 	};
 	return /* @__PURE__ */ jsxs(Group, {
-		className: classNames$2.field,
+		className: cn(classNames$2.field, "w-(--field-width) max-w-full min-w-0 overflow-hidden"),
 		onPaste: handlePaste,
 		children: [/* @__PURE__ */ jsx(DateInput, {
-			className: "flex flex-1 items-center",
+			className: cn("flex flex-1 items-center", classNames$2.input),
 			...props,
 			children: (segment) => /* @__PURE__ */ jsx(_DateSegment, {
 				className: classNames$2.segment,
@@ -1695,7 +1712,7 @@ const _DateInput = ({ variant, size: size$1, action, onPaste,...props }) => {
 
 //#endregion
 //#region src/DateField/DateField.tsx
-const _DateField = forwardRef(({ variant, size: size$1, action, disabled, required, error, readOnly, onChange,...rest }, ref) => {
+const _DateField = forwardRef(({ variant, size: size$1, action, disabled, required, error, readOnly, onChange, ...rest }, ref) => {
 	return /* @__PURE__ */ jsx(FieldBase, {
 		as: DateField,
 		variant,
@@ -1705,17 +1722,14 @@ const _DateField = forwardRef(({ variant, size: size$1, action, disabled, requir
 		isReadOnly: readOnly,
 		isInvalid: error,
 		isRequired: required,
+		onChange,
 		...rest,
-		children: /* @__PURE__ */ jsx(DateInputWithPasteWrapper, {
-			onChange,
-			action
-		})
+		children: /* @__PURE__ */ jsx(DateInputWithPasteWrapper, { action })
 	});
 });
-const DateInputWithPasteWrapper = ({ onChange,...props }) => {
+const DateInputWithPasteWrapper = ({ ...props }) => {
 	const ctx = useContext(DateFieldStateContext);
 	const onPaste = (date) => {
-		if (onChange) onChange(date);
 		ctx?.setValue(date);
 	};
 	return /* @__PURE__ */ jsx(_DateInput, {
@@ -1726,7 +1740,7 @@ const DateInputWithPasteWrapper = ({ onChange,...props }) => {
 
 //#endregion
 //#region src/icons/Calendar.tsx
-const Calendar$1 = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const Calendar$1 = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -1754,7 +1768,7 @@ const Calendar$1 = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ *
 
 //#endregion
 //#region src/DatePicker/DatePicker.tsx
-const _DatePicker = forwardRef(({ dateUnavailable, disabled, required, readOnly, error, variant, size: size$1, open, granularity = "day", onChange,...rest }, ref) => {
+const _DatePicker = forwardRef(({ dateUnavailable, disabled, required, readOnly, error, variant, size: size$1, open, granularity = "day", onChange, ...rest }, ref) => {
 	const props = {
 		isDateUnavailable: dateUnavailable,
 		isDisabled: disabled,
@@ -1771,6 +1785,8 @@ const _DatePicker = forwardRef(({ dateUnavailable, disabled, required, readOnly,
 		size: size$1,
 		variant
 	});
+	const isSmallScreen = useSmallScreen();
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
 	return /* @__PURE__ */ jsxs(FieldBase, {
 		as: DatePicker,
 		variant,
@@ -1786,10 +1802,17 @@ const _DatePicker = forwardRef(({ dateUnavailable, disabled, required, readOnly,
 					"data-testid": "action"
 				})
 			})
-		}), /* @__PURE__ */ jsx(_Popover, { children: /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsx(_Calendar, { disabled }) }) })]
+		}), isSmallScreen ? /* @__PURE__ */ jsxs(Tray, { children: [
+			/* @__PURE__ */ jsx(Tray.Title, { children: rest.label }),
+			/* @__PURE__ */ jsx(Tray.Content, { children: /* @__PURE__ */ jsx(_Calendar, { disabled }) }),
+			/* @__PURE__ */ jsx(Tray.Actions, { children: /* @__PURE__ */ jsx(_Button, {
+				slot: "close",
+				children: stringFormatter.format("close")
+			}) })
+		] }) : /* @__PURE__ */ jsx(_Popover, { children: /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsx(_Calendar, { disabled }) }) })]
 	});
 });
-const DatePickerWithPasteWrapper = ({ onChange,...props }) => {
+const DatePickerWithPasteWrapper = ({ onChange, ...props }) => {
 	const ctx = useContext(DatePickerStateContext);
 	const onPaste = (date) => {
 		if (onChange) onChange(date);
@@ -1801,9 +1824,31 @@ const DatePickerWithPasteWrapper = ({ onChange,...props }) => {
 	});
 };
 
+//#endregion
+//#region src/Overlay/Underlay.tsx
+const Underlay = ({ size: size$1, variant, open, dismissable, keyboardDismissable, ...rest }) => {
+	const classNames$2 = useClassNames({
+		component: "Underlay",
+		size: size$1,
+		variant
+	});
+	const props = {
+		isOpen: open,
+		isDismissable: dismissable,
+		isKeyboardDismissDisabled: keyboardDismissable,
+		...rest
+	};
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		className: ({ isEntering, isExiting }) => cn("fixed inset-0 z-50 grid place-items-center overflow-y-auto", isEntering ? "animate-in fade-in duration-300 ease-out" : "", isExiting ? "animate-out fade-out duration-200 ease-in" : "", classNames$2),
+		...props,
+		"data-testid": "underlay-id",
+		children: props.children
+	});
+};
+
 //#endregion
 //#region src/Overlay/Modal.tsx
-const _Modal = forwardRef(({ size: size$1, open, dismissable, keyboardDismissable, onOpenChange, children,...props }, ref) => {
+const _Modal = forwardRef(({ size: size$1, open, dismissable, keyboardDismissable, onOpenChange, children, ...props }, ref) => {
 	const className = useClassNames({
 		component: "Modal",
 		size: size$1
@@ -1843,7 +1888,7 @@ const DialogActions = ({ variant, size: size$1, children }) => {
 //#region src/Dialog/DialogContent.tsx
 const DialogContent = ({ variant, size: size$1, children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("min-h-0 overflow-auto [grid-area:content]", useClassNames({
+		className: cn("min-h-0 overflow-y-auto [grid-area:content]", useClassNames({
 			component: "Dialog",
 			variant,
 			size: size$1
@@ -1873,7 +1918,7 @@ const DialogTitle = ({ variant, size: size$1, children }) => {
 
 //#endregion
 //#region src/Dialog/DialogTrigger.tsx
-const _DialogTrigger = ({ open, dismissable, keyboardDismissable,...rest }) => {
+const _DialogTrigger = ({ open, dismissable, keyboardDismissable, ...rest }) => {
 	const ctx = {
 		isDismissable: dismissable,
 		isKeyboardDismissDisabled: !keyboardDismissable
@@ -1900,7 +1945,7 @@ const _DialogTrigger = ({ open, dismissable, keyboardDismissable,...rest }) => {
 * Needed so that the close button and function can be used inside the dialog,
 * when the dialog is controlled and no <Dialog.Trigger> is used.
 */
-const InnerDialog = forwardRef(({ variant, size: size$1, closeButton,...props }, ref) => {
+const InnerDialog = forwardRef(({ variant, size: size$1, closeButton, ...props }, ref) => {
 	const state = useContext(OverlayTriggerStateContext);
 	const classNames$2 = useClassNames({
 		component: "Dialog",
@@ -1918,7 +1963,7 @@ const InnerDialog = forwardRef(({ variant, size: size$1, closeButton,...props },
 		}), children]
 	});
 });
-const _Dialog = forwardRef(({ open, onOpenChange, children,...props }, ref) => {
+const _Dialog = forwardRef(({ open, onOpenChange, children, ...props }, ref) => {
 	const ctx = useContext(DialogContext);
 	return /* @__PURE__ */ jsx(_Modal, {
 		size: props.size,
@@ -1940,7 +1985,7 @@ _Dialog.Actions = DialogActions;
 
 //#endregion
 //#region src/Dialog/ConfirmationDialog.tsx
-const ConfirmationDialog = ({ title, confirmationLabel, cancelLabel, onCancel, onConfirm, autoFocusButton, children, variant, size: size$1 = "xsmall",...props }) => {
+const ConfirmationDialog = ({ title, confirmationLabel, cancelLabel, onCancel, onConfirm, autoFocusButton, children, variant, size: size$1 = "xsmall", ...props }) => {
 	const stringFormatter = useLocalizedStringFormatter(intlMessages, "marigold");
 	return /* @__PURE__ */ jsx(_Dialog, {
 		role: "alertdialog",
@@ -2012,7 +2057,7 @@ const useConfirmation = () => {
 
 //#endregion
 //#region src/Divider/Divider.tsx
-const _Divider = ({ variant,...props }) => {
+const _Divider = ({ variant, ...props }) => {
 	return /* @__PURE__ */ jsx(Separator, {
 		className: cn("border-none", useClassNames({
 			component: "Divider",
@@ -2119,7 +2164,7 @@ const useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
 
 //#endregion
 //#region src/Overlay/NonModal.tsx
-const NonModalInner = ({ state, isExiting,...props }) => {
+const NonModalInner = ({ state, isExiting, ...props }) => {
 	const { nonModalProps } = useNonModal(props, state);
 	const ref = props.nonModalRef;
 	const isEntering = useEnterAnimation(ref) || props.isEntering || false;
@@ -2162,7 +2207,7 @@ const NonModalInner = ({ state, isExiting,...props }) => {
 		})
 	});
 };
-const NonModal = forwardRef(({ open,...rest }, ref) => {
+const NonModal = forwardRef(({ open, ...rest }, ref) => {
 	const props = {
 		isOpen: open,
 		...rest
@@ -2184,15 +2229,15 @@ const NonModal = forwardRef(({ open,...rest }, ref) => {
 
 //#endregion
 //#region src/Drawer/DrawerModal.tsx
-const MobileModal = ({ children,...props }) => /* @__PURE__ */ jsx(ModalOverlay, {
+const MobileModal = ({ children, ...props }) => /* @__PURE__ */ jsx(ModalOverlay, {
 	...props,
-	className: "fixed inset-0 z-40 h-(--visual-viewport-height)",
+	className: "fixed inset-0 z-50 h-(--visual-viewport-height)",
 	children: /* @__PURE__ */ jsx(Modal, {
 		className: "flex *:flex-1",
 		children
 	})
 });
-const DrawerModal = ({ children, className,...props }) => {
+const DrawerModal = ({ children, className, ...props }) => {
 	return useSmallScreen() ? /* @__PURE__ */ jsx(MobileModal, { children }) : /* @__PURE__ */ jsx(NonModal, {
 		...props,
 		className: cn("fixed", className),
@@ -2223,7 +2268,7 @@ const DrawerTitle = ({ variant, size: size$1, children }) => {
 
 //#endregion
 //#region src/Drawer/DrawerTrigger.tsx
-const DrawerTrigger = ({ open, children,...props }) => /* @__PURE__ */ jsx(DialogTrigger, {
+const DrawerTrigger = ({ open, children, ...props }) => /* @__PURE__ */ jsx(DialogTrigger, {
 	isOpen: open,
 	...props,
 	children
@@ -2231,7 +2276,7 @@ const DrawerTrigger = ({ open, children,...props }) => /* @__PURE__ */ jsx(Dialo
 
 //#endregion
 //#region src/Drawer/Drawer.tsx
-const Drawer = ({ children, size: size$1 = "medium", variant, open, keyboardDismissable, closeButton, role = "complementary", placement = "right",...props }) => {
+const Drawer = ({ children, size: size$1 = "medium", variant, open, keyboardDismissable, closeButton, role = "complementary", placement = "right", ...props }) => {
 	const ref = useRef(null);
 	const classNames$2 = useClassNames({
 		component: "Drawer",
@@ -2268,7 +2313,7 @@ const Drawer = ({ children, size: size$1 = "medium", variant, open, keyboardDism
 				children: [closeButton && /* @__PURE__ */ jsx(CloseButton, {
 					"aria-label": "dismiss drawer",
 					style: { "--i": 0 },
-					className: classNames$2.closeButton,
+					className: cn("z-80", classNames$2.closeButton),
 					onPress: ctx?.close
 				}), children]
 			})
@@ -2280,21 +2325,113 @@ Drawer.Title = DrawerTitle;
 Drawer.Content = DrawerContent;
 Drawer.Actions = DrawerActions;
 
+//#endregion
+//#region src/EmptyState/EmptyState.tsx
+const EmptyState = ({ title, description, action, variant, size: size$1, ...props }) => {
+	const classNames$2 = useClassNames({
+		component: "EmptyState",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames$2.container,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "151",
+				height: "84",
+				viewBox: "0 0 151 84",
+				fill: "none",
+				className: "mb-6",
+				"data-testid": "empty-state-illustration",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx("ellipse", {
+						cx: "75.5",
+						cy: "70.8003",
+						rx: "75.5",
+						ry: "13.1577",
+						fill: "#EDECEC"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M42.6059 8.14447C44.1096 9.39758 47.6183 9.91971 49.1847 10.0241V71.1133H30.0747C24.561 69.636 23.1826 65.4853 23.1826 63.5947V44.4847C25.6888 44.6936 30.7013 43.4822 30.7013 36.966C30.7013 30.4499 25.6888 27.9854 23.1826 27.5677V10.0241C23.1826 9.0843 23.8092 5.95152 25.3756 4.38513C26.6287 3.13202 29.4482 2.19218 30.7013 1.87891H39.4731C39.8908 3.4453 41.1021 6.89135 42.6059 8.14447Z",
+						fill: "white"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M49.8666 10.2474C53.7335 9.54586 56.338 4.88273 57.4051 1.95542C57.5564 1.54028 57.9458 1.25503 58.3876 1.25951L119.214 1.87704C119.31 1.87801 119.405 1.89262 119.497 1.92186C120.92 2.37547 123.927 3.55656 125.624 5.01129C127.379 6.51502 127.817 9.18833 127.817 10.337V62.3412C127.817 62.8503 127.379 64.6283 125.624 67.6669C123.87 70.7055 121.134 71.2304 119.985 71.113H49.8713C49.3191 71.113 48.8713 70.6652 48.8713 70.1129V11.337C48.8713 10.7847 49.3232 10.346 49.8666 10.2474Z",
+						fill: "#F7F7F7"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M118.808 0.00662447C119.277 0.0239338 119.926 0.0808981 120.675 0.239747C122.169 0.556561 124.122 1.29138 125.805 2.97481C127.438 4.60764 128.326 6.49112 128.807 7.93403C129.049 8.66006 129.193 9.28997 129.277 9.74517C129.32 9.97315 129.347 10.1589 129.364 10.2928C129.373 10.3598 129.379 10.4142 129.383 10.4543C129.385 10.4744 129.388 10.491 129.389 10.5039C129.389 10.5103 129.39 10.5158 129.39 10.5204C129.39 10.5226 129.39 10.5247 129.391 10.5265C129.391 10.5275 129.39 10.5288 129.391 10.5296L129.391 10.5308C129.391 10.5314 129.363 10.534 127.83 10.6617L129.391 10.5314L129.397 10.5963V62.0393H127.83L129.397 62.0406V62.0424C129.397 62.0433 129.396 62.0445 129.396 62.0455V62.0693C129.396 62.0822 129.395 62.0981 129.395 62.1164C129.394 62.1531 129.392 62.2007 129.389 62.2584C129.382 62.3739 129.369 62.5305 129.345 62.7228C129.297 63.1075 129.204 63.6376 129.023 64.2708C128.66 65.5397 127.947 67.2208 126.547 68.97C125.047 70.845 123.178 71.7713 121.718 72.2276C120.987 72.4561 120.345 72.5713 119.879 72.6296C119.645 72.6588 119.453 72.6743 119.314 72.6822C119.244 72.6862 119.186 72.6884 119.144 72.6896C119.122 72.6902 119.104 72.6906 119.09 72.6908H119.06C119.059 72.6908 119.059 72.6907 119.059 71.1244V72.6908H30.7135V71.1244C30.7135 72.6907 30.713 72.6908 30.7123 72.6908H30.6835C30.6706 72.6906 30.6548 72.6901 30.6364 72.6896C30.5996 72.6885 30.552 72.6863 30.4944 72.6828C30.3793 72.676 30.2235 72.6633 30.0337 72.6388C29.6548 72.5899 29.1357 72.4946 28.5303 72.3084C27.317 71.9351 25.7472 71.1925 24.2803 69.7257C22.7636 68.2089 22.1015 66.5005 21.82 65.1868C21.6793 64.5305 21.6319 63.9643 21.6199 63.5537C21.6138 63.3478 21.6167 63.1789 21.6217 63.0551C21.6237 63.0048 21.6261 62.9618 21.6284 62.9266V45.1486C21.6286 43.8942 22.6347 43.0011 23.7161 42.9116L24.0331 42.878C24.8301 42.7745 26.0052 42.4838 27.0092 41.7111C28.075 40.8909 29.1471 39.3773 29.1471 36.3505C29.1471 33.3076 28.0617 31.7216 26.9591 30.8351C25.7833 29.8899 24.3901 29.5858 23.6286 29.4939C22.5764 29.3669 21.6285 28.4802 21.6284 27.2655V9.95932L21.6358 9.88345L23.1948 10.0352C21.7189 9.8917 21.6405 9.88363 21.6364 9.88284V9.87978C21.6365 9.87838 21.6368 9.87666 21.637 9.87488C21.6374 9.87126 21.6377 9.86657 21.6382 9.86142C21.6393 9.85103 21.6406 9.83741 21.6425 9.82104C21.6463 9.78802 21.6517 9.7429 21.659 9.68704C21.6738 9.57522 21.6968 9.41902 21.73 9.22691C21.7963 8.84347 21.9054 8.31069 22.0794 7.6954C22.4226 6.48194 23.042 4.86123 24.1518 3.43433C25.3427 1.90326 26.9783 1.06453 28.2158 0.609929C28.8469 0.378108 29.4093 0.233047 29.8177 0.145519C30.0228 0.101583 30.1914 0.0715045 30.3133 0.0519029C30.3744 0.0420967 30.424 0.034942 30.4608 0.0298756C30.4792 0.0273413 30.4948 0.0252681 30.5067 0.0237569C30.5125 0.0230192 30.5178 0.0224319 30.522 0.0219212C30.524 0.0216751 30.5259 0.021504 30.5275 0.0213094C30.5283 0.0212086 30.5292 0.0213966 30.5299 0.0213094L30.5312 0.0206975C30.5317 0.0210523 30.5345 0.0436789 30.678 1.27136L30.5318 0.0206975L30.6223 0.0102957H39.172C40.3083 0.0102957 41.1716 0.844137 41.3668 1.83673L41.3968 2.03742L41.4414 2.39353C41.5737 3.30078 41.9215 4.71028 42.8053 5.92954C43.7515 7.23492 45.4105 8.46873 48.5703 8.4688C51.4189 8.4688 52.9238 7.27959 53.8025 5.9742C54.7445 4.57463 55.0359 2.91873 55.1192 2.04905L55.1314 1.94748C55.2805 0.902099 56.1685 0.0104433 57.3421 0.0102957H118.063C118.066 0.0101221 118.069 0.00986006 118.072 0.00968382C118.115 0.00726142 118.171 0.00493038 118.241 0.00295324C118.38 -0.000999543 118.572 -0.00205497 118.808 0.00662447ZM118.245 3.13818C118.244 3.13828 118.242 3.13812 118.241 3.13818L118.245 3.13757H118.245L118.245 3.13818ZM32.2799 36.3505C32.2799 40.2506 30.8314 42.7228 28.9195 44.1941C27.4746 45.306 25.8841 45.7531 24.7612 45.9355V63.0575L24.7539 63.1352C24.7532 63.1453 24.7523 63.1613 24.7514 63.1823C24.7491 63.2396 24.7471 63.3352 24.7508 63.4619C24.7583 63.717 24.7893 64.0909 24.8836 64.5309C25.072 65.41 25.5065 66.5214 26.4959 67.5107C27.5351 68.5498 28.6283 69.0606 29.4512 69.3139C29.8638 69.4408 30.2065 69.5023 30.4345 69.5317C30.5481 69.5464 30.6323 69.5527 30.6811 69.5556C30.7051 69.557 30.7204 69.5578 30.7263 69.558H119.059C119.072 69.5577 119.098 69.5565 119.136 69.5543C119.211 69.55 119.333 69.541 119.49 69.5213C119.807 69.4817 120.262 69.4005 120.784 69.2374C121.83 68.9105 123.094 68.2708 124.1 67.0132C125.207 65.6299 125.747 64.3345 126.011 63.4105C126.143 62.9474 126.206 62.5761 126.236 62.3343C126.251 62.2138 126.258 62.1258 126.261 62.0748C126.263 62.0495 126.264 62.0333 126.264 62.0271V10.7474C126.262 10.7333 126.26 10.7163 126.258 10.6966C126.247 10.6139 126.228 10.4838 126.197 10.3154C126.134 9.97754 126.024 9.49099 125.835 8.92465C125.454 7.78278 124.776 6.37641 123.589 5.18978C122.453 4.05392 121.116 3.53577 120.026 3.30461C119.483 3.18954 119.016 3.14891 118.692 3.13696C118.531 3.13101 118.407 3.13232 118.33 3.13451C118.291 3.1356 118.264 3.13677 118.25 3.13757C118.243 3.13796 118.24 3.13816 118.239 3.13818C118.239 3.13818 118.24 3.13826 118.241 3.13818L118.184 3.14308H58.1351C57.9431 4.34163 57.4898 6.10606 56.4011 7.72354C54.9709 9.84828 52.5151 11.6016 48.5703 11.6016C44.4144 11.6015 41.8086 9.89301 40.2685 7.76821C39.0862 6.13709 38.5955 4.35234 38.3888 3.14308H30.823C30.8191 3.1437 30.815 3.14423 30.8108 3.14491C30.737 3.15678 30.6216 3.17759 30.4743 3.20916C30.1779 3.27267 29.7611 3.37964 29.2958 3.55058C28.3405 3.90154 27.3131 4.47255 26.6244 5.35805C25.8547 6.34775 25.3774 7.54657 25.0941 8.54835C24.9549 9.04044 24.8681 9.46424 24.8169 9.76046C24.7914 9.9081 24.7752 10.0232 24.7655 10.097C24.7638 10.1096 24.7625 10.1211 24.7612 10.1313V26.5049C25.8771 26.7257 27.4732 27.2291 28.9219 28.3938C30.8178 29.9179 32.2799 32.4295 32.2799 36.3505Z",
+						fill: "#C8C8C8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M47.3049 66.4135V64.2848C47.3051 63.4198 48.0063 62.7184 48.8713 62.7184C49.7363 62.7184 50.4376 63.4198 50.4377 64.2848V66.4135C50.4377 67.2786 49.7364 67.9799 48.8713 67.9799C48.0062 67.9799 47.3049 67.2786 47.3049 66.4135ZM47.3049 58.204V53.9466C47.3051 53.0817 48.0063 52.3802 48.8713 52.3802C49.7363 52.3802 50.4376 53.0817 50.4377 53.9466V58.204C50.4376 59.069 49.7363 59.7704 48.8713 59.7704C48.0063 59.7704 47.3051 59.069 47.3049 58.204ZM47.3049 47.8659V43.6085C47.3051 42.7435 48.0063 42.0421 48.8713 42.0421C49.7363 42.0421 50.4376 42.7435 50.4377 43.6085V47.8659C50.4376 48.7308 49.7363 49.4323 48.8713 49.4323C48.0063 49.4323 47.3051 48.7308 47.3049 47.8659ZM47.3049 37.5277V33.2703C47.3051 32.4053 48.0063 31.7039 48.8713 31.7039C49.7363 31.7039 50.4376 32.4053 50.4377 33.2703V37.5277C50.4376 38.3927 49.7363 39.0941 48.8713 39.0941C48.0063 39.0941 47.3051 38.3927 47.3049 37.5277ZM47.3049 27.1895V22.9321C47.3051 22.0671 48.0063 21.3657 48.8713 21.3657C49.7363 21.3657 50.4376 22.0671 50.4377 22.9321V27.1895C50.4376 28.0545 49.7363 28.7559 48.8713 28.7559C48.0063 28.7559 47.3051 28.0545 47.3049 27.1895ZM47.3049 16.8513V14.7226C47.3049 13.8575 48.0062 13.1562 48.8713 13.1562C49.7364 13.1562 50.4377 13.8575 50.4377 14.7226V16.8513C50.4376 17.7163 49.7363 18.4177 48.8713 18.4177C48.0063 18.4177 47.3051 17.7163 47.3049 16.8513Z",
+						fill: "#C8C8C8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M63.6644 30.1688C63.9188 29.3419 64.7956 28.8778 65.6224 29.1322C68.1752 29.9177 75.1526 31.0546 81.9128 29.1231C82.7446 28.8856 83.6118 29.3676 83.8494 30.1994C84.0869 31.0311 83.6049 31.8983 82.7731 32.1359C75.2793 34.2769 67.6632 33.0382 64.7009 32.1267C63.8741 31.8723 63.41 30.9956 63.6644 30.1688Z",
+						fill: "#C8C8C8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M94.2091 30.1688C94.4635 29.3419 95.3402 28.8778 96.1671 29.1322C98.7198 29.9177 105.697 31.0546 112.458 29.1231C113.289 28.8856 114.156 29.3676 114.394 30.1994C114.632 31.0311 114.15 31.8983 113.318 32.1359C105.824 34.2769 98.2078 33.0382 95.2456 32.1267C94.4188 31.8723 93.9547 30.9956 94.2091 30.1688Z",
+						fill: "#C8C8C8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M98.9176 52.8999C98.9176 52.0483 98.7013 51.3673 98.4508 50.9603C98.37 50.8291 98.3018 50.7487 98.2519 50.6996C98.2021 50.7487 98.1338 50.8291 98.0531 50.9603C97.8026 51.3673 97.5862 52.0483 97.5862 52.8999C97.5862 53.7515 97.8026 54.4325 98.0531 54.8396C98.1337 54.9705 98.2021 55.0505 98.2519 55.0996C98.3018 55.0505 98.3702 54.9705 98.4508 54.8396C98.7013 54.4325 98.9176 53.7515 98.9176 52.8999ZM100.797 52.8999C100.797 55.1843 99.6577 57.0362 98.2519 57.0362C96.8462 57.0362 95.7065 55.1843 95.7065 52.8999C95.7065 50.6155 96.8462 48.7637 98.2519 48.7637C99.6577 48.7637 100.797 50.6155 100.797 52.8999Z",
+						fill: "#C8C8C8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M118.636 50.2557L118.807 49.3678L122.064 46.6211L122.072 46.5827L119.534 46.0927L119.763 44.9043L124.094 45.7405L123.907 46.7087L120.827 49.4061L120.819 49.4445L123.378 49.9385L123.149 51.127L118.636 50.2557Z",
+						fill: "#C8C8C8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M131.588 40.8727L131.845 39.772L136.046 36.4992L136.057 36.4515L132.911 35.7164L133.256 34.2431L138.625 35.4977L138.344 36.698L134.365 39.9177L134.354 39.9654L137.526 40.7066L137.182 42.1799L131.588 40.8727Z",
+						fill: "#C8C8C8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M136.063 29.0709L135.74 27.4065L139.484 20.3498L139.47 20.2777L134.713 21.2007L134.28 18.9728L142.399 17.3976L142.752 19.2127L139.28 26.0602L139.294 26.1323L144.09 25.2016L144.523 27.4295L136.063 29.0709Z",
+						fill: "#C8C8C8"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: classNames$2.title,
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("div", {
+				className: classNames$2.description,
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: classNames$2.action,
+				children: action
+			})
+		]
+	});
+};
+
 //#endregion
 //#region src/FileField/FileFieldItem.tsx
 const FileFieldItem = ({ children, onRemove }) => {
+	const classNames$2 = useClassNames({ component: "FileField" });
+	const stringFormatter = useLocalizedStringFormatter(intlMessages, "marigold");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "bg-background border-input flex items-center justify-between gap-2 rounded-lg border p-2 pe-3",
-		children: [children, /* @__PURE__ */ jsx(CloseButton, {
-			"aria-label": "Remove file",
-			onPress: onRemove
+		className: cn("grid", classNames$2.item),
+		children: [children, /* @__PURE__ */ jsx("div", {
+			className: cn("[grid-area:remove]", classNames$2.itemRemove),
+			children: /* @__PURE__ */ jsx(CloseButton, {
+				"aria-label": stringFormatter.format("removeFile"),
+				onPress: onRemove
+			})
 		})]
 	});
 };
 
 //#endregion
 //#region src/icons/Upload.tsx
-const Upload = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const Upload = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -2311,7 +2448,7 @@ const Upload = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ js
 
 //#endregion
 //#region src/FileField/FileTrigger.tsx
-const _FileTrigger = ({ label, disabled,...rest }) => {
+const _FileTrigger = ({ label, disabled, ...rest }) => {
 	return /* @__PURE__ */ jsx(FileTrigger, {
 		...rest,
 		children: /* @__PURE__ */ jsxs(_Button, {
@@ -2355,24 +2492,35 @@ const normalizeAndLimitFiles = (files, { accept, multiple }) => {
 
 //#endregion
 //#region src/FileField/FileField.tsx
-const FileField = ({ disabled = false, accept = ["*"], multiple = false, width: width$1, label,...props }) => {
+const FileField = ({ disabled = false, accept = ["*"], multiple = false, width: width$1, label, name, ...props }) => {
 	const [files, setFiles] = useState(null);
+	const hiddenInputRef = useRef(null);
 	const stringFormatter = useLocalizedStringFormatter(intlMessages);
 	const dropZoneLabel = stringFormatter.format("dropZoneLabel");
 	const buttonLabel = stringFormatter.format("uploadLabel");
+	const syncHiddenInput = (newFiles) => {
+		if (!hiddenInputRef.current || !name || typeof DataTransfer === "undefined") return;
+		const dt = new DataTransfer();
+		newFiles?.forEach((f$1) => dt.items.add(f$1));
+		hiddenInputRef.current.files = dt.files;
+	};
 	const handleSelect = (files$1) => {
-		setFiles(normalizeAndLimitFiles(files$1 ? Array.from(files$1) : [], {
+		const normalized = normalizeAndLimitFiles(files$1 ? Array.from(files$1) : [], {
 			accept,
 			multiple
-		}));
+		});
+		setFiles(normalized);
+		syncHiddenInput(normalized);
 	};
 	const handleDrop = async (e$1) => {
 		try {
 			const filePromises = e$1.items.filter(isFileDropItem).map((item) => item.getFile());
-			setFiles(normalizeAndLimitFiles((await Promise.all(filePromises)).filter(Boolean), {
+			const normalized = normalizeAndLimitFiles((await Promise.all(filePromises)).filter(Boolean), {
 				accept,
 				multiple
-			}));
+			});
+			setFiles(normalized);
+			syncHiddenInput(normalized);
 		} catch {}
 	};
 	const fileTriggerProps = {
@@ -2387,46 +2535,58 @@ const FileField = ({ disabled = false, accept = ["*"], multiple = false, width:
 		label,
 		className: classNames$2.container,
 		...props,
-		children: [/* @__PURE__ */ jsx(DropZone, {
-			onDrop: handleDrop,
-			isDisabled: disabled,
-			className: classNames$2.dropZone,
-			"data-testid": "dropzone",
-			...props,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames$2.dropZoneContent,
-				children: [/* @__PURE__ */ jsx("p", {
-					className: classNames$2.dropZoneLabel,
-					children: dropZoneLabel
-				}), /* @__PURE__ */ jsx(_FileTrigger, {
-					...fileTriggerProps,
-					label: buttonLabel,
-					disabled
-				})]
-			})
-		}), files?.map((file, index$1) => /* @__PURE__ */ jsx(FileField.Item, {
-			onRemove: () => setFiles((prev$1) => (prev$1 ?? []).filter((_, i$1) => i$1 !== index$1)),
-			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames$2.item,
-				children: [/* @__PURE__ */ jsx("p", {
-					className: classNames$2.itemLabel,
+		children: [
+			/* @__PURE__ */ jsx(DropZone, {
+				onDrop: handleDrop,
+				isDisabled: disabled,
+				className: classNames$2.dropZone,
+				"data-testid": "dropzone",
+				...props,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: classNames$2.dropZoneContent,
+					children: [/* @__PURE__ */ jsx("p", {
+						className: classNames$2.dropZoneLabel,
+						children: dropZoneLabel
+					}), /* @__PURE__ */ jsx(_FileTrigger, {
+						...fileTriggerProps,
+						label: buttonLabel,
+						disabled
+					})]
+				})
+			}),
+			files?.map((file, index$1) => /* @__PURE__ */ jsxs(FileField.Item, {
+				onRemove: () => {
+					const updated = (files ?? []).filter((_, i$1) => i$1 !== index$1);
+					setFiles(updated);
+					syncHiddenInput(updated);
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("[grid-area:label]", classNames$2.itemLabel),
 					children: file.name
-				}), /* @__PURE__ */ jsxs("p", {
-					className: classNames$2.itemDescription,
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn("[grid-area:description]", classNames$2.itemDescription),
 					children: [(file.size / 1024 / 1024).toFixed(2), " MB"]
 				})]
+			}, index$1)),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "file",
+				ref: hiddenInputRef,
+				name,
+				hidden: true,
+				multiple
 			})
-		}, index$1))]
+		]
 	});
 };
 FileField.Item = FileFieldItem;
 
 //#endregion
 //#region src/Form/Form.tsx
-const _Form = ({ unstyled, maxWidth: maxWidth$1 = "full",...props }) => /* @__PURE__ */ jsx(Form, {
+const _Form = forwardRef(({ unstyled, maxWidth: maxWidth$1 = "full", ...props }, ref) => /* @__PURE__ */ jsx(Form, {
 	...props,
+	ref,
 	className: cn(maxWidth[maxWidth$1], unstyled && "contents")
-});
+}));
 
 //#endregion
 //#region src/Grid/GridArea.tsx
@@ -2439,13 +2599,14 @@ const GridArea = ({ name, children }) => /* @__PURE__ */ jsx("div", {
 //#region src/Grid/Grid.tsx
 const parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 const parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
-const Grid = ({ children, areas, columns, rows, alignX, alignY, height: height$1 = "auto", space = 0,...props }) => {
+const Grid = ({ children, areas, columns, rows, alignX, alignY, height: height$1 = "auto", space = 0, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("grid", alignX && alignment?.horizontal?.alignmentX[alignX], alignY && alignment?.horizontal?.alignmentY[alignY], gapSpace[space], height[height$1]),
+		className: cn("grid gap-(--space)", alignX && alignment?.horizontal?.alignmentX[alignX], alignY && alignment?.horizontal?.alignmentY[alignY], height[height$1]),
 		style: {
 			gridTemplateAreas: parseGridAreas(areas),
 			gridTemplateColumns: parseTemplateValue(columns),
-			gridTemplateRows: parseTemplateValue(rows)
+			gridTemplateRows: parseTemplateValue(rows),
+			...createSpacingVar("space", `${space}`)
 		},
 		...props,
 		children
@@ -2455,7 +2616,7 @@ Grid.Area = GridArea;
 
 //#endregion
 //#region src/Headline/Headline.tsx
-const _Headline = ({ variant, size: size$1, children, align = "left", color, level = "1",...props }) => {
+const _Headline = ({ variant, size: size$1, children, align = "left", color, level = "1", lineHeight: lineHeight$1, ...props }) => {
 	const classNames$2 = useClassNames({
 		component: "Headline",
 		variant,
@@ -2464,7 +2625,7 @@ const _Headline = ({ variant, size: size$1, children, align = "left", color, lev
 	return /* @__PURE__ */ jsx(Heading, {
 		level: Number(level),
 		...props,
-		className: cn(classNames$2, "max-w-(--maxHeadlineWidth)", textAlign[align]),
+		className: cn(classNames$2, "max-w-(--maxHeadlineWidth)", textAlign[align], lineHeight$1 && lineHeight[lineHeight$1]),
 		style: { color: color && ensureCssVar(color, "color") },
 		children
 	});
@@ -2476,9 +2637,10 @@ const inlineAlignmentY = {
 	...alignment.horizontal.alignmentY,
 	input: "items-end [&:has([slot=description])]:items-end [&:has([slot=description])_>*:not(:has([slot=description]))]:mb-6 [&:has([slot=errorMessage])_>*:not(:has([slot=errorMessage]))]:mb-6"
 };
-const Inline = ({ space = 0, noWrap, alignX, alignY, children,...props }) => /* @__PURE__ */ jsx("div", {
+const Inline = ({ space = 0, noWrap, alignX, alignY, children, ...props }) => /* @__PURE__ */ jsx("div", {
 	...props,
-	className: cn("flex", !noWrap && "flex-wrap", gapSpace[space], alignX && alignment?.horizontal?.alignmentX[alignX], alignY && inlineAlignmentY[alignY]),
+	className: cn("flex gap-(--space)", !noWrap && "flex-wrap", alignX && alignment?.horizontal?.alignmentX[alignX], alignY && inlineAlignmentY[alignY]),
+	style: createSpacingVar("space", `${space}`),
 	children
 });
 
@@ -2491,7 +2653,7 @@ const Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx("div"
 
 //#endregion
 //#region src/Link/Link.tsx
-const _Link = forwardRef(({ variant, size: size$1, disabled, children,...props }, ref) => {
+const _Link = forwardRef(({ variant, size: size$1, disabled, children, ...props }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "Link",
 		variant,
@@ -2508,7 +2670,7 @@ const _Link = forwardRef(({ variant, size: size$1, disabled, children,...props }
 
 //#endregion
 //#region src/LinkButton/LinkButton.tsx
-const _LinkButton = forwardRef(({ children, variant, size: size$1, disabled, fullWidth,...props }, ref) => {
+const _LinkButton = forwardRef(({ children, variant, size: size$1, disabled, fullWidth, ...props }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "Button",
 		variant,
@@ -2530,7 +2692,7 @@ const useListContext = () => useContext(ListContext);
 
 //#endregion
 //#region src/List/ListItem.tsx
-const ListItem = ({ children,...props }) => {
+const ListItem = ({ children, ...props }) => {
 	const { classNames: classNames$2 } = useListContext();
 	return /* @__PURE__ */ jsx("li", {
 		...props,
@@ -2541,7 +2703,7 @@ const ListItem = ({ children,...props }) => {
 
 //#endregion
 //#region src/List/List.tsx
-const List = ({ as = "ul", children, variant, size: size$1,...props }) => {
+const List = ({ as = "ul", children, variant, size: size$1, ...props }) => {
 	const Component$1 = as;
 	const classNames$2 = useClassNames({
 		component: "List",
@@ -2561,7 +2723,7 @@ List.Item = ListItem;
 
 //#endregion
 //#region src/icons/EllipsisVertical.tsx
-const EllipsisVertical = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const EllipsisVertical = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -2594,7 +2756,7 @@ const EllipsisVertical = ({ size: size$1 = 24, className,...props }) => /* @__PU
 
 //#endregion
 //#region src/Menu/MenuItem.tsx
-const _MenuItem = ({ children, variant, size: size$1,...props }) => {
+const _MenuItem = ({ children, variant, size: size$1, ...props }) => {
 	const classNames$2 = useClassNames({
 		component: "Menu",
 		variant,
@@ -2609,7 +2771,7 @@ const _MenuItem = ({ children, variant, size: size$1,...props }) => {
 
 //#endregion
 //#region src/Menu/MenuSection.tsx
-const _MenuSection = ({ children, title,...props }) => {
+const _MenuSection = ({ children, title, ...props }) => {
 	const className = useClassNames({ component: "Menu" });
 	return /* @__PURE__ */ jsxs(MenuSection, {
 		...props,
@@ -2622,12 +2784,14 @@ const _MenuSection = ({ children, title,...props }) => {
 
 //#endregion
 //#region src/Menu/Menu.tsx
-const _Menu = ({ children, label, variant, size: size$1, disabled, open, placement, "aria-label": ariaLabel,...props }) => {
+const _Menu = ({ children, label, variant, size: size$1, disabled, open, placement, "aria-label": ariaLabel, ...props }) => {
 	const classNames$2 = useClassNames({
 		component: "Menu",
 		variant,
 		size: size$1
 	});
+	const isSmallScreen = useSmallScreen();
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
 	return /* @__PURE__ */ jsxs(MenuTrigger, {
 		...props,
 		children: [/* @__PURE__ */ jsx(Button, {
@@ -2635,7 +2799,18 @@ const _Menu = ({ children, label, variant, size: size$1, disabled, open, placeme
 			"aria-label": ariaLabel,
 			isDisabled: disabled,
 			children: label
-		}), /* @__PURE__ */ jsx(_Popover, {
+		}), isSmallScreen ? /* @__PURE__ */ jsxs(Tray, { children: [
+			/* @__PURE__ */ jsx(Tray.Title, { children: label }),
+			/* @__PURE__ */ jsx(Tray.Content, { children: /* @__PURE__ */ jsx(Menu, {
+				...props,
+				className: classNames$2.container,
+				children
+			}) }),
+			/* @__PURE__ */ jsx(Tray.Actions, { children: /* @__PURE__ */ jsx(_Button, {
+				slot: "close",
+				children: stringFormatter.format("close")
+			}) })
+		] }) : /* @__PURE__ */ jsx(_Popover, {
 			open,
 			placement,
 			children: /* @__PURE__ */ jsx(Menu, {
@@ -2651,7 +2826,7 @@ _Menu.Section = _MenuSection;
 
 //#endregion
 //#region src/Menu/ActionMenu.tsx
-const ActionMenu = ({ children,...props }) => /* @__PURE__ */ jsx(_Menu, {
+const ActionMenu = ({ children, ...props }) => /* @__PURE__ */ jsx(_Menu, {
 	...props,
 	label: /* @__PURE__ */ jsx(EllipsisVertical, {}),
 	children
@@ -2810,7 +2985,7 @@ function _objectWithoutProperties$1(e$1, t$1) {
 }
 
 //#endregion
-//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.2_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
+//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
 var _excluded$6 = [
 	"defaultInputValue",
 	"defaultMenuIsOpen",
@@ -3848,7 +4023,15 @@ var createCache = function createCache$1(options$1) {
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js
-var require_react_is_production_min = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js": ((exports) => {
+/** @license React v16.13.1
+* react-is.production.min.js
+*
+* Copyright (c) Facebook, Inc. and its affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_is_production_min = /* @__PURE__ */ __commonJSMin(((exports) => {
 	var b = "function" === typeof Symbol && Symbol.for, c = b ? Symbol.for("react.element") : 60103, d = b ? Symbol.for("react.portal") : 60106, e = b ? Symbol.for("react.fragment") : 60107, f = b ? Symbol.for("react.strict_mode") : 60108, g = b ? Symbol.for("react.profiler") : 60114, h = b ? Symbol.for("react.provider") : 60109, k = b ? Symbol.for("react.context") : 60110, l = b ? Symbol.for("react.async_mode") : 60111, m = b ? Symbol.for("react.concurrent_mode") : 60111, n = b ? Symbol.for("react.forward_ref") : 60112, p = b ? Symbol.for("react.suspense") : 60113, q = b ? Symbol.for("react.suspense_list") : 60120, r = b ? Symbol.for("react.memo") : 60115, t = b ? Symbol.for("react.lazy") : 60116, v = b ? Symbol.for("react.block") : 60121, w$1 = b ? Symbol.for("react.fundamental") : 60117, x = b ? Symbol.for("react.responder") : 60118, y = b ? Symbol.for("react.scope") : 60119;
 	function z(a) {
 		if ("object" === typeof a && null !== a) {
@@ -3931,12 +4114,21 @@ var require_react_is_production_min = /* @__PURE__ */ __commonJS({ "../../node_m
 		return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w$1 || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
 	};
 	exports.typeOf = z;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.development.js
-var require_react_is_development = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.development.js": ((exports) => {
+/** @license React v16.13.1
+* react-is.development.js
+*
+* Copyright (c) Facebook, Inc. and its affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_is_development = /* @__PURE__ */ __commonJSMin(((exports) => {
 	if (process.env.NODE_ENV !== "production") (function() {
+		"use strict";
 		var hasSymbol = typeof Symbol === "function" && Symbol.for;
 		var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103;
 		var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106;
@@ -4073,18 +4265,18 @@ var require_react_is_development = /* @__PURE__ */ __commonJS({ "../../node_modu
 		exports.isValidElementType = isValidElementType;
 		exports.typeOf = typeOf;
 	})();
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/index.js
-var require_react_is = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/index.js": ((exports, module) => {
+var require_react_is = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	if (process.env.NODE_ENV === "production") module.exports = require_react_is_production_min();
 	else module.exports = require_react_is_development();
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/hoist-non-react-statics@3.3.2/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
-var require_hoist_non_react_statics_cjs = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/hoist-non-react-statics@3.3.2/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js": ((exports, module) => {
+var require_hoist_non_react_statics_cjs = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var reactIs = require_react_is();
 	/**
 	* Copyright 2015, Yahoo! Inc.
@@ -4163,7 +4355,7 @@ var require_hoist_non_react_statics_cjs = /* @__PURE__ */ __commonJS({ "../../no
 		return targetComponent;
 	}
 	module.exports = hoistNonReactStatics;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@emotion+utils@1.4.2/node_modules/@emotion/utils/dist/emotion-utils.esm.js
@@ -4399,7 +4591,7 @@ function serializeStyles(args, registered, mergedProps) {
 }
 
 //#endregion
-//#region ../../node_modules/.pnpm/@emotion+use-insertion-effect-with-fallbacks@1.2.0_react@19.2.0/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
+//#region ../../node_modules/.pnpm/@emotion+use-insertion-effect-with-fallbacks@1.2.0_react@19.2.3/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
 var isBrowser$1 = typeof document !== "undefined";
 var syncFallback = function syncFallback$1(create) {
 	return create();
@@ -4409,7 +4601,7 @@ var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$1 ? syncFallback : use
 var useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;
 
 //#endregion
-//#region ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.2.2_react@19.2.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
+//#region ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.2.9_react@19.2.3/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var isDevelopment = false;
 var isBrowser = typeof document !== "undefined";
 var EmotionCacheContext = /* @__PURE__ */ React.createContext(typeof HTMLElement !== "undefined" ? /* @__PURE__ */ createCache({ key: "css" }) : null);
@@ -4478,7 +4670,7 @@ var Emotion$1 = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/extends.js
-var require_extends = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/extends.js": ((exports, module) => {
+var require_extends = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _extends$1() {
 		return module.exports = _extends$1 = Object.assign ? Object.assign.bind() : function(n$1) {
 			for (var e$1 = 1; e$1 < arguments.length; e$1++) {
@@ -4489,12 +4681,12 @@ var require_extends = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@ba
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends$1.apply(null, arguments);
 	}
 	module.exports = _extends$1, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
-//#region ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.2.2_react@19.2.0/node_modules/@emotion/react/dist/emotion-react.esm.js
-var import_extends = /* @__PURE__ */ __toESM(require_extends());
-var import_hoist_non_react_statics_cjs = /* @__PURE__ */ __toESM(require_hoist_non_react_statics_cjs());
+//#region ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.2.9_react@19.2.3/node_modules/@emotion/react/dist/emotion-react.esm.js
+var import_extends = require_extends();
+var import_hoist_non_react_statics_cjs = require_hoist_non_react_statics_cjs();
 var jsx$1 = function jsx$2(type, props) {
 	var args = arguments;
 	if (props == null || !hasOwn.call(props, "css")) return React.createElement.apply(void 0, args);
@@ -4845,11 +5037,11 @@ function autoUpdate(reference, floating, update, options$1) {
 }
 
 //#endregion
-//#region ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.1_@types+react@19.2.2_react@19.2.0/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
+//#region ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.1_@types+react@19.2.9_react@19.2.3/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 var index = typeof document !== "undefined" ? useLayoutEffect : function noop$1() {};
 
 //#endregion
-//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.2_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-select/dist/index-641ee5b8.esm.js
+//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/react-select/dist/index-641ee5b8.esm.js
 var _excluded$4 = [
 	"className",
 	"clearValue",
@@ -5791,7 +5983,7 @@ var defaultComponents = function defaultComponents$1(props) {
 
 //#endregion
 //#region ../../node_modules/.pnpm/memoize-one@6.0.0/node_modules/memoize-one/dist/memoize-one.cjs.js
-var require_memoize_one_cjs = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/memoize-one@6.0.0/node_modules/memoize-one/dist/memoize-one.cjs.js": ((exports, module) => {
+var require_memoize_one_cjs = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var safeIsNaN = Number.isNaN || function ponyfill(value) {
 		return typeof value === "number" && value !== value;
 	};
@@ -5826,10 +6018,10 @@ var require_memoize_one_cjs = /* @__PURE__ */ __commonJS({ "../../node_modules/.
 		return memoized;
 	}
 	module.exports = memoizeOne$1;
-}) });
+}));
 
 //#endregion
-//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.2_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-select/dist/Select-ef7c0426.esm.js
+//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/react-select/dist/Select-ef7c0426.esm.js
 var import_memoize_one_cjs = /* @__PURE__ */ __toESM(require_memoize_one_cjs());
 function _EMOTION_STRINGIFIED_CSS_ERROR__$2() {
 	return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
@@ -8012,7 +8204,7 @@ Select$2.defaultProps = defaultProps;
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/typeof.js
-var require_typeof = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/typeof.js": ((exports, module) => {
+var require_typeof = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _typeof$3(o) {
 		"@babel/helpers - typeof";
 		return module.exports = _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o$1) {
@@ -8022,11 +8214,11 @@ var require_typeof = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@bab
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _typeof$3(o);
 	}
 	module.exports = _typeof$3, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPrimitive.js
-var require_toPrimitive = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPrimitive.js": ((exports, module) => {
+var require_toPrimitive = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var _typeof$2 = require_typeof()["default"];
 	function toPrimitive$1(t$1, r$1) {
 		if ("object" != _typeof$2(t$1) || !t$1) return t$1;
@@ -8039,11 +8231,11 @@ var require_toPrimitive = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm
 		return ("string" === r$1 ? String : Number)(t$1);
 	}
 	module.exports = toPrimitive$1, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPropertyKey.js
-var require_toPropertyKey = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPropertyKey.js": ((exports, module) => {
+var require_toPropertyKey = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var _typeof$1 = require_typeof()["default"];
 	var toPrimitive = require_toPrimitive();
 	function toPropertyKey$2(t$1) {
@@ -8051,11 +8243,11 @@ var require_toPropertyKey = /* @__PURE__ */ __commonJS({ "../../node_modules/.pn
 		return "symbol" == _typeof$1(i$1) ? i$1 : i$1 + "";
 	}
 	module.exports = toPropertyKey$2, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/defineProperty.js
-var require_defineProperty = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/defineProperty.js": ((exports, module) => {
+var require_defineProperty = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var toPropertyKey$1 = require_toPropertyKey();
 	function _defineProperty(e$1, r$1, t$1) {
 		return (r$1 = toPropertyKey$1(r$1)) in e$1 ? Object.defineProperty(e$1, r$1, {
@@ -8066,11 +8258,11 @@ var require_defineProperty = /* @__PURE__ */ __commonJS({ "../../node_modules/.p
 		}) : e$1[r$1] = t$1, e$1;
 	}
 	module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectSpread2.js
-var require_objectSpread2 = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectSpread2.js": ((exports, module) => {
+var require_objectSpread2 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var defineProperty = require_defineProperty();
 	function ownKeys(e$1, r$1) {
 		var t$1 = Object.keys(e$1);
@@ -8094,20 +8286,20 @@ var require_objectSpread2 = /* @__PURE__ */ __commonJS({ "../../node_modules/.pn
 		return e$1;
 	}
 	module.exports = _objectSpread2, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithHoles.js
-var require_arrayWithHoles = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithHoles.js": ((exports, module) => {
+var require_arrayWithHoles = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _arrayWithHoles(r$1) {
 		if (Array.isArray(r$1)) return r$1;
 	}
 	module.exports = _arrayWithHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js
-var require_iterableToArrayLimit = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js": ((exports, module) => {
+var require_iterableToArrayLimit = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _iterableToArrayLimit(r$1, l$1) {
 		var t$1 = null == r$1 ? null : "undefined" != typeof Symbol && r$1[Symbol.iterator] || r$1["@@iterator"];
 		if (null != t$1) {
@@ -8130,22 +8322,22 @@ var require_iterableToArrayLimit = /* @__PURE__ */ __commonJS({ "../../node_modu
 		}
 	}
 	module.exports = _iterableToArrayLimit, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayLikeToArray.js
-var require_arrayLikeToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayLikeToArray.js": ((exports, module) => {
+var require_arrayLikeToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _arrayLikeToArray(r$1, a) {
 		(null == a || a > r$1.length) && (a = r$1.length);
 		for (var e$1 = 0, n$1 = Array(a); e$1 < a; e$1++) n$1[e$1] = r$1[e$1];
 		return n$1;
 	}
 	module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js
-var require_unsupportedIterableToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js": ((exports, module) => {
+var require_unsupportedIterableToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayLikeToArray$1 = require_arrayLikeToArray();
 	function _unsupportedIterableToArray(r$1, a) {
 		if (r$1) {
@@ -8155,20 +8347,20 @@ var require_unsupportedIterableToArray = /* @__PURE__ */ __commonJS({ "../../nod
 		}
 	}
 	module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableRest.js
-var require_nonIterableRest = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableRest.js": ((exports, module) => {
+var require_nonIterableRest = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _nonIterableRest() {
 		throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 	}
 	module.exports = _nonIterableRest, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/slicedToArray.js
-var require_slicedToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/slicedToArray.js": ((exports, module) => {
+var require_slicedToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayWithHoles = require_arrayWithHoles();
 	var iterableToArrayLimit = require_iterableToArrayLimit();
 	var unsupportedIterableToArray$1 = require_unsupportedIterableToArray();
@@ -8177,11 +8369,11 @@ var require_slicedToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pn
 		return arrayWithHoles(r$1) || iterableToArrayLimit(r$1, e$1) || unsupportedIterableToArray$1(r$1, e$1) || nonIterableRest();
 	}
 	module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var require_objectWithoutPropertiesLoose = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js": ((exports, module) => {
+var require_objectWithoutPropertiesLoose = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _objectWithoutPropertiesLoose(r$1, e$1) {
 		if (null == r$1) return {};
 		var t$1 = {};
@@ -8192,11 +8384,11 @@ var require_objectWithoutPropertiesLoose = /* @__PURE__ */ __commonJS({ "../../n
 		return t$1;
 	}
 	module.exports = _objectWithoutPropertiesLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var require_objectWithoutProperties = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js": ((exports, module) => {
+var require_objectWithoutProperties = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose();
 	function _objectWithoutProperties(e$1, t$1) {
 		if (null == e$1) return {};
@@ -8208,20 +8400,20 @@ var require_objectWithoutProperties = /* @__PURE__ */ __commonJS({ "../../node_m
 		return i$1;
 	}
 	module.exports = _objectWithoutProperties, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/classCallCheck.js
-var require_classCallCheck = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/classCallCheck.js": ((exports, module) => {
+var require_classCallCheck = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _classCallCheck(a, n$1) {
 		if (!(a instanceof n$1)) throw new TypeError("Cannot call a class as a function");
 	}
 	module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createClass.js
-var require_createClass = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createClass.js": ((exports, module) => {
+var require_createClass = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var toPropertyKey = require_toPropertyKey();
 	function _defineProperties(e$1, r$1) {
 		for (var t$1 = 0; t$1 < r$1.length; t$1++) {
@@ -8233,22 +8425,22 @@ var require_createClass = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm
 		return r$1 && _defineProperties(e$1.prototype, r$1), t$1 && _defineProperties(e$1, t$1), Object.defineProperty(e$1, "prototype", { writable: !1 }), e$1;
 	}
 	module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/setPrototypeOf.js
-var require_setPrototypeOf = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/setPrototypeOf.js": ((exports, module) => {
+var require_setPrototypeOf = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _setPrototypeOf(t$1, e$1) {
 		return module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t$2, e$2) {
 			return t$2.__proto__ = e$2, t$2;
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _setPrototypeOf(t$1, e$1);
 	}
 	module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/inherits.js
-var require_inherits = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/inherits.js": ((exports, module) => {
+var require_inherits = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var setPrototypeOf = require_setPrototypeOf();
 	function _inherits(t$1, e$1) {
 		if ("function" != typeof e$1 && null !== e$1) throw new TypeError("Super expression must either be null or a function");
@@ -8259,22 +8451,22 @@ var require_inherits = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@b
 		} }), Object.defineProperty(t$1, "prototype", { writable: !1 }), e$1 && setPrototypeOf(t$1, e$1);
 	}
 	module.exports = _inherits, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/getPrototypeOf.js
-var require_getPrototypeOf = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/getPrototypeOf.js": ((exports, module) => {
+var require_getPrototypeOf = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _getPrototypeOf(t$1) {
 		return module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t$2) {
 			return t$2.__proto__ || Object.getPrototypeOf(t$2);
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _getPrototypeOf(t$1);
 	}
 	module.exports = _getPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/isNativeReflectConstruct.js
-var require_isNativeReflectConstruct = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/isNativeReflectConstruct.js": ((exports, module) => {
+var require_isNativeReflectConstruct = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _isNativeReflectConstruct() {
 		try {
 			var t$1 = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
@@ -8284,21 +8476,21 @@ var require_isNativeReflectConstruct = /* @__PURE__ */ __commonJS({ "../../node_
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports)();
 	}
 	module.exports = _isNativeReflectConstruct, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/assertThisInitialized.js
-var require_assertThisInitialized = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/assertThisInitialized.js": ((exports, module) => {
+var require_assertThisInitialized = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _assertThisInitialized(e$1) {
 		if (void 0 === e$1) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
 		return e$1;
 	}
 	module.exports = _assertThisInitialized, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js
-var require_possibleConstructorReturn = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js": ((exports, module) => {
+var require_possibleConstructorReturn = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var _typeof = require_typeof()["default"];
 	var assertThisInitialized = require_assertThisInitialized();
 	function _possibleConstructorReturn(t$1, e$1) {
@@ -8307,11 +8499,11 @@ var require_possibleConstructorReturn = /* @__PURE__ */ __commonJS({ "../../node
 		return assertThisInitialized(t$1);
 	}
 	module.exports = _possibleConstructorReturn, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createSuper.js
-var require_createSuper = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createSuper.js": ((exports, module) => {
+var require_createSuper = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var getPrototypeOf = require_getPrototypeOf();
 	var isNativeReflectConstruct = require_isNativeReflectConstruct();
 	var possibleConstructorReturn = require_possibleConstructorReturn();
@@ -8327,39 +8519,39 @@ var require_createSuper = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm
 		};
 	}
 	module.exports = _createSuper, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js
-var require_arrayWithoutHoles = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js": ((exports, module) => {
+var require_arrayWithoutHoles = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayLikeToArray = require_arrayLikeToArray();
 	function _arrayWithoutHoles(r$1) {
 		if (Array.isArray(r$1)) return arrayLikeToArray(r$1);
 	}
 	module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArray.js
-var require_iterableToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArray.js": ((exports, module) => {
+var require_iterableToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _iterableToArray(r$1) {
 		if ("undefined" != typeof Symbol && null != r$1[Symbol.iterator] || null != r$1["@@iterator"]) return Array.from(r$1);
 	}
 	module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableSpread.js
-var require_nonIterableSpread = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableSpread.js": ((exports, module) => {
+var require_nonIterableSpread = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _nonIterableSpread() {
 		throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 	}
 	module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toConsumableArray.js
-var require_toConsumableArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toConsumableArray.js": ((exports, module) => {
+var require_toConsumableArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayWithoutHoles = require_arrayWithoutHoles();
 	var iterableToArray = require_iterableToArray();
 	var unsupportedIterableToArray = require_unsupportedIterableToArray();
@@ -8368,30 +8560,30 @@ var require_toConsumableArray = /* @__PURE__ */ __commonJS({ "../../node_modules
 		return arrayWithoutHoles(r$1) || iterableToArray(r$1) || unsupportedIterableToArray(r$1) || nonIterableSpread();
 	}
 	module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js
-var require_taggedTemplateLiteral = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js": ((exports, module) => {
+var require_taggedTemplateLiteral = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _taggedTemplateLiteral(e$1, t$1) {
 		return t$1 || (t$1 = e$1.slice(0)), Object.freeze(Object.defineProperties(e$1, { raw: { value: Object.freeze(t$1) } }));
 	}
 	module.exports = _taggedTemplateLiteral, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
-
-//#endregion
-//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.2_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-select/dist/react-select.esm.js
-var import_objectSpread2 = /* @__PURE__ */ __toESM(require_objectSpread2());
-var import_slicedToArray = /* @__PURE__ */ __toESM(require_slicedToArray());
-var import_objectWithoutProperties = /* @__PURE__ */ __toESM(require_objectWithoutProperties());
-var import_classCallCheck = /* @__PURE__ */ __toESM(require_classCallCheck());
-var import_createClass = /* @__PURE__ */ __toESM(require_createClass());
-var import_inherits = /* @__PURE__ */ __toESM(require_inherits());
-var import_createSuper = /* @__PURE__ */ __toESM(require_createSuper());
-var import_toConsumableArray = /* @__PURE__ */ __toESM(require_toConsumableArray());
-var import_typeof = /* @__PURE__ */ __toESM(require_typeof());
-var import_taggedTemplateLiteral = /* @__PURE__ */ __toESM(require_taggedTemplateLiteral());
-var import_defineProperty = /* @__PURE__ */ __toESM(require_defineProperty());
+}));
+
+//#endregion
+//#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/react-select/dist/react-select.esm.js
+var import_objectSpread2 = require_objectSpread2();
+var import_slicedToArray = require_slicedToArray();
+var import_objectWithoutProperties = require_objectWithoutProperties();
+var import_classCallCheck = require_classCallCheck();
+var import_createClass = require_createClass();
+var import_inherits = require_inherits();
+var import_createSuper = require_createSuper();
+var import_toConsumableArray = require_toConsumableArray();
+var import_typeof = require_typeof();
+var import_taggedTemplateLiteral = require_taggedTemplateLiteral();
+var import_defineProperty = require_defineProperty();
 var StateManagedSelect$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
 	var baseSelectProps = useStateManager(props);
 	return /* @__PURE__ */ React.createElement(Select$2, _extends({ ref }, baseSelectProps));
@@ -8414,7 +8606,7 @@ const propsToBeRemoved = [
 	"isHidden",
 	"cx"
 ];
-const Input$1 = ({ innerRef, placeholder, hasValue,...props }) => {
+const Input$1 = ({ innerRef, placeholder, hasValue, ...props }) => {
 	const inputProps = Object.entries(props).reduce((acc, [key, value]) => {
 		if (!propsToBeRemoved.includes(key)) acc[key] = value;
 		return acc;
@@ -8445,7 +8637,10 @@ const getClassNames = (classNames$2) => ({
 	placeholder: () => "hidden",
 	valueContainer: () => classNames$2.valueContainer
 });
-const Multiselect = ({ disabled, readOnly = false, items, selectedItems, defaultSelectedItems, defaultValue, error, errorMessage, size: size$1, variant, placeholder, description, emptyState, onChange, onSelectionChange, width: width$1,...rest }) => {
+/**
+* @deprecated Use `TagField` instead. Will be removed in a future major version.
+*/
+const Multiselect = ({ disabled, readOnly = false, items, selectedItems, defaultSelectedItems, defaultValue, error, errorMessage, size: size$1, variant, placeholder, description, emptyState, onChange, onSelectionChange, width: width$1, ...rest }) => {
 	const classNames$2 = useClassNames({
 		component: "MultiSelect",
 		size: size$1,
@@ -8501,7 +8696,7 @@ const Multiselect = ({ disabled, readOnly = false, items, selectedItems, default
 							position: "absolute",
 							top: "100%",
 							width: "100%",
-							zIndex: 1
+							zIndex: 20
 						}),
 						valueContainer: (base) => ({ ...base }),
 						container: (base) => ({
@@ -8545,7 +8740,7 @@ const Multiselect = ({ disabled, readOnly = false, items, selectedItems, default
 
 //#endregion
 //#region src/icons/Plus.tsx
-const Plus = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const Plus = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -8562,18 +8757,18 @@ const Plus = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs
 
 //#endregion
 //#region src/NumberField/StepButton.tsx
-const _StepButton = ({ direction, className,...props }) => {
-	const Icon$2 = direction === "up" ? Plus : Minus;
+const _StepButton = ({ direction, className, ...props }) => {
+	const Icon$1 = direction === "up" ? Plus : Minus;
 	return /* @__PURE__ */ jsx(Button, {
 		className: cn(["flex items-center justify-center", "cursor-pointer data-disabled:cursor-not-allowed"], className),
 		...props,
-		children: /* @__PURE__ */ jsx(Icon$2, { size: 16 })
+		children: /* @__PURE__ */ jsx(Icon$1, { size: 16 })
 	});
 };
 
 //#endregion
 //#region src/NumberField/NumberField.tsx
-const _NumberField = forwardRef(({ variant, size: size$1, disabled, required, readOnly, error, hideStepper,...rest }, ref) => {
+const _NumberField = forwardRef(({ variant, size: size$1, disabled, required, readOnly, error, hideStepper, ...rest }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "NumberField",
 		size: size$1,
@@ -8593,7 +8788,7 @@ const _NumberField = forwardRef(({ variant, size: size$1, disabled, required, re
 		"data-readonly": readOnly ? "true" : void 0,
 		"data-stepper": showStepper ? "true" : void 0,
 		children: /* @__PURE__ */ jsxs(Group, {
-			className: cn("flex items-stretch", classNames$2.group),
+			className: cn("flex w-(--field-width) max-w-full min-w-0 items-stretch", classNames$2.group),
 			children: [
 				showStepper && /* @__PURE__ */ jsx(_StepButton, {
 					className: classNames$2.stepper,
@@ -8632,7 +8827,7 @@ const NavigationButton = (props) => {
 	const ref = useRef(null);
 	const { navigationButton } = useClassNames({ component: "Pagination" });
 	let { buttonProps } = useButton(props, ref);
-	let { children, isSelected, isDisabled, registerRef, controlLabel, position: position$1,...rest } = props;
+	let { children, isSelected, isDisabled, controlLabel, position: position$1, ...rest } = props;
 	return /* @__PURE__ */ jsxs("button", {
 		ref,
 		...buttonProps,
@@ -8698,17 +8893,17 @@ const InnerPagination = ({ currentPage, pageSize, totalPages, pageRange, setCurr
 	const isFirstPage = currentPage === 1;
 	const isLastPage = currentPage === totalPages || totalPages === 0;
 	const isFirstRender = useRef(true);
+	const handlePageChange = useCallback((newPage) => {
+		setCurrentPage(newPage);
+		if (onChange) onChange(newPage);
+	}, [setCurrentPage, onChange]);
 	useEffect(() => {
 		if (isFirstRender.current) {
 			isFirstRender.current = false;
 			return;
 		}
 		handlePageChange(1);
-	}, [pageSize]);
-	const handlePageChange = (newPage) => {
-		setCurrentPage(newPage);
-		if (onChange) onChange(newPage);
-	};
+	}, [pageSize, handlePageChange]);
 	const { icon, container } = useClassNames({ component: "Pagination" });
 	const handleKeyDown = (onEnter) => (e$1) => {
 		if (e$1.key === "ArrowRight") {
@@ -8755,7 +8950,7 @@ const InnerPagination = ({ currentPage, pageSize, totalPages, pageRange, setCurr
 		})
 	] });
 };
-const _Pagination = ({ defaultPage = 1, page, totalItems, pageSize,...props }) => {
+const _Pagination = ({ defaultPage = 1, page, totalItems, pageSize, ...props }) => {
 	const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
 	const totalPages = Math.ceil(totalItems / pageSize);
 	const pageRange = usePageRange({
@@ -8821,7 +9016,7 @@ const CollapsibleGroup = ({ children }) => {
 		children
 	});
 };
-const _RadioGroup = ({ variant, size: size$1, label, error, disabled, required, readOnly, description, errorMessage, orientation = "vertical", children, width: width$1, collapseAt,...rest }) => {
+const _RadioGroup = ({ variant, size: size$1, label, error, disabled, required, readOnly, description, errorMessage, orientation = "vertical", children, width: width$1, collapseAt, ...rest }) => {
 	const classNames$2 = useClassNames({
 		component: "Radio",
 		variant,
@@ -8863,13 +9058,13 @@ const _RadioGroup = ({ variant, size: size$1, label, error, disabled, required,
 
 //#endregion
 //#region src/Radio/Radio.tsx
-const Icon = ({ checked, className,...props }) => /* @__PURE__ */ jsx("div", {
+const Icon = ({ checked, className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex h-4 w-4 items-center justify-center rounded-full border p-1", className),
 	"aria-hidden": "true",
 	...props,
 	children: checked ? /* @__PURE__ */ jsx("div", { className: "size-full rounded-full bg-current" }) : null
 });
-const _Radio = forwardRef(({ value, disabled, width: width$1, children,...props }, ref) => {
+const _Radio = forwardRef(({ value, disabled, width: width$1, children, ...props }, ref) => {
 	const { variant, size: size$1, width: groupWidth } = useRadioGroupContext();
 	const classNames$2 = useClassNames({
 		component: "Radio",
@@ -8895,16 +9090,16 @@ _Radio.Group = _RadioGroup;
 
 //#endregion
 //#region src/Scrollable/Scrollable.tsx
-const Scrollable = ({ children, width: width$1 = "full", height: height$1,...props }) => /* @__PURE__ */ jsx("div", {
+const Scrollable = ({ children, width: width$1 = "full", height: height$1, ...props }) => /* @__PURE__ */ jsx("div", {
 	...props,
-	className: cn(["sticky h-(--height) overflow-auto overscroll-none", width[width$1]]),
+	className: cn(["sticky h-(--height) overflow-auto overscroll-auto", width[width$1]]),
 	style: createVar({ height: height$1 }),
 	children
 });
 
 //#endregion
 //#region src/SearchField/SearchField.tsx
-const _SearchField = forwardRef(({ disabled, required, readOnly, error, action,...rest }, ref) => {
+const _SearchField = forwardRef(({ disabled, required, readOnly, error, ...rest }, ref) => {
 	return /* @__PURE__ */ jsx(FieldBase, {
 		as: SearchField,
 		...rest,
@@ -8921,7 +9116,7 @@ const _SearchField = forwardRef(({ disabled, required, readOnly, error, action,.
 
 //#endregion
 //#region src/icons/CircleAlert.tsx
-const CircleAlert = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const CircleAlert = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -8956,7 +9151,7 @@ const CircleAlert = ({ size: size$1 = 24, className,...props }) => /* @__PURE__
 
 //#endregion
 //#region src/icons/CircleCheck.tsx
-const CircleCheck = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsxs("svg", {
+const CircleCheck = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -9008,14 +9203,14 @@ const icons$1 = {
 	warning: CircleAlert,
 	error: TriangleAlert
 };
-const SectionMessage = ({ variant = "info", size: size$1, children, closeButton, close, onCloseChange,...props }) => {
+const SectionMessage = ({ variant = "info", size: size$1, children, closeButton, close, onCloseChange, ...props }) => {
 	const buttonRef = useRef(null);
 	const classNames$2 = useClassNames({
 		component: "SectionMessage",
 		variant,
 		size: size$1
 	});
-	const Icon$2 = icons$1[variant];
+	const Icon$1 = icons$1[variant];
 	const [internalVisible, setInternalVisible] = useState(true);
 	const isCurrentlyVisible = close ?? internalVisible;
 	const { buttonProps } = useButton(props, buttonRef);
@@ -9033,7 +9228,7 @@ const SectionMessage = ({ variant = "info", size: size$1, children, closeButton,
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: cn("[grid-area:icon]", classNames$2.icon),
-					children: Icon$2 && /* @__PURE__ */ jsx(Icon$2, { size: "20" })
+					children: Icon$1 && /* @__PURE__ */ jsx(Icon$1, { size: "20" })
 				}),
 				closeButton && /* @__PURE__ */ jsx(CloseButton, {
 					...buttonProps,
@@ -9052,12 +9247,19 @@ SectionMessage.Content = SectionMessageContent;
 
 //#endregion
 //#region src/Select/Select.tsx
-const SelectBase = forwardRef(function Select$3({ disabled, required, items, variant, size: size$1, error, open, children,...rest }, ref) {
+const SelectBase = forwardRef(function Select$3({ disabled, required, items, variant, size: size$1, error, open, label, children, selectionMode, onChange, ...rest }, ref) {
+	const isSingleSelect = !selectionMode || selectionMode === "single";
+	const [trayOpen, setTrayOpen] = useState(false);
 	const props = {
 		isDisabled: disabled,
 		isInvalid: error,
 		isOpen: open,
 		isRequired: required,
+		selectionMode,
+		onChange: (...args) => {
+			onChange?.(...args);
+			if (isSingleSelect) setTrayOpen(false);
+		},
 		...rest
 	};
 	const classNames$2 = useClassNames({
@@ -9065,22 +9267,45 @@ const SelectBase = forwardRef(function Select$3({ disabled, required, items, var
 		variant,
 		size: size$1
 	});
-	return /* @__PURE__ */ jsxs(FieldBase, {
+	const isSmallScreen = useSmallScreen();
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	return /* @__PURE__ */ jsx(FieldBase, {
 		as: Select$1,
 		ref,
 		variant,
 		size: size$1,
+		label,
 		...props,
-		children: [/* @__PURE__ */ jsxs(IconButton, {
-			className: cn("flex w-full items-center justify-between gap-1 overflow-hidden", classNames$2.select),
-			children: [/* @__PURE__ */ jsx(SelectValue, { className: "truncate text-nowrap [&_[slot=description]]:hidden" }), /* @__PURE__ */ jsx(ChevronsVertical, {
+		children: isSmallScreen ? /* @__PURE__ */ jsxs(Tray.Trigger, {
+			open: trayOpen,
+			onOpenChange: setTrayOpen,
+			children: [/* @__PURE__ */ jsxs(IconButton, {
+				className: cn("flex w-(--field-width) max-w-full min-w-0 items-center justify-between gap-1 overflow-hidden", classNames$2.select),
+				children: [/* @__PURE__ */ jsx(SelectValue, { className: "truncate text-nowrap **:[[slot=description]]:hidden" }), /* @__PURE__ */ jsx(ChevronsVertical, {
+					size: "16",
+					className: classNames$2.icon
+				})]
+			}), /* @__PURE__ */ jsxs(Tray, { children: [
+				/* @__PURE__ */ jsx(Tray.Title, { children: label }),
+				/* @__PURE__ */ jsx(Tray.Content, { children: /* @__PURE__ */ jsx(_ListBox, {
+					items,
+					children
+				}) }),
+				/* @__PURE__ */ jsx(Tray.Actions, { children: /* @__PURE__ */ jsx(_Button, {
+					slot: "close",
+					children: stringFormatter.format("close")
+				}) })
+			] })]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+			className: cn("flex w-(--field-width) max-w-full min-w-0 items-center justify-between gap-1", classNames$2.select),
+			children: [/* @__PURE__ */ jsx(SelectValue, { className: "truncate text-nowrap **:[[slot=description]]:hidden" }), /* @__PURE__ */ jsx(ChevronsVertical, {
 				size: "16",
 				className: classNames$2.icon
 			})]
 		}), /* @__PURE__ */ jsx(_Popover, { children: /* @__PURE__ */ jsx(_ListBox, {
 			items,
 			children
-		}) })]
+		}) })] })
 	});
 });
 const Select = Object.assign(SelectBase, {
@@ -9111,7 +9336,7 @@ const SelectionIndicator = ({ selectionMode }) => {
 		});
 	}
 };
-const _SelectListItem = forwardRef(({ children, disabled,...props }, ref) => {
+const _SelectListItem = forwardRef(({ children, disabled, ...props }, ref) => {
 	let textValue = typeof children === "string" ? children : void 0;
 	const { classNames: classNames$2 } = useSelectListContext();
 	return /* @__PURE__ */ jsx(GridListItem, {
@@ -9129,7 +9354,7 @@ const _SelectListItem = forwardRef(({ children, disabled,...props }, ref) => {
 
 //#endregion
 //#region src/SelectList/SelectList.tsx
-const _SelectList = forwardRef(({ onChange,...rest }, ref) => {
+const _SelectList = forwardRef(({ onChange, ...rest }, ref) => {
 	const classNames$2 = useClassNames({ component: "ListBox" });
 	const props = {
 		onSelectionChange: onChange,
@@ -9154,7 +9379,7 @@ _SelectList.Action = SelectListAction;
 
 //#endregion
 //#region src/Slider/Slider.tsx
-const _Slider = forwardRef(({ variant, size: size$1, width: width$1 = "full", disabled, label, name, thumbLabels,...rest }, ref) => {
+const _Slider = forwardRef(({ variant, size: size$1, width: width$1 = "full", disabled, label, name, thumbLabels, ...rest }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "Slider",
 		variant,
@@ -9208,11 +9433,12 @@ const Split = () => /* @__PURE__ */ jsx("div", {
 
 //#endregion
 //#region src/Stack/Stack.tsx
-const Stack = ({ children, space = 0, stretch = false, alignX, alignY, asList = false,...props }) => {
+const Stack = ({ children, space = "0", stretch = false, alignX = "stretch", alignY, asList = false, ...props }) => {
 	const Component$1 = asList ? "ul" : "div";
 	const stackChildren = asList ? Children.map(children, (child) => child != null ? /* @__PURE__ */ jsx("li", { children: child }) : null) : children;
 	return /* @__PURE__ */ jsx(Component$1, {
-		className: cn("flex flex-col", gapSpace[space], alignX && alignment?.vertical?.alignmentX[alignX], alignY && alignment?.vertical?.alignmentY[alignY], stretch && "h-full w-full"),
+		className: cn("flex flex-col gap-y-(--space)", alignX && alignment?.vertical?.alignmentX[alignX], alignY && alignment?.vertical?.alignmentY[alignY], stretch && "size-full"),
+		style: createSpacingVar("space", `${space}`),
 		...props,
 		children: stackChildren
 	});
@@ -9220,7 +9446,7 @@ const Stack = ({ children, space = 0, stretch = false, alignX, alignY, asList =
 
 //#endregion
 //#region src/Switch/Switch.tsx
-const _Switch = forwardRef(({ variant, size: size$1, width: width$1 = "full", label, selected, disabled, readOnly,...rest }, ref) => {
+const _Switch = forwardRef(({ variant, size: size$1, width: width$1 = "full", label, selected, disabled, readOnly, ...rest }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "Switch",
 		size: size$1,
@@ -9247,326 +9473,475 @@ const _Switch = forwardRef(({ variant, size: size$1, width: width$1 = "full", la
 });
 
 //#endregion
-//#region src/Table/Context.tsx
-const TableContext = createContext({});
-const useTableContext = () => useContext(TableContext);
-
-//#endregion
-//#region src/Table/TableBody.tsx
-const TableBody$1 = ({ children, className, emptyState }) => {
-	const { rowGroupProps } = useTableRowGroup();
-	const { state, classNames: classNames$2 } = useTableContext();
-	if (state.collection.size === 0 && emptyState) return /* @__PURE__ */ jsx("tbody", {
-		className,
-		"data-rac": true,
-		children: /* @__PURE__ */ jsx("tr", {
-			className: classNames$2?.row,
-			role: "row",
-			"data-rac": true,
-			children: /* @__PURE__ */ jsx("td", {
-				className: classNames$2?.cell,
-				colSpan: state.collection.columnCount,
-				role: "rowheader",
-				"data-rac": true,
-				children: emptyState()
-			})
+//#region src/Table/Context.tsx
+const TableContext = createContext(null);
+const useTableContext = () => {
+	const context = useContext(TableContext);
+	if (context === null) throw new Error("useTableContext must be used within a <Table> component");
+	return context;
+};
+
+//#endregion
+//#region src/Table/TableBody.tsx
+const TableBody$1 = ({ emptyState, ...props }) => {
+	const { classNames: classNames$2 } = useTableContext();
+	return /* @__PURE__ */ jsx(TableBody, {
+		...props,
+		className: cn(classNames$2.body),
+		renderEmptyState: emptyState
+	});
+};
+
+//#endregion
+//#region src/Table/TableCellContent.tsx
+/**
+* Prevents event propagation for table cells, to make their content
+* selectable without interfering with row selection.
+*/
+const stopPropagationProps = {
+	onMouseDown: (e$1) => e$1.stopPropagation(),
+	onPointerDown: (e$1) => e$1.stopPropagation(),
+	onTouchStart: (e$1) => e$1.stopPropagation()
+};
+const TableCellContent = ({ columnIndex, alignX, cellOverflow, children, className, allowTextSelection }) => {
+	const { overflow: tableOverflow, allowTextSelection: tableAllowTextSelection } = useTableContext();
+	const state = useContext(TableStateContext);
+	const overflow = cellOverflow ?? tableOverflow;
+	const selectable = allowTextSelection ?? tableAllowTextSelection;
+	const columnAlign = columnIndex ? state?.collection.columns[columnIndex].props.alignX : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		"data-cell-content": "",
+		className: cn(textAlign[alignX || columnAlign || "left"], overflow === "truncate" ? "truncate" : "wrap-break-word", selectable && "cursor-text select-text", className),
+		tabIndex: selectable ? -1 : void 0,
+		...selectable ? stopPropagationProps : {},
+		children
+	});
+};
+
+//#endregion
+//#region src/Table/TableCell.tsx
+const TableCell = ({ children, alignX, overflow: cellOverflow, ...props }) => {
+	const { classNames: classNames$2, alignY = "middle" } = useTableContext();
+	return /* @__PURE__ */ jsx(Cell, {
+		className: cn(classNames$2.cell, verticalAlign[alignY]),
+		...props,
+		children: ({ columnIndex }) => /* @__PURE__ */ jsx(TableCellContent, {
+			columnIndex,
+			alignX,
+			cellOverflow,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/icons/SortAscending.tsx
+const SortAscending = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsx(SVG, {
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	className: cn("flex-none shrink-0 stroke-current", className),
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M3 8l4-4 4 4M7 4v16m4-8h4m-4 4h7m-7 4h10" })
+});
+
+//#endregion
+//#region src/icons/SortDescending.tsx
+const SortDescending = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsx(SVG, {
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	className: cn("flex-none shrink-0 stroke-current", className),
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M3 16l4 4 4-4m-4 4V4m4 0h10M11 8h7m-7 4h4" })
+});
+
+//#endregion
+//#region src/Table/TableColumn.tsx
+const isStaticWidth = (width$1) => !`${width$1}`.endsWith("fr");
+const ensureWidth = (width$1, minWdith) => {
+	if (minWdith) return minWdith;
+	return isStaticWidth(width$1) ? width$1 : minWdith;
+};
+const TableColumn = ({ alignX = "left", width: width$1, minWidth, rowHeader, ...props }) => {
+	const { classNames: classNames$2 } = useTableContext();
+	return /* @__PURE__ */ jsx(Column, {
+		className: classNames$2.column,
+		width: width$1,
+		minWidth: ensureWidth(width$1, minWidth),
+		isRowHeader: rowHeader,
+		alignX,
+		...props,
+		children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-1", alignment.horizontal.alignmentX[alignX]),
+			children: [allowsSorting && sortDirection != null && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: sortDirection === "ascending" ? /* @__PURE__ */ jsx(SortAscending, { size: 14 }) : /* @__PURE__ */ jsx(SortDescending, { size: 14 })
+			}), /* @__PURE__ */ jsx(Group, {
+				className: "cursor-default outline-none",
+				role: "presentation",
+				tabIndex: -1,
+				children: props.children
+			})]
 		})
 	});
-	return /* @__PURE__ */ jsx("tbody", {
-		...rowGroupProps,
-		className,
-		"data-rac": true,
-		children
-	});
 };
 
 //#endregion
-//#region src/Table/TableCell.tsx
-const TableCell = ({ cell, align = "left", alignY = "middle" }) => {
-	const ref = useRef(null);
-	const { interactive, state, classNames: classNames$2 } = useTableContext();
-	const disabled = state.disabledKeys.has(cell.parentKey);
-	const { gridCellProps } = useTableCell({ node: cell }, state, ref);
-	const cellProps = interactive ? gridCellProps : {
-		...gridCellProps,
-		onMouseDown: (e$1) => e$1.stopPropagation(),
-		onPointerDown: (e$1) => e$1.stopPropagation()
-	};
-	const { focusProps, isFocusVisible } = useFocusRing();
-	const stateProps = useStateProps({
-		disabled,
-		focusVisible: isFocusVisible
+//#region src/Table/TableDragPreview.tsx
+const TableDragPreview = ({ items, variant, size: size$1 }) => {
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	const classNames$2 = useClassNames({
+		component: "Table",
+		variant,
+		size: size$1
 	});
-	return /* @__PURE__ */ jsx("td", {
-		ref,
-		className: classNames$2?.cell,
-		...mergeProps(cellProps, focusProps),
-		...stateProps,
-		align,
-		valign: alignY,
-		"data-rac": true,
-		children: cell.rendered
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex transform-gpu items-center gap-2", classNames$2.dragPreview),
+		children: [items[0]["text/plain"] ?? stringFormatter.format("items"), /* @__PURE__ */ jsx("div", {
+			className: classNames$2.dragPreviewCounter,
+			children: items.length
+		})]
 	});
 };
-
-//#endregion
-//#region src/Table/utils.ts
-/**
-* Map `react-aria` props to ours (no "is"-prefix)
-*/
-const mapCheckboxProps = ({ checkboxProps: { isIndeterminate, isSelected, isDisabled, defaultSelected,...rest } }) => {
-	return { checkboxProps: {
-		disabled: isDisabled,
-		checked: isSelected,
-		defaultChecked: defaultSelected,
-		indeterminate: isIndeterminate,
-		...rest
-	} };
+const renderDragPreview = (items) => {
+	if (items.length > 1) return /* @__PURE__ */ jsx(TableDragPreview, { items });
 };
 
 //#endregion
-//#region src/Table/TableCheckboxCell.tsx
-const TableCheckboxCell = ({ cell, alignY = "middle" }) => {
-	const ref = useRef(null);
-	const { state, classNames: classNames$2 } = useTableContext();
-	const disabled = state.disabledKeys.has(cell.parentKey);
-	const { gridCellProps } = useTableCell({ node: cell }, state, ref);
-	const { checkboxProps } = mapCheckboxProps(useTableSelectionCheckbox({ key: cell.parentKey }, state));
-	const { focusProps, isFocusVisible } = useFocusRing();
-	const stateProps = useStateProps({
-		disabled,
-		focusVisible: isFocusVisible
-	});
-	return /* @__PURE__ */ jsx("td", {
-		ref,
-		className: cn("leading-none", classNames$2?.cell),
-		...mergeProps(gridCellProps, focusProps),
-		...stateProps,
-		valign: alignY,
-		"data-rac": true,
-		children: /* @__PURE__ */ jsx(_Checkbox, { ...checkboxProps })
+//#region src/Table/TableDropIndicator.tsx
+const TableDropIndicator = ({ size: size$1, variant, ...props }) => {
+	const classNames$2 = useClassNames({
+		component: "Table",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ jsx(DropIndicator, {
+		...props,
+		className: cn("transform-gpu", classNames$2.dropIndicator)
 	});
 };
+const renderDropIndicator = (target) => /* @__PURE__ */ jsx(TableDropIndicator, { target });
 
 //#endregion
-//#region src/icons/SortDown.tsx
-const SortDown = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx(SVG, {
-	width: size$1,
-	height: size$1,
-	viewBox: "0 0 24 24",
-	className: cn("flex-none shrink-0 fill-current", className),
-	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" })
-});
-
-//#endregion
-//#region src/icons/SortUp.tsx
-const SortUp = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ jsx(SVG, {
+//#region src/icons/Pencil.tsx
+const Pencil = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
 	viewBox: "0 0 24 24",
-	className: cn("flex-none shrink-0 fill-current", className),
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: cn("shrink-0", className),
 	...props,
-	children: /* @__PURE__ */ jsx("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" })
+	children: [/* @__PURE__ */ jsx("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }), /* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })]
 });
 
 //#endregion
-//#region src/Table/TableColumnHeader.tsx
-const TableColumnHeader = ({ column: column$1, width: width$1 = "auto", align = "left" }) => {
-	const ref = useRef(null);
-	const { state, classNames: classNames$2 } = useTableContext();
-	const { columnHeaderProps } = useTableColumnHeader({ node: column$1 }, state, ref);
-	const { hoverProps, isHovered } = useHover({});
-	const { focusProps, isFocusVisible } = useFocusRing();
-	const stateProps = useStateProps({
-		hover: isHovered,
-		focusVisible: isFocusVisible
-	});
-	return /* @__PURE__ */ jsxs("th", {
-		colSpan: column$1.colspan,
-		ref,
-		className: cn("whitespace-nowrap data-[react-aria-pressable=\"true\"]:cursor-pointer", width[width$1], classNames$2?.header),
-		...mergeProps(columnHeaderProps, hoverProps, focusProps),
-		...stateProps,
-		align,
-		"data-rac": true,
-		children: [column$1.rendered, column$1.props.allowsSorting && (state.sortDescriptor?.column === column$1.key ? state.sortDescriptor?.direction === "ascending" ? /* @__PURE__ */ jsx(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx("span", {
-			className: "hidden",
-			children: /* @__PURE__ */ jsx(SortDown, { className: "inline-block" })
-		}))]
+//#region src/Table/TableEditableCell.tsx
+const EditableCellPopover = ({ cellRef, open, onOpenChange, className, children }) => {
+	const popoverRef = useRef(null);
+	const [triggerWidth, setTriggerWidth] = useState(0);
+	const [tableWidth, setTableWidth] = useState(0);
+	const [verticalOffset, setVerticalOffset] = useState(0);
+	useLayoutEffect(() => {
+		if (!open || !cellRef.current) return;
+		const cell = cellRef.current;
+		const rect = cell.getBoundingClientRect();
+		const rowRect = cell.parentElement?.getBoundingClientRect();
+		const offset$1 = (rowRect?.top ?? 0) - (rowRect?.bottom ?? 0);
+		setTriggerWidth(rect.width);
+		setVerticalOffset(offset$1);
+		setTableWidth(cell.closest("[role=\"grid\"]")?.clientWidth ?? 0);
+	}, [cellRef, open]);
+	return /* @__PURE__ */ jsx(Popover, {
+		ref: popoverRef,
+		isOpen: open,
+		onOpenChange,
+		triggerRef: cellRef,
+		offset: verticalOffset,
+		placement: "bottom start",
+		style: {
+			minWidth: `min(${triggerWidth}px, ${tableWidth}px)`,
+			maxWidth: tableWidth
+		},
+		className,
+		children
+	});
+};
+const TableEditableCell = ({ children, field, saving = false, onSubmit, onCancel, disabled = false, action, alignX, overflow: cellOverflow }) => {
+	const { classNames: classNames$2, allowTextSelection: tableAllowTextSelection, alignY = "middle" } = useTableContext();
+	const { selectionMode } = useTableOptions();
+	const hasSelection = selectionMode !== "none";
+	const isSmallScreen = useSmallScreen();
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	const [open, setOpen] = useState(false);
+	const submittedRef = useRef(false);
+	const cellRef = useRef(null);
+	const formRef = useRef(null);
+	const handleFormRef = useCallback((node$1) => {
+		formRef.current = node$1;
+		if (node$1) requestAnimationFrame(() => {
+			const activeElement = getActiveElement(getOwnerDocument(node$1));
+			if (activeElement && nodeContains(node$1, activeElement) && (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) && typeof activeElement.select === "function") activeElement.select();
+		});
+	}, []);
+	const handleSubmit = (e$1) => {
+		e$1.preventDefault();
+		submittedRef.current = true;
+		onSubmit?.(e$1);
+		setOpen(false);
+	};
+	const handleCancel = () => {
+		submittedRef.current = true;
+		onCancel?.();
+		setOpen(false);
+	};
+	const handleOpenChange = (isOpen) => {
+		if (!isOpen && !submittedRef.current) onCancel?.();
+		submittedRef.current = false;
+		setOpen(isOpen);
+	};
+	const renderField = () => typeof field === "function" ? field() : field;
+	const cancelButton = /* @__PURE__ */ jsx(Button, {
+		className: classNames$2.editCancel,
+		onPress: handleCancel,
+		"aria-label": isSmallScreen ? void 0 : stringFormatter.format("cancel"),
+		children: isSmallScreen ? stringFormatter.format("cancel") : /* @__PURE__ */ jsx(X, {})
+	});
+	const saveButton = /* @__PURE__ */ jsx(Button, {
+		className: classNames$2.editSave,
+		type: "submit",
+		isPending: saving,
+		"aria-label": isSmallScreen ? void 0 : stringFormatter.format("save"),
+		children: isSmallScreen ? stringFormatter.format("save") : /* @__PURE__ */ jsx(Check, {})
+	});
+	return /* @__PURE__ */ jsx(Cell, {
+		ref: cellRef,
+		className: cn(classNames$2.cell, verticalAlign[alignY]),
+		children: ({ columnIndex }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "group/editable-cell flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(TableCellContent, {
+				columnIndex,
+				alignX,
+				cellOverflow,
+				className: "min-w-0 flex-1",
+				allowTextSelection: !hasSelection || tableAllowTextSelection,
+				children
+			}), !disabled && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 opacity-0 not-[@media_((hover:_hover)_and_(pointer:_fine))]:opacity-100 [.group\\/editable-cell:has(:focus-visible)_&]:opacity-100 [[role=row]:hover_&]:opacity-100",
+				children: /* @__PURE__ */ jsx(Button, {
+					className: classNames$2.editTrigger,
+					"aria-label": stringFormatter.format("edit"),
+					onPress: () => setOpen(true),
+					children: /* @__PURE__ */ jsx(Pencil, {})
+				})
+			})]
+		}), isSmallScreen ? /* @__PURE__ */ jsx(_Dialog, {
+			open,
+			onOpenChange: handleOpenChange,
+			children: /* @__PURE__ */ jsxs(_Form, {
+				unstyled: true,
+				ref: handleFormRef,
+				action,
+				onSubmit: handleSubmit,
+				children: [
+					/* @__PURE__ */ jsx(_Dialog.Title, { children: stringFormatter.format("editCell") }),
+					/* @__PURE__ */ jsx(_Dialog.Content, { children: /* @__PURE__ */ jsx(FocusScope, {
+						autoFocus: true,
+						restoreFocus: true,
+						children: renderField()
+					}) }),
+					/* @__PURE__ */ jsxs(_Dialog.Actions, { children: [cancelButton, saveButton] })
+				]
+			})
+		}) : /* @__PURE__ */ jsx(EditableCellPopover, {
+			cellRef,
+			open,
+			onOpenChange: handleOpenChange,
+			className: classNames$2.editablePopover,
+			children: /* @__PURE__ */ jsx(_Form, {
+				unstyled: true,
+				ref: handleFormRef,
+				action,
+				onSubmit: handleSubmit,
+				children: /* @__PURE__ */ jsxs(FocusScope, {
+					autoFocus: true,
+					children: [
+						renderField(),
+						cancelButton,
+						saveButton
+					]
+				})
+			})
+		})] })
 	});
 };
 
 //#endregion
 //#region src/Table/TableHeader.tsx
-const TableHeader$1 = ({ stickyHeader, children }) => {
-	const { rowGroupProps } = useTableRowGroup();
+const TableHeader$1 = ({ sticky, columns, children, ...props }) => {
+	const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
 	const { classNames: classNames$2 } = useTableContext();
-	return /* @__PURE__ */ jsx("thead", {
-		...rowGroupProps,
-		className: cn(classNames$2?.thead, stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""),
-		"data-rac": true,
-		children
+	return /* @__PURE__ */ jsxs(TableHeader, {
+		className: cn(classNames$2.head, sticky && "sticky top-0 z-1"),
+		...props,
+		children: [
+			allowsDragging && /* @__PURE__ */ jsx(Column, {
+				className: classNames$2.column,
+				minWidth: 24,
+				width: 24
+			}),
+			selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Column, {
+				minWidth: 36,
+				width: 36,
+				className: classNames$2.column,
+				children: selectionMode === "multiple" && /* @__PURE__ */ jsx(_Checkbox, { slot: "selection" })
+			}),
+			/* @__PURE__ */ jsx(Collection, {
+				items: columns,
+				children
+			})
+		]
 	});
 };
 
 //#endregion
-//#region src/Table/TableHeaderRow.tsx
-const TableHeaderRow = ({ item, className, children }) => {
-	const { state } = useTableContext();
-	const ref = useRef(null);
-	const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-	return /* @__PURE__ */ jsx("tr", {
-		...rowProps,
-		className,
-		ref,
-		"data-rac": true,
-		children
-	});
-};
+//#region src/icons/GripVertical.tsx
+const GripVertical = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size$1,
+	height: size$1,
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	viewBox: "0 0 24 24",
+	className: cn("shrink-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 9,
+			cy: 12,
+			r: 1
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 9,
+			cy: 5,
+			r: 1
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 9,
+			cy: 19,
+			r: 1
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 15,
+			cy: 12,
+			r: 1
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 15,
+			cy: 5,
+			r: 1
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 15,
+			cy: 19,
+			r: 1
+		})
+	]
+});
 
 //#endregion
 //#region src/Table/TableRow.tsx
-const TableRow = ({ children, row }) => {
-	const ref = useRef(null);
-	const { interactive, state,...ctx } = useTableContext();
-	const { variant, size: size$1 } = row.props;
+const TableRow = ({ id, columns, children, variant: variantProp, size: sizeProp, ...otherProps }) => {
+	let { selectionBehavior, allowsDragging } = useTableOptions();
+	const context = useTableContext();
 	const classNames$2 = useClassNames({
 		component: "Table",
-		variant: variant || ctx.variant,
-		size: size$1 || ctx.size
-	});
-	const { rowProps, isPressed } = useTableRow({ node: row }, state, ref);
-	const disabled = state.disabledKeys.has(row.key);
-	const selected = state.selectionManager.isSelected(row.key);
-	const { focusProps, isFocusVisible } = useFocusRing();
-	const { hoverProps, isHovered } = useHover({ isDisabled: disabled || !interactive });
-	const stateProps = useStateProps({
-		disabled,
-		selected,
-		hover: isHovered,
-		focusVisible: isFocusVisible,
-		active: isPressed
-	});
-	return /* @__PURE__ */ jsx("tr", {
-		ref,
-		className: cn([!interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"], classNames$2?.row),
-		...mergeProps(rowProps, focusProps, hoverProps),
-		...stateProps,
-		"data-rac": true,
-		children
+		variant: variantProp ?? context.variant,
+		size: sizeProp ?? context.size
 	});
-};
-
-//#endregion
-//#region src/Table/TableSelectAllCell.tsx
-const TableSelectAllCell = ({ column: column$1, width: width$1 = "auto", align = "left" }) => {
-	const ref = useRef(null);
-	const { state, classNames: classNames$2 } = useTableContext();
-	const { columnHeaderProps } = useTableColumnHeader({ node: column$1 }, state, ref);
-	const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
-	const { hoverProps, isHovered } = useHover({});
-	const { focusProps, isFocusVisible } = useFocusRing();
-	const stateProps = useStateProps({
-		hover: isHovered,
-		focusVisible: isFocusVisible
-	});
-	return /* @__PURE__ */ jsx("th", {
-		ref,
-		className: cn(width[width$1], ["leading-none"], classNames$2?.header),
-		...mergeProps(columnHeaderProps, hoverProps, focusProps),
-		...stateProps,
-		align,
-		"data-rac": true,
-		children: /* @__PURE__ */ jsx(_Checkbox, { ...checkboxProps })
+	return /* @__PURE__ */ jsxs(Row, {
+		id,
+		className: cn("group/row", classNames$2.row),
+		...otherProps,
+		children: [
+			allowsDragging && /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Button, {
+				slot: "drag",
+				className: cn("grid size-full place-items-center", classNames$2.dragHandle),
+				children: /* @__PURE__ */ jsx(GripVertical, {})
+			}) }),
+			selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Cell, {
+				className: classNames$2.cell,
+				children: /* @__PURE__ */ jsx(_Checkbox, { slot: "selection" })
+			}),
+			/* @__PURE__ */ jsx(Collection, {
+				items: columns,
+				children
+			})
+		]
 	});
 };
 
 //#endregion
 //#region src/Table/Table.tsx
-const Table = ({ variant, size: size$1, stretch = false, selectionMode = "none", disableKeyboardNavigation = false, stickyHeader, emptyState, alignY = "middle",...props }) => {
-	const interactive = selectionMode !== "none";
-	const tableRef = useRef(null);
-	const state = useTableState({
-		...props,
-		selectionMode,
-		showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
-	});
-	/**
-	* Behavior is a bit flacky with the table when using a keyboard
-	* so we test here for undefined here to be save.
-	*/
-	if (disableKeyboardNavigation !== void 0) state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
-	const { gridProps } = useTable(props, state, tableRef);
+const _Table = ({ variant, size: size$1, overflow = "wrap", allowTextSelection = false, alignY = "middle", ...props }) => {
 	const classNames$2 = useClassNames({
 		component: "Table",
 		variant,
 		size: size$1
 	});
-	const { collection } = state;
+	const ctx = useMemo(() => ({
+		classNames: classNames$2,
+		variant,
+		size: size$1,
+		overflow,
+		allowTextSelection,
+		alignY
+	}), [
+		classNames$2,
+		variant,
+		size$1,
+		overflow,
+		allowTextSelection,
+		alignY
+	]);
 	return /* @__PURE__ */ jsx(TableContext.Provider, {
-		value: {
-			state,
-			interactive,
-			classNames: classNames$2,
-			variant,
-			size: size$1
-		},
-		children: /* @__PURE__ */ jsxs("table", {
-			ref: tableRef,
-			"data-rac": true,
-			className: cn(
-				"group/table border-collapse",
-				/**
-				* Prevents wide tables from causing overlays to become scrollable on
-				* small screens, ensuring overlays remain fixed as intended.
-				*/
-				"max-[600px]:[[aria-hidden=\"true\"]_&]:overflow-hidden",
-				stretch ? "table w-full" : "block",
-				classNames$2.table
-			),
-			...gridProps,
-			children: [/* @__PURE__ */ jsx(TableHeader$1, {
-				stickyHeader,
-				children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx(TableHeaderRow, {
-					item: headerRow,
-					className: classNames$2.headerRow,
-					children: [...collection.getChildren(headerRow.key)].map((column$1) => column$1.props?.isSelectionCell ? /* @__PURE__ */ jsx(TableSelectAllCell, {
-						width: column$1.props?.width,
-						column: column$1,
-						align: column$1.props?.align
-					}, column$1.key) : /* @__PURE__ */ jsx(TableColumnHeader, {
-						width: column$1.props?.width,
-						column: column$1,
-						align: column$1.props?.align
-					}, column$1.key))
-				}, headerRow.key))
-			}), /* @__PURE__ */ jsx(TableBody$1, {
-				className: classNames$2.body,
-				emptyState,
-				children: [...collection.rows.map((row) => row.type === "item" && /* @__PURE__ */ jsx(TableRow, {
-					row,
-					children: [...collection.getChildren(row.key)].map((cell, index$1) => {
-						const currentColumn = collection.columns[index$1];
-						return cell.props?.isSelectionCell ? /* @__PURE__ */ jsx(TableCheckboxCell, {
-							cell,
-							alignY
-						}, cell.key) : /* @__PURE__ */ jsx(TableCell, {
-							align: currentColumn.props?.align,
-							alignY,
-							cell
-						}, cell.key);
-					})
-				}, row.key))]
-			})]
+		value: ctx,
+		children: /* @__PURE__ */ jsx(ResizableTableContainer, {
+			className: "w-full",
+			children: /* @__PURE__ */ jsx(Table$1, {
+				className: cn("group/table", classNames$2.table),
+				selectionBehavior: "toggle",
+				...props
+			})
 		})
 	});
 };
-Table.Body = TableBody;
-Table.Cell = Cell;
-Table.Column = Column;
-Table.Header = TableHeader;
-Table.Row = Row;
+const Table = Object.assign(_Table, {
+	Header: TableHeader$1,
+	Column: TableColumn,
+	Body: TableBody$1,
+	Row: TableRow,
+	Cell: TableCell,
+	EditableCell: TableEditableCell,
+	renderDropIndicator,
+	renderDragPreview
+});
 
 //#endregion
 //#region src/Tabs/Context.ts
@@ -9586,11 +9961,11 @@ const _Tab = (props) => {
 
 //#endregion
 //#region src/Tabs/TabList.tsx
-const _TabList = ({ space = 2,...props }) => {
+const _TabList = (props) => {
 	const { classNames: classNames$2 } = useTabContext();
 	return /* @__PURE__ */ jsx(TabList, {
 		...props,
-		className: cn("flex", gapSpace[space], classNames$2.tabsList),
+		className: cn("flex", classNames$2.tabsList),
 		children: props.children
 	});
 };
@@ -9608,7 +9983,7 @@ const _TabPanel = (props) => {
 
 //#endregion
 //#region src/Tabs/Tabs.tsx
-const _Tabs = ({ disabled, variant, size: size$1 = "medium",...rest }) => {
+const _Tabs = ({ disabled, variant, size: size$1 = "medium", ...rest }) => {
 	const props = {
 		isDisabled: disabled,
 		...rest
@@ -9665,7 +10040,7 @@ const TagGroupRemoveAll = ({ className, onRemove }) => {
 
 //#endregion
 //#region src/TagGroup/TagGroup.tsx
-const _TagGroup = ({ items, children, emptyState, variant, size: size$1, name, removeAll,...rest }) => {
+const _TagGroup = ({ items, children, emptyState, variant, size: size$1, name, removeAll, ...rest }) => {
 	const classNames$2 = useClassNames({
 		component: "Tag",
 		variant,
@@ -9691,7 +10066,7 @@ const _TagGroup = ({ items, children, emptyState, variant, size: size$1, name, r
 
 //#endregion
 //#region src/TagGroup/Tag.tsx
-const _Tag = ({ variant, size: size$1, children, disabled,...rest }) => {
+const _Tag = ({ variant, size: size$1, children, disabled, ...rest }) => {
 	let textValue = typeof children === "string" ? children : void 0;
 	const classNames$2 = useClassNames({
 		component: "Tag",
@@ -9712,31 +10087,140 @@ const _Tag = ({ variant, size: size$1, children, disabled,...rest }) => {
 _Tag.Group = _TagGroup;
 
 //#endregion
-//#region src/Text/Text.tsx
-const _Text = ({ variant, size: size$1, color, align, cursor: cursor$1, weight, fontSize, fontStyle, wrap, whiteSpace: whiteSpace$1, children, as = "div",...props }) => {
+//#region src/TagField/TagField.tsx
+const TagDisplay = ({ placeholder, classNames: classNames$2, disabled }) => {
+	const state = useContext(SelectStateContext);
+	if (!state) return null;
+	const selectedKeys = [...state.selectionManager.selectedKeys];
+	if (selectedKeys.length === 0) return /* @__PURE__ */ jsx("span", { children: placeholder });
+	const selectedItems = [];
+	for (const key of selectedKeys) {
+		const item = state.collection.getItem(key);
+		if (item) selectedItems.push({
+			id: key,
+			textValue: item.textValue
+		});
+	}
+	return /* @__PURE__ */ jsx(TagGroup, {
+		"aria-label": "Selected items",
+		className: classNames$2.tagGroup,
+		onRemove: disabled ? void 0 : (keys) => {
+			const currentKeys = new Set(state.selectionManager.selectedKeys);
+			for (const key of keys) currentKeys.delete(key);
+			state.selectionManager.setSelectedKeys(currentKeys);
+		},
+		children: /* @__PURE__ */ jsx(TagList, {
+			items: selectedItems,
+			className: classNames$2.listItems,
+			children: (item) => /* @__PURE__ */ jsx(_Tag, {
+				id: item.id,
+				disabled,
+				children: item.textValue
+			})
+		})
+	});
+};
+const TagFieldDropdown = ({ items, children, placeholder, emptyState }) => {
+	const { contains } = useFilter({ sensitivity: "base" });
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	return /* @__PURE__ */ jsxs(Autocomplete, {
+		filter: contains,
+		children: [/* @__PURE__ */ jsx(SearchField, {
+			"aria-label": "Search",
+			autoFocus: true,
+			children: /* @__PURE__ */ jsx(SearchInput, { placeholder })
+		}), /* @__PURE__ */ jsx(_ListBox, {
+			items,
+			renderEmptyState: () => emptyState ?? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: stringFormatter.format("noResultsFound")
+			}),
+			children
+		})]
+	});
+};
+const _TagField = forwardRef(function TagField$1({ disabled, required, items, variant, size: size$1, error, open, children, placeholder, emptyState, ...rest }, ref) {
+	const triggerRef = useRef(null);
+	const [triggerWidth, setTriggerWidth] = useState(0);
+	const isSmallScreen = useSmallScreen();
+	useLayoutEffect(() => {
+		const el = triggerRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			setTriggerWidth(el.offsetWidth);
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	const props = {
+		selectionMode: "multiple",
+		isDisabled: disabled,
+		isInvalid: error,
+		isOpen: open,
+		isRequired: required,
+		...rest
+	};
 	const classNames$2 = useClassNames({
-		component: "Text",
+		component: "TagField",
 		variant,
 		size: size$1
 	});
-	/**
-	* Use `<Text>` when a `slot` is used. Make sure `elementType`
-	* prop is only used in combination the `<Text>`.
-	*/
-	const Component$1 = props.slot ? Text : as;
-	const elementType = props.slot ? { elementType: as } : {};
-	return /* @__PURE__ */ jsx(Component$1, {
+	const stringFormatter = useLocalizedStringFormatter(intlMessages);
+	return /* @__PURE__ */ jsxs(FieldBase, {
+		as: Select$1,
+		ref,
+		variant,
+		size: size$1,
 		...props,
-		...elementType,
-		className: cn("max-w-(--maxTextWidth)", classNames$2, fontStyle && textStyle[fontStyle], align && textAlign[align], cursor$1 && cursorStyle[cursor$1], weight && fontWeight[weight], fontSize && textSize[fontSize], wrap && textWrap[wrap], whiteSpace$1 && whiteSpace[whiteSpace$1]),
-		style: { color: color && ensureCssVar(color, "color") },
-		children
+		children: [/* @__PURE__ */ jsxs(Group, {
+			ref: triggerRef,
+			className: cn("w-(--field-width) max-w-full min-w-0", classNames$2.trigger),
+			children: [/* @__PURE__ */ jsx(TagDisplay, {
+				placeholder,
+				classNames: classNames$2,
+				disabled
+			}), /* @__PURE__ */ jsx(IconButton, {
+				className: classNames$2.button,
+				children: /* @__PURE__ */ jsx(ChevronsVertical, {})
+			})]
+		}), isSmallScreen ? /* @__PURE__ */ jsxs(Tray, { children: [
+			/* @__PURE__ */ jsx(Tray.Title, { children: rest.label }),
+			/* @__PURE__ */ jsx(Tray.Content, {
+				className: "flex flex-col gap-2",
+				children: /* @__PURE__ */ jsx(TagFieldDropdown, {
+					items,
+					placeholder,
+					emptyState,
+					children
+				})
+			}),
+			/* @__PURE__ */ jsx(Tray.Actions, { children: /* @__PURE__ */ jsx(_Button, {
+				slot: "close",
+				children: stringFormatter.format("close")
+			}) })
+		] }) : /* @__PURE__ */ jsx(_Popover, {
+			triggerRef,
+			children: /* @__PURE__ */ jsx("div", {
+				className: classNames$2.container,
+				style: createVar({ "tagfield-trigger-width": triggerWidth ? `${triggerWidth}px` : void 0 }),
+				children: /* @__PURE__ */ jsx(TagFieldDropdown, {
+					items,
+					placeholder,
+					emptyState,
+					children
+				})
+			})
+		})]
 	});
-};
+});
+const TagField = Object.assign(_TagField, {
+	Option: _ListBox.Item,
+	Section: _ListBox.Section
+});
 
 //#endregion
 //#region src/TextArea/TextArea.tsx
-const _TextArea = forwardRef(({ variant, size: size$1, required, disabled, readOnly, error, rows,...rest }, ref) => {
+const _TextArea = forwardRef(({ variant, size: size$1, required, disabled, readOnly, error, rows, ...rest }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "TextArea",
 		variant,
@@ -9752,7 +10236,7 @@ const _TextArea = forwardRef(({ variant, size: size$1, required, disabled, readO
 		variant,
 		size: size$1,
 		children: /* @__PURE__ */ jsx(TextArea, {
-			className: classNames$2,
+			className: cn(classNames$2, "w-(--field-width) max-w-full min-w-0"),
 			ref,
 			rows
 		})
@@ -9761,7 +10245,7 @@ const _TextArea = forwardRef(({ variant, size: size$1, required, disabled, readO
 
 //#endregion
 //#region src/TextField/TextField.tsx
-const _TextField = forwardRef(({ required, disabled, readOnly, error,...rest }, ref) => {
+const _TextField = forwardRef(({ required, disabled, readOnly, error, ...rest }, ref) => {
 	return /* @__PURE__ */ jsx(FieldBase, {
 		as: TextField,
 		isDisabled: disabled,
@@ -9775,7 +10259,7 @@ const _TextField = forwardRef(({ required, disabled, readOnly, error,...rest },
 
 //#endregion
 //#region src/Tiles/Tiles.tsx
-const Tiles = ({ space = 0, stretch = false, equalHeight = false, tilesWidth = "250px", children,...props }) => {
+const Tiles = ({ space = 0, stretch = false, equalHeight = false, tilesWidth = "250px", children, ...props }) => {
 	let column$1 = `min(${tilesWidth}, 100%)`;
 	/**
 	* Adding `minmax` with `1fr` will make the tiles distribute the
@@ -9785,18 +10269,21 @@ const Tiles = ({ space = 0, stretch = false, equalHeight = false, tilesWidth = "
 	if (stretch) column$1 = `minmax(${column$1}, 1fr)`;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: cn("grid", gapSpace[space], "grid-cols-[repeat(auto-fit,var(--column))]", equalHeight && "auto-rows-[1fr]"),
-		style: createVar({
-			column: column$1,
-			tilesWidth
-		}),
+		className: cn("grid gap-(--space)", "grid-cols-[repeat(auto-fit,var(--column))]", equalHeight && "auto-rows-[1fr]"),
+		style: {
+			...createVar({
+				column: column$1,
+				tilesWidth
+			}),
+			...createSpacingVar("space", `${space}`)
+		},
 		children
 	});
 };
 
 //#endregion
 //#region src/TimeField/TimeField.tsx
-const _TimeField = forwardRef(({ required, disabled, readOnly, error, variant, size: size$1, width: width$1 = "full",...rest }, ref) => {
+const _TimeField = forwardRef(({ required, disabled, readOnly, error, variant, size: size$1, width: width$1 = "full", ...rest }, ref) => {
 	const classNames$2 = useClassNames({
 		component: "DateField",
 		variant,
@@ -9813,11 +10300,14 @@ const _TimeField = forwardRef(({ required, disabled, readOnly, error, variant, s
 		isRequired: required,
 		...rest,
 		ref,
-		children: /* @__PURE__ */ jsx(DateInput, {
-			className: classNames$2.field,
-			children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
-				className: classNames$2.segment,
-				segment
+		children: /* @__PURE__ */ jsx(Group, {
+			className: cn("w-(--field-width) max-w-full min-w-0", classNames$2.field),
+			children: /* @__PURE__ */ jsx(DateInput, {
+				className: cn("flex flex-1 items-center", classNames$2.input),
+				children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
+					className: classNames$2.segment,
+					segment
+				})
 			})
 		})
 	});
@@ -9836,7 +10326,7 @@ const Toast = ({ toast }) => {
 		component: "Toast",
 		variant: toast.content.variant
 	});
-	const Icon$2 = toast.content.variant ? icons[toast.content.variant] : null;
+	const Icon$1 = toast.content.variant ? icons[toast.content.variant] : null;
 	return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
 		toast,
 		className: classNames$2.toast,
@@ -9844,11 +10334,11 @@ const Toast = ({ toast }) => {
 		children: [/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
 			className: classNames$2.content,
 			children: [
-				Icon$2 && /* @__PURE__ */ jsx("div", {
+				Icon$1 && /* @__PURE__ */ jsx("div", {
 					className: classNames$2.icon,
 					slot: "icon",
 					"data-testid": "toast-icon",
-					children: /* @__PURE__ */ jsx(Icon$2, { size: "20" })
+					children: /* @__PURE__ */ jsx(Icon$1, { size: "20" })
 				}),
 				/* @__PURE__ */ jsx(Text, {
 					slot: "title",
@@ -9877,15 +10367,18 @@ const Toast = ({ toast }) => {
 //#endregion
 //#region src/Toast/ToastProvider.tsx
 const queue = new UNSTABLE_ToastQueue({ wrapUpdate(fn) {
-	if ("startViewTransition" in document) document.startViewTransition(() => {
-		flushSync(fn);
-	});
-	else fn();
+	if ("startViewTransition" in document) {
+		const transition = document.startViewTransition(() => {
+			flushSync(fn);
+		});
+		transition.ready.catch(() => {});
+		transition.finished.catch(() => {});
+	} else fn();
 } });
 const ToastProvider = ({ position: position$1 = "bottom-right" }) => {
 	return /* @__PURE__ */ jsx(UNSTABLE_ToastRegion, {
 		queue,
-		className: `${useClassNames({ component: "Toast" })[position$1]} z-50 gap-2`,
+		className: `${useClassNames({ component: "Toast" })[position$1]} z-80 gap-2`,
 		children: ({ toast }) => /* @__PURE__ */ jsx(Toast, { toast })
 	});
 };
@@ -9926,7 +10419,7 @@ const TooltipArrow = () => {
 
 //#endregion
 //#region src/Tooltip/TooltipTrigger.tsx
-const _TooltipTrigger = ({ delay = 1e3, children, disabled, open,...rest }) => {
+const _TooltipTrigger = ({ delay = 1e3, children, disabled, open, ...rest }) => {
 	return /* @__PURE__ */ jsx(TooltipTrigger, {
 		...rest,
 		isDisabled: disabled,
@@ -9938,7 +10431,7 @@ const _TooltipTrigger = ({ delay = 1e3, children, disabled, open,...rest }) => {
 
 //#endregion
 //#region src/Tooltip/Tooltip.tsx
-const _Tooltip = ({ children, variant, size: size$1, open,...rest }) => {
+const _Tooltip = ({ children, variant, size: size$1, open, ...rest }) => {
 	const props = {
 		...rest,
 		isOpen: open
@@ -9950,7 +10443,7 @@ const _Tooltip = ({ children, variant, size: size$1, open,...rest }) => {
 	});
 	return /* @__PURE__ */ jsxs(Tooltip, {
 		...props,
-		className: cn("group/tooltip", classNames$2.container),
+		className: cn("group/tooltip z-30", classNames$2.container),
 		children: [/* @__PURE__ */ jsx(OverlayArrow, {
 			className: classNames$2.arrow,
 			children: /* @__PURE__ */ jsx(TooltipArrow, {})
@@ -10107,7 +10600,7 @@ const XLoaderSvg = ({ className }) => {
 		]
 	});
 };
-const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel, loaderType = "circle",...props }) => {
+const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel, loaderType = "circle", ...props }) => {
 	const stringFormatter = useLocalizedStringFormatter(intlMessages, "marigold");
 	const className = useClassNames({
 		component: "Loader",
@@ -10160,7 +10653,7 @@ const LoaderSection = (props) => {
 		children: /* @__PURE__ */ jsx(BaseLoader, { ...props })
 	});
 };
-const Loader = ({ mode, variant,...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx(LoaderFullScreen, {
+const Loader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx(LoaderFullScreen, {
 	variant: variant ?? "inverted",
 	...props
 }) : mode === "section" ? /* @__PURE__ */ jsx(LoaderSection, {
@@ -10171,6 +10664,50 @@ const Loader = ({ mode, variant,...props }) => mode === "fullscreen" ? /* @__PUR
 	...props
 });
 
+//#endregion
+//#region src/ToggleButton/Context.tsx
+const ToggleButtonContext = createContext({});
+
+//#endregion
+//#region src/ToggleButton/ToggleButtonGroup.tsx
+const _ToggleButtonGroup = ({ children, disabled, variant, size: size$1, ...props }) => {
+	const classNames$2 = useClassNames({
+		component: "ToggleButton",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ jsx(ToggleButtonContext.Provider, {
+		value: {
+			variant,
+			size: size$1
+		},
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
+			className: classNames$2.group,
+			isDisabled: disabled,
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/ToggleButton/ToggleButton.tsx
+const _ToggleButton = ({ children, selected, disabled, variant, size: size$1, ...props }) => {
+	const context = useContext(ToggleButtonContext);
+	return /* @__PURE__ */ jsx(ToggleButton, {
+		isSelected: selected,
+		isDisabled: disabled,
+		className: useClassNames({
+			component: "ToggleButton",
+			variant: variant ?? context.variant,
+			size: size$1 ?? context.size
+		}).button,
+		...props,
+		children
+	});
+};
+_ToggleButton.Group = _ToggleButtonGroup;
+
 //#endregion
 //#region src/utils/form.utils.ts
 /**
@@ -10188,4 +10725,4 @@ const parseFormData = (e$1) => {
 };
 
 //#endregion
-export { Accordion, AccordionItem, ActionMenu, Aside, Aspect, _Autocomplete as Autocomplete, Badge, _Breadcrumbs as Breadcrumbs, Breakout, _Button as Button, _Calendar as Calendar, Card, Center, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, CloseButton, Collapsible, Columns, _ComboBox as ComboBox, ConfirmationContext, ConfirmationDialog, ConfirmationProvider, Container, _ContextualHelp as ContextualHelp, _DateField as DateField, DateFormat, _DatePicker as DatePicker, _Dialog as Dialog, _Divider as Divider, Drawer, FieldBase, FileField, _Form as Form, Grid, _Headline as Headline, HelpText, I18nProvider, IconButton, Inline, _Input as Input, Inset, _Label as Label, _Link as Link, _LinkButton as LinkButton, List, _ListBox as ListBox, _ListBoxItem as ListBoxItem, Loader, MarigoldProvider, _Menu as Menu, _Modal as Modal, Multiselect, NonModal, _NumberField as NumberField, NumericFormat, OverlayContainerProvider, _Pagination as Pagination, _Popover as Popover, ProgressCircle, ProgressCircleSvg, _Radio as Radio, _RadioGroup as RadioGroup, RouterProvider, Scrollable, _SearchField as SearchField, SearchInput, SectionMessage, Select, _SelectList as SelectList, _SelectListItem as SelectListItem, _Slider as Slider, Split, Stack, _Switch as Switch, Table, _Tabs as Tabs, _Tag as Tag, _TagGroup as TagGroup, _Text as Text, _TextArea as TextArea, _TextField as TextField, ThemeProvider, Tiles, _TimeField as TimeField, Toast, ToastProvider, _Tooltip as Tooltip, Underlay, VisuallyHidden, parseFormData, useAsyncList, useConfirmation, useListData, useTheme, useToast };
+export { Accordion, AccordionItem, ActionBar, ActionButton, ActionMenu, Aside, Aspect, _Autocomplete as Autocomplete, Badge, _Breadcrumbs as Breadcrumbs, Breakout, _Button as Button, _Calendar as Calendar, Card, Center, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, CloseButton, Collapsible, Columns, _ComboBox as ComboBox, ConfirmationContext, ConfirmationDialog, ConfirmationProvider, Container, _ContextualHelp as ContextualHelp, _DateField as DateField, DateFormat, _DatePicker as DatePicker, _Dialog as Dialog, _Divider as Divider, Drawer, EmptyState, FieldBase, FileField, _Form as Form, Grid, _Headline as Headline, HelpText, I18nProvider, IconButton, Inline, _Input as Input, Inset, _Label as Label, _Link as Link, _LinkButton as LinkButton, List, _ListBox as ListBox, _ListBoxItem as ListBoxItem, Loader, MarigoldProvider, _Menu as Menu, _Modal as Modal, Multiselect, NonModal, _NumberField as NumberField, NumericFormat, OverlayContainerProvider, _Pagination as Pagination, _Popover as Popover, ProgressCircle, ProgressCircleSvg, _Radio as Radio, _RadioGroup as RadioGroup, RouterProvider, Scrollable, _SearchField as SearchField, SearchInput, SectionMessage, Select, _SelectList as SelectList, _SelectListItem as SelectListItem, _Slider as Slider, Split, Stack, _Switch as Switch, Table, _Tabs as Tabs, _Tag as Tag, TagField, _TagGroup as TagGroup, _Text as Text, _TextArea as TextArea, _TextField as TextField, ThemeProvider, Tiles, _TimeField as TimeField, Toast, ToastProvider, _ToggleButton as ToggleButton, _ToggleButtonGroup as ToggleButtonGroup, _Tooltip as Tooltip, Tray, Underlay, VisuallyHidden, parseFormData, useAsyncList, useConfirmation, useDragAndDrop, useListData, useTheme, useToast };