@marigold/components 16.1.0 → 17.0.1

package/dist/index.cjs

@@ -26,12 +26,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-let __marigold_system = require("@marigold/system");
+const require_Checkbox = require('./Checkbox-DIbAWlSt.cjs');
 let react_aria_components = require("react-aria-components");
+let __marigold_system = require("@marigold/system");
 let react = require("react");
 react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let __react_aria_i18n = require("@react-aria/i18n");
+let __react_aria_collections = require("@react-aria/collections");
+let motion_react = require("motion/react");
 let __internationalized_date = require("@internationalized/date");
 let __react_aria_calendar = require("@react-aria/calendar");
 let __react_aria_utils = require("@react-aria/utils");
@@ -44,9 +47,6 @@ let __react_aria_ssr = require("@react-aria/ssr");
 let react_dom = require("react-dom");
 let __react_aria_label = require("@react-aria/label");
 let __react_aria_button = require("@react-aria/button");
-let __react_aria_table = require("@react-aria/table");
-let __react_stately_table = require("@react-stately/table");
-let __react_stately_data = require("@react-stately/data");
 let __react_aria_visually_hidden = require("@react-aria/visually-hidden");
 
 //#region src/Accordion/AccordionContext.tsx
@@ -160,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__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
+});
+
+//#endregion
+//#region src/CloseButton/CloseButton.tsx
+const CloseButton = (0, react.forwardRef)(({ className, size: size$1, variant, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		ref,
+		className: (0, __marigold_system.useClassNames)({
+			component: "CloseButton",
+			className,
+			size: size$1,
+			variant
+		}),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, {})
+	});
+});
+
+//#endregion
+//#region src/Text/Text.tsx
+const _Text = ({ variant, size: size$1, color, align, cursor: cursor$1, weight, fontSize, fontStyle, lineHeight, wrap, whiteSpace, children, as = "div", ...props }) => {
+	const classNames$2 = (0, __marigold_system.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 ? react_aria_components.Text : as;
+	const elementType = props.slot ? { elementType: as } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component$1, {
+		...props,
+		...elementType,
+		className: (0, __marigold_system.cn)("max-w-(--maxTextWidth)", classNames$2, fontStyle && __marigold_system.textStyle[fontStyle], align && __marigold_system.textAlign[align], cursor$1 && __marigold_system.cursorStyle[cursor$1], weight && __marigold_system.fontWeight[weight], fontSize && __marigold_system.textSize[fontSize], lineHeight && __marigold_system.lineHeight[lineHeight], wrap && __marigold_system.textWrap[wrap], whiteSpace && __marigold_system.whiteSpace[whiteSpace]),
+		style: { color: color && (0, __marigold_system.ensureCssVar)(color, "color") },
+		children
+	});
+};
+
+//#endregion
+//#region src/ActionBar/ActionButton.tsx
+const ActionButton = ({ onPress, children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		onPress,
+		className: (0, __marigold_system.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 = (0, __marigold_system.useClassNames)({
+		component: "ActionBar",
+		variant,
+		size: size$1
+	});
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	const isHidden = selectedItemCount === 0;
+	const countText = selectedItemCount === "all" ? "All items selected" : `${selectedItemCount} selected`;
+	if (isHidden) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		id,
+		className: (0, __marigold_system.cn)("z-30", classNames$2.container),
+		role: "toolbar",
+		"aria-label": stringFormatter.format("bulkActionsAriaLabel"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames$2.count,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Text, { children: countText })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames$2.actions,
+				children
+			}),
+			onClearSelection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButton, {
+				"aria-label": stringFormatter.format("clearSelectionAriaLabel"),
+				onPress: onClearSelection,
+				className: classNames$2.clearButton
+			})
+		]
+	});
+};
+ActionBar.Button = ActionButton;
+
 //#endregion
 //#region src/Aside/Aside.tsx
 /**
@@ -205,121 +311,15 @@ const Aspect = ({ ratio = "square", maxWidth, children }) => {
 const Center = ({ maxWidth = "100%", space = 0, children, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
-		className: (0, __marigold_system.cn)("ms-[auto] me-[auto] box-content flex flex-col items-center justify-center", __marigold_system.gapSpace[space], "max-w-(--maxWidth)"),
-		style: (0, __marigold_system.createVar)({ maxWidth }),
-		children
-	});
-};
-
-//#endregion
-//#region src/icons/TriangleAlert.tsx
-const TriangleAlert = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
-	...props,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
-	]
-});
-
-//#endregion
-//#region src/HelpText/HelpText.tsx
-const HelpText = ({ variant, size: size$1, description, errorMessage, ...props }) => {
-	const classNames$2 = (0, __marigold_system.useClassNames)({
-		component: "HelpText",
-		variant,
-		size: size$1
-	});
-	const ctx = (0, react.useContext)(react_aria_components.FieldErrorContext);
-	if (!description && !ctx?.isInvalid) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __marigold_system.cn)(classNames$2.container),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center justify-start gap-1",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, __marigold_system.cn)("h-4 w-4 shrink-0", classNames$2.icon) }), msg]
-				}, idx)) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-start justify-start gap-1",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, __marigold_system.cn)("h-4 w-4 shrink-0", classNames$2.icon) }), messages]
-				});
-			}
-		}), ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Text, {
-			slot: "description",
-			children: description
-		})]
-	});
-};
-
-//#endregion
-//#region src/Label/Label.tsx
-const _Label = ({ size: size$1, variant, children, ...props }) => {
-	const className = (0, __marigold_system.useClassNames)({
-		component: "Label",
-		size: size$1,
-		variant
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Label, {
-		...props,
-		className: (0, __marigold_system.cn)(className, "inline-flex"),
+		className: (0, __marigold_system.cn)("mx-auto box-content flex flex-col items-center justify-center gap-y-(--space)", "max-w-(--maxWidth)"),
+		style: {
+			...(0, __marigold_system.createVar)({ maxWidth }),
+			...(0, __marigold_system.createSpacingVar)("space", `${space}`)
+		},
 		children
 	});
 };
 
-//#endregion
-//#region src/FieldBase/FieldBase.tsx
-const fixedForwardRef = react.forwardRef;
-const _FieldBase = (props, ref) => {
-	const { as: Component$1 = "div", children, label, size: size$1, variant, width = "full", description, errorMessage, className, ...rest } = props;
-	const classNames$2 = (0, __marigold_system.useClassNames)({
-		component: "Field",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component$1, {
-		ref,
-		className: (0, __marigold_system.cn)("group/field", "flex flex-col", __marigold_system.width[width], classNames$2, className),
-		"data-required": props.isRequired ? true : void 0,
-		"data-error": props.isInvalid ? true : void 0,
-		...rest,
-		children: [
-			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Label, {
-				variant,
-				size: size$1,
-				children: label
-			}) : null,
-			children,
-			/* @__PURE__ */ (0, react_jsx_runtime.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 }) => {
@@ -386,23 +386,6 @@ const Search = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (
 	})]
 });
 
