@marigold/components 16.0.1 → 16.1.0

package/dist/{index.js → index.cjs}

@@ -5,16 +5,18 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function() {
-	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __copyProps = (to, from$1, except, desc) => {
-	if (from$1 && typeof from$1 === "object" || typeof from$1 === "function") for (var keys = __getOwnPropNames(from$1), i$1 = 0, n$1 = keys.length, key; i$1 < n$1; i$1++) {
-		key = keys[i$1];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k$1) => from$1[k$1]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from$1, key)) || desc.enumerable
-		});
+	if (from$1 && typeof from$1 === "object" || typeof from$1 === "function") {
+		for (var keys = __getOwnPropNames(from$1), i$1 = 0, n$1 = keys.length, key; i$1 < n$1; i$1++) {
+			key = keys[i$1];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k$1) => from$1[k$1]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from$1, key)) || desc.enumerable
+				});
+			}
+		}
 	}
 	return to;
 };
@@ -25,47 +27,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 let __marigold_system = require("@marigold/system");
-__marigold_system = __toESM(__marigold_system);
 let react_aria_components = require("react-aria-components");
-react_aria_components = __toESM(react_aria_components);
 let react = require("react");
 react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = __toESM(react_jsx_runtime);
 let __react_aria_i18n = require("@react-aria/i18n");
-__react_aria_i18n = __toESM(__react_aria_i18n);
 let __internationalized_date = require("@internationalized/date");
-__internationalized_date = __toESM(__internationalized_date);
 let __react_aria_calendar = require("@react-aria/calendar");
-__react_aria_calendar = __toESM(__react_aria_calendar);
 let __react_aria_utils = require("@react-aria/utils");
-__react_aria_utils = __toESM(__react_aria_utils);
 let __react_aria_interactions = require("@react-aria/interactions");
-__react_aria_interactions = __toESM(__react_aria_interactions);
 let __react_aria_landmark = require("@react-aria/landmark");
-__react_aria_landmark = __toESM(__react_aria_landmark);
 let react_stately = require("react-stately");
-react_stately = __toESM(react_stately);
 let __react_aria_focus = require("@react-aria/focus");
-__react_aria_focus = __toESM(__react_aria_focus);
 let __react_aria_overlays = require("@react-aria/overlays");
-__react_aria_overlays = __toESM(__react_aria_overlays);
 let __react_aria_ssr = require("@react-aria/ssr");
-__react_aria_ssr = __toESM(__react_aria_ssr);
 let react_dom = require("react-dom");
-react_dom = __toESM(react_dom);
 let __react_aria_label = require("@react-aria/label");
-__react_aria_label = __toESM(__react_aria_label);
 let __react_aria_button = require("@react-aria/button");
-__react_aria_button = __toESM(__react_aria_button);
 let __react_aria_table = require("@react-aria/table");
-__react_aria_table = __toESM(__react_aria_table);
 let __react_stately_table = require("@react-stately/table");
-__react_stately_table = __toESM(__react_stately_table);
 let __react_stately_data = require("@react-stately/data");
-__react_stately_data = __toESM(__react_stately_data);
 let __react_aria_visually_hidden = require("@react-aria/visually-hidden");
-__react_aria_visually_hidden = __toESM(__react_aria_visually_hidden);
 
 //#region src/Accordion/AccordionContext.tsx
 const Context = (0, react.createContext)(null);