-//#endregion
-//#region src/icons/X.tsx
-const X = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
-	...props,
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
-});
-
 //#endregion
 //#region src/Input/Input.tsx
 const _Input = (0, react.forwardRef)(({ type, icon, action, variant, size: size$1, className, ...props }, ref) => {
@@ -420,17 +403,17 @@ const _Input = (0, react.forwardRef)(({ type, icon, action, variant, size: size$
 		className: (0, __marigold_system.cn)("absolute right-0 cursor-pointer", classNames$2.action, action.props.className)
 	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "group/input relative flex items-center",
+		className: (0, __marigold_system.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Input, {
 				...props,
-				className: (0, __marigold_system.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: (0, __marigold_system.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
 		]
 	});
@@ -449,7 +432,10 @@ const SearchInput = (0, react.forwardRef)(({ className, loading, onClear, ...pro
 		type: "search",
 		className: (0, __marigold_system.cn)("[&::-webkit-search-cancel-button]:hidden", className?.input),
 		ref,
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { size: "16" }),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
+			"aria-hidden": "true",
+			size: "16"
+		}),
 		action: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircle, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
 			className: className?.action,
 			onPress: () => onClear?.(),
@@ -467,23 +453,6 @@ const SearchInput = (0, react.forwardRef)(({ className, loading, onClear, ...pro
 const ListBoxContext = (0, react.createContext)({});
 const useListBoxContext = () => (0, react.useContext)(ListBoxContext);
 
-//#endregion
-//#region src/icons/Check.tsx
-const Check = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
-	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" })
-});
-
 //#endregion
 //#region src/ListBox/ListBoxItem.tsx
 const _ListBoxItem = ({ ...props }) => {
@@ -494,7 +463,7 @@ const _ListBoxItem = ({ ...props }) => {
 		textValue: props.textValue ?? String(props.children),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "selection-indicator contents",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Check, {
 				size: 16,
 				strokeWidth: "3",
 				className: "hidden"
@@ -529,7 +498,7 @@ const _ListBox = (0, react.forwardRef)(({ variant, size: size$1, ...props }, ref
 			className: classNames$2.container,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ListBox, {
 				...props,
-				className: (0, __marigold_system.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]", classNames$2.list),
+				className: (0, __marigold_system.cn)("overflow-y-auto", classNames$2.list),
 				ref,
 				...listBoxProps,
 				children: props.children
@@ -540,31 +509,9 @@ const _ListBox = (0, react.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 = (0, __marigold_system.useClassNames)({
-		component: "Underlay",
-		size: size$1,
-		variant
-	});
-	const props = {
-		isOpen: open,
-		isDismissable: dismissable,
-		isKeyboardDismissDisabled: keyboardDismissable,
-		...rest
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ModalOverlay, {
-		className: ({ isEntering, isExiting }) => (0, __marigold_system.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 = (0, react.forwardRef)(({ keyboardDismissDisabled, placement, open, children, ...rest }, ref) => {
+const _Popover = (0, react.forwardRef)(({ keyboardDismissDisabled, placement, offset: offset$1 = 0, open, children, ...rest }, ref) => {
 	const props = {
 		isKeyboardDismissDisabled: keyboardDismissDisabled,
 		isOpen: open,
@@ -576,97 +523,272 @@ const _Popover = (0, react.forwardRef)(({ keyboardDismissDisabled, placement, op
 		variant: placement,
 		className: "min-w-(--trigger-width)"
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, __marigold_system.useSmallScreen)() ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Popover, {
-		ref,
-		...props,
-		className: (0, __marigold_system.cn)("fixed! top-auto! bottom-0! left-0! max-h-fit! w-full", classNames$2),
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Underlay, { open })]
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Popover, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Popover, {
 		ref,
 		...props,
-		className: classNames$2,
+		className: (0, __marigold_system.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 = (0, react.forwardRef)(({ children, variant, size: size$1, disabled, loading, fullWidth, ...props }, ref) => {
+	const classNames$2 = (0, __marigold_system.useClassNames)({
+		component: "Button",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		...props,
+		ref,
+		className: (0, __marigold_system.cn)(classNames$2, fullWidth ? "w-full" : void 0, loading && "cursor-progress!"),
+		isPending: loading,
+		isDisabled: disabled,
+		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "absolute",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircle, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "invisible flex gap-[inherit]",
+			children
+		})] }) : children
+	});
+});
+
+//#endregion
+//#region src/Tray/Context.tsx
+const TrayContext = (0, react.createContext)(null);
+const useTrayContext = () => (0, react.useContext)(TrayContext);
+
+//#endregion
+//#region src/Tray/TrayActions.tsx
+const TrayActions = ({ children }) => {
+	const { classNames: classNames$2 } = useTrayContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __marigold_system.cn)("[grid-area:actions]", classNames$2.actions),
+		children
+	});
 };
 
 //#endregion
-//#region src/Autocomplete/Autocomplete.tsx
-const AutocompleteInput = ({ loading, onSubmit, onClear, ref }) => {
-	const state = (0, react.useContext)(react_aria_components.ComboBoxStateContext);
-	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "ComboBox" });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
-		ref,
-		loading,
-		className: { action: (0, __marigold_system.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__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("[grid-area:content]", classNames$2.content, className),
+		children
 	});
 };
-const _Autocomplete = (0, react.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,
+
+//#endregion
+//#region src/Tray/TrayModal.tsx
+const MotionModal = motion_react.motion.create(react_aria_components.Modal);
+const MotionModalOverlay = motion_react.motion.create(react_aria_components.ModalOverlay);
+const inertiaTransition = {
+	type: "inertia",
+	bounceStiffness: 300,
+	bounceDamping: 40,
+	timeConstant: 300
+};
+const staticTransition = {
+	duration: .5,
+	ease: (0, motion_react.cubicBezier)(.32, .72, 0, 1)
+};
+const TrayModal = ({ open, onOpenChange, dismissable = true, keyboardDismissable = true, children }) => {
+	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "Tray" });
+	const state = (0, react.useContext)(react_aria_components.OverlayTriggerStateContext);
+	const h$1 = typeof window !== "undefined" ? window.innerHeight : 0;
+	const y$1 = (0, motion_react.useMotionValue)(h$1);
+	const handleOpenChange = (isOpen) => {
+		onOpenChange?.(isOpen);
+		if (!isOpen) state?.close();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children: open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionModalOverlay, {
+		isOpen: true,
+		onOpenChange: handleOpenChange,
+		isDismissable: dismissable,
+		isKeyboardDismissDisabled: !keyboardDismissable,
+		className: (0, __marigold_system.cn)(classNames$2.overlay),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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 (0, motion_react.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Header, {
+		className: (0, __marigold_system.cn)("[grid-area:title]", classNames$2.header),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Heading, {
+			slot: "title",
+			level: 2,
+			className: classNames$2.title,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/Tray/TrayTrigger.tsx
+const TrayTrigger = ({ open, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DialogTrigger, {
+	isOpen: open,
+	...props,
+	children
+});
+
+//#endregion
+//#region src/Tray/Tray.tsx
+const Tray = ({ open, onOpenChange, dismissable = true, keyboardDismissable = true, children, ...props }) => {
+	const state = (0, react.useContext)(react_aria_components.OverlayTriggerStateContext);
+	const isHidden = (0, __react_aria_collections.useIsHidden)();
+	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "Tray" });
+	const openState = open ?? state?.isOpen;
+	if (isHidden) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrayContext.Provider, {
+		value: { classNames: classNames$2 },
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrayContext.Provider, {
+		value: { classNames: classNames$2 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrayModal, {
+			open: openState,
+			dismissable,
+			onOpenChange,
+			keyboardDismissable,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Dialog, {
+				...props,
+				className: (0, __marigold_system.cn)("group/tray [grid-template-areas:'drag'_'title'_'content'_'actions']", classNames$2.container),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __marigold_system.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 = (0, react.useContext)(react_aria_components.ComboBoxStateContext);
+	const inputClassNames = (0, __marigold_system.useClassNames)({ component: "Input" });
+	const autocompleteClassNames = (0, __marigold_system.useClassNames)({ component: "Autocomplete" });
+	const displayText = state?.selectedItem?.textValue || "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: autocompleteClassNames.mobileTrigger,
+		"data-icon": "",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
+			"aria-hidden": "true",
+			size: "16",
+			className: (0, __marigold_system.cn)("pointer-events-none absolute z-10", inputClassNames.icon)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, __marigold_system.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-muted-foreground",
+				children: placeholder
+			})
+		})]
+	});
+};
+const MobileAutocomplete = ({ placeholder, label, emptyState, children, input }) => {
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray.Trigger, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		className: "group/trigger outline-none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileAutocompleteTrigger, { placeholder })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Title, { children: label }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray.Content, {
+			className: "flex flex-col gap-2",
+			children: [input, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
+				renderEmptyState: () => emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, { children: stringFormatter.format("noResultsFound") }),
+				children
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Actions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Button, {
+			slot: "close",
+			children: stringFormatter.format("close")
+		}) })
+	] })] });
+};
+
+//#endregion
+//#region src/Autocomplete/Autocomplete.tsx
+const AutocompleteInput = ({ loading, onSubmit, onClear, ref, autoFocus }) => {
+	const state = (0, react.useContext)(react_aria_components.ComboBoxStateContext);
+	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "ComboBox" });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
+		ref,
+		loading,
+		autoFocus,
+		className: { action: (0, __marigold_system.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 = (0, react.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 = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	const isSmallScreen = (0, __marigold_system.useSmallScreen)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.ComboBox,
 		ref,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteInput, {
+		children: isSmallScreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileAutocomplete, {
+			placeholder: rest.placeholder,
+			label: rest.label,
+			emptyState,
+			input: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteInput, {
+				loading,
+				onSubmit,
+				onClear,
+				ref,
+				autoFocus: true
+			}),
+			children
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutocompleteInput, {
 			loading,
 			onSubmit,
 			onClear,
@@ -674,23 +796,55 @@ const _Autocomplete = (0, react.forwardRef)(({ children, defaultValue, value, di
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
 			renderEmptyState: () => emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "16",
+			r: "1"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: "3",
+			y: "10",
+			width: "18",
+			height: "12",
+			rx: "2"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, __marigold_system.useClassNames)({
 			component: "Badge",
 			variant,
 			size: size$1
 		}),
 		...props,
-		children
+		children: [["master", "admin"].includes(variant ?? "") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lock, { size: 16 }), children]
 	});
 };
 
@@ -728,7 +882,7 @@ const IconButton = ({ className, children, variant, size: size$1, ...props }) =>
 //#endregion
 //#region src/Breadcrumbs/BreadcrumbEllipsis.tsx
 const BreadcrumbEllipsis = ({ hiddenItems = [], disabled = false }) => {
-	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages, "marigold");
 	const { container, item: menuItem } = (0, __marigold_system.useClassNames)({ component: "Menu" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.MenuTrigger, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
 		"aria-label": stringFormatter.format("hiddenBreadcrumbs"),
@@ -808,30 +962,6 @@ const Breakout = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("d
 	children
 });
 
-//#endregion
-//#region src/Button/Button.tsx
-const _Button = (0, react.forwardRef)(({ children, variant, size: size$1, disabled, loading, fullWidth, ...props }, ref) => {
-	const classNames$2 = (0, __marigold_system.useClassNames)({
-		component: "Button",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
-		...props,
-		ref,
-		className: (0, __marigold_system.cn)(classNames$2, fullWidth ? "w-full" : void 0, loading && "cursor-progress!"),
-		isPending: loading,
-		isDisabled: disabled,
-		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "absolute",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircle, {})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "invisible flex gap-[inherit]",
-			children
-		})] }) : children
-	});
-});
-
 //#endregion
 //#region src/Calendar/CalendarGridHeader.tsx
 function CalendarGridHeader(props) {
@@ -865,9 +995,10 @@ function CalendarGridHeader(props) {
 
 //#endregion
 //#region src/Calendar/CalendarGrid.tsx
-const _CalendarGrid = () => {
+const _CalendarGrid = ({ offset: offset$1 }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "Calendar" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.CalendarGrid, {
+		offset: offset$1,
 		className: classNames$2.calendarGrid,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarGridHeader, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.CalendarCell, {
 			date,
@@ -877,8 +1008,8 @@ const _CalendarGrid = () => {
 };
 
 //#endregion
-//#region src/icons/ChevronsVertical.tsx
-const ChevronsVertical = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+//#region src/icons/ChevronLeft.tsx
+const ChevronLeft = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
@@ -890,13 +1021,75 @@ const ChevronsVertical = ({ size: size$1 = 24, className, ...props }) => /* @__P
 	strokeLinejoin: "round",
 	className: (0, __marigold_system.cn)("shrink-0", className),
 	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 15l5 5 5-5M7 9l5-5 5 5" })
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 18-6-6 6-6" })
 });
 
 //#endregion
 //#region src/Calendar/Context.tsx
-const CalendarContext = (0, react.createContext)({});
-const useCalendarContext = () => (0, react.useContext)(CalendarContext);
+const CalendarContext = (0, react.createContext)(null);
+const useCalendarContext = () => {
+	const ctx = (0, react.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 = (0, react.useContext)(react_aria_components.CalendarStateContext);
+	const { classNames: classNames$2 } = useCalendarContext();
+	const monthFormatter = (0, __react_aria_i18n.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mb-4 flex min-h-[36px] items-center justify-between",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1",
+				children: showPrevious && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+					className: (0, __marigold_system.cn)("inline-flex items-center justify-center gap-[0.5ch]", classNames$2.calendarControllers),
+					variant: "navigation",
+					slot: "previous",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, { size: "20" })
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Heading, {
+				className: "text-sm font-medium",
+				children: formattedMonth
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-1 justify-end",
+				children: showNext && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+					className: (0, __marigold_system.cn)("inline-flex items-center justify-center gap-[0.5ch]", classNames$2.calendarControllers),
+					variant: "navigation",
+					slot: "next",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { size: "20" })
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/icons/ChevronsVertical.tsx
+const ChevronsVertical = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 15l5 5 5-5M7 9l5-5 5 5" })
+});
 
 //#endregion
 //#region src/Calendar/useFormattedMonths.tsx
@@ -934,23 +1127,6 @@ const CalendarListBox = ({ type, isDisabled, setSelectedDropdown }) => {
 	});
 };
 
-//#endregion
-//#region src/icons/ChevronLeft.tsx
-const ChevronLeft = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
-	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 18-6-6 6-6" })
-});
-
 //#endregion
 //#region src/Calendar/MonthControls.tsx
 function MonthControls() {
@@ -1046,350 +1222,138 @@ const YearListBox = ({ setSelectedDropdown, minValue, maxValue }) => {
 		format: (year) => formatter.format(year.toDate(state.timeZone))
 	});
 };
-var YearListBox_default = YearListBox;
-
-//#endregion
-//#region src/Calendar/calendarListBoxSelectableCheck.ts
-function hasOnlyOneSelectableMonth(minValue, maxValue) {
-	if (!minValue || !maxValue || minValue.year !== maxValue.year) return false;
-	return maxValue.month - minValue.month === 0;
-}
-function hasOnlyOneSelectableYear(minValue, maxValue) {
-	if (!minValue || !maxValue || minValue.year !== maxValue.year) return false;
-	return true;
-}
-
-//#endregion
-//#region src/Calendar/Calendar.tsx
-const _Calendar = ({ disabled, readOnly, size: size$1, variant, width = "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 = (0, __marigold_system.useClassNames)({
-		component: "Calendar",
-		size: size$1,
-		variant
-	});
-	const [selectedDropdown, setSelectedDropdown] = (0, react.useState)();
-	const ViewMap = {
-		month: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthListBox_default, {
-			setSelectedDropdown,
-			minValue,
-			maxValue
-		}),
-		year: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearListBox_default, {
-			setSelectedDropdown,
-			minValue,
-			maxValue
-		})
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarContext.Provider, {
-		value: { classNames: classNames$2 },
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Calendar, {
-			className: (0, __marigold_system.cn)("relative flex min-h-[350px] flex-col rounded-xs p-4", __marigold_system.width[width], classNames$2.calendar),
-			...props,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __marigold_system.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, __marigold_system.cn)("flex flex-col", selectedDropdown && "pointer-events-none opacity-0"),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mb-4 flex items-center justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex w-fit gap-4",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarListBox, {
-							type: "month",
-							isDisabled: hasOnlyOneSelectableMonth(minValue, maxValue) || props.isDisabled,
-							setSelectedDropdown
-						}, "month"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarListBox, {
-							type: "year",
-							isDisabled: hasOnlyOneSelectableYear(minValue, maxValue) || props.isDisabled,
-							setSelectedDropdown
-						}, "year")]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthControls_default, {})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, __marigold_system.useClassNames)({
-		component: "Card",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		...props,
-		className: (0, __marigold_system.cn)("flex flex-col", classNames$2, __marigold_system.gapSpace[space], __marigold_system.paddingSpace !== void 0 && __marigold_system.paddingSpace[p$1], __marigold_system.paddingSpaceX !== void 0 && __marigold_system.paddingSpaceX[px], __marigold_system.paddingSpaceY !== void 0 && __marigold_system.paddingSpaceY[py], __marigold_system.paddingRight !== void 0 && __marigold_system.paddingRight[pr], __marigold_system.paddingLeft !== void 0 && __marigold_system.paddingLeft[pl], __marigold_system.paddingBottom !== void 0 && __marigold_system.paddingBottom[pb], __marigold_system.paddingTop !== void 0 && __marigold_system.paddingTop[pt]),
-		children
-	});
-};
-
-//#endregion
-//#region src/Collapsible/Context.tsx
-const CollapsibleContext = (0, react.createContext)(void 0);
-const CollapsibleProvider = ({ value, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleContext.Provider, {
-	value,
-	children
-});
-
-//#endregion
-//#region src/Collapsible/CollapsibleContent.tsx
-const CollapsibleContent = ({ variant, size: size$1, children, ...props }) => {
-	const classNames$2 = (0, __marigold_system.useClassNames)({
-		component: "Collapsible",
-		variant,
-		size: size$1,
-		context: CollapsibleContext
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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 = (0, __marigold_system.useClassNames)({
-		component: "Collapsible",
-		variant,
-		size: size$1,
-		context: CollapsibleContext
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Heading, {
-		level,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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 = (0, __marigold_system.useClassNames)({
-		component: "Collapsible",
-		variant,
-		size: size$1
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleProvider, {
-		value: {
-			variant,
-			size: size$1
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Disclosure, {
-			...props,
-			className: (0, __marigold_system.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] = (0, react.useState)(defaultExpanded);
-	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
-	const count = `${react.Children.count(children)}`;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Collapsible, {
-		variant: "link",
-		unstyled,
-		isExpanded,
-		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible.Content, { children }), /* @__PURE__ */ (0, react_jsx_runtime.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 = react.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 = (0, react.createContext)(null);
-const useCheckboxGroupContext = () => (0, react.useContext)(CheckboxGroupContext);
-
-//#endregion
-//#region src/Checkbox/CheckboxGroup.tsx
-const CollapsibleGroup$1 = ({ children }) => {
-	const state = (0, react.useContext)(react_aria_components.CheckboxGroupStateContext);
-	if (!children || children.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(More, {
-		defaultExpanded: children.some((child) => (0, react.isValidElement)(child) && state.value.includes(child.props.value)),
-		showCount: true,
-		children
-	});
-};
-const _CheckboxGroup = ({ children, variant, size: size$1, required, disabled, readOnly, error, width, orientation = "vertical", collapseAt, ...rest }) => {
-	const classNames$2 = (0, __marigold_system.useClassNames)({
-		component: "Checkbox",
-		variant,
-		size: size$1,
-		className: { group: "gap-x-2" }
-	});
-	const props = {
-		className: classNames$2.group,
-		isRequired: required,
-		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isInvalid: error,
-		...rest
-	};
-	const [visibleChildren, collapsedChildren] = splitChildren(children, collapseAt);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
-		as: react_aria_components.CheckboxGroup,
-		width,
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			role: "presentation",
-			"data-orientation": orientation,
-			className: (0, __marigold_system.cn)(classNames$2.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CheckboxGroupContext.Provider, {
-				value: {
-					width,
-					variant,
-					size: size$1
-				},
-				children: [visibleChildren, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleGroup$1, { children: collapsedChildren })]
-			})
-		})
-	});
-};
-
-//#endregion
-//#region src/icons/Minus.tsx
-const Minus = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
-	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" })
-});
-
-//#endregion
-//#region src/Checkbox/Checkbox.tsx
-const Field = ({ description, children }) => {
-	const className = (0, __marigold_system.useClassNames)({ component: "Field" });
-	const descriptionId = (0, __react_aria_utils.useId)();
-	if (!description) return children;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Provider, {
-			values: [[react_aria_components.CheckboxContext, { "aria-describedby": descriptionId }], [react_aria_components.TextContext, { id: descriptionId }]],
-			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpText, { description })]
-		})
-	});
-};
-const Icon$1 = ({ className, checked, indeterminate, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"aria-hidden": "true",
-		className: (0, __marigold_system.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__ */ (0, react_jsx_runtime.jsx)(Minus, {
-			size: "12",
-			strokeWidth: "4"
-		}) : checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, {
-			size: "12",
-			strokeWidth: "4"
-		}) : null
-	});
-};
-const _Checkbox = (0, react.forwardRef)(({ error, disabled, readOnly, required, checked, defaultChecked, indeterminate, variant, size: size$1, label, description, ...rest }, ref) => {
+var YearListBox_default = YearListBox;
+
+//#endregion
+//#region src/Calendar/calendarListBoxSelectableCheck.ts
+function hasOnlyOneSelectableMonth(minValue, maxValue) {
+	if (!minValue || !maxValue || minValue.year !== maxValue.year) return false;
+	return maxValue.month - minValue.month === 0;
+}
+function hasOnlyOneSelectableYear(minValue, maxValue) {
+	if (!minValue || !maxValue || minValue.year !== maxValue.year) return false;
+	return true;
+}
+
+//#endregion
+//#region src/Calendar/Calendar.tsx
+const _Calendar = ({ disabled, readOnly, size: size$1, variant, width = "fit", dateUnavailable, minValue, maxValue, visibleDuration = { months: 1 }, pageBehavior = "visible", ...rest }) => {
+	const visibleMonths = visibleDuration?.months ?? 1;
+	const isMultiMonth = visibleMonths > 1;
 	const props = {
-		isIndeterminate: indeterminate,
 		isDisabled: disabled,
 		isReadOnly: readOnly,
-		isRequired: required,
-		isInvalid: error,
-		isSelected: checked,
-		defaultSelected: defaultChecked,
+		isDateUnavailable: dateUnavailable,
+		minValue,
+		maxValue,
+		visibleDuration,
+		pageBehavior,
 		...rest
 	};
-	const group = useCheckboxGroupContext();
 	const classNames$2 = (0, __marigold_system.useClassNames)({
-		component: "Checkbox",
-		variant: variant || group?.variant,
-		size: size$1 || group?.size
+		component: "Calendar",
+		size: size$1,
+		variant
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-		description,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Checkbox, {
-			ref,
-			className: (0, __marigold_system.cn)("group/checkbox flex items-center", "cursor-pointer data-disabled:cursor-not-allowed", classNames$2.container),
+	const [selectedDropdown, setSelectedDropdown] = (0, react.useState)();
+	const ViewMap = {
+		month: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthListBox_default, {
+			setSelectedDropdown,
+			minValue,
+			maxValue
+		}),
+		year: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearListBox_default, {
+			setSelectedDropdown,
+			minValue,
+			maxValue
+		})
+	};
+	if (isMultiMonth) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarContext.Provider, {
+		value: {
+			classNames: classNames$2,
+			visibleMonths,
+			minValue,
+			maxValue,
+			disabled
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Calendar, {
+			className: (0, __marigold_system.cn)("relative flex min-h-[350px] flex-col", __marigold_system.width[width], classNames$2.calendar),
 			...props,
-			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, {
-				checked: isSelected,
-				indeterminate: isIndeterminate,
-				className: classNames$2.checkbox
-			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: classNames$2.label,
-				children: label
-			})] })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __marigold_system.cn)("flex gap-4", classNames$2.calendarContainer),
+				children: [...Array(visibleMonths).keys()].map((i$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, __marigold_system.cn)("flex-1", classNames$2.calendarMonth),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarHeader, {
+						monthOffset: i$1,
+						showPrevious: i$1 === 0,
+						showNext: i$1 === visibleMonths - 1
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_CalendarGrid, { offset: { months: i$1 } })]
+				}, i$1))
+			})
 		})
 	});
-});
-_Checkbox.Group = _CheckboxGroup;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarContext.Provider, {
+		value: {
+			classNames: classNames$2,
+			visibleMonths,
+			minValue,
+			maxValue,
+			disabled
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Calendar, {
+			className: (0, __marigold_system.cn)("relative flex min-h-[350px] flex-col", __marigold_system.width[width], classNames$2.calendar),
+			...props,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __marigold_system.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, __marigold_system.cn)("flex flex-col", selectedDropdown && "pointer-events-none opacity-0"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mb-4 flex items-center justify-between",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex w-fit gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarListBox, {
+							type: "month",
+							isDisabled: hasOnlyOneSelectableMonth(minValue, maxValue) || props.isDisabled,
+							setSelectedDropdown
+						}, "month"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarListBox, {
+							type: "year",
+							isDisabled: hasOnlyOneSelectableYear(minValue, maxValue) || props.isDisabled,
+							setSelectedDropdown
+						}, "year")]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthControls_default, {})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_CalendarGrid, {})]
+			})]
+		})
+	});
+};
 
 //#endregion
-//#region src/CloseButton/CloseButton.tsx
-const CloseButton = (0, react.forwardRef)(({ className, size: size$1, variant, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
-		ref,
-		className: (0, __marigold_system.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 = (0, __marigold_system.useClassNames)({
+		component: "Card",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, {})
+		className: (0, __marigold_system.cn)("flex flex-col gap-y-(--space)", stretch ? "" : "w-fit", classNames$2, __marigold_system.paddingSpace !== void 0 && __marigold_system.paddingSpace[p$1], __marigold_system.paddingSpaceX !== void 0 && __marigold_system.paddingSpaceX[px], __marigold_system.paddingSpaceY !== void 0 && __marigold_system.paddingSpaceY[py], __marigold_system.paddingRight !== void 0 && __marigold_system.paddingRight[pr], __marigold_system.paddingLeft !== void 0 && __marigold_system.paddingLeft[pl], __marigold_system.paddingBottom !== void 0 && __marigold_system.paddingBottom[pb], __marigold_system.paddingTop !== void 0 && __marigold_system.paddingTop[pt]),
+		style: (0, __marigold_system.createSpacingVar)("space", `${space}`),
+		children
 	});
-});
+};
 
 //#endregion
 //#region src/Columns/Columns.tsx
 const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children, ...props }) => {
 	if (react.Children.count(children) !== columns.length) throw new Error(`Columns: expected ${columns.length} children, got ${react.Children.count(children)}`);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __marigold_system.cn)("flex flex-wrap items-stretch", stretch && "h-full", __marigold_system.gapSpace[space]),
+		className: (0, __marigold_system.cn)("flex flex-wrap items-stretch gap-(--space)", stretch && "h-full"),
+		style: (0, __marigold_system.createSpacingVar)("space", `${space}`),
 		...props,
 		children: react.Children.map(children, (child, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, __marigold_system.cn)(columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)", "basis-[calc((var(--collapseAt)_-_100%)_*_999)]"),
+			className: (0, __marigold_system.cn)(columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)", "basis-[calc((var(--collapseAt)-100%)*999)]"),
 			style: (0, __marigold_system.createVar)({
 				collapseAt,
 				columnSize: columns[idx]
@@ -1399,6 +1363,48 @@ const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children, ..
 	});
 };
 
+//#endregion
+//#region src/ComboBox/MobileCombobox.tsx
+const MobileComboBoxTrigger = ({ placeholder }) => {
+	const state = (0, react.useContext)(react_aria_components.ComboBoxStateContext);
+	const inputClassNames = (0, __marigold_system.useClassNames)({ component: "Input" });
+	const comboBoxClassNames = (0, __marigold_system.useClassNames)({ component: "ComboBox" });
+	const displayText = state?.selectedItem?.textValue || "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: comboBoxClassNames.mobileTrigger,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, __marigold_system.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-muted-foreground",
+				children: placeholder
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, __marigold_system.cn)("absolute right-2 cursor-pointer", inputClassNames.action, comboBoxClassNames),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, { size: "16" })
+		})]
+	});
+};
+const MobileComboBox = ({ placeholder, label, emptyState, children }) => {
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray.Trigger, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		className: "group/trigger outline-none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileComboBoxTrigger, { placeholder })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Title, { children: label }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray.Content, {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Input, { autoFocus: true }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
+				renderEmptyState: () => emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, { children: stringFormatter.format("noResultsFound") }),
+				children
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Actions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Button, {
+			slot: "close",
+			children: stringFormatter.format("close")
+		}) })
+	] })] });
+};
+
 //#endregion
 //#region src/ComboBox/ComboBox.tsx
 const _ComboBox = (0, react.forwardRef)(({ variant, size: size$1, required, disabled, readOnly, error, defaultValue, value, emptyState, onChange, children, loading, ...rest }, ref) => {
@@ -1417,18 +1423,24 @@ const _ComboBox = (0, react.forwardRef)(({ variant, size: size$1, required, disa
 		variant,
 		size: size$1
 	});
-	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	const isSmallScreen = (0, __marigold_system.useSmallScreen)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.ComboBox,
 		ref,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Input, { action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
-			className: classNames$2,
+		children: isSmallScreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileComboBox, {
+			placeholder: rest.placeholder,
+			label: rest.label,
+			emptyState,
+			children
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Input, { action: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+			className: classNames$2.icon,
 			children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressCircle, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, { size: "16" })
 		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
 			renderEmptyState: () => emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, { children: stringFormatter.format("noResultsFound") }),
 			children
-		}) })]
+		}) })] })
 	});
 });
 _ComboBox.Option = _ListBox.Item;