@@ -78,7 +60,7 @@ const useAccordionContext = () => {
 
 //#endregion
 //#region src/icons/ChevronDown.tsx
-const ChevronDown = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+const ChevronDown = ({ 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,
@@ -128,7 +110,7 @@ const AccordionHeader = ({ children }) => {
 
 //#endregion
 //#region src/Accordion/AccordionItem.tsx
-const AccordionItem = ({ children, disabled, expanded,...props }) => {
+const AccordionItem = ({ children, disabled, expanded, ...props }) => {
 	const { classNames: classNames$2 } = useAccordionContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Disclosure, {
 		isDisabled: disabled,
@@ -154,7 +136,7 @@ const AccordionPanel = ({ children }) => {
 
 //#endregion
 //#region src/Accordion/Accordion.tsx
-const Accordion = ({ children, disabled, variant, size: size$1, stickyHeader = false, iconPosition = "right",...props }) => {
+const Accordion = ({ children, disabled, variant, size: size$1, stickyHeader = false, iconPosition = "right", ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Accordion",
 		variant,
@@ -194,7 +176,8 @@ const Aside = ({ children, sideWidth, space = 0, side = "left", wrap = "50%" })
 		content: (0, __marigold_system.createVar)({ wrap })
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __marigold_system.cn)("flex flex-wrap", __marigold_system.gapSpace[space]),
+		className: (0, __marigold_system.cn)("flex flex-wrap", "gap-(--space)"),
+		style: (0, __marigold_system.createSpacingVar)("space", `${space}`),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: classNames$1[side === "left" ? "aside" : "content"],
 			style: vars[side === "left" ? "aside" : "content"],
@@ -219,7 +202,7 @@ const Aspect = ({ ratio = "square", maxWidth, children }) => {
 
 //#endregion
 //#region src/Center/Center.tsx
-const Center = ({ maxWidth = "100%", space = 0, children,...props }) => {
+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)"),
@@ -230,7 +213,7 @@ const Center = ({ maxWidth = "100%", space = 0, children,...props }) => {
 
 //#endregion
 //#region src/icons/TriangleAlert.tsx
-const TriangleAlert = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+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,
@@ -251,7 +234,7 @@ const TriangleAlert = ({ size: size$1 = 24, className,...props }) => /* @__PURE_
 
 //#endregion
 //#region src/HelpText/HelpText.tsx
-const HelpText = ({ variant, size: size$1, description, errorMessage,...props }) => {
+const HelpText = ({ variant, size: size$1, description, errorMessage, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "HelpText",
 		variant,
@@ -290,7 +273,7 @@ const HelpText = ({ variant, size: size$1, description, errorMessage,...props })
 
 //#endregion
 //#region src/Label/Label.tsx
-const _Label = ({ size: size$1, variant, children,...props }) => {
+const _Label = ({ size: size$1, variant, children, ...props }) => {
 	const className = (0, __marigold_system.useClassNames)({
 		component: "Label",
 		size: size$1,
@@ -307,7 +290,7 @@ const _Label = ({ size: size$1, variant, children,...props }) => {
 //#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 { 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,
@@ -373,7 +356,7 @@ const ProgressCircleSvg = ({ size: size$1 = "16", variant }) => {
 		})]
 	});
 };
-const ProgressCircle = ({ size: size$1 = "16",...props }) => {
+const ProgressCircle = ({ size: size$1 = "16", ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ProgressBar, {
 		...props,
 		"aria-label": "loading",
@@ -384,7 +367,7 @@ const ProgressCircle = ({ size: size$1 = "16",...props }) => {
 
 //#endregion
 //#region src/icons/Search.tsx
-const Search = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const Search = ({ 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,
@@ -405,7 +388,7 @@ const Search = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0
 
 //#endregion
 //#region src/icons/X.tsx
-const X = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+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,
@@ -422,7 +405,7 @@ const X = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, rea
 
 //#endregion
 //#region src/Input/Input.tsx
-const _Input = (0, react.forwardRef)(({ type, icon, action, variant, size: size$1, className,...props }, ref) => {
+const _Input = (0, react.forwardRef)(({ type, icon, action, variant, size: size$1, className, ...props }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Input",
 		variant,
@@ -460,7 +443,7 @@ const intlMessages$1 = {
 	"en-US": { "Clear search": "Clear search" },
 	"fr-FR": { "Clear search": "Effacer la recherche" }
 };
-const SearchInput = (0, react.forwardRef)(({ className, loading, onClear,...props }, ref) => {
+const SearchInput = (0, react.forwardRef)(({ className, loading, onClear, ...props }, ref) => {
 	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages$1);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Input, {
 		type: "search",
@@ -486,7 +469,7 @@ 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", {
+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,
@@ -522,7 +505,7 @@ const _ListBoxItem = ({ ...props }) => {
 
 //#endregion
 //#region src/ListBox/ListBoxSection.tsx
-const _Section = ({ header, children,...props }) => {
+const _Section = ({ header, children, ...props }) => {
 	const { classNames: classNames$2 } = useListBoxContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.ListBoxSection, {
 		...props,
@@ -533,7 +516,7 @@ const _Section = ({ header, children,...props }) => {
 
 //#endregion
 //#region src/ListBox/ListBox.tsx
-const _ListBox = (0, react.forwardRef)(({ variant, size: size$1,...props }, ref) => {
+const _ListBox = (0, react.forwardRef)(({ variant, size: size$1, ...props }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "ListBox",
 		variant,
@@ -559,7 +542,7 @@ _ListBox.Section = _Section;
 
 //#endregion
 //#region src/Overlay/Underlay.tsx
-const Underlay = ({ size: size$1, variant, open, dismissable, keyboardDismissable,...rest }) => {
+const Underlay = ({ size: size$1, variant, open, dismissable, keyboardDismissable, ...rest }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Underlay",
 		size: size$1,
@@ -581,7 +564,7 @@ const Underlay = ({ size: size$1, variant, open, dismissable, keyboardDismissabl
 
 //#endregion
 //#region src/Overlay/Popover.tsx
-const _Popover = (0, react.forwardRef)(({ keyboardDismissDisabled, placement, open, children,...rest }, ref) => {
+const _Popover = (0, react.forwardRef)(({ keyboardDismissDisabled, placement, open, children, ...rest }, ref) => {
 	const props = {
 		isKeyboardDismissDisabled: keyboardDismissDisabled,
 		isOpen: open,
@@ -665,7 +648,7 @@ const AutocompleteInput = ({ loading, onSubmit, onClear, ref }) => {
 		}
 	});
 };
-const _Autocomplete = (0, react.forwardRef)(({ children, defaultValue, value, disabled, error, readOnly, required, emptyState, loading, onChange, onClear, onSubmit,...rest }, ref) => {
+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,
@@ -699,7 +682,7 @@ _Autocomplete.Section = _ListBox.Section;
 
 //#endregion
 //#region src/Badge/Badge.tsx
-const Badge = ({ variant, size: size$1, children,...props }) => {
+const Badge = ({ variant, size: size$1, children, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, __marigold_system.useClassNames)({
 			component: "Badge",
@@ -713,7 +696,7 @@ const Badge = ({ variant, size: size$1, children,...props }) => {
 
 //#endregion
 //#region src/icons/ChevronRight.tsx
-const ChevronRight = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+const ChevronRight = ({ 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,
@@ -730,7 +713,7 @@ const ChevronRight = ({ size: size$1 = 24, className,...props }) => /* @__PURE__
 
 //#endregion
 //#region src/IconButton/IconButton.tsx
-const IconButton = ({ className, children, variant, size: size$1,...props }) => {
+const IconButton = ({ className, children, variant, size: size$1, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
 		className: (0, __marigold_system.cn)("shrink-0 cursor-pointer outline-0", (0, __marigold_system.useClassNames)({
 			component: "IconButton",
@@ -771,7 +754,7 @@ const BreadcrumbsItem = (_) => null;
 
 //#endregion
 //#region src/Breadcrumbs/Breadcrumbs.tsx
-const _Breadcrumbs = (0, react.forwardRef)(({ children, variant, size: size$1, disabled, maxVisibleItems,...props }, ref) => {
+const _Breadcrumbs = (0, react.forwardRef)(({ children, variant, size: size$1, disabled, maxVisibleItems, ...props }, ref) => {
 	const { container, item: breadcrumbsItem, link, current } = (0, __marigold_system.useClassNames)({
 		component: "Breadcrumbs",
 		variant,
@@ -797,7 +780,7 @@ const _Breadcrumbs = (0, react.forwardRef)(({ children, variant, size: size$1, d
 		children: displayedItems.map((item, index$1) => {
 			if (!(0, react.isValidElement)(item)) return null;
 			const isLast = index$1 === displayedItems.length - 1;
-			const { href, children: itemChildren,...ariaProps } = item.props;
+			const { href, children: itemChildren, ...ariaProps } = item.props;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Breadcrumb, {
 				...ariaProps,
 				className: breadcrumbsItem,
@@ -827,7 +810,7 @@ const Breakout = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("d
 
 //#endregion
 //#region src/Button/Button.tsx
-const _Button = (0, react.forwardRef)(({ children, variant, size: size$1, disabled, loading, fullWidth,...props }, ref) => {
+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,
@@ -895,7 +878,7 @@ const _CalendarGrid = () => {
 
 //#endregion
 //#region src/icons/ChevronsVertical.tsx
-const ChevronsVertical = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+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,
@@ -953,7 +936,7 @@ 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", {
+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,
@@ -1078,7 +1061,7 @@ function hasOnlyOneSelectableYear(minValue, maxValue) {
 
 //#endregion
 //#region src/Calendar/Calendar.tsx
-const _Calendar = ({ disabled, readOnly, size: size$1, variant, width = "fit", dateUnavailable, minValue: _minValue, maxValue: _maxValue,...rest }) => {
+const _Calendar = ({ disabled, readOnly, size: size$1, variant, width = "fit", dateUnavailable, minValue: _minValue, maxValue: _maxValue, ...rest }) => {
 	const minValue = _minValue;
 	const maxValue = _maxValue;
 	const props = {
@@ -1139,7 +1122,7 @@ const _Calendar = ({ disabled, readOnly, size: size$1, variant, width = "fit", d
 
 //#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 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,
@@ -1162,7 +1145,7 @@ const CollapsibleProvider = ({ value, children }) => /* @__PURE__ */ (0, react_j
 
 //#endregion
 //#region src/Collapsible/CollapsibleContent.tsx
-const CollapsibleContent = ({ variant, size: size$1, children,...props }) => {
+const CollapsibleContent = ({ variant, size: size$1, children, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Collapsible",
 		variant,
@@ -1178,7 +1161,7 @@ const CollapsibleContent = ({ variant, size: size$1, children,...props }) => {
 
 //#endregion
 //#region src/Collapsible/CollapsibleTrigger.tsx
-const CollapsibleTrigger = ({ variant, size: size$1, children, level,...props }) => {
+const CollapsibleTrigger = ({ variant, size: size$1, children, level, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Collapsible",
 		variant,
@@ -1198,7 +1181,7 @@ const CollapsibleTrigger = ({ variant, size: size$1, children, level,...props })
 
 //#endregion
 //#region src/Collapsible/Collapsible.tsx
-const Collapsible = ({ variant, size: size$1, children, unstyled,...props }) => {
+const Collapsible = ({ variant, size: size$1, children, unstyled, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Collapsible",
 		variant,
@@ -1221,7 +1204,7 @@ Collapsible.Content = CollapsibleContent;
 
 //#endregion
 //#region src/Collapsible/More.tsx
-const More = ({ children, defaultExpanded = false, unstyled = true, showCount = false,...props }) => {
+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.
@@ -1265,7 +1248,7 @@ const CollapsibleGroup$1 = ({ children }) => {
 		children
 	});
 };
-const _CheckboxGroup = ({ children, variant, size: size$1, required, disabled, readOnly, error, width, orientation = "vertical", collapseAt,...rest }) => {
+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,
@@ -1303,7 +1286,7 @@ const _CheckboxGroup = ({ children, variant, size: size$1, required, disabled, r
 
 //#endregion
 //#region src/icons/Minus.tsx
-const Minus = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+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,
@@ -1332,7 +1315,7 @@ const Field = ({ description, children }) => {
 		})
 	});
 };
-const Icon$1 = ({ className, checked, indeterminate,...props }) => {
+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),
@@ -1346,7 +1329,7 @@ const Icon$1 = ({ className, checked, indeterminate,...props }) => {
 		}) : null
 	});
 };
-const _Checkbox = (0, react.forwardRef)(({ error, disabled, readOnly, required, checked, defaultChecked, indeterminate, variant, size: size$1, label, description,...rest }, ref) => {
+const _Checkbox = (0, react.forwardRef)(({ error, disabled, readOnly, required, checked, defaultChecked, indeterminate, variant, size: size$1, label, description, ...rest }, ref) => {
 	const props = {
 		isIndeterminate: indeterminate,
 		isDisabled: disabled,
@@ -1384,7 +1367,7 @@ _Checkbox.Group = _CheckboxGroup;
 
 //#endregion
 //#region src/CloseButton/CloseButton.tsx
-const CloseButton = (0, react.forwardRef)(({ className, size: size$1, variant,...props }, ref) => {
+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)({
@@ -1400,7 +1383,7 @@ const CloseButton = (0, react.forwardRef)(({ className, size: size$1, variant,..
 
 //#endregion
 //#region src/Columns/Columns.tsx
-const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children,...props }) => {
+const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children, ...props }) => {
 	if (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]),
@@ -1418,7 +1401,7 @@ const Columns = ({ space = 0, columns, collapseAt = "0em", stretch, children,...
 
 //#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) => {
+const _ComboBox = (0, react.forwardRef)(({ variant, size: size$1, required, disabled, readOnly, error, defaultValue, value, emptyState, onChange, children, loading, ...rest }, ref) => {
 	const props = {
 		isDisabled: disabled,
 		isReadOnly: readOnly,
@@ -1473,7 +1456,7 @@ const gridColumn = {
 	center: "*:col-[2]",
 	right: "*:col-[3]"
 };
-const Container = ({ contentLength = "default", align = "left", alignItems = "none", space = 0, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+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)({
@@ -1485,7 +1468,7 @@ const Container = ({ contentLength = "default", align = "left", alignItems = "no
 
 //#endregion
 //#region src/icons/CircleQuestionMark.tsx
-const CircleQuestionMark = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const CircleQuestionMark = ({ 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,
@@ -1510,7 +1493,7 @@ const CircleQuestionMark = ({ size: size$1 = 24, className,...props }) => /* @__
 
 //#endregion
 //#region src/icons/Info.tsx
-const Info = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const Info = ({ 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,
@@ -1565,7 +1548,7 @@ const icons$2 = {
 	help: CircleQuestionMark,
 	info: Info
 };
-const DialogTrigger$2 = ({ open,...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DialogTrigger, {
+const DialogTrigger$2 = ({ open, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DialogTrigger, {
 	isOpen: open,
 	...rest
 });
@@ -1603,7 +1586,7 @@ _ContextualHelp.Content = ContextualHelpContent;
 
 //#endregion
 //#region src/DateField/DateSegment.tsx
-const _DateSegment = ({ segment,...props }) => {
+const _DateSegment = ({ segment, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DateSegment, {
 		...props,
 		segment,
@@ -1682,7 +1665,7 @@ const isValidDate = (year, month, day) => {
 	if (month === 2 && isLeapYear) return day <= 29;
 	return day <= daysInMonth[month - 1];
 };
-const _DateInput = ({ variant, size: size$1, action, onPaste,...props }) => {
+const _DateInput = ({ variant, size: size$1, action, onPaste, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "DateField",
 		variant,
@@ -1715,7 +1698,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) => {
+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, {
 		as: react_aria_components.DateField,
 		variant,
@@ -1732,7 +1715,7 @@ const _DateField = (0, react.forwardRef)(({ variant, size: size$1, action, disab
 		})
 	});
 });
-const DateInputWithPasteWrapper = ({ onChange,...props }) => {
+const DateInputWithPasteWrapper = ({ onChange, ...props }) => {
 	const ctx = (0, react.useContext)(react_aria_components.DateFieldStateContext);
 	const onPaste = (date) => {
 		if (onChange) onChange(date);
@@ -1746,7 +1729,7 @@ const DateInputWithPasteWrapper = ({ onChange,...props }) => {
 
 //#endregion
 //#region src/icons/Calendar.tsx
-const Calendar = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const Calendar = ({ 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,
@@ -1774,7 +1757,7 @@ const Calendar = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */
 
 //#endregion
 //#region src/DatePicker/DatePicker.tsx
-const _DatePicker = (0, react.forwardRef)(({ dateUnavailable, disabled, required, readOnly, error, variant, size: size$1, open, granularity = "day", onChange,...rest }, ref) => {
+const _DatePicker = (0, react.forwardRef)(({ dateUnavailable, disabled, required, readOnly, error, variant, size: size$1, open, granularity = "day", onChange, ...rest }, ref) => {
 	const props = {
 		isDateUnavailable: dateUnavailable,
 		isDisabled: disabled,
@@ -1809,7 +1792,7 @@ const _DatePicker = (0, react.forwardRef)(({ dateUnavailable, disabled, required
 		}), /* @__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 }) => {
+const DatePickerWithPasteWrapper = ({ onChange, ...props }) => {
 	const ctx = (0, react.useContext)(react_aria_components.DatePickerStateContext);
 	const onPaste = (date) => {
 		if (onChange) onChange(date);
@@ -1823,7 +1806,7 @@ const DatePickerWithPasteWrapper = ({ onChange,...props }) => {
 
 //#endregion
 //#region src/Overlay/Modal.tsx
-const _Modal = (0, react.forwardRef)(({ size: size$1, open, dismissable, keyboardDismissable, onOpenChange, children,...props }, ref) => {
+const _Modal = (0, react.forwardRef)(({ size: size$1, open, dismissable, keyboardDismissable, onOpenChange, children, ...props }, ref) => {
 	const className = (0, __marigold_system.useClassNames)({
 		component: "Modal",
 		size: size$1
@@ -1893,7 +1876,7 @@ const DialogTitle = ({ variant, size: size$1, children }) => {
 
 //#endregion
 //#region src/Dialog/DialogTrigger.tsx
-const _DialogTrigger = ({ open, dismissable, keyboardDismissable,...rest }) => {
+const _DialogTrigger = ({ open, dismissable, keyboardDismissable, ...rest }) => {
 	const ctx = {
 		isDismissable: dismissable,
 		isKeyboardDismissDisabled: !keyboardDismissable
@@ -1920,7 +1903,7 @@ const _DialogTrigger = ({ open, dismissable, keyboardDismissable,...rest }) => {
 * Needed so that the close button and function can be used inside the dialog,
 * when the dialog is controlled and no <Dialog.Trigger> is used.
 */
-const InnerDialog = (0, react.forwardRef)(({ variant, size: size$1, closeButton,...props }, ref) => {
+const InnerDialog = (0, react.forwardRef)(({ variant, size: size$1, closeButton, ...props }, ref) => {
 	const state = (0, react.useContext)(react_aria_components.OverlayTriggerStateContext);
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Dialog",
@@ -1938,7 +1921,7 @@ const InnerDialog = (0, react.forwardRef)(({ variant, size: size$1, closeButton,
 		}), children]
 	});
 });
-const _Dialog = (0, react.forwardRef)(({ open, onOpenChange, children,...props }, ref) => {
+const _Dialog = (0, react.forwardRef)(({ open, onOpenChange, children, ...props }, ref) => {
 	const ctx = (0, react.useContext)(DialogContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Modal, {
 		size: props.size,
@@ -1960,7 +1943,7 @@ _Dialog.Actions = DialogActions;
 
 //#endregion
 //#region src/Dialog/ConfirmationDialog.tsx
-const ConfirmationDialog = ({ title, confirmationLabel, cancelLabel, onCancel, onConfirm, autoFocusButton, children, variant, size: size$1 = "xsmall",...props }) => {
+const ConfirmationDialog = ({ title, confirmationLabel, cancelLabel, onCancel, onConfirm, autoFocusButton, children, variant, size: size$1 = "xsmall", ...props }) => {
 	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Dialog, {
 		role: "alertdialog",
@@ -2032,7 +2015,7 @@ const useConfirmation = () => {
 
 //#endregion
 //#region src/Divider/Divider.tsx
-const _Divider = ({ variant,...props }) => {
+const _Divider = ({ variant, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Separator, {
 		className: (0, __marigold_system.cn)("border-none", (0, __marigold_system.useClassNames)({
 			component: "Divider",
@@ -2139,7 +2122,7 @@ const useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
 
 //#endregion
 //#region src/Overlay/NonModal.tsx
-const NonModalInner = ({ state, isExiting,...props }) => {
+const NonModalInner = ({ state, isExiting, ...props }) => {
 	const { nonModalProps } = useNonModal(props, state);
 	const ref = props.nonModalRef;
 	const isEntering = (0, __react_aria_utils.useEnterAnimation)(ref) || props.isEntering || false;
@@ -2182,7 +2165,7 @@ const NonModalInner = ({ state, isExiting,...props }) => {
 		})
 	});
 };
-const NonModal = (0, react.forwardRef)(({ open,...rest }, ref) => {
+const NonModal = (0, react.forwardRef)(({ open, ...rest }, ref) => {
 	const props = {
 		isOpen: open,
 		...rest
@@ -2204,7 +2187,7 @@ const NonModal = (0, react.forwardRef)(({ open,...rest }, ref) => {
 
 //#endregion
 //#region src/Drawer/DrawerModal.tsx
-const MobileModal = ({ children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.ModalOverlay, {
+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)",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Modal, {
@@ -2212,7 +2195,7 @@ const MobileModal = ({ children,...props }) => /* @__PURE__ */ (0, react_jsx_run
 		children
 	})
 });
-const DrawerModal = ({ children, className,...props }) => {
+const DrawerModal = ({ children, className, ...props }) => {
 	return (0, __marigold_system.useSmallScreen)() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileModal, { children }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NonModal, {
 		...props,
 		className: (0, __marigold_system.cn)("fixed", className),
@@ -2243,7 +2226,7 @@ const DrawerTitle = ({ variant, size: size$1, children }) => {
 
 //#endregion
 //#region src/Drawer/DrawerTrigger.tsx
-const DrawerTrigger = ({ open, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DialogTrigger, {
+const DrawerTrigger = ({ open, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DialogTrigger, {
 	isOpen: open,
 	...props,
 	children
@@ -2251,7 +2234,7 @@ const DrawerTrigger = ({ open, children,...props }) => /* @__PURE__ */ (0, react
 
 //#endregion
 //#region src/Drawer/Drawer.tsx
-const Drawer = ({ children, size: size$1 = "medium", variant, open, keyboardDismissable, closeButton, role = "complementary", placement = "right",...props }) => {
+const Drawer = ({ children, size: size$1 = "medium", variant, open, keyboardDismissable, closeButton, role = "complementary", placement = "right", ...props }) => {
 	const ref = (0, react.useRef)(null);
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Drawer",
@@ -2314,7 +2297,7 @@ const FileFieldItem = ({ children, onRemove }) => {
 
 //#endregion
 //#region src/icons/Upload.tsx
-const Upload = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const Upload = ({ 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,
@@ -2331,7 +2314,7 @@ const Upload = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0
 
 //#endregion
 //#region src/FileField/FileTrigger.tsx
-const _FileTrigger = ({ label, disabled,...rest }) => {
+const _FileTrigger = ({ label, disabled, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.FileTrigger, {
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_Button, {
@@ -2375,7 +2358,7 @@ 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, ...props }) => {
 	const [files, setFiles] = (0, react.useState)(null);
 	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages);
 	const dropZoneLabel = stringFormatter.format("dropZoneLabel");
@@ -2443,7 +2426,7 @@ 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 = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Form, {
 	...props,
 	className: (0, __marigold_system.cn)(__marigold_system.maxWidth[maxWidth], unstyled && "contents")
 });
@@ -2459,7 +2442,7 @@ const GridArea = ({ name, children }) => /* @__PURE__ */ (0, react_jsx_runtime.j
 //#region src/Grid/Grid.tsx
 const parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 const parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
-const Grid = ({ children, areas, columns, rows, alignX, alignY, height = "auto", space = 0,...props }) => {
+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]),
 		style: {
@@ -2475,7 +2458,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", ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Headline",
 		variant,
@@ -2496,9 +2479,10 @@ const inlineAlignmentY = {
 	...__marigold_system.alignment.horizontal.alignmentY,
 	input: "items-end [&:has([slot=description])]:items-end [&:has([slot=description])_>*:not(:has([slot=description]))]:mb-6 [&:has([slot=errorMessage])_>*:not(:has([slot=errorMessage]))]:mb-6"
 };
-const Inline = ({ space = 0, noWrap, alignX, alignY, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Inline = ({ space = 0, noWrap, alignX, alignY, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	...props,
-	className: (0, __marigold_system.cn)("flex", !noWrap && "flex-wrap", __marigold_system.gapSpace[space], alignX && __marigold_system.alignment?.horizontal?.alignmentX[alignX], alignY && inlineAlignmentY[alignY]),
+	className: (0, __marigold_system.cn)("flex gap-(--space)", !noWrap && "flex-wrap", alignX && __marigold_system.alignment?.horizontal?.alignmentX[alignX], alignY && inlineAlignmentY[alignY]),
+	style: (0, __marigold_system.createSpacingVar)("space", `${space}`),
 	children
 });
 
@@ -2511,7 +2495,7 @@ const Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, react
 
 //#endregion
 //#region src/Link/Link.tsx
-const _Link = (0, react.forwardRef)(({ variant, size: size$1, disabled, children,...props }, ref) => {
+const _Link = (0, react.forwardRef)(({ variant, size: size$1, disabled, children, ...props }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Link",
 		variant,
@@ -2528,7 +2512,7 @@ const _Link = (0, react.forwardRef)(({ variant, size: size$1, disabled, children
 
 //#endregion
 //#region src/LinkButton/LinkButton.tsx
-const _LinkButton = (0, react.forwardRef)(({ children, variant, size: size$1, disabled, fullWidth,...props }, ref) => {
+const _LinkButton = (0, react.forwardRef)(({ children, variant, size: size$1, disabled, fullWidth, ...props }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Button",
 		variant,
@@ -2550,7 +2534,7 @@ const useListContext = () => (0, react.useContext)(ListContext);
 
 //#endregion
 //#region src/List/ListItem.tsx
-const ListItem = ({ children,...props }) => {
+const ListItem = ({ children, ...props }) => {
 	const { classNames: classNames$2 } = useListContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 		...props,
@@ -2561,7 +2545,7 @@ const ListItem = ({ children,...props }) => {
 
 //#endregion
 //#region src/List/List.tsx
-const List = ({ as = "ul", children, variant, size: size$1,...props }) => {
+const List = ({ as = "ul", children, variant, size: size$1, ...props }) => {
 	const Component$1 = as;
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "List",
@@ -2581,7 +2565,7 @@ List.Item = ListItem;
 
 //#endregion
 //#region src/icons/EllipsisVertical.tsx
-const EllipsisVertical = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const EllipsisVertical = ({ 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,
@@ -2614,7 +2598,7 @@ const EllipsisVertical = ({ size: size$1 = 24, className,...props }) => /* @__PU
 
 //#endregion
 //#region src/Menu/MenuItem.tsx
-const _MenuItem = ({ children, variant, size: size$1,...props }) => {
+const _MenuItem = ({ children, variant, size: size$1, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Menu",
 		variant,
@@ -2629,7 +2613,7 @@ const _MenuItem = ({ children, variant, size: size$1,...props }) => {
 
 //#endregion
 //#region src/Menu/MenuSection.tsx
-const _MenuSection = ({ children, title,...props }) => {
+const _MenuSection = ({ children, title, ...props }) => {
 	const className = (0, __marigold_system.useClassNames)({ component: "Menu" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.MenuSection, {
 		...props,
@@ -2642,7 +2626,7 @@ const _MenuSection = ({ children, title,...props }) => {
 
 //#endregion
 //#region src/Menu/Menu.tsx
-const _Menu = ({ children, label, variant, size: size$1, disabled, open, placement, "aria-label": ariaLabel,...props }) => {
+const _Menu = ({ children, label, variant, size: size$1, disabled, open, placement, "aria-label": ariaLabel, ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Menu",
 		variant,
@@ -2671,7 +2655,7 @@ _Menu.Section = _MenuSection;
 
 //#endregion
 //#region src/Menu/ActionMenu.tsx
-const ActionMenu = ({ children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Menu, {
+const ActionMenu = ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Menu, {
 	...props,
 	label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EllipsisVertical, {}),
 	children
@@ -3868,7 +3852,15 @@ var createCache = function createCache$1(options$1) {
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js
-var require_react_is_production_min = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.production.min.js": ((exports) => {
+/** @license React v16.13.1
+* react-is.production.min.js
+*
+* Copyright (c) Facebook, Inc. and its affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_is_production_min = /* @__PURE__ */ __commonJSMin(((exports) => {
 	var b = "function" === typeof Symbol && Symbol.for, c = b ? Symbol.for("react.element") : 60103, d = b ? Symbol.for("react.portal") : 60106, e = b ? Symbol.for("react.fragment") : 60107, f = b ? Symbol.for("react.strict_mode") : 60108, g = b ? Symbol.for("react.profiler") : 60114, h = b ? Symbol.for("react.provider") : 60109, k = b ? Symbol.for("react.context") : 60110, l = b ? Symbol.for("react.async_mode") : 60111, m = b ? Symbol.for("react.concurrent_mode") : 60111, n = b ? Symbol.for("react.forward_ref") : 60112, p = b ? Symbol.for("react.suspense") : 60113, q = b ? Symbol.for("react.suspense_list") : 60120, r = b ? Symbol.for("react.memo") : 60115, t = b ? Symbol.for("react.lazy") : 60116, v = b ? Symbol.for("react.block") : 60121, w$1 = b ? Symbol.for("react.fundamental") : 60117, x = b ? Symbol.for("react.responder") : 60118, y = b ? Symbol.for("react.scope") : 60119;
 	function z(a) {
 		if ("object" === typeof a && null !== a) {
@@ -3951,12 +3943,21 @@ var require_react_is_production_min = /* @__PURE__ */ __commonJS({ "../../node_m
 		return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w$1 || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
 	};
 	exports.typeOf = z;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.development.js
-var require_react_is_development = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/cjs/react-is.development.js": ((exports) => {
+/** @license React v16.13.1
+* react-is.development.js
+*
+* Copyright (c) Facebook, Inc. and its affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_react_is_development = /* @__PURE__ */ __commonJSMin(((exports) => {
 	if (process.env.NODE_ENV !== "production") (function() {
+		"use strict";
 		var hasSymbol = typeof Symbol === "function" && Symbol.for;
 		var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103;
 		var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106;
@@ -4093,18 +4094,18 @@ var require_react_is_development = /* @__PURE__ */ __commonJS({ "../../node_modu
 		exports.isValidElementType = isValidElementType;
 		exports.typeOf = typeOf;
 	})();
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/index.js
-var require_react_is = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react-is@16.13.1/node_modules/react-is/index.js": ((exports, module) => {
+var require_react_is = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	if (process.env.NODE_ENV === "production") module.exports = require_react_is_production_min();
 	else module.exports = require_react_is_development();
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/hoist-non-react-statics@3.3.2/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
-var require_hoist_non_react_statics_cjs = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/hoist-non-react-statics@3.3.2/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js": ((exports, module) => {
+var require_hoist_non_react_statics_cjs = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var reactIs = require_react_is();
 	/**
 	* Copyright 2015, Yahoo! Inc.
@@ -4183,7 +4184,7 @@ var require_hoist_non_react_statics_cjs = /* @__PURE__ */ __commonJS({ "../../no
 		return targetComponent;
 	}
 	module.exports = hoistNonReactStatics;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@emotion+utils@1.4.2/node_modules/@emotion/utils/dist/emotion-utils.esm.js
@@ -4498,7 +4499,7 @@ var Emotion$1 = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/extends.js
-var require_extends = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/extends.js": ((exports, module) => {
+var require_extends = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _extends$1() {
 		return module.exports = _extends$1 = Object.assign ? Object.assign.bind() : function(n$1) {
 			for (var e$1 = 1; e$1 < arguments.length; e$1++) {
@@ -4509,12 +4510,12 @@ var require_extends = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@ba
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends$1.apply(null, arguments);
 	}
 	module.exports = _extends$1, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.2.2_react@19.2.0/node_modules/@emotion/react/dist/emotion-react.esm.js
-var import_extends = /* @__PURE__ */ __toESM(require_extends());
-var import_hoist_non_react_statics_cjs = /* @__PURE__ */ __toESM(require_hoist_non_react_statics_cjs());
+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) {
 	var args = arguments;
 	if (props == null || !hasOwn.call(props, "css")) return react.createElement.apply(void 0, args);
@@ -5811,7 +5812,7 @@ var defaultComponents = function defaultComponents$1(props) {
 
 //#endregion
 //#region ../../node_modules/.pnpm/memoize-one@6.0.0/node_modules/memoize-one/dist/memoize-one.cjs.js
-var require_memoize_one_cjs = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/memoize-one@6.0.0/node_modules/memoize-one/dist/memoize-one.cjs.js": ((exports, module) => {
+var require_memoize_one_cjs = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var safeIsNaN = Number.isNaN || function ponyfill(value) {
 		return typeof value === "number" && value !== value;
 	};
@@ -5846,7 +5847,7 @@ var require_memoize_one_cjs = /* @__PURE__ */ __commonJS({ "../../node_modules/.
 		return memoized;
 	}
 	module.exports = memoizeOne$1;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.2_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-select/dist/Select-ef7c0426.esm.js
@@ -8032,7 +8033,7 @@ Select$1.defaultProps = defaultProps;
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/typeof.js
-var require_typeof = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/typeof.js": ((exports, module) => {
+var require_typeof = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _typeof$3(o) {
 		"@babel/helpers - typeof";
 		return module.exports = _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o$1) {
@@ -8042,11 +8043,11 @@ var require_typeof = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@bab
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _typeof$3(o);
 	}
 	module.exports = _typeof$3, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPrimitive.js
-var require_toPrimitive = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPrimitive.js": ((exports, module) => {
+var require_toPrimitive = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var _typeof$2 = require_typeof()["default"];
 	function toPrimitive$1(t$1, r$1) {
 		if ("object" != _typeof$2(t$1) || !t$1) return t$1;
@@ -8059,11 +8060,11 @@ var require_toPrimitive = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm
 		return ("string" === r$1 ? String : Number)(t$1);
 	}
 	module.exports = toPrimitive$1, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPropertyKey.js
-var require_toPropertyKey = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toPropertyKey.js": ((exports, module) => {
+var require_toPropertyKey = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var _typeof$1 = require_typeof()["default"];
 	var toPrimitive = require_toPrimitive();
 	function toPropertyKey$2(t$1) {
@@ -8071,11 +8072,11 @@ var require_toPropertyKey = /* @__PURE__ */ __commonJS({ "../../node_modules/.pn
 		return "symbol" == _typeof$1(i$1) ? i$1 : i$1 + "";
 	}
 	module.exports = toPropertyKey$2, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/defineProperty.js
-var require_defineProperty = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/defineProperty.js": ((exports, module) => {
+var require_defineProperty = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var toPropertyKey$1 = require_toPropertyKey();
 	function _defineProperty(e$1, r$1, t$1) {
 		return (r$1 = toPropertyKey$1(r$1)) in e$1 ? Object.defineProperty(e$1, r$1, {
@@ -8086,11 +8087,11 @@ var require_defineProperty = /* @__PURE__ */ __commonJS({ "../../node_modules/.p
 		}) : e$1[r$1] = t$1, e$1;
 	}
 	module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectSpread2.js
-var require_objectSpread2 = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectSpread2.js": ((exports, module) => {
+var require_objectSpread2 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var defineProperty = require_defineProperty();
 	function ownKeys(e$1, r$1) {
 		var t$1 = Object.keys(e$1);
@@ -8114,20 +8115,20 @@ var require_objectSpread2 = /* @__PURE__ */ __commonJS({ "../../node_modules/.pn
 		return e$1;
 	}
 	module.exports = _objectSpread2, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithHoles.js
-var require_arrayWithHoles = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithHoles.js": ((exports, module) => {
+var require_arrayWithHoles = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _arrayWithHoles(r$1) {
 		if (Array.isArray(r$1)) return r$1;
 	}
 	module.exports = _arrayWithHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js
-var require_iterableToArrayLimit = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js": ((exports, module) => {
+var require_iterableToArrayLimit = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _iterableToArrayLimit(r$1, l$1) {
 		var t$1 = null == r$1 ? null : "undefined" != typeof Symbol && r$1[Symbol.iterator] || r$1["@@iterator"];
 		if (null != t$1) {
@@ -8150,22 +8151,22 @@ var require_iterableToArrayLimit = /* @__PURE__ */ __commonJS({ "../../node_modu
 		}
 	}
 	module.exports = _iterableToArrayLimit, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayLikeToArray.js
-var require_arrayLikeToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayLikeToArray.js": ((exports, module) => {
+var require_arrayLikeToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _arrayLikeToArray(r$1, a) {
 		(null == a || a > r$1.length) && (a = r$1.length);
 		for (var e$1 = 0, n$1 = Array(a); e$1 < a; e$1++) n$1[e$1] = r$1[e$1];
 		return n$1;
 	}
 	module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js
-var require_unsupportedIterableToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js": ((exports, module) => {
+var require_unsupportedIterableToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayLikeToArray$1 = require_arrayLikeToArray();
 	function _unsupportedIterableToArray(r$1, a) {
 		if (r$1) {
@@ -8175,20 +8176,20 @@ var require_unsupportedIterableToArray = /* @__PURE__ */ __commonJS({ "../../nod
 		}
 	}
 	module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableRest.js
-var require_nonIterableRest = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableRest.js": ((exports, module) => {
+var require_nonIterableRest = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _nonIterableRest() {
 		throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 	}
 	module.exports = _nonIterableRest, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/slicedToArray.js
-var require_slicedToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/slicedToArray.js": ((exports, module) => {
+var require_slicedToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayWithHoles = require_arrayWithHoles();
 	var iterableToArrayLimit = require_iterableToArrayLimit();
 	var unsupportedIterableToArray$1 = require_unsupportedIterableToArray();
@@ -8197,11 +8198,11 @@ var require_slicedToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pn
 		return arrayWithHoles(r$1) || iterableToArrayLimit(r$1, e$1) || unsupportedIterableToArray$1(r$1, e$1) || nonIterableRest();
 	}
 	module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
-var require_objectWithoutPropertiesLoose = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js": ((exports, module) => {
+var require_objectWithoutPropertiesLoose = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _objectWithoutPropertiesLoose(r$1, e$1) {
 		if (null == r$1) return {};
 		var t$1 = {};
@@ -8212,11 +8213,11 @@ var require_objectWithoutPropertiesLoose = /* @__PURE__ */ __commonJS({ "../../n
 		return t$1;
 	}
 	module.exports = _objectWithoutPropertiesLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
-var require_objectWithoutProperties = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js": ((exports, module) => {
+var require_objectWithoutProperties = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose();
 	function _objectWithoutProperties(e$1, t$1) {
 		if (null == e$1) return {};
@@ -8228,20 +8229,20 @@ var require_objectWithoutProperties = /* @__PURE__ */ __commonJS({ "../../node_m
 		return i$1;
 	}
 	module.exports = _objectWithoutProperties, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/classCallCheck.js
-var require_classCallCheck = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/classCallCheck.js": ((exports, module) => {
+var require_classCallCheck = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _classCallCheck(a, n$1) {
 		if (!(a instanceof n$1)) throw new TypeError("Cannot call a class as a function");
 	}
 	module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createClass.js
-var require_createClass = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createClass.js": ((exports, module) => {
+var require_createClass = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var toPropertyKey = require_toPropertyKey();
 	function _defineProperties(e$1, r$1) {
 		for (var t$1 = 0; t$1 < r$1.length; t$1++) {
@@ -8253,22 +8254,22 @@ var require_createClass = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm
 		return r$1 && _defineProperties(e$1.prototype, r$1), t$1 && _defineProperties(e$1, t$1), Object.defineProperty(e$1, "prototype", { writable: !1 }), e$1;
 	}
 	module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/setPrototypeOf.js
-var require_setPrototypeOf = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/setPrototypeOf.js": ((exports, module) => {
+var require_setPrototypeOf = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _setPrototypeOf(t$1, e$1) {
 		return module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t$2, e$2) {
 			return t$2.__proto__ = e$2, t$2;
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _setPrototypeOf(t$1, e$1);
 	}
 	module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/inherits.js
-var require_inherits = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/inherits.js": ((exports, module) => {
+var require_inherits = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var setPrototypeOf = require_setPrototypeOf();
 	function _inherits(t$1, e$1) {
 		if ("function" != typeof e$1 && null !== e$1) throw new TypeError("Super expression must either be null or a function");
@@ -8279,22 +8280,22 @@ var require_inherits = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@b
 		} }), Object.defineProperty(t$1, "prototype", { writable: !1 }), e$1 && setPrototypeOf(t$1, e$1);
 	}
 	module.exports = _inherits, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/getPrototypeOf.js
-var require_getPrototypeOf = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/getPrototypeOf.js": ((exports, module) => {
+var require_getPrototypeOf = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _getPrototypeOf(t$1) {
 		return module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t$2) {
 			return t$2.__proto__ || Object.getPrototypeOf(t$2);
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports, _getPrototypeOf(t$1);
 	}
 	module.exports = _getPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/isNativeReflectConstruct.js
-var require_isNativeReflectConstruct = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/isNativeReflectConstruct.js": ((exports, module) => {
+var require_isNativeReflectConstruct = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _isNativeReflectConstruct() {
 		try {
 			var t$1 = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
@@ -8304,21 +8305,21 @@ var require_isNativeReflectConstruct = /* @__PURE__ */ __commonJS({ "../../node_
 		}, module.exports.__esModule = true, module.exports["default"] = module.exports)();
 	}
 	module.exports = _isNativeReflectConstruct, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/assertThisInitialized.js
-var require_assertThisInitialized = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/assertThisInitialized.js": ((exports, module) => {
+var require_assertThisInitialized = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _assertThisInitialized(e$1) {
 		if (void 0 === e$1) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
 		return e$1;
 	}
 	module.exports = _assertThisInitialized, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js
-var require_possibleConstructorReturn = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js": ((exports, module) => {
+var require_possibleConstructorReturn = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var _typeof = require_typeof()["default"];
 	var assertThisInitialized = require_assertThisInitialized();
 	function _possibleConstructorReturn(t$1, e$1) {
@@ -8327,11 +8328,11 @@ var require_possibleConstructorReturn = /* @__PURE__ */ __commonJS({ "../../node
 		return assertThisInitialized(t$1);
 	}
 	module.exports = _possibleConstructorReturn, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createSuper.js
-var require_createSuper = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/createSuper.js": ((exports, module) => {
+var require_createSuper = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var getPrototypeOf = require_getPrototypeOf();
 	var isNativeReflectConstruct = require_isNativeReflectConstruct();
 	var possibleConstructorReturn = require_possibleConstructorReturn();
@@ -8347,39 +8348,39 @@ var require_createSuper = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm
 		};
 	}
 	module.exports = _createSuper, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js
-var require_arrayWithoutHoles = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js": ((exports, module) => {
+var require_arrayWithoutHoles = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayLikeToArray = require_arrayLikeToArray();
 	function _arrayWithoutHoles(r$1) {
 		if (Array.isArray(r$1)) return arrayLikeToArray(r$1);
 	}
 	module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArray.js
-var require_iterableToArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/iterableToArray.js": ((exports, module) => {
+var require_iterableToArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _iterableToArray(r$1) {
 		if ("undefined" != typeof Symbol && null != r$1[Symbol.iterator] || null != r$1["@@iterator"]) return Array.from(r$1);
 	}
 	module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableSpread.js
-var require_nonIterableSpread = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/nonIterableSpread.js": ((exports, module) => {
+var require_nonIterableSpread = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _nonIterableSpread() {
 		throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 	}
 	module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toConsumableArray.js
-var require_toConsumableArray = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/toConsumableArray.js": ((exports, module) => {
+var require_toConsumableArray = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	var arrayWithoutHoles = require_arrayWithoutHoles();
 	var iterableToArray = require_iterableToArray();
 	var unsupportedIterableToArray = require_unsupportedIterableToArray();
@@ -8388,30 +8389,30 @@ var require_toConsumableArray = /* @__PURE__ */ __commonJS({ "../../node_modules
 		return arrayWithoutHoles(r$1) || iterableToArray(r$1) || unsupportedIterableToArray(r$1) || nonIterableSpread();
 	}
 	module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js
-var require_taggedTemplateLiteral = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/taggedTemplateLiteral.js": ((exports, module) => {
+var require_taggedTemplateLiteral = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	function _taggedTemplateLiteral(e$1, t$1) {
 		return t$1 || (t$1 = e$1.slice(0)), Object.freeze(Object.defineProperties(e$1, { raw: { value: Object.freeze(t$1) } }));
 	}
 	module.exports = _taggedTemplateLiteral, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}) });
+}));
 
 //#endregion
 //#region ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.2.2_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-select/dist/react-select.esm.js
-var import_objectSpread2 = /* @__PURE__ */ __toESM(require_objectSpread2());
-var import_slicedToArray = /* @__PURE__ */ __toESM(require_slicedToArray());
-var import_objectWithoutProperties = /* @__PURE__ */ __toESM(require_objectWithoutProperties());
-var import_classCallCheck = /* @__PURE__ */ __toESM(require_classCallCheck());
-var import_createClass = /* @__PURE__ */ __toESM(require_createClass());
-var import_inherits = /* @__PURE__ */ __toESM(require_inherits());
-var import_createSuper = /* @__PURE__ */ __toESM(require_createSuper());
-var import_toConsumableArray = /* @__PURE__ */ __toESM(require_toConsumableArray());
-var import_typeof = /* @__PURE__ */ __toESM(require_typeof());
-var import_taggedTemplateLiteral = /* @__PURE__ */ __toESM(require_taggedTemplateLiteral());
-var import_defineProperty = /* @__PURE__ */ __toESM(require_defineProperty());
+var import_objectSpread2 = require_objectSpread2();
+var import_slicedToArray = require_slicedToArray();
+var import_objectWithoutProperties = require_objectWithoutProperties();
+var import_classCallCheck = require_classCallCheck();
+var import_createClass = require_createClass();
+var import_inherits = require_inherits();
+var import_createSuper = require_createSuper();
+var import_toConsumableArray = require_toConsumableArray();
+var import_typeof = require_typeof();
+var import_taggedTemplateLiteral = require_taggedTemplateLiteral();
+var import_defineProperty = require_defineProperty();
 var StateManagedSelect$1 = /* @__PURE__ */ (0, react.forwardRef)(function(props, ref) {
 	var baseSelectProps = useStateManager(props);
 	return /* @__PURE__ */ react.createElement(Select$1, _extends({ ref }, baseSelectProps));
@@ -8434,7 +8435,7 @@ const propsToBeRemoved = [
 	"isHidden",
 	"cx"
 ];
-const Input$1 = ({ innerRef, placeholder, hasValue,...props }) => {
+const Input$1 = ({ innerRef, placeholder, hasValue, ...props }) => {
 	const inputProps = Object.entries(props).reduce((acc, [key, value]) => {
 		if (!propsToBeRemoved.includes(key)) acc[key] = value;
 		return acc;
@@ -8465,7 +8466,7 @@ const getClassNames = (classNames$2) => ({
 	placeholder: () => "hidden",
 	valueContainer: () => classNames$2.valueContainer
 });
-const Multiselect = ({ disabled, readOnly = false, items, selectedItems, defaultSelectedItems, defaultValue, error, errorMessage, size: size$1, variant, placeholder, description, emptyState, onChange, onSelectionChange, width,...rest }) => {
+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",
 		size: size$1,
@@ -8565,7 +8566,7 @@ const Multiselect = ({ disabled, readOnly = false, items, selectedItems, default
 
 //#endregion
 //#region src/icons/Plus.tsx
-const Plus = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const Plus = ({ 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,
@@ -8582,7 +8583,7 @@ const Plus = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0,
 
 //#endregion
 //#region src/NumberField/StepButton.tsx
-const _StepButton = ({ direction, className,...props }) => {
+const _StepButton = ({ direction, className, ...props }) => {
 	const Icon$2 = direction === "up" ? Plus : 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),
@@ -8593,7 +8594,7 @@ const _StepButton = ({ direction, className,...props }) => {
 
 //#endregion
 //#region src/NumberField/NumberField.tsx
-const _NumberField = (0, react.forwardRef)(({ variant, size: size$1, disabled, required, readOnly, error, hideStepper,...rest }, ref) => {
+const _NumberField = (0, react.forwardRef)(({ variant, size: size$1, disabled, required, readOnly, error, hideStepper, ...rest }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "NumberField",
 		size: size$1,
@@ -8652,7 +8653,7 @@ const NavigationButton = (props) => {
 	const ref = (0, react.useRef)(null);
 	const { navigationButton } = (0, __marigold_system.useClassNames)({ component: "Pagination" });
 	let { buttonProps } = (0, __react_aria_button.useButton)(props, ref);
-	let { children, isSelected, isDisabled, registerRef, controlLabel, position: position$1,...rest } = props;
+	let { children, isSelected, isDisabled, controlLabel, position: position$1, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		ref,
 		...buttonProps,
@@ -8718,17 +8719,17 @@ const InnerPagination = ({ currentPage, pageSize, totalPages, pageRange, setCurr
 	const isFirstPage = currentPage === 1;
 	const isLastPage = currentPage === totalPages || totalPages === 0;
 	const isFirstRender = (0, react.useRef)(true);
+	const handlePageChange = (0, react.useCallback)((newPage) => {
+		setCurrentPage(newPage);
+		if (onChange) onChange(newPage);
+	}, [setCurrentPage, onChange]);
 	(0, react.useEffect)(() => {
 		if (isFirstRender.current) {
 			isFirstRender.current = false;
 			return;
 		}
 		handlePageChange(1);
-	}, [pageSize]);
-	const handlePageChange = (newPage) => {
-		setCurrentPage(newPage);
-		if (onChange) onChange(newPage);
-	};
+	}, [pageSize, handlePageChange]);
 	const { icon, container } = (0, __marigold_system.useClassNames)({ component: "Pagination" });
 	const handleKeyDown = (onEnter) => (e$1) => {
 		if (e$1.key === "ArrowRight") {
@@ -8775,7 +8776,7 @@ const InnerPagination = ({ currentPage, pageSize, totalPages, pageRange, setCurr
 		})
 	] });
 };
-const _Pagination = ({ defaultPage = 1, page, totalItems, pageSize,...props }) => {
+const _Pagination = ({ defaultPage = 1, page, totalItems, pageSize, ...props }) => {
 	const [currentPage, setCurrentPage] = (0, react.useState)(page ?? defaultPage);
 	const totalPages = Math.ceil(totalItems / pageSize);
 	const pageRange = usePageRange({
@@ -8841,7 +8842,7 @@ const CollapsibleGroup = ({ children }) => {
 		children
 	});
 };
-const _RadioGroup = ({ variant, size: size$1, label, error, disabled, required, readOnly, description, errorMessage, orientation = "vertical", children, width, collapseAt,...rest }) => {
+const _RadioGroup = ({ variant, size: size$1, label, error, disabled, required, readOnly, description, errorMessage, orientation = "vertical", children, width, collapseAt, ...rest }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Radio",
 		variant,
@@ -8883,13 +8884,13 @@ const _RadioGroup = ({ variant, size: size$1, label, error, disabled, required,
 
 //#endregion
 //#region src/Radio/Radio.tsx
-const Icon = ({ checked, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Icon = ({ checked, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: (0, __marigold_system.cn)("flex h-4 w-4 items-center justify-center rounded-full border p-1", className),
 	"aria-hidden": "true",
 	...props,
 	children: checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-full rounded-full bg-current" }) : null
 });
-const _Radio = (0, react.forwardRef)(({ value, disabled, width, children,...props }, ref) => {
+const _Radio = (0, react.forwardRef)(({ value, disabled, width, children, ...props }, ref) => {
 	const { variant, size: size$1, width: groupWidth } = useRadioGroupContext();
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Radio",
@@ -8915,7 +8916,7 @@ _Radio.Group = _RadioGroup;
 
 //#endregion
 //#region src/Scrollable/Scrollable.tsx
-const Scrollable = ({ children, width = "full", height,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+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]]),
 	style: (0, __marigold_system.createVar)({ height }),
@@ -8924,7 +8925,7 @@ const Scrollable = ({ children, width = "full", height,...props }) => /* @__PURE
 
 //#endregion
 //#region src/SearchField/SearchField.tsx
-const _SearchField = (0, react.forwardRef)(({ disabled, required, readOnly, error, action,...rest }, ref) => {
+const _SearchField = (0, react.forwardRef)(({ disabled, required, readOnly, error, ...rest }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
 		as: react_aria_components.SearchField,
 		...rest,
@@ -8941,7 +8942,7 @@ const _SearchField = (0, react.forwardRef)(({ disabled, required, readOnly, erro
 
 //#endregion
 //#region src/icons/CircleAlert.tsx
-const CircleAlert = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const CircleAlert = ({ 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,
@@ -8976,7 +8977,7 @@ const CircleAlert = ({ size: size$1 = 24, className,...props }) => /* @__PURE__
 
 //#endregion
 //#region src/icons/CircleCheck.tsx
-const CircleCheck = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+const CircleCheck = ({ 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,
@@ -9028,7 +9029,7 @@ const icons$1 = {
 	warning: CircleAlert,
 	error: TriangleAlert
 };
-const SectionMessage = ({ variant = "info", size: size$1, children, closeButton, close, onCloseChange,...props }) => {
+const SectionMessage = ({ variant = "info", size: size$1, children, closeButton, close, onCloseChange, ...props }) => {
 	const buttonRef = (0, react.useRef)(null);
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "SectionMessage",
@@ -9072,7 +9073,7 @@ 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, children, ...rest }, ref) {
 	const props = {
 		isDisabled: disabled,
 		isInvalid: error,
@@ -9131,7 +9132,7 @@ const SelectionIndicator = ({ selectionMode }) => {
 		});
 	}
 };
-const _SelectListItem = (0, react.forwardRef)(({ children, disabled,...props }, ref) => {
+const _SelectListItem = (0, react.forwardRef)(({ children, disabled, ...props }, ref) => {
 	let textValue = typeof children === "string" ? children : void 0;
 	const { classNames: classNames$2 } = useSelectListContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.GridListItem, {
@@ -9149,7 +9150,7 @@ const _SelectListItem = (0, react.forwardRef)(({ children, disabled,...props },
 
 //#endregion
 //#region src/SelectList/SelectList.tsx
-const _SelectList = (0, react.forwardRef)(({ onChange,...rest }, ref) => {
+const _SelectList = (0, react.forwardRef)(({ onChange, ...rest }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({ component: "ListBox" });
 	const props = {
 		onSelectionChange: onChange,
@@ -9174,7 +9175,7 @@ _SelectList.Action = SelectListAction;
 
 //#endregion
 //#region src/Slider/Slider.tsx
-const _Slider = (0, react.forwardRef)(({ variant, size: size$1, width = "full", disabled, label, name, thumbLabels,...rest }, ref) => {
+const _Slider = (0, react.forwardRef)(({ variant, size: size$1, width = "full", disabled, label, name, thumbLabels, ...rest }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Slider",
 		variant,
@@ -9228,11 +9229,12 @@ const Split = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 
 //#endregion
 //#region src/Stack/Stack.tsx
-const Stack = ({ children, space = 0, stretch = false, alignX, alignY, asList = false,...props }) => {
+const Stack = ({ children, space = 0, stretch = false, alignX = "stretch", alignY, asList = false, ...props }) => {
 	const Component$1 = asList ? "ul" : "div";
 	const stackChildren = asList ? 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, {
-		className: (0, __marigold_system.cn)("flex flex-col", __marigold_system.gapSpace[space], alignX && __marigold_system.alignment?.vertical?.alignmentX[alignX], alignY && __marigold_system.alignment?.vertical?.alignmentY[alignY], stretch && "h-full w-full"),
+		className: (0, __marigold_system.cn)("flex flex-col gap-y-(--space)", alignX && __marigold_system.alignment?.vertical?.alignmentX[alignX], alignY && __marigold_system.alignment?.vertical?.alignmentY[alignY], stretch && "size-full"),
+		style: (0, __marigold_system.createSpacingVar)("space", `${space}`),
 		...props,
 		children: stackChildren
 	});
@@ -9240,7 +9242,7 @@ const Stack = ({ children, space = 0, stretch = false, alignX, alignY, asList =
 
 //#endregion
 //#region src/Switch/Switch.tsx
-const _Switch = (0, react.forwardRef)(({ variant, size: size$1, width = "full", label, selected, disabled, readOnly,...rest }, ref) => {
+const _Switch = (0, react.forwardRef)(({ variant, size: size$1, width = "full", label, selected, disabled, readOnly, ...rest }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Switch",
 		size: size$1,
@@ -9334,7 +9336,7 @@ const TableCell = ({ cell, align = "left", alignY = "middle" }) => {
 /**
 * Map `react-aria` props to ours (no "is"-prefix)
 */
-const mapCheckboxProps = ({ checkboxProps: { isIndeterminate, isSelected, isDisabled, defaultSelected,...rest } }) => {
+const mapCheckboxProps = ({ checkboxProps: { isIndeterminate, isSelected, isDisabled, defaultSelected, ...rest } }) => {
 	return { checkboxProps: {
 		disabled: isDisabled,
 		checked: isSelected,
@@ -9370,7 +9372,7 @@ const TableCheckboxCell = ({ cell, alignY = "middle" }) => {
 
 //#endregion
 //#region src/icons/SortDown.tsx
-const SortDown = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
+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",
@@ -9381,7 +9383,7 @@ const SortDown = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */
 
 //#endregion
 //#region src/icons/SortUp.tsx
-const SortUp = ({ size: size$1 = 24, className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__marigold_system.SVG, {
+const SortUp = ({ 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",
@@ -9449,7 +9451,7 @@ const TableHeaderRow = ({ item, className, children }) => {
 //#region src/Table/TableRow.tsx
 const TableRow = ({ children, row }) => {
 	const ref = (0, react.useRef)(null);
-	const { interactive, state,...ctx } = useTableContext();
+	const { interactive, state, ...ctx } = useTableContext();
 	const { variant, size: size$1 } = row.props;
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Table",
@@ -9504,7 +9506,7 @@ const TableSelectAllCell = ({ column: column$1, width = "auto", align = "left" }
 
 //#endregion
 //#region src/Table/Table.tsx
-const Table = ({ variant, size: size$1, stretch = false, selectionMode = "none", disableKeyboardNavigation = false, stickyHeader, emptyState, alignY = "middle",...props }) => {
+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)({
@@ -9606,7 +9608,7 @@ const _Tab = (props) => {
 
 //#endregion
 //#region src/Tabs/TabList.tsx
-const _TabList = ({ space = 2,...props }) => {
+const _TabList = ({ space = 2, ...props }) => {
 	const { classNames: classNames$2 } = useTabContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.TabList, {
 		...props,
@@ -9628,7 +9630,7 @@ const _TabPanel = (props) => {
 
 //#endregion
 //#region src/Tabs/Tabs.tsx
-const _Tabs = ({ disabled, variant, size: size$1 = "medium",...rest }) => {
+const _Tabs = ({ disabled, variant, size: size$1 = "medium", ...rest }) => {
 	const props = {
 		isDisabled: disabled,
 		...rest
@@ -9685,7 +9687,7 @@ const TagGroupRemoveAll = ({ className, onRemove }) => {
 
 //#endregion
 //#region src/TagGroup/TagGroup.tsx
-const _TagGroup = ({ items, children, emptyState, variant, size: size$1, name, removeAll,...rest }) => {
+const _TagGroup = ({ items, children, emptyState, variant, size: size$1, name, removeAll, ...rest }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Tag",
 		variant,
@@ -9711,7 +9713,7 @@ const _TagGroup = ({ items, children, emptyState, variant, size: size$1, name, r
 
 //#endregion
 //#region src/TagGroup/Tag.tsx
-const _Tag = ({ variant, size: size$1, children, disabled,...rest }) => {
+const _Tag = ({ variant, size: size$1, children, disabled, ...rest }) => {
 	let textValue = typeof children === "string" ? children : void 0;
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Tag",
@@ -9733,7 +9735,7 @@ _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 }) => {
+const _Text = ({ variant, size: size$1, color, align, cursor: cursor$1, weight, fontSize, fontStyle, wrap, whiteSpace, children, as = "div", ...props }) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "Text",
 		variant,
@@ -9756,7 +9758,7 @@ const _Text = ({ variant, size: size$1, color, align, cursor: cursor$1, weight,
 
 //#endregion
 //#region src/TextArea/TextArea.tsx
-const _TextArea = (0, react.forwardRef)(({ variant, size: size$1, required, disabled, readOnly, error, rows,...rest }, ref) => {
+const _TextArea = (0, react.forwardRef)(({ variant, size: size$1, required, disabled, readOnly, error, rows, ...rest }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "TextArea",
 		variant,
@@ -9781,7 +9783,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) => {
+const _TextField = (0, react.forwardRef)(({ required, disabled, readOnly, error, ...rest }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
 		as: react_aria_components.TextField,
 		isDisabled: disabled,
@@ -9795,7 +9797,7 @@ const _TextField = (0, react.forwardRef)(({ required, disabled, readOnly, error,
 
 //#endregion
 //#region src/Tiles/Tiles.tsx
-const Tiles = ({ space = 0, stretch = false, equalHeight = false, tilesWidth = "250px", children,...props }) => {
+const Tiles = ({ space = 0, stretch = false, equalHeight = false, tilesWidth = "250px", children, ...props }) => {
 	let column$1 = `min(${tilesWidth}, 100%)`;
 	/**
 	* Adding `minmax` with `1fr` will make the tiles distribute the
@@ -9816,7 +9818,7 @@ const Tiles = ({ space = 0, stretch = false, equalHeight = false, tilesWidth = "
 
 //#endregion
 //#region src/TimeField/TimeField.tsx
-const _TimeField = (0, react.forwardRef)(({ required, disabled, readOnly, error, variant, size: size$1, width = "full",...rest }, ref) => {
+const _TimeField = (0, react.forwardRef)(({ required, disabled, readOnly, error, variant, size: size$1, width = "full", ...rest }, ref) => {
 	const classNames$2 = (0, __marigold_system.useClassNames)({
 		component: "DateField",
 		variant,
@@ -9946,7 +9948,7 @@ const TooltipArrow = () => {
 
 //#endregion
 //#region src/Tooltip/TooltipTrigger.tsx
-const _TooltipTrigger = ({ delay = 1e3, children, disabled, open,...rest }) => {
+const _TooltipTrigger = ({ delay = 1e3, children, disabled, open, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.TooltipTrigger, {
 		...rest,
 		isDisabled: disabled,
@@ -9958,7 +9960,7 @@ const _TooltipTrigger = ({ delay = 1e3, children, disabled, open,...rest }) => {
 
 //#endregion
 //#region src/Tooltip/Tooltip.tsx
-const _Tooltip = ({ children, variant, size: size$1, open,...rest }) => {
+const _Tooltip = ({ children, variant, size: size$1, open, ...rest }) => {
 	const props = {
 		...rest,
 		isOpen: open
@@ -10127,7 +10129,7 @@ const XLoaderSvg = ({ className }) => {
 		]
 	});
 };
-const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel, loaderType = "circle",...props }) => {
+const BaseLoader = ({ variant, size: size$1, children, "aria-label": ariaLabel, loaderType = "circle", ...props }) => {
 	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
 	const className = (0, __marigold_system.useClassNames)({
 		component: "Loader",
@@ -10180,7 +10182,7 @@ const LoaderSection = (props) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseLoader, { ...props })
 	});
 };
-const Loader = ({ mode, variant,...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderFullScreen, {
+const Loader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderFullScreen, {
 	variant: variant ?? "inverted",
 	...props
 }) : mode === "section" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderSection, {