@@ -1458,11 +1470,14 @@ const gridColumn = {
 };
 const Container = ({ contentLength = "default", align = "left", alignItems = "none", space = 0, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	...props,
-	className: (0, __marigold_system.cn)("grid", __marigold_system.placeItems[alignItems], gridColsAlign[align], gridColumn[align], __marigold_system.gapSpace[space]),
-	style: (0, __marigold_system.createVar)({
-		maxTextWidth: containerTextLength[contentLength],
-		maxHeadlineWidth: containerHeadlineLength[contentLength]
-	}),
+	className: (0, __marigold_system.cn)("grid gap-(--space)", __marigold_system.placeItems[alignItems], gridColsAlign[align], gridColumn[align]),
+	style: {
+		...(0, __marigold_system.createVar)({
+			maxTextWidth: containerTextLength[contentLength],
+			maxHeadlineWidth: containerHeadlineLength[contentLength]
+		}),
+		...(0, __marigold_system.createSpacingVar)("space", `${space}`)
+	},
 	children
 });
 
@@ -1520,11 +1535,11 @@ const Info = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0,
 //#region src/ContextualHelp/ContextualHelpContent.tsx
 const ContextualHelpContent = ({ children, variant, size: size$1 }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __marigold_system.useClassNames)({
+		className: (0, __marigold_system.cn)("min-h-0 overflow-y-auto [grid-area:content]", (0, __marigold_system.useClassNames)({
 			component: "ContextualHelp",
 			variant,
 			size: size$1
-		}).content,
+		}).content),
 		children
 	});
 };
@@ -1533,11 +1548,11 @@ const ContextualHelpContent = ({ children, variant, size: size$1 }) => {
 //#region src/ContextualHelp/ContextualHelpTitle.tsx
 const ContextualHelpTitle = ({ children, variant, size: size$1 }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Heading, {
-		className: (0, __marigold_system.useClassNames)({
+		className: (0, __marigold_system.cn)("[grid-area:title]", (0, __marigold_system.useClassNames)({
 			component: "ContextualHelp",
 			variant,
 			size: size$1
-		}).title,
+		}).title),
 		children
 	});
 };
@@ -1553,13 +1568,13 @@ const DialogTrigger$2 = ({ open, ...rest }) => /* @__PURE__ */ (0, react_jsx_run
 	...rest
 });
 const _ContextualHelp = (0, react.forwardRef)(({ children, variant = "help", size: size$1, width, 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 = (0, __marigold_system.useClassNames)({
 		component: "ContextualHelp",
 		variant,
 		size: size$1
 	});
-	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages);
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogTrigger$2, {
 		defaultOpen,
 		open,
@@ -1568,14 +1583,13 @@ const _ContextualHelp = (0, react.forwardRef)(({ children, variant = "help", siz
 			ref,
 			className: classNames$2.trigger,
 			"aria-label": ariaLabel ?? (variant === "info" ? stringFormatter.format("moreInfo") : stringFormatter.format("help")),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$2, { size: 20 })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Popover, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, { size: 20 })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, {
 			placement,
 			offset: offset$1,
-			className: classNames$2.popover,
-			[`data-${width ?? "medium"}`]: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Dialog, {
-				className: classNames$2.container,
+				className: (0, __marigold_system.cn)("grid [grid-template-areas:'title'_'content']", classNames$2.container),
+				[`data-${width ?? "medium"}`]: true,
 				children
 			})
 		})]
@@ -1683,10 +1697,10 @@ const _DateInput = ({ variant, size: size$1, action, onPaste, ...props }) => {
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Group, {
-		className: classNames$2.field,
+		className: (0, __marigold_system.cn)(classNames$2.field, "w-(--field-width) max-w-full min-w-0 overflow-hidden"),
 		onPaste: handlePaste,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DateInput, {
-			className: "flex flex-1 items-center",
+			className: (0, __marigold_system.cn)("flex flex-1 items-center", classNames$2.input),
 			...props,
 			children: (segment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_DateSegment, {
 				className: classNames$2.segment,
@@ -1699,7 +1713,7 @@ const _DateInput = ({ variant, size: size$1, action, onPaste, ...props }) => {
 //#endregion
 //#region src/DateField/DateField.tsx
 const _DateField = (0, react.forwardRef)(({ variant, size: size$1, action, disabled, required, error, readOnly, onChange, ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.DateField,
 		variant,
 		size: size$1,
@@ -1708,17 +1722,14 @@ const _DateField = (0, react.forwardRef)(({ variant, size: size$1, action, disab
 		isReadOnly: readOnly,
 		isInvalid: error,
 		isRequired: required,
+		onChange,
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateInputWithPasteWrapper, {
-			onChange,
-			action
-		})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateInputWithPasteWrapper, { action })
 	});
 });
-const DateInputWithPasteWrapper = ({ onChange, ...props }) => {
+const DateInputWithPasteWrapper = ({ ...props }) => {
 	const ctx = (0, react.useContext)(react_aria_components.DateFieldStateContext);
 	const onPaste = (date) => {
-		if (onChange) onChange(date);
 		ctx?.setValue(date);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_DateInput, {
@@ -1774,7 +1785,9 @@ const _DatePicker = (0, react.forwardRef)(({ dateUnavailable, disabled, required
 		size: size$1,
 		variant
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+	const isSmallScreen = (0, __marigold_system.useSmallScreen)();
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Checkbox.FieldBase, {
 		as: react_aria_components.DatePicker,
 		variant,
 		size: size$1,
@@ -1789,7 +1802,14 @@ const _DatePicker = (0, react.forwardRef)(({ dateUnavailable, disabled, required
 					"data-testid": "action"
 				})
 			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Dialog, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Calendar, { disabled }) }) })]
+		}), isSmallScreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Title, { children: rest.label }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Calendar, { disabled }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Actions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Button, {
+				slot: "close",
+				children: stringFormatter.format("close")
+			}) })
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Dialog, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Calendar, { disabled }) }) })]
 	});
 });
 const DatePickerWithPasteWrapper = ({ onChange, ...props }) => {
@@ -1804,6 +1824,28 @@ const DatePickerWithPasteWrapper = ({ onChange, ...props }) => {
 	});
 };
 
+//#endregion
+//#region src/Overlay/Underlay.tsx
+const Underlay = ({ size: size$1, variant, open, dismissable, keyboardDismissable, ...rest }) => {
+	const classNames$2 = (0, __marigold_system.useClassNames)({
+		component: "Underlay",
+		size: size$1,
+		variant
+	});
+	const props = {
+		isOpen: open,
+		isDismissable: dismissable,
+		isKeyboardDismissDisabled: keyboardDismissable,
+		...rest
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ModalOverlay, {
+		className: ({ isEntering, isExiting }) => (0, __marigold_system.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 = (0, react.forwardRef)(({ size: size$1, open, dismissable, keyboardDismissable, onOpenChange, children, ...props }, ref) => {
@@ -1846,7 +1888,7 @@ const DialogActions = ({ variant, size: size$1, children }) => {
 //#region src/Dialog/DialogContent.tsx
 const DialogContent = ({ variant, size: size$1, children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __marigold_system.cn)("min-h-0 overflow-auto [grid-area:content]", (0, __marigold_system.useClassNames)({
+		className: (0, __marigold_system.cn)("min-h-0 overflow-y-auto [grid-area:content]", (0, __marigold_system.useClassNames)({
 			component: "Dialog",
 			variant,
 			size: size$1
@@ -1944,7 +1986,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 stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages, "marigold");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Dialog, {
 		role: "alertdialog",
 		variant,
@@ -2189,7 +2231,7 @@ const NonModal = (0, react.forwardRef)(({ open, ...rest }, ref) => {
 //#region src/Drawer/DrawerModal.tsx
 const MobileModal = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ModalOverlay, {
 	...props,
-	className: "fixed inset-0 z-40 h-(--visual-viewport-height)",
+	className: "fixed inset-0 z-50 h-(--visual-viewport-height)",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Modal, {
 		className: "flex *:flex-1",
 		children
@@ -2271,7 +2313,7 @@ const Drawer = ({ children, size: size$1 = "medium", variant, open, keyboardDism
 				children: [closeButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButton, {
 					"aria-label": "dismiss drawer",
 					style: { "--i": 0 },
-					className: classNames$2.closeButton,
+					className: (0, __marigold_system.cn)("z-80", classNames$2.closeButton),
 					onPress: ctx?.close
 				}), children]
 			})
@@ -2283,14 +2325,106 @@ 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 = (0, __marigold_system.useClassNames)({
+		component: "EmptyState",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classNames$2.container,
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("ellipse", {
+						cx: "75.5",
+						cy: "70.8003",
+						rx: "75.5",
+						ry: "13.1577",
+						fill: "#EDECEC"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames$2.title,
+				children: title
+			}),
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames$2.description,
+				children: description
+			}),
+			action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames$2.action,
+				children: action
+			})
+		]
+	});
+};
+
 //#endregion
 //#region src/FileField/FileFieldItem.tsx
 const FileFieldItem = ({ children, onRemove }) => {
+	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "FileField" });
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages, "marigold");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "bg-background border-input flex items-center justify-between gap-2 rounded-lg border p-2 pe-3",
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButton, {
-			"aria-label": "Remove file",
-			onPress: onRemove
+		className: (0, __marigold_system.cn)("grid", classNames$2.item),
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __marigold_system.cn)("[grid-area:remove]", classNames$2.itemRemove),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButton, {
+				"aria-label": stringFormatter.format("removeFile"),
+				onPress: onRemove
+			})
 		})]
 	});
 };
@@ -2358,24 +2492,35 @@ const normalizeAndLimitFiles = (files, { accept, multiple }) => {
 
 //#endregion
 //#region src/FileField/FileField.tsx
-const FileField = ({ disabled = false, accept = ["*"], multiple = false, width, label, ...props }) => {
+const FileField = ({ disabled = false, accept = ["*"], multiple = false, width, label, name, ...props }) => {
 	const [files, setFiles] = (0, react.useState)(null);
-	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages);
+	const hiddenInputRef = (0, react.useRef)(null);
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.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 = {
@@ -2384,52 +2529,64 @@ const FileField = ({ disabled = false, accept = ["*"], multiple = false, width,
 		onSelect: handleSelect
 	};
 	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "FileField" });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Checkbox.FieldBase, {
 		as: "div",
 		width,
 		label,
 		className: classNames$2.container,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DropZone, {
-			onDrop: handleDrop,
-			isDisabled: disabled,
-			className: classNames$2.dropZone,
-			"data-testid": "dropzone",
-			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: classNames$2.dropZoneContent,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: classNames$2.dropZoneLabel,
-					children: dropZoneLabel
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_FileTrigger, {
-					...fileTriggerProps,
-					label: buttonLabel,
-					disabled
-				})]
-			})
-		}), files?.map((file, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileField.Item, {
-			onRemove: () => setFiles((prev$1) => (prev$1 ?? []).filter((_, i$1) => i$1 !== index$1)),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: classNames$2.item,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: classNames$2.itemLabel,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DropZone, {
+				onDrop: handleDrop,
+				isDisabled: disabled,
+				className: classNames$2.dropZone,
+				"data-testid": "dropzone",
+				...props,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: classNames$2.dropZoneContent,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: classNames$2.dropZoneLabel,
+						children: dropZoneLabel
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_FileTrigger, {
+						...fileTriggerProps,
+						label: buttonLabel,
+						disabled
+					})]
+				})
+			}),
+			files?.map((file, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FileField.Item, {
+				onRemove: () => {
+					const updated = (files ?? []).filter((_, i$1) => i$1 !== index$1);
+					setFiles(updated);
+					syncHiddenInput(updated);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, __marigold_system.cn)("[grid-area:label]", classNames$2.itemLabel),
 					children: file.name
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-					className: classNames$2.itemDescription,
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, __marigold_system.cn)("[grid-area:description]", classNames$2.itemDescription),
 					children: [(file.size / 1024 / 1024).toFixed(2), " MB"]
 				})]
+			}, index$1)),
+			name && /* @__PURE__ */ (0, react_jsx_runtime.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 = "full", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Form, {
+const _Form = (0, react.forwardRef)(({ unstyled, maxWidth = "full", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Form, {
 	...props,
+	ref,
 	className: (0, __marigold_system.cn)(__marigold_system.maxWidth[maxWidth], unstyled && "contents")
-});
+}));
 
 //#endregion
 //#region src/Grid/GridArea.tsx
@@ -2444,11 +2601,12 @@ 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 = "auto", space = 0, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __marigold_system.cn)("grid", alignX && __marigold_system.alignment?.horizontal?.alignmentX[alignX], alignY && __marigold_system.alignment?.horizontal?.alignmentY[alignY], __marigold_system.gapSpace[space], __marigold_system.height[height]),
+		className: (0, __marigold_system.cn)("grid gap-(--space)", alignX && __marigold_system.alignment?.horizontal?.alignmentX[alignX], alignY && __marigold_system.alignment?.horizontal?.alignmentY[alignY], __marigold_system.height[height]),
 		style: {
 			gridTemplateAreas: parseGridAreas(areas),
 			gridTemplateColumns: parseTemplateValue(columns),
-			gridTemplateRows: parseTemplateValue(rows)
+			gridTemplateRows: parseTemplateValue(rows),
+			...(0, __marigold_system.createSpacingVar)("space", `${space}`)
 		},
 		...props,
 		children
@@ -2458,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, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Headline",
 		variant,
@@ -2467,7 +2625,7 @@ const _Headline = ({ variant, size: size$1, children, align = "left", color, lev
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Heading, {
 		level: Number(level),
 		...props,
-		className: (0, __marigold_system.cn)(classNames$2, "max-w-(--maxHeadlineWidth)", __marigold_system.textAlign[align]),
+		className: (0, __marigold_system.cn)(classNames$2, "max-w-(--maxHeadlineWidth)", __marigold_system.textAlign[align], lineHeight && __marigold_system.lineHeight[lineHeight]),
 		style: { color: color && (0, __marigold_system.ensureCssVar)(color, "color") },
 		children
 	});
@@ -2632,6 +2790,8 @@ const _Menu = ({ children, label, variant, size: size$1, disabled, open, placeme
 		variant,
 		size: size$1
 	});
+	const isSmallScreen = (0, __marigold_system.useSmallScreen)();
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.MenuTrigger, {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
@@ -2639,7 +2799,18 @@ const _Menu = ({ children, label, variant, size: size$1, disabled, open, placeme
 			"aria-label": ariaLabel,
 			isDisabled: disabled,
 			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, {
+		}), isSmallScreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Title, { children: label }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Menu, {
+				...props,
+				className: classNames$2.container,
+				children
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Actions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Button, {
+				slot: "close",
+				children: stringFormatter.format("close")
+			}) })
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, {
 			open,
 			placement,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Menu, {
@@ -2814,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",
@@ -4420,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();
@@ -4430,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);
@@ -4513,7 +4684,7 @@ var require_extends = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 }));
 
 //#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
+//#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 = function jsx$1(type, props) {
@@ -4526,9 +4697,9 @@ var jsx = function jsx$1(type, props) {
 	for (var i$1 = 2; i$1 < argsLength; i$1++) createElementArgArray[i$1] = args[i$1];
 	return react.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx$156) {
+(function(_jsx$162) {
 	var JSX;
-	(function(_JSX) {})(JSX || (JSX = _jsx$156.JSX || (_jsx$156.JSX = {})));
+	(function(_JSX) {})(JSX || (JSX = _jsx$162.JSX || (_jsx$162.JSX = {})));
 })(jsx || (jsx = {}));
 function css$2() {
 	for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
@@ -4866,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" ? react.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",
@@ -5552,9 +5723,9 @@ var groupCSS = function groupCSS$1(_ref$1, unstyled) {
 		paddingTop: spacing.baseUnit * 2
 	};
 };
-var Group$1 = function Group$3(props) {
-	var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames$1 = props.getClassNames, Heading$6 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
-	return jsx("div", _extends({}, getStyleProps(props, "group", { group: true }), innerProps), jsx(Heading$6, _extends({}, headingProps, {
+var Group$4 = function Group$6(props) {
+	var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames$1 = props.getClassNames, Heading$7 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
+	return jsx("div", _extends({}, getStyleProps(props, "group", { group: true }), innerProps), jsx(Heading$7, _extends({}, headingProps, {
 		selectProps,
 		theme,
 		getStyles,
@@ -5584,7 +5755,7 @@ var GroupHeading = function GroupHeading$1(props) {
 	var innerProps = _objectWithoutProperties$1(_cleanCommonProps, _excluded$1);
 	return jsx("div", _extends({}, getStyleProps(props, "groupHeading", { "group-heading": true }), innerProps));
 };
-var Group$1$1 = Group$1;
+var Group$1$1 = Group$4;
 var _excluded$5 = [
 	"innerRef",
 	"isDisabled",
@@ -5696,7 +5867,7 @@ function MultiValueRemove$1(_ref5) {
 }
 var MultiValue$1 = function MultiValue(props) {
 	var children = props.children, components$1 = props.components, data = props.data, innerProps = props.innerProps, isDisabled = props.isDisabled, removeProps$1 = props.removeProps, selectProps = props.selectProps;
-	var Container$1 = components$1.Container, Label$2 = components$1.Label, Remove = components$1.Remove;
+	var Container$1 = components$1.Container, Label$1 = components$1.Label, Remove = components$1.Remove;
 	return jsx(Container$1, {
 		data,
 		innerProps: _objectSpread2$1(_objectSpread2$1({}, getStyleProps(props, "multiValue", {
@@ -5704,7 +5875,7 @@ var MultiValue$1 = function MultiValue(props) {
 			"multi-value--is-disabled": isDisabled
 		})), innerProps),
 		selectProps
-	}, jsx(Label$2, {
+	}, jsx(Label$1, {
 		data,
 		innerProps: _objectSpread2$1({}, getStyleProps(props, "multiValueLabel", { "multi-value__label": true })),
 		selectProps
@@ -5850,7 +6021,7 @@ var require_memoize_one_cjs = /* @__PURE__ */ __commonJSMin(((exports, module) =
 }));
 
 //#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).";
@@ -7780,7 +7951,7 @@ var Select$1 = /* @__PURE__ */ function(_Component) {
 			key: "renderMenu",
 			value: function renderMenu() {
 				var _this4 = this;
-				var _this$getComponents7 = this.getComponents(), Group$3 = _this$getComponents7.Group, GroupHeading$1 = _this$getComponents7.GroupHeading, Menu$3 = _this$getComponents7.Menu, MenuList$1 = _this$getComponents7.MenuList, MenuPortal$1 = _this$getComponents7.MenuPortal, LoadingMessage$1 = _this$getComponents7.LoadingMessage, NoOptionsMessage$1 = _this$getComponents7.NoOptionsMessage, Option = _this$getComponents7.Option;
+				var _this$getComponents7 = this.getComponents(), Group$6 = _this$getComponents7.Group, GroupHeading$1 = _this$getComponents7.GroupHeading, Menu$3 = _this$getComponents7.Menu, MenuList$1 = _this$getComponents7.MenuList, MenuPortal$1 = _this$getComponents7.MenuPortal, LoadingMessage$1 = _this$getComponents7.LoadingMessage, NoOptionsMessage$1 = _this$getComponents7.NoOptionsMessage, Option = _this$getComponents7.Option;
 				var commonProps = this.commonProps;
 				var focusedOption = this.state.focusedOption;
 				var _this$props12 = this.props, captureMenuScroll = _this$props12.captureMenuScroll, inputValue = _this$props12.inputValue, isLoading = _this$props12.isLoading, loadingMessage = _this$props12.loadingMessage, minMenuHeight = _this$props12.minMenuHeight, maxMenuHeight = _this$props12.maxMenuHeight, menuIsOpen = _this$props12.menuIsOpen, menuPlacement = _this$props12.menuPlacement, menuPosition = _this$props12.menuPosition, menuPortalTarget = _this$props12.menuPortalTarget, menuShouldBlockScroll = _this$props12.menuShouldBlockScroll, menuShouldScrollIntoView = _this$props12.menuShouldScrollIntoView, noOptionsMessage = _this$props12.noOptionsMessage, onMenuScrollToTop = _this$props12.onMenuScrollToTop, onMenuScrollToBottom = _this$props12.onMenuScrollToBottom;
@@ -7823,7 +7994,7 @@ var Select$1 = /* @__PURE__ */ function(_Component) {
 						var _data = item.data, options$1 = item.options, groupIndex = item.index;
 						var groupId = "".concat(_this4.getElementId("group"), "-").concat(groupIndex);
 						var headingId = "".concat(groupId, "-heading");
-						return /* @__PURE__ */ react.createElement(Group$3, _extends({}, commonProps, {
+						return /* @__PURE__ */ react.createElement(Group$6, _extends({}, commonProps, {
 							key: groupId,
 							data: _data,
 							options: options$1,
@@ -8401,7 +8572,7 @@ var require_taggedTemplateLiteral = /* @__PURE__ */ __commonJSMin(((exports, mod
 }));
 
 //#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
+//#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();
@@ -8466,6 +8637,9 @@ const getClassNames = (classNames$2) => ({
 	placeholder: () => "hidden",
 	valueContainer: () => classNames$2.valueContainer
 });
+/**
+* @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, ...rest }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "MultiSelect",
@@ -8509,7 +8683,7 @@ const Multiselect = ({ disabled, readOnly = false, items, selectedItems, default
 			"data-invalid": error,
 			"data-readonly": readOnly,
 			children: [
-				props.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Label, {
+				props.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Label, {
 					...labelProps,
 					children: props.label
 				}),
@@ -8522,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) => ({
@@ -8555,7 +8729,7 @@ const Multiselect = ({ disabled, readOnly = false, items, selectedItems, default
 						})
 					}
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpText, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.HelpText, {
 					description,
 					errorMessage
 				})
@@ -8584,11 +8758,11 @@ const Plus = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0,
 //#endregion
 //#region src/NumberField/StepButton.tsx
 const _StepButton = ({ direction, className, ...props }) => {
-	const Icon$2 = direction === "up" ? Plus : Minus;
+	const Icon$1 = direction === "up" ? Plus : require_Checkbox.Minus;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
 		className: (0, __marigold_system.cn)(["flex items-center justify-center", "cursor-pointer data-disabled:cursor-not-allowed"], className),
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$2, { size: 16 })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, { size: 16 })
 	});
 };
 
@@ -8608,13 +8782,13 @@ const _NumberField = (0, react.forwardRef)(({ variant, size: size$1, disabled, r
 		...rest
 	};
 	const showStepper = !hideStepper && !readOnly;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.NumberField,
 		...props,
 		"data-readonly": readOnly ? "true" : void 0,
 		"data-stepper": showStepper ? "true" : void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Group, {
-			className: (0, __marigold_system.cn)("flex items-stretch", classNames$2.group),
+			className: (0, __marigold_system.cn)("flex w-(--field-width) max-w-full min-w-0 items-stretch", classNames$2.group),
 			children: [
 				showStepper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_StepButton, {
 					className: classNames$2.stepper,
@@ -8836,7 +9010,7 @@ const useRadioGroupContext = () => (0, react.useContext)(RadioGroupContext);
 const CollapsibleGroup = ({ children }) => {
 	const state = (0, react.useContext)(react_aria_components.RadioGroupStateContext);
 	if (!children || children.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(More, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.More, {
 		defaultExpanded: children.some((child) => (0, react.isValidElement)(child) && state.selectedValue === child.props.value),
 		showCount: true,
 		children
@@ -8855,8 +9029,8 @@ const _RadioGroup = ({ variant, size: size$1, label, error, disabled, required,
 		isInvalid: error,
 		...rest
 	};
-	const [visibleChildren, collapsedChildren] = splitChildren(children, collapseAt);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+	const [visibleChildren, collapsedChildren] = require_Checkbox.splitChildren(children, collapseAt);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.RadioGroup,
 		width,
 		label,
@@ -8918,7 +9092,7 @@ _Radio.Group = _RadioGroup;
 //#region src/Scrollable/Scrollable.tsx
 const Scrollable = ({ children, width = "full", height, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	...props,
-	className: (0, __marigold_system.cn)(["sticky h-(--height) overflow-auto overscroll-none", __marigold_system.width[width]]),
+	className: (0, __marigold_system.cn)(["sticky h-(--height) overflow-auto overscroll-auto", __marigold_system.width[width]]),
 	style: (0, __marigold_system.createVar)({ height }),
 	children
 });
@@ -8926,7 +9100,7 @@ const Scrollable = ({ children, width = "full", height, ...props }) => /* @__PUR
 //#endregion
 //#region src/SearchField/SearchField.tsx
 const _SearchField = (0, react.forwardRef)(({ disabled, required, readOnly, error, ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.SearchField,
 		...rest,
 		isDisabled: disabled,
@@ -9027,7 +9201,7 @@ const icons$1 = {
 	success: CircleCheck,
 	info: Info,
 	warning: CircleAlert,
-	error: TriangleAlert
+	error: require_Checkbox.TriangleAlert
 };
 const SectionMessage = ({ variant = "info", size: size$1, children, closeButton, close, onCloseChange, ...props }) => {
 	const buttonRef = (0, react.useRef)(null);
@@ -9036,7 +9210,7 @@ const SectionMessage = ({ variant = "info", size: size$1, children, closeButton,
 		variant,
 		size: size$1
 	});
-	const Icon$2 = icons$1[variant];
+	const Icon$1 = icons$1[variant];
 	const [internalVisible, setInternalVisible] = (0, react.useState)(true);
 	const isCurrentlyVisible = close ?? internalVisible;
 	const { buttonProps } = (0, __react_aria_button.useButton)(props, buttonRef);
@@ -9054,7 +9228,7 @@ const SectionMessage = ({ variant = "info", size: size$1, children, closeButton,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: (0, __marigold_system.cn)("[grid-area:icon]", classNames$2.icon),
-					children: Icon$2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$2, { size: "20" })
+					children: Icon$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, { size: "20" })
 				}),
 				closeButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButton, {
 					...buttonProps,
@@ -9073,12 +9247,19 @@ SectionMessage.Content = SectionMessageContent;
 
 //#endregion
 //#region src/Select/Select.tsx
-const SelectBase = (0, react.forwardRef)(function Select$2({ disabled, required, items, variant, size: size$1, error, open, children, ...rest }, ref) {
+const SelectBase = (0, react.forwardRef)(function Select$2({ disabled, required, items, variant, size: size$1, error, open, label, children, selectionMode, onChange, ...rest }, ref) {
+	const isSingleSelect = !selectionMode || selectionMode === "single";
+	const [trayOpen, setTrayOpen] = (0, react.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 = (0, __marigold_system.useClassNames)({
@@ -9086,22 +9267,45 @@ const SelectBase = (0, react.forwardRef)(function Select$2({ disabled, required,
 		variant,
 		size: size$1
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+	const isSmallScreen = (0, __marigold_system.useSmallScreen)();
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.Select,
 		ref,
 		variant,
 		size: size$1,
+		label,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(IconButton, {
-			className: (0, __marigold_system.cn)("flex w-full items-center justify-between gap-1 overflow-hidden", classNames$2.select),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SelectValue, { className: "truncate text-nowrap [&_[slot=description]]:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, {
+		children: isSmallScreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray.Trigger, {
+			open: trayOpen,
+			onOpenChange: setTrayOpen,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(IconButton, {
+				className: (0, __marigold_system.cn)("flex w-(--field-width) max-w-full min-w-0 items-center justify-between gap-1 overflow-hidden", classNames$2.select),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SelectValue, { className: "truncate text-nowrap **:[[slot=description]]:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, {
+					size: "16",
+					className: classNames$2.icon
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Title, { children: label }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
+					items,
+					children
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Actions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Button, {
+					slot: "close",
+					children: stringFormatter.format("close")
+				}) })
+			] })]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Button, {
+			className: (0, __marigold_system.cn)("flex w-(--field-width) max-w-full min-w-0 items-center justify-between gap-1", classNames$2.select),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SelectValue, { className: "truncate text-nowrap **:[[slot=description]]:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, {
 				size: "16",
 				className: classNames$2.icon
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
 			items,
 			children
-		}) })]
+		}) })] })
 	});
 });
 const Select = Object.assign(SelectBase, {
@@ -9125,8 +9329,8 @@ const SelectListAction = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime
 //#region src/SelectList/SelectListItem.tsx
 const SelectionIndicator = ({ selectionMode }) => {
 	switch (selectionMode) {
-		case "multiple": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Checkbox, { slot: "selection" });
-		case "single": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, {
+		case "multiple": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Checkbox, { slot: "selection" });
+		case "single": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Check, {
 			size: 12,
 			className: "invisible hidden"
 		});
@@ -9186,13 +9390,13 @@ const _Slider = (0, react.forwardRef)(({ variant, size: size$1, width = "full",
 		isDisabled: disabled,
 		...rest
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Checkbox.FieldBase, {
 		as: react_aria_components.Slider,
 		className: (0, __marigold_system.cn)("grid grid-cols-[auto_1fr] gap-y-1", classNames$2.container, __marigold_system.width[width]),
 		ref,
 		...props,
 		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Label, { children: label }),
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Label, { children: label }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SliderOutput, {
 				className: (0, __marigold_system.cn)("flex justify-end", classNames$2.output),
 				children: ({ state }) => state.values.map((_, i$1) => state.getThumbValueLabel(i$1)).join(" - ")
@@ -9229,7 +9433,7 @@ const Split = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 
 //#endregion
 //#region src/Stack/Stack.tsx
-const Stack = ({ children, space = 0, stretch = false, alignX = "stretch", 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 ? react.Children.map(children, (child) => child != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: child }) : null) : children;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component$1, {
@@ -9255,7 +9459,7 @@ const _Switch = (0, react.forwardRef)(({ variant, size: size$1, width = "full",
 		...rest,
 		ref,
 		className: (0, __marigold_system.cn)(__marigold_system.width[width], "group/switch", "flex items-center gap-[1ch]", classNames$2.container),
-		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Label, {
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Label, {
 			elementType: "span",
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -9269,326 +9473,475 @@ const _Switch = (0, react.forwardRef)(({ variant, size: size$1, width = "full",
 });
 
 //#endregion
-//#region src/Table/Context.tsx
-const TableContext = (0, react.createContext)({});
-const useTableContext = () => (0, react.useContext)(TableContext);
-
-//#endregion
-//#region src/Table/TableBody.tsx
-const TableBody = ({ children, className, emptyState }) => {
-	const { rowGroupProps } = (0, __react_aria_table.useTableRowGroup)();
-	const { state, classNames: classNames$2 } = useTableContext();
-	if (state.collection.size === 0 && emptyState) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-		className,
-		"data-rac": true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
-			className: classNames$2?.row,
-			role: "row",
-			"data-rac": true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-				className: classNames$2?.cell,
-				colSpan: state.collection.columnCount,
-				role: "rowheader",
-				"data-rac": true,
-				children: emptyState()
-			})
+//#region src/Table/Context.tsx
+const TableContext = (0, react.createContext)(null);
+const useTableContext = () => {
+	const context = (0, react.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 = ({ emptyState, ...props }) => {
+	const { classNames: classNames$2 } = useTableContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.TableBody, {
+		...props,
+		className: (0, __marigold_system.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 = (0, react.useContext)(react_aria_components.TableStateContext);
+	const overflow = cellOverflow ?? tableOverflow;
+	const selectable = allowTextSelection ?? tableAllowTextSelection;
+	const columnAlign = columnIndex ? state?.collection.columns[columnIndex].props.alignX : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-cell-content": "",
+		className: (0, __marigold_system.cn)(__marigold_system.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Cell, {
+		className: (0, __marigold_system.cn)(classNames$2.cell, __marigold_system.verticalAlign[alignY]),
+		...props,
+		children: ({ columnIndex }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCellContent, {
+			columnIndex,
+			alignX,
+			cellOverflow,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/icons/SortAscending.tsx
+const SortAscending = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	className: (0, __marigold_system.cn)("flex-none shrink-0 stroke-current", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
+	width: size$1,
+	height: size$1,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 2,
+	className: (0, __marigold_system.cn)("flex-none shrink-0 stroke-current", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 16l4 4 4-4m-4 4V4m4 0h10M11 8h7m-7 4h4" })
+});
+
+//#endregion
+//#region src/Table/TableColumn.tsx
+const isStaticWidth = (width) => !`${width}`.endsWith("fr");
+const ensureWidth = (width, minWdith) => {
+	if (minWdith) return minWdith;
+	return isStaticWidth(width) ? width : minWdith;
+};
+const TableColumn = ({ alignX = "left", width, minWidth, rowHeader, ...props }) => {
+	const { classNames: classNames$2 } = useTableContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Column, {
+		className: classNames$2.column,
+		width,
+		minWidth: ensureWidth(width, minWidth),
+		isRowHeader: rowHeader,
+		alignX,
+		...props,
+		children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, __marigold_system.cn)("flex items-center gap-1", __marigold_system.alignment.horizontal.alignmentX[alignX]),
+			children: [allowsSorting && sortDirection != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				children: sortDirection === "ascending" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortAscending, { size: 14 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDescending, { size: 14 })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Group, {
+				className: "cursor-default outline-none",
+				role: "presentation",
+				tabIndex: -1,
+				children: props.children
+			})]
 		})
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-		...rowGroupProps,
-		className,
-		"data-rac": true,
-		children
-	});
 };
 
 //#endregion
-//#region src/Table/TableCell.tsx
-const TableCell = ({ cell, align = "left", alignY = "middle" }) => {
-	const ref = (0, react.useRef)(null);
-	const { interactive, state, classNames: classNames$2 } = useTableContext();
-	const disabled = state.disabledKeys.has(cell.parentKey);
-	const { gridCellProps } = (0, __react_aria_table.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 } = (0, __react_aria_focus.useFocusRing)();
-	const stateProps = (0, __marigold_system.useStateProps)({
-		disabled,
-		focusVisible: isFocusVisible
+//#region src/Table/TableDragPreview.tsx
+const TableDragPreview = ({ items, variant, size: size$1 }) => {
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	const classNames$2 = (0, __marigold_system.useClassNames)({
+		component: "Table",
+		variant,
+		size: size$1
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-		ref,
-		className: classNames$2?.cell,
-		...(0, __react_aria_utils.mergeProps)(cellProps, focusProps),
-		...stateProps,
-		align,
-		valign: alignY,
-		"data-rac": true,
-		children: cell.rendered
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __marigold_system.cn)("flex transform-gpu items-center gap-2", classNames$2.dragPreview),
+		children: [items[0]["text/plain"] ?? stringFormatter.format("items"), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(TableDragPreview, { items });
 };
 
 //#endregion
-//#region src/Table/TableCheckboxCell.tsx
-const TableCheckboxCell = ({ cell, alignY = "middle" }) => {
-	const ref = (0, react.useRef)(null);
-	const { state, classNames: classNames$2 } = useTableContext();
-	const disabled = state.disabledKeys.has(cell.parentKey);
-	const { gridCellProps } = (0, __react_aria_table.useTableCell)({ node: cell }, state, ref);
-	const { checkboxProps } = mapCheckboxProps((0, __react_aria_table.useTableSelectionCheckbox)({ key: cell.parentKey }, state));
-	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
-	const stateProps = (0, __marigold_system.useStateProps)({
-		disabled,
-		focusVisible: isFocusVisible
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-		ref,
-		className: (0, __marigold_system.cn)("leading-none", classNames$2?.cell),
-		...(0, __react_aria_utils.mergeProps)(gridCellProps, focusProps),
-		...stateProps,
-		valign: alignY,
-		"data-rac": true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Checkbox, { ...checkboxProps })
+//#region src/Table/TableDropIndicator.tsx
+const TableDropIndicator = ({ size: size$1, variant, ...props }) => {
+	const classNames$2 = (0, __marigold_system.useClassNames)({
+		component: "Table",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DropIndicator, {
+		...props,
+		className: (0, __marigold_system.cn)("transform-gpu", classNames$2.dropIndicator)
 	});
 };
+const renderDropIndicator = (target) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableDropIndicator, { target });
 
 //#endregion
-//#region src/icons/SortDown.tsx
-const SortDown = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
-	width: size$1,
-	height: size$1,
-	viewBox: "0 0 24 24",
-	className: (0, __marigold_system.cn)("flex-none shrink-0 fill-current", className),
-	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
+//#region src/icons/Pencil.tsx
+const Pencil = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
 	width: size$1,
 	height: size$1,
 	viewBox: "0 0 24 24",
-	className: (0, __marigold_system.cn)("flex-none shrink-0 fill-current", className),
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: (0, __marigold_system.cn)("shrink-0", className),
 	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", { d: "m15 5 4 4" })]
 });
 
 //#endregion
-//#region src/Table/TableColumnHeader.tsx
-const TableColumnHeader = ({ column: column$1, width = "auto", align = "left" }) => {
-	const ref = (0, react.useRef)(null);
-	const { state, classNames: classNames$2 } = useTableContext();
-	const { columnHeaderProps } = (0, __react_aria_table.useTableColumnHeader)({ node: column$1 }, state, ref);
-	const { hoverProps, isHovered } = (0, __react_aria_interactions.useHover)({});
-	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
-	const stateProps = (0, __marigold_system.useStateProps)({
-		hover: isHovered,
-		focusVisible: isFocusVisible
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
-		colSpan: column$1.colspan,
-		ref,
-		className: (0, __marigold_system.cn)("whitespace-nowrap data-[react-aria-pressable=\"true\"]:cursor-pointer", __marigold_system.width[width], classNames$2?.header),
-		...(0, __react_aria_utils.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__ */ (0, react_jsx_runtime.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "hidden",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDown, { className: "inline-block" })
-		}))]
+//#region src/Table/TableEditableCell.tsx
+const EditableCellPopover = ({ cellRef, open, onOpenChange, className, children }) => {
+	const popoverRef = (0, react.useRef)(null);
+	const [triggerWidth, setTriggerWidth] = (0, react.useState)(0);
+	const [tableWidth, setTableWidth] = (0, react.useState)(0);
+	const [verticalOffset, setVerticalOffset] = (0, react.useState)(0);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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 } = (0, react_aria_components.useTableOptions)();
+	const hasSelection = selectionMode !== "none";
+	const isSmallScreen = (0, __marigold_system.useSmallScreen)();
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	const [open, setOpen] = (0, react.useState)(false);
+	const submittedRef = (0, react.useRef)(false);
+	const cellRef = (0, react.useRef)(null);
+	const formRef = (0, react.useRef)(null);
+	const handleFormRef = (0, react.useCallback)((node$1) => {
+		formRef.current = node$1;
+		if (node$1) requestAnimationFrame(() => {
+			const activeElement = (0, __react_aria_utils.getActiveElement)((0, __react_aria_utils.getOwnerDocument)(node$1));
+			if (activeElement && (0, __react_aria_utils.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		className: classNames$2.editCancel,
+		onPress: handleCancel,
+		"aria-label": isSmallScreen ? void 0 : stringFormatter.format("cancel"),
+		children: isSmallScreen ? stringFormatter.format("cancel") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, {})
+	});
+	const saveButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+		className: classNames$2.editSave,
+		type: "submit",
+		isPending: saving,
+		"aria-label": isSmallScreen ? void 0 : stringFormatter.format("save"),
+		children: isSmallScreen ? stringFormatter.format("save") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Check, {})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Cell, {
+		ref: cellRef,
+		className: (0, __marigold_system.cn)(classNames$2.cell, __marigold_system.verticalAlign[alignY]),
+		children: ({ columnIndex }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "group/editable-cell flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCellContent, {
+				columnIndex,
+				alignX,
+				cellOverflow,
+				className: "min-w-0 flex-1",
+				allowTextSelection: !hasSelection || tableAllowTextSelection,
+				children
+			}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+					className: classNames$2.editTrigger,
+					"aria-label": stringFormatter.format("edit"),
+					onPress: () => setOpen(true),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pencil, {})
+				})
+			})]
+		}), isSmallScreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Dialog, {
+			open,
+			onOpenChange: handleOpenChange,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_Form, {
+				unstyled: true,
+				ref: handleFormRef,
+				action,
+				onSubmit: handleSubmit,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Dialog.Title, { children: stringFormatter.format("editCell") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Dialog.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_aria_focus.FocusScope, {
+						autoFocus: true,
+						restoreFocus: true,
+						children: renderField()
+					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_Dialog.Actions, { children: [cancelButton, saveButton] })
+				]
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditableCellPopover, {
+			cellRef,
+			open,
+			onOpenChange: handleOpenChange,
+			className: classNames$2.editablePopover,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Form, {
+				unstyled: true,
+				ref: handleFormRef,
+				action,
+				onSubmit: handleSubmit,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__react_aria_focus.FocusScope, {
+					autoFocus: true,
+					children: [
+						renderField(),
+						cancelButton,
+						saveButton
+					]
+				})
+			})
+		})] })
 	});
 };
 
 //#endregion
 //#region src/Table/TableHeader.tsx
-const TableHeader = ({ stickyHeader, children }) => {
-	const { rowGroupProps } = (0, __react_aria_table.useTableRowGroup)();
+const TableHeader = ({ sticky, columns, children, ...props }) => {
+	const { selectionBehavior, selectionMode, allowsDragging } = (0, react_aria_components.useTableOptions)();
 	const { classNames: classNames$2 } = useTableContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
-		...rowGroupProps,
-		className: (0, __marigold_system.cn)(classNames$2?.thead, stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""),
-		"data-rac": true,
-		children
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.TableHeader, {
+		className: (0, __marigold_system.cn)(classNames$2.head, sticky && "sticky top-0 z-1"),
+		...props,
+		children: [
+			allowsDragging && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Column, {
+				className: classNames$2.column,
+				minWidth: 24,
+				width: 24
+			}),
+			selectionBehavior === "toggle" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Column, {
+				minWidth: 36,
+				width: 36,
+				className: classNames$2.column,
+				children: selectionMode === "multiple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Checkbox, { slot: "selection" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Collection, {
+				items: columns,
+				children
+			})
+		]
 	});
 };
 
 //#endregion
-//#region src/Table/TableHeaderRow.tsx
-const TableHeaderRow = ({ item, className, children }) => {
-	const { state } = useTableContext();
-	const ref = (0, react.useRef)(null);
-	const { rowProps } = (0, __react_aria_table.useTableHeaderRow)({ node: item }, state, ref);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
-		...rowProps,
-		className,
-		ref,
-		"data-rac": true,
-		children
-	});
-};
+//#region src/icons/GripVertical.tsx
+const GripVertical = ({ size: size$1 = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 9,
+			cy: 12,
+			r: 1
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 9,
+			cy: 5,
+			r: 1
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 9,
+			cy: 19,
+			r: 1
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 15,
+			cy: 12,
+			r: 1
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 15,
+			cy: 5,
+			r: 1
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 15,
+			cy: 19,
+			r: 1
+		})
+	]
+});
 
 //#endregion
 //#region src/Table/TableRow.tsx
-const TableRow = ({ children, row }) => {
-	const ref = (0, react.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 } = (0, react_aria_components.useTableOptions)();
+	const context = useTableContext();
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Table",
-		variant: variant || ctx.variant,
-		size: size$1 || ctx.size
-	});
-	const { rowProps, isPressed } = (0, __react_aria_table.useTableRow)({ node: row }, state, ref);
-	const disabled = state.disabledKeys.has(row.key);
-	const selected = state.selectionManager.isSelected(row.key);
-	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
-	const { hoverProps, isHovered } = (0, __react_aria_interactions.useHover)({ isDisabled: disabled || !interactive });
-	const stateProps = (0, __marigold_system.useStateProps)({
-		disabled,
-		selected,
-		hover: isHovered,
-		focusVisible: isFocusVisible,
-		active: isPressed
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
-		ref,
-		className: (0, __marigold_system.cn)([!interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"], classNames$2?.row),
-		...(0, __react_aria_utils.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 = "auto", align = "left" }) => {
-	const ref = (0, react.useRef)(null);
-	const { state, classNames: classNames$2 } = useTableContext();
-	const { columnHeaderProps } = (0, __react_aria_table.useTableColumnHeader)({ node: column$1 }, state, ref);
-	const { checkboxProps } = mapCheckboxProps((0, __react_aria_table.useTableSelectAllCheckbox)(state));
-	const { hoverProps, isHovered } = (0, __react_aria_interactions.useHover)({});
-	const { focusProps, isFocusVisible } = (0, __react_aria_focus.useFocusRing)();
-	const stateProps = (0, __marigold_system.useStateProps)({
-		hover: isHovered,
-		focusVisible: isFocusVisible
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-		ref,
-		className: (0, __marigold_system.cn)(__marigold_system.width[width], ["leading-none"], classNames$2?.header),
-		...(0, __react_aria_utils.mergeProps)(columnHeaderProps, hoverProps, focusProps),
-		...stateProps,
-		align,
-		"data-rac": true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Checkbox, { ...checkboxProps })
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Row, {
+		id,
+		className: (0, __marigold_system.cn)("group/row", classNames$2.row),
+		...otherProps,
+		children: [
+			allowsDragging && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Cell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+				slot: "drag",
+				className: (0, __marigold_system.cn)("grid size-full place-items-center", classNames$2.dragHandle),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripVertical, {})
+			}) }),
+			selectionBehavior === "toggle" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Cell, {
+				className: classNames$2.cell,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox._Checkbox, { slot: "selection" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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 = (0, react.useRef)(null);
-	const state = (0, __react_stately_table.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 } = (0, __react_aria_table.useTable)(props, state, tableRef);
+const _Table = ({ variant, size: size$1, overflow = "wrap", allowTextSelection = false, alignY = "middle", ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Table",
 		variant,
 		size: size$1
 	});
-	const { collection } = state;
+	const ctx = (0, react.useMemo)(() => ({
+		classNames: classNames$2,
+		variant,
+		size: size$1,
+		overflow,
+		allowTextSelection,
+		alignY
+	}), [
+		classNames$2,
+		variant,
+		size$1,
+		overflow,
+		allowTextSelection,
+		alignY
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableContext.Provider, {
-		value: {
-			state,
-			interactive,
-			classNames: classNames$2,
-			variant,
-			size: size$1
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-			ref: tableRef,
-			"data-rac": true,
-			className: (0, __marigold_system.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__ */ (0, react_jsx_runtime.jsx)(TableHeader, {
-				stickyHeader,
-				children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeaderRow, {
-					item: headerRow,
-					className: classNames$2.headerRow,
-					children: [...collection.getChildren(headerRow.key)].map((column$1) => column$1.props?.isSelectionCell ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableSelectAllCell, {
-						width: column$1.props?.width,
-						column: column$1,
-						align: column$1.props?.align
-					}, column$1.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableColumnHeader, {
-						width: column$1.props?.width,
-						column: column$1,
-						align: column$1.props?.align
-					}, column$1.key))
-				}, headerRow.key))
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, {
-				className: classNames$2.body,
-				emptyState,
-				children: [...collection.rows.map((row) => row.type === "item" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, {
-					row,
-					children: [...collection.getChildren(row.key)].map((cell, index$1) => {
-						const currentColumn = collection.columns[index$1];
-						return cell.props?.isSelectionCell ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCheckboxCell, {
-							cell,
-							alignY
-						}, cell.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-							align: currentColumn.props?.align,
-							alignY,
-							cell
-						}, cell.key);
-					})
-				}, row.key))]
-			})]
+		value: ctx,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ResizableTableContainer, {
+			className: "w-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Table, {
+				className: (0, __marigold_system.cn)("group/table", classNames$2.table),
+				selectionBehavior: "toggle",
+				...props
+			})
 		})
 	});
 };
-Table.Body = __react_stately_table.TableBody;
-Table.Cell = __react_stately_table.Cell;
-Table.Column = __react_stately_table.Column;
-Table.Header = __react_stately_table.TableHeader;
-Table.Row = __react_stately_table.Row;
+const Table = Object.assign(_Table, {
+	Header: TableHeader,
+	Column: TableColumn,
+	Body: TableBody,
+	Row: TableRow,
+	Cell: TableCell,
+	EditableCell: TableEditableCell,
+	renderDropIndicator,
+	renderDragPreview
+});
 
 //#endregion
 //#region src/Tabs/Context.ts
@@ -9608,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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.TabList, {
 		...props,
-		className: (0, __marigold_system.cn)("flex", __marigold_system.gapSpace[space], classNames$2.tabsList),
+		className: (0, __marigold_system.cn)("flex", classNames$2.tabsList),
 		children: props.children
 	});
 };
@@ -9676,7 +10029,7 @@ const TagGroupHiddenInput = ({ name }) => {
 //#region src/TagGroup/TagGroupRemoveAll.tsx
 const TagGroupRemoveAll = ({ className, onRemove }) => {
 	const state = (0, react.useContext)(react_aria_components.ListStateContext);
-	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages, "marigold");
 	if (state && state.collection.size < 2) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
 		onPress: () => onRemove?.(new Set(state?.collection.getKeys())),
@@ -9693,7 +10046,7 @@ const _TagGroup = ({ items, children, emptyState, variant, size: size$1, name, r
 		variant,
 		size: size$1
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Checkbox.FieldBase, {
 		as: react_aria_components.TagGroup,
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -9734,27 +10087,136 @@ 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, children, as = "div", ...props }) => {
+//#region src/TagField/TagField.tsx
+const TagDisplay = ({ placeholder, classNames: classNames$2, disabled }) => {
+	const state = (0, react.useContext)(react_aria_components.SelectStateContext);
+	if (!state) return null;
+	const selectedKeys = [...state.selectionManager.selectedKeys];
+	if (selectedKeys.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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__ */ (0, react_jsx_runtime.jsx)(react_aria_components.TagList, {
+			items: selectedItems,
+			className: classNames$2.listItems,
+			children: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Tag, {
+				id: item.id,
+				disabled,
+				children: item.textValue
+			})
+		})
+	});
+};
+const TagFieldDropdown = ({ items, children, placeholder, emptyState }) => {
+	const { contains } = (0, react_aria_components.useFilter)({ sensitivity: "base" });
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Autocomplete, {
+		filter: contains,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SearchField, {
+			"aria-label": "Search",
+			autoFocus: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, { placeholder })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ListBox, {
+			items,
+			renderEmptyState: () => emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center",
+				children: stringFormatter.format("noResultsFound")
+			}),
+			children
+		})]
+	});
+};
+const _TagField = (0, react.forwardRef)(function TagField$1({ disabled, required, items, variant, size: size$1, error, open, children, placeholder, emptyState, ...rest }, ref) {
+	const triggerRef = (0, react.useRef)(null);
+	const [triggerWidth, setTriggerWidth] = (0, react.useState)(0);
+	const isSmallScreen = (0, __marigold_system.useSmallScreen)();
+	(0, react.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 = (0, __marigold_system.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 ? react_aria_components.Text : as;
-	const elementType = props.slot ? { elementType: as } : {};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component$1, {
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Checkbox.FieldBase, {
+		as: react_aria_components.Select,
+		ref,
+		variant,
+		size: size$1,
 		...props,
-		...elementType,
-		className: (0, __marigold_system.cn)("max-w-(--maxTextWidth)", classNames$2, fontStyle && __marigold_system.textStyle[fontStyle], align && __marigold_system.textAlign[align], cursor$1 && __marigold_system.cursorStyle[cursor$1], weight && __marigold_system.fontWeight[weight], fontSize && __marigold_system.textSize[fontSize], wrap && __marigold_system.textWrap[wrap], whiteSpace && __marigold_system.whiteSpace[whiteSpace]),
-		style: { color: color && (0, __marigold_system.ensureCssVar)(color, "color") },
-		children
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Group, {
+			ref: triggerRef,
+			className: (0, __marigold_system.cn)("w-(--field-width) max-w-full min-w-0", classNames$2.trigger),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagDisplay, {
+				placeholder,
+				classNames: classNames$2,
+				disabled
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+				className: classNames$2.button,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronsVertical, {})
+			})]
+		}), isSmallScreen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tray, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Title, { children: rest.label }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Content, {
+				className: "flex flex-col gap-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagFieldDropdown, {
+					items,
+					placeholder,
+					emptyState,
+					children
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tray.Actions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Button, {
+				slot: "close",
+				children: stringFormatter.format("close")
+			}) })
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Popover, {
+			triggerRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames$2.container,
+				style: (0, __marigold_system.createVar)({ "tagfield-trigger-width": triggerWidth ? `${triggerWidth}px` : void 0 }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagFieldDropdown, {
+					items,
+					placeholder,
+					emptyState,
+					children
+				})
+			})
+		})]
 	});
-};
+});
+const TagField = Object.assign(_TagField, {
+	Option: _ListBox.Item,
+	Section: _ListBox.Section
+});
 
 //#endregion
 //#region src/TextArea/TextArea.tsx
@@ -9764,7 +10226,7 @@ const _TextArea = (0, react.forwardRef)(({ variant, size: size$1, required, disa
 		variant,
 		size: size$1
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.TextField,
 		isDisabled: disabled,
 		isReadOnly: readOnly,
@@ -9774,7 +10236,7 @@ const _TextArea = (0, react.forwardRef)(({ variant, size: size$1, required, disa
 		variant,
 		size: size$1,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.TextArea, {
-			className: classNames$2,
+			className: (0, __marigold_system.cn)(classNames$2, "w-(--field-width) max-w-full min-w-0"),
 			ref,
 			rows
 		})
@@ -9784,7 +10246,7 @@ const _TextArea = (0, react.forwardRef)(({ variant, size: size$1, required, disa
 //#endregion
 //#region src/TextField/TextField.tsx
 const _TextField = (0, react.forwardRef)(({ required, disabled, readOnly, error, ...rest }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.TextField,
 		isDisabled: disabled,
 		isReadOnly: readOnly,
@@ -9807,11 +10269,14 @@ const Tiles = ({ space = 0, stretch = false, equalHeight = false, tilesWidth = "
 	if (stretch) column$1 = `minmax(${column$1}, 1fr)`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
-		className: (0, __marigold_system.cn)("grid", __marigold_system.gapSpace[space], "grid-cols-[repeat(auto-fit,var(--column))]", equalHeight && "auto-rows-[1fr]"),
-		style: (0, __marigold_system.createVar)({
-			column: column$1,
-			tilesWidth
-		}),
+		className: (0, __marigold_system.cn)("grid gap-(--space)", "grid-cols-[repeat(auto-fit,var(--column))]", equalHeight && "auto-rows-[1fr]"),
+		style: {
+			...(0, __marigold_system.createVar)({
+				column: column$1,
+				tilesWidth
+			}),
+			...(0, __marigold_system.createSpacingVar)("space", `${space}`)
+		},
 		children
 	});
 };
@@ -9824,7 +10289,7 @@ const _TimeField = (0, react.forwardRef)(({ required, disabled, readOnly, error,
 		variant,
 		size: size$1
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.FieldBase, {
 		as: react_aria_components.TimeField,
 		variant,
 		size: size$1,
@@ -9835,11 +10300,14 @@ const _TimeField = (0, react.forwardRef)(({ required, disabled, readOnly, error,
 		isRequired: required,
 		...rest,
 		ref,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DateInput, {
-			className: classNames$2.field,
-			children: (segment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DateSegment, {
-				className: classNames$2.segment,
-				segment
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Group, {
+			className: (0, __marigold_system.cn)("w-(--field-width) max-w-full min-w-0", classNames$2.field),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DateInput, {
+				className: (0, __marigold_system.cn)("flex flex-1 items-center", classNames$2.input),
+				children: (segment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DateSegment, {
+					className: classNames$2.segment,
+					segment
+				})
 			})
 		})
 	});
@@ -9851,14 +10319,14 @@ const icons = {
 	success: CircleCheck,
 	info: Info,
 	warning: CircleAlert,
-	error: TriangleAlert
+	error: require_Checkbox.TriangleAlert
 };
 const Toast = ({ toast }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		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__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.UNSTABLE_Toast, {
 		toast,
 		className: classNames$2.toast,
@@ -9866,11 +10334,11 @@ const Toast = ({ toast }) => {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.UNSTABLE_ToastContent, {
 			className: classNames$2.content,
 			children: [
-				Icon$2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				Icon$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: classNames$2.icon,
 					slot: "icon",
 					"data-testid": "toast-icon",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$2, { size: "20" })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon$1, { size: "20" })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Text, {
 					slot: "title",
@@ -9899,15 +10367,18 @@ const Toast = ({ toast }) => {
 //#endregion
 //#region src/Toast/ToastProvider.tsx
 const queue = new react_aria_components.UNSTABLE_ToastQueue({ wrapUpdate(fn) {
-	if ("startViewTransition" in document) document.startViewTransition(() => {
-		(0, react_dom.flushSync)(fn);
-	});
-	else fn();
+	if ("startViewTransition" in document) {
+		const transition = document.startViewTransition(() => {
+			(0, react_dom.flushSync)(fn);
+		});
+		transition.ready.catch(() => {});
+		transition.finished.catch(() => {});
+	} else fn();
 } });
 const ToastProvider = ({ position: position$1 = "bottom-right" }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.UNSTABLE_ToastRegion, {
 		queue,
-		className: `${(0, __marigold_system.useClassNames)({ component: "Toast" })[position$1]} z-50 gap-2`,
+		className: `${(0, __marigold_system.useClassNames)({ component: "Toast" })[position$1]} z-80 gap-2`,
 		children: ({ toast }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toast, { toast })
 	});
 };
@@ -9972,7 +10443,7 @@ const _Tooltip = ({ children, variant, size: size$1, open, ...rest }) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Tooltip, {
 		...props,
-		className: (0, __marigold_system.cn)("group/tooltip", classNames$2.container),
+		className: (0, __marigold_system.cn)("group/tooltip z-30", classNames$2.container),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.OverlayArrow, {
 			className: classNames$2.arrow,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrow, {})
@@ -10130,7 +10601,7 @@ const XLoaderSvg = ({ className }) => {
 	});
 };
 const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel, loaderType = "circle", ...props }) => {
-	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(require_Checkbox.intlMessages, "marigold");
 	const className = (0, __marigold_system.useClassNames)({
 		component: "Loader",
 		variant,
@@ -10193,6 +10664,50 @@ const Loader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PU
 	...props
 });
 
+//#endregion
+//#region src/ToggleButton/Context.tsx
+const ToggleButtonContext = (0, react.createContext)({});
+
+//#endregion
+//#region src/ToggleButton/ToggleButtonGroup.tsx
+const _ToggleButtonGroup = ({ children, disabled, variant, size: size$1, ...props }) => {
+	const classNames$2 = (0, __marigold_system.useClassNames)({
+		component: "ToggleButton",
+		variant,
+		size: size$1
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleButtonContext.Provider, {
+		value: {
+			variant,
+			size: size$1
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.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 = (0, react.useContext)(ToggleButtonContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ToggleButton, {
+		isSelected: selected,
+		isDisabled: disabled,
+		className: (0, __marigold_system.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
 /**
@@ -10212,6 +10727,8 @@ const parseFormData = (e$1) => {
 //#endregion
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
+exports.ActionBar = ActionBar;
+exports.ActionButton = ActionButton;
 exports.ActionMenu = ActionMenu;
 exports.Aside = Aside;
 exports.Aspect = Aspect;
@@ -10223,10 +10740,10 @@ exports.Button = _Button;
 exports.Calendar = _Calendar;
 exports.Card = Card;
 exports.Center = Center;
-exports.Checkbox = _Checkbox;
-exports.CheckboxGroup = _CheckboxGroup;
+exports.Checkbox = require_Checkbox._Checkbox;
+exports.CheckboxGroup = require_Checkbox._CheckboxGroup;
 exports.CloseButton = CloseButton;
-exports.Collapsible = Collapsible;
+exports.Collapsible = require_Checkbox.Collapsible;
 exports.Columns = Columns;
 exports.ComboBox = _ComboBox;
 exports.ConfirmationContext = ConfirmationContext;
@@ -10245,12 +10762,13 @@ exports.DatePicker = _DatePicker;
 exports.Dialog = _Dialog;
 exports.Divider = _Divider;
 exports.Drawer = Drawer;
-exports.FieldBase = FieldBase;
+exports.EmptyState = EmptyState;
+exports.FieldBase = require_Checkbox.FieldBase;
 exports.FileField = FileField;
 exports.Form = _Form;
 exports.Grid = Grid;
 exports.Headline = _Headline;
-exports.HelpText = HelpText;
+exports.HelpText = require_Checkbox.HelpText;
 Object.defineProperty(exports, 'I18nProvider', {
   enumerable: true,
   get: function () {
@@ -10261,7 +10779,7 @@ exports.IconButton = IconButton;
 exports.Inline = Inline;
 exports.Input = _Input;
 exports.Inset = Inset;
-exports.Label = _Label;
+exports.Label = require_Checkbox._Label;
 exports.Link = _Link;
 exports.LinkButton = _LinkButton;
 exports.List = List;
@@ -10307,6 +10825,7 @@ exports.Switch = _Switch;
 exports.Table = Table;
 exports.Tabs = _Tabs;
 exports.Tag = _Tag;
+exports.TagField = TagField;
 exports.TagGroup = _TagGroup;
 exports.Text = _Text;
 exports.TextArea = _TextArea;
@@ -10321,7 +10840,10 @@ exports.Tiles = Tiles;
 exports.TimeField = _TimeField;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
+exports.ToggleButton = _ToggleButton;
+exports.ToggleButtonGroup = _ToggleButtonGroup;
 exports.Tooltip = _Tooltip;
+exports.Tray = Tray;
 exports.Underlay = Underlay;
 Object.defineProperty(exports, 'VisuallyHidden', {
   enumerable: true,
@@ -10329,18 +10851,25 @@ Object.defineProperty(exports, 'VisuallyHidden', {
     return __react_aria_visually_hidden.VisuallyHidden;
   }
 });
+exports.__toESM = __toESM;
 exports.parseFormData = parseFormData;
 Object.defineProperty(exports, 'useAsyncList', {
   enumerable: true,
   get: function () {
-    return __react_stately_data.useAsyncList;
+    return react_aria_components.useAsyncList;
   }
 });
 exports.useConfirmation = useConfirmation;
+Object.defineProperty(exports, 'useDragAndDrop', {
+  enumerable: true,
+  get: function () {
+    return react_aria_components.useDragAndDrop;
+  }
+});
 Object.defineProperty(exports, 'useListData', {
   enumerable: true,
   get: function () {
-    return __react_stately_data.useListData;
+    return react_aria_components.useListData;
   }
 });
 Object.defineProperty(exports, 'useTheme', {