@marigold/components 12.0.4 → 13.0.0

package/dist/index.mjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment14 = REACT_FRAGMENT_TYPE;
+        var Fragment12 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment14;
+        exports.Fragment = Fragment12;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -1070,47 +1070,27 @@ var HelpText = ({
 
 // src/Label/Label.tsx
 import { Label } from "react-aria-components";
-import { SVG as SVG2, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
-
-// src/FieldBase/FieldGroup.tsx
-import { createContext as createContext2, useContext as useContext4 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var FieldGroupContext = createContext2({});
-var useFieldGroupContext = () => useContext4(FieldGroupContext);
-var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ jsx9(FieldGroupContext.Provider, { value: { labelWidth }, children });
-};
-
-// src/Label/Label.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { SVG as SVG2, cn as cn5, useClassNames as useClassNames3 } from "@marigold/system";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var _Label = ({ size: size2, variant, children, ...props }) => {
   const classNames3 = useClassNames3({ component: "Label", size: size2, variant });
-  const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ jsxs4(
-    Label,
-    {
-      ...props,
-      className: cn5(classNames3.container, "inline-flex w-[var(--labelWidth)]"),
-      style: createVar3({ labelWidth }),
-      children: [
-        children,
-        /* @__PURE__ */ jsx10(
-          SVG2,
-          {
-            viewBox: "0 0 24 24",
-            role: "presentation",
-            size: 16,
-            className: cn5("hidden", classNames3.indicator),
-            children: /* @__PURE__ */ jsx10("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs4(Label, { ...props, className: cn5(classNames3.container, "inline-flex"), children: [
+    children,
+    /* @__PURE__ */ jsx9(
+      SVG2,
+      {
+        viewBox: "0 0 24 24",
+        role: "presentation",
+        size: 16,
+        className: cn5("hidden", classNames3.indicator),
+        children: /* @__PURE__ */ jsx9("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
+      }
+    )
+  ] });
 };
 
 // src/FieldBase/FieldBase.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var fixedForwardRef = forwardRef2;
 var _FieldBase = (props, ref) => {
   const {
@@ -1137,6 +1117,7 @@ var _FieldBase = (props, ref) => {
       ref,
       className: cn6(
         "group/field",
+        "flex flex-col",
         twWidth[width],
         classNames3,
         className,
@@ -1146,9 +1127,9 @@ var _FieldBase = (props, ref) => {
       "data-error": props.isInvalid ? true : void 0,
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsx11(_Label, { variant, size: size2, children: label }) : /* @__PURE__ */ jsx11("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ jsx10(_Label, { variant, size: size2, children: label }) : /* @__PURE__ */ jsx10("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx10(
           HelpText,
           {
             variant,
@@ -1173,7 +1154,7 @@ import { cn as cn8 } from "@marigold/system";
 import { cloneElement, forwardRef as forwardRef3 } from "react";
 import { Input } from "react-aria-components";
 import { cn as cn7, useClassNames as useClassNames5 } from "@marigold/system";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var _Input = forwardRef3(
   ({ type, icon, action, variant, size: size2, className, ...props }, ref) => {
     const classNames3 = useClassNames5({
@@ -1205,7 +1186,7 @@ var _Input = forwardRef3(
         "data-action": action && "",
         children: [
           inputIcon,
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx11(
             Input,
             {
               ...props,
@@ -1229,7 +1210,7 @@ var _Input = forwardRef3(
 );
 
 // src/Input/SearchInput.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var intlMessages = {
   "de-DE": {
     "Clear search": "Suche zur\xFCcksetzen"
@@ -1241,7 +1222,7 @@ var intlMessages = {
     "Clear search": "Effacer la recherche"
   }
 };
-var SearchIcon = (props) => /* @__PURE__ */ jsx13(
+var SearchIcon = (props) => /* @__PURE__ */ jsx12(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1250,13 +1231,13 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx13(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx13("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    children: /* @__PURE__ */ jsx12("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
   }
 );
 var SearchInput = forwardRef4(
   ({ className, onClear, ...props }, ref) => {
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx12(
       _Input,
       {
         type: "search",
@@ -1265,8 +1246,8 @@ var SearchInput = forwardRef4(
           className == null ? void 0 : className.input
         ),
         ref,
-        icon: /* @__PURE__ */ jsx13(SearchIcon, {}),
-        action: /* @__PURE__ */ jsx13(
+        icon: /* @__PURE__ */ jsx12(SearchIcon, {}),
+        action: /* @__PURE__ */ jsx12(
           Button2,
           {
             className: className == null ? void 0 : className.action,
@@ -1274,7 +1255,7 @@ var SearchInput = forwardRef4(
             "aria-label": stringFormatter.format("Clear search"),
             excludeFromTabOrder: true,
             preventFocusOnPress: true,
-            children: /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsx12(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -1282,7 +1263,7 @@ var SearchInput = forwardRef4(
                 fill: "currentColor",
                 width: 20,
                 height: 20,
-                children: /* @__PURE__ */ jsx13("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+                children: /* @__PURE__ */ jsx12("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
               }
             )
           }
@@ -1301,14 +1282,14 @@ import { ListBox } from "react-aria-components";
 import { cn as cn10, useClassNames as useClassNames6 } from "@marigold/system";
 
 // src/ListBox/Context.ts
-import { createContext as createContext3, useContext as useContext5 } from "react";
-var ListBoxContext = createContext3({});
-var useListBoxContext = () => useContext5(ListBoxContext);
+import { createContext as createContext2, useContext as useContext4 } from "react";
+var ListBoxContext = createContext2({});
+var useListBoxContext = () => useContext4(ListBoxContext);
 
 // src/ListBox/ListBoxItem.tsx
 import { ListBoxItem } from "react-aria-components";
-import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var CheckMark = ({ className }) => /* @__PURE__ */ jsx14("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ jsx14(
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var CheckMark = ({ className }) => /* @__PURE__ */ jsx13("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ jsx13(
   "path",
   {
     fill: "currentColor",
@@ -1319,14 +1300,14 @@ var CheckMark = ({ className }) => /* @__PURE__ */ jsx14("svg", { width: "12px",
 var _ListBoxItem = ({ ...props }) => {
   var _a;
   const { classNames: classNames3 } = useListBoxContext();
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     ListBoxItem,
     {
       ...props,
       className: classNames3.item,
       textValue: (_a = props.textValue) != null ? _a : String(props.children),
-      children: /* @__PURE__ */ jsxs7(Fragment, { children: [
-        /* @__PURE__ */ jsx14(CheckMark, { className: "hidden" }),
+      children: /* @__PURE__ */ jsxs7("div", { className: "selection-indicator contents", children: [
+        /* @__PURE__ */ jsx13(CheckMark, { className: "hidden" }),
         props.children
       ] })
     }
@@ -1336,7 +1317,7 @@ var _ListBoxItem = ({ ...props }) => {
 // src/ListBox/ListBoxSection.tsx
 import { Header, ListBoxSection } from "react-aria-components";
 import { cn as cn9 } from "@marigold/system";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var _Section = ({ header, children, ...props }) => {
   const { classNames: classNames3 } = useListBoxContext();
   return /* @__PURE__ */ jsxs8(
@@ -1345,7 +1326,7 @@ var _Section = ({ header, children, ...props }) => {
       ...props,
       className: cn9(classNames3.section, classNames3.header),
       children: [
-        /* @__PURE__ */ jsx15(Header, { children: header }),
+        /* @__PURE__ */ jsx14(Header, { children: header }),
         children
       ]
     }
@@ -1353,12 +1334,12 @@ var _Section = ({ header, children, ...props }) => {
 };
 
 // src/ListBox/ListBox.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var _ListBox = forwardRef5(
   ({ variant, size: size2, ...props }, ref) => {
     const classNames3 = useClassNames6({ component: "ListBox", variant, size: size2 });
     const listBoxProps = { shouldSelectOnPressUp: false };
-    return /* @__PURE__ */ jsx16(ListBoxContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx16("div", { className: classNames3.container, children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx15(ListBoxContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx15("div", { className: classNames3.container, children: /* @__PURE__ */ jsx15(
       ListBox,
       {
         ...props,
@@ -1379,15 +1360,16 @@ _ListBox.Section = _Section;
 // src/Overlay/Popover.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { Popover } from "react-aria-components";
+import { UNSAFE_PortalProvider as UNSAFE_PortalProvider2 } from "@react-aria/overlays";
 import { cn as cn12, useClassNames as useClassNames8, useSmallScreen } from "@marigold/system";
 
 // src/Provider/OverlayContainerProvider.tsx
-import { createContext as createContext4, useContext as useContext6 } from "react";
+import { createContext as createContext3, useContext as useContext5 } from "react";
 import { useIsSSR } from "@react-aria/ssr";
-var OverlayContainerContext = createContext4(void 0);
+var OverlayContainerContext = createContext3(void 0);
 var OverlayContainerProvider = OverlayContainerContext.Provider;
 var usePortalContainer = () => {
-  const portalContainer = useContext6(OverlayContainerContext);
+  const portalContainer = useContext5(OverlayContainerContext);
   const isSSR = useIsSSR();
   const portal = isSSR ? void 0 : portalContainer ? document.getElementById(portalContainer) || void 0 : document.body;
   return portal;
@@ -1395,6 +1377,7 @@ var usePortalContainer = () => {
 
 // src/Overlay/Underlay.tsx
 import { ModalOverlay } from "react-aria-components";
+import { UNSAFE_PortalProvider } from "@react-aria/overlays";
 import { cn as cn11, useClassNames as useClassNames7 } from "@marigold/system";
 
 // src/Provider/index.ts
@@ -1403,17 +1386,17 @@ import { I18nProvider } from "@react-aria/i18n";
 
 // src/Provider/MarigoldProvider.tsx
 import { ThemeProvider } from "@marigold/system";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   className,
   theme
 }) {
-  return /* @__PURE__ */ jsx17(ThemeProvider, { theme, className, children });
+  return /* @__PURE__ */ jsx16(ThemeProvider, { theme, className, children });
 }
 
 // src/Overlay/Underlay.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Underlay = ({
   size: size2,
   variant,
@@ -1430,7 +1413,7 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(UNSAFE_PortalProvider, { getContainer: () => portal, children: /* @__PURE__ */ jsx17(
     ModalOverlay,
     {
       className: ({ isEntering, isExiting }) => cn11(
@@ -1441,14 +1424,13 @@ var Underlay = ({
       ),
       ...props,
       "data-testid": "underlay-id",
-      UNSTABLE_portalContainer: portal,
       children: props.children
     }
-  );
+  ) });
 };
 
 // src/Overlay/Popover.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var _Popover = forwardRef6(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
@@ -1465,38 +1447,48 @@ var _Popover = forwardRef6(
     });
     const isSmallScreen = useSmallScreen();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ jsx19(Fragment2, { children: isSmallScreen ? /* @__PURE__ */ jsx19(Fragment2, { children: /* @__PURE__ */ jsxs9(
-      Popover,
+    return /* @__PURE__ */ jsx18(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsx18(
+      UNSAFE_PortalProvider2,
       {
-        ref,
-        ...props,
-        className: cn12(
-          "fixed! top-auto! bottom-0! left-0! max-h-fit! w-full",
-          classNames3
-        ),
-        UNSTABLE_portalContainer: portal,
-        children: [
-          children,
-          /* @__PURE__ */ jsx19(Underlay, { open })
-        ]
+        getContainer: () => portal instanceof HTMLElement ? portal : null,
+        children: /* @__PURE__ */ jsxs9(
+          Popover,
+          {
+            ref,
+            ...props,
+            className: cn12(
+              "fixed! top-auto! bottom-0! left-0! max-h-fit! w-full",
+              classNames3
+            ),
+            children: [
+              children,
+              /* @__PURE__ */ jsx18(Underlay, { open })
+            ]
+          }
+        )
       }
-    ) }) : /* @__PURE__ */ jsx19(
-      Popover,
+    ) : /* @__PURE__ */ jsx18(
+      UNSAFE_PortalProvider2,
       {
-        ref,
-        ...props,
-        className: classNames3,
-        placement,
-        offset: 0,
-        UNSTABLE_portalContainer: portal,
-        children
+        getContainer: () => portal instanceof HTMLElement ? portal : null,
+        children: /* @__PURE__ */ jsx18(
+          Popover,
+          {
+            ref,
+            ...props,
+            className: classNames3,
+            placement,
+            offset: 0,
+            children
+          }
+        )
       }
     ) });
   }
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onSubmit,
   onClear,
@@ -1504,7 +1496,7 @@ var AutocompleteInput = ({
 }) => {
   const state = React.useContext(ComboBoxStateContext);
   const classNames3 = useClassNames9({ component: "ComboBox" });
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     SearchInput,
     {
       ref,
@@ -1559,8 +1551,8 @@ var _Autocomplete = forwardRef7(
       ...rest
     };
     return /* @__PURE__ */ jsxs10(FieldBase, { as: ComboBox, ref, ...props, children: [
-      /* @__PURE__ */ jsx20(AutocompleteInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ jsx20(_Popover, { children: /* @__PURE__ */ jsx20(_ListBox, { children }) })
+      /* @__PURE__ */ jsx19(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ jsx19(_Popover, { children: /* @__PURE__ */ jsx19(_ListBox, { children }) })
     ] });
   }
 );
@@ -1575,7 +1567,7 @@ import { useClassNames as useClassNames11 } from "@marigold/system";
 // src/IconButton/IconButton.tsx
 import { Button as Button3 } from "react-aria-components";
 import { cn as cn14, useClassNames as useClassNames10 } from "@marigold/system";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var IconButton = ({
   className,
   children,
@@ -1588,7 +1580,7 @@ var IconButton = ({
     variant,
     size: size2
   });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx20(
     Button3,
     {
       className: cn14("shrink-0 cursor-pointer outline-0", classNames3, className),
@@ -1601,33 +1593,33 @@ var IconButton = ({
 // src/icons/ChevronRight.tsx
 import { forwardRef as forwardRef8 } from "react";
 import { SVG as SVG3 } from "@marigold/system";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ChevronRight = forwardRef8(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx22(SVG3, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx22("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx21(SVG3, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx21("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
 );
 
 // src/icons/ChevronLeft.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { SVG as SVG4 } from "@marigold/system";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ChevronLeft = forwardRef9(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx23("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx22(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx22("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
 );
 
 // src/icons/SortDown.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var SortDown = forwardRef10((props, ref) => /* @__PURE__ */ jsx24(SVG5, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx24("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SortDown = forwardRef10((props, ref) => /* @__PURE__ */ jsx23(SVG5, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx23("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
 
 // src/icons/SortUp.tsx
 import { forwardRef as forwardRef11 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var SortUp = forwardRef11((props, ref) => /* @__PURE__ */ jsx25(SVG6, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx25("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
+import { jsx as jsx24 } from "react/jsx-runtime";
+var SortUp = forwardRef11((props, ref) => /* @__PURE__ */ jsx24(SVG6, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx24("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
 
 // src/ComboBox/ComboBox.tsx
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var _ComboBox = forwardRef12(
   ({
     variant,
@@ -1654,13 +1646,13 @@ var _ComboBox = forwardRef12(
     };
     const classNames3 = useClassNames11({ component: "ComboBox", variant, size: size2 });
     return /* @__PURE__ */ jsxs11(FieldBase, { as: ComboBox2, ref, ...props, children: [
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx25(
         _Input,
         {
-          action: /* @__PURE__ */ jsx26(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx26(ChevronDown, { className: "size-4" }) })
+          action: /* @__PURE__ */ jsx25(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx25(ChevronDown, { className: "size-4" }) })
         }
       ),
-      /* @__PURE__ */ jsx26(_Popover, { children: /* @__PURE__ */ jsx26(_ListBox, { children }) })
+      /* @__PURE__ */ jsx25(_Popover, { children: /* @__PURE__ */ jsx25(_ListBox, { children }) })
     ] });
   }
 );
@@ -1669,24 +1661,24 @@ _ComboBox.Section = _ListBox.Section;
 
 // src/Badge/Badge.tsx
 import { useClassNames as useClassNames12 } from "@marigold/system";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Badge = ({ variant, size: size2, children, ...props }) => {
   const classNames3 = useClassNames12({ component: "Badge", variant, size: size2 });
-  return /* @__PURE__ */ jsx27("div", { className: classNames3, ...props, children });
+  return /* @__PURE__ */ jsx26("div", { className: classNames3, ...props, children });
 };
 
 // src/Breakout/Breakout.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Breakout = ({ children }) => {
-  return /* @__PURE__ */ jsx28("div", { className: "![grid-column:1/-1]", children });
+  return /* @__PURE__ */ jsx27("div", { className: "![grid-column:1/-1]", children });
 };
 
 // src/Body/Body.tsx
 import { useClassNames as useClassNames13 } from "@marigold/system";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Body = ({ children, variant, size: size2, ...props }) => {
   const classNames3 = useClassNames13({ component: "Body", variant, size: size2 });
-  return /* @__PURE__ */ jsx29("section", { ...props, className: classNames3, children });
+  return /* @__PURE__ */ jsx28("section", { ...props, className: classNames3, children });
 };
 
 // src/Button/Button.tsx
@@ -1697,7 +1689,7 @@ import { cn as cn16, useClassNames as useClassNames15 } from "@marigold/system";
 // src/ProgressCycle/ProgressCycle.tsx
 import { ProgressBar } from "react-aria-components";
 import { SVG as SVG7, cn as cn15, useClassNames as useClassNames14 } from "@marigold/system";
-import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
 var ProgressCycle = ({
   size: size2 = "16",
   ...props
@@ -1710,7 +1702,7 @@ var ProgressCycle = ({
   }
   const radius = `calc(50% - ${strokeWidth / 2}px)`;
   const classNames3 = useClassNames14({ component: "ProgressCycle" });
-  return /* @__PURE__ */ jsx30(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx29(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs12(
     SVG7,
     {
       className: "animate-rotate-spinner origin-center fill-none",
@@ -1718,7 +1710,7 @@ var ProgressCycle = ({
       "aria-hidden": "true",
       role: "img",
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29(
           "circle",
           {
             cx: "50%",
@@ -1728,7 +1720,7 @@ var ProgressCycle = ({
             className: "stroke-transparent"
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx29(
           "circle",
           {
             cx: "50%",
@@ -1751,7 +1743,7 @@ var ProgressCycle = ({
 };
 
 // src/Button/Button.tsx
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
 var _Button = forwardRef13(
   ({
     children,
@@ -1769,7 +1761,7 @@ var _Button = forwardRef13(
       size: size2,
       className
     });
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx30(
       Button4,
       {
         ...props,
@@ -1782,9 +1774,9 @@ var _Button = forwardRef13(
         ),
         isPending: loading,
         isDisabled: disabled,
-        children: loading ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
-          /* @__PURE__ */ jsx31("span", { className: "absolute", children: /* @__PURE__ */ jsx31(ProgressCycle, {}) }),
-          /* @__PURE__ */ jsx31("span", { className: "invisible flex gap-[inherit]", children })
+        children: loading ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
+          /* @__PURE__ */ jsx30("span", { className: "absolute", children: /* @__PURE__ */ jsx30(ProgressCycle, {}) }),
+          /* @__PURE__ */ jsx30("span", { className: "invisible flex gap-[inherit]", children })
         ] }) : children
       }
     );
@@ -1804,7 +1796,7 @@ import {
   paddingTop,
   useClassNames as useClassNames16
 } from "@marigold/system";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Card = ({
   children,
   variant,
@@ -1820,7 +1812,7 @@ var Card = ({
   ...props
 }) => {
   const classNames3 = useClassNames16({ component: "Card", variant, size: size2 });
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       ...props,
@@ -1842,15 +1834,15 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn18, createVar as createVar4, gapSpace as gapSpace3 } from "@marigold/system";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { cn as cn18, createVar as createVar3, gapSpace as gapSpace3 } from "@marigold/system";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       ...props,
@@ -1859,7 +1851,7 @@ var Center = ({
         gapSpace3[space],
         "max-w-(--maxWidth)"
       ),
-      style: createVar4({ maxWidth }),
+      style: createVar3({ maxWidth }),
       children
     }
   );
@@ -1868,30 +1860,19 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn20, useClassNames as useClassNames19 } from "@marigold/system";
-
-// src/Checkbox/CheckBoxField.tsx
-import { createVar as createVar5, useClassNames as useClassNames17 } from "@marigold/system";
-import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckboxField = ({ children, labelWidth }) => {
-  const classNames3 = useClassNames17({ component: "Field" });
-  return /* @__PURE__ */ jsxs14("div", { className: classNames3, children: [
-    /* @__PURE__ */ jsx34("div", { className: "w-(--labelWidth)", style: createVar5({ labelWidth }) }),
-    children
-  ] });
-};
+import { cn as cn20, useClassNames as useClassNames18 } from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
-import { cn as cn19, useClassNames as useClassNames18 } from "@marigold/system";
+import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Checkbox/Context.tsx
-import { createContext as createContext5, useContext as useContext7 } from "react";
-var CheckboxGroupContext = createContext5(null);
-var useCheckboxGroupContext = () => useContext7(CheckboxGroupContext);
+import { createContext as createContext4, useContext as useContext6 } from "react";
+var CheckboxGroupContext = createContext4(null);
+var useCheckboxGroupContext = () => useContext6(CheckboxGroupContext);
 
 // src/Checkbox/CheckboxGroup.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1904,7 +1885,7 @@ var _CheckboxGroup = ({
   orientation = "vertical",
   ...rest
 }) => {
-  const classNames3 = useClassNames18({
+  const classNames3 = useClassNames17({
     component: "Checkbox",
     variant,
     size: size2,
@@ -1918,7 +1899,7 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx35(FieldBase, { as: CheckboxGroup, width, ...props, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx33(FieldBase, { as: CheckboxGroup, width, ...props, children: /* @__PURE__ */ jsx33(
     "div",
     {
       role: "presentation",
@@ -1929,14 +1910,14 @@ var _CheckboxGroup = ({
         "group/checkboxgroup flex items-start",
         orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
       ),
-      children: /* @__PURE__ */ jsx35(CheckboxGroupContext.Provider, { value: { width, variant, size: size2 }, children })
+      children: /* @__PURE__ */ jsx33(CheckboxGroupContext.Provider, { value: { width, variant, size: size2 }, children })
     }
   ) });
 };
 
 // src/Checkbox/Checkbox.tsx
-import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
-var CheckMark2 = () => /* @__PURE__ */ jsx36("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx36(
+import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+var CheckMark2 = () => /* @__PURE__ */ jsx34("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx34(
   "path",
   {
     fill: "currentColor",
@@ -1944,7 +1925,7 @@ var CheckMark2 = () => /* @__PURE__ */ jsx36("svg", { width: "12px", height: "10
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ) });
-var IndeterminateMark = () => /* @__PURE__ */ jsx36("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx36(
+var IndeterminateMark = () => /* @__PURE__ */ jsx34("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx34(
   "path",
   {
     fill: "currentColor",
@@ -1953,7 +1934,7 @@ var IndeterminateMark = () => /* @__PURE__ */ jsx36("svg", { width: "12px", heig
   }
 ) });
 var Icon2 = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       "aria-hidden": "true",
@@ -1965,7 +1946,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ jsx36(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx36(CheckMark2, {}) : null
+      children: indeterminate ? /* @__PURE__ */ jsx34(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx34(CheckMark2, {}) : null
     }
   );
 };
@@ -1993,14 +1974,13 @@ var _Checkbox = forwardRef14(
       defaultSelected: defaultChecked,
       ...rest
     };
-    const { labelWidth } = useFieldGroupContext();
     const group = useCheckboxGroupContext();
-    const classNames3 = useClassNames19({
+    const classNames3 = useClassNames18({
       component: "Checkbox",
       variant: variant || (group == null ? void 0 : group.variant),
       size: size2 || (group == null ? void 0 : group.size)
     });
-    const component = /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx34(
       Checkbox,
       {
         ref,
@@ -2010,8 +1990,8 @@ var _Checkbox = forwardRef14(
           classNames3.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs15(Fragment4, { children: [
-          /* @__PURE__ */ jsx36(
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
+          /* @__PURE__ */ jsx34(
             Icon2,
             {
               checked: isSelected,
@@ -2019,19 +1999,18 @@ var _Checkbox = forwardRef14(
               className: classNames3.checkbox
             }
           ),
-          label && /* @__PURE__ */ jsx36("div", { className: classNames3.label, children: label })
+          label && /* @__PURE__ */ jsx34("div", { className: classNames3.label, children: label })
         ] })
       }
     );
-    return !group && !!labelWidth ? /* @__PURE__ */ jsx36(CheckboxField, { labelWidth, children: component }) : component;
   }
 );
 _Checkbox.Group = _CheckboxGroup;
 
 // src/Columns/Columns.tsx
 import { Children as Children2 } from "react";
-import { cn as cn21, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { cn as cn21, createVar as createVar4, gapSpace as gapSpace4 } from "@marigold/system";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -2047,7 +2026,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn21(
@@ -2056,14 +2035,14 @@ var Columns = ({
         gapSpace4[space]
       ),
       ...props,
-      children: Children2.map(children, (child, idx) => /* @__PURE__ */ jsx37(
+      children: Children2.map(children, (child, idx) => /* @__PURE__ */ jsx35(
         "div",
         {
           className: cn21(
             columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)",
             "basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
-          style: createVar6({
+          style: createVar4({
             collapseAt,
             columnSize: columns[idx]
           }),
@@ -2075,8 +2054,8 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import { cn as cn22, createVar as createVar7, gapSpace as gapSpace5, placeItems } from "@marigold/system";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { cn as cn22, createVar as createVar5, gapSpace as gapSpace5, placeItems } from "@marigold/system";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var containerTextLength = {
   short: "40ch",
   default: "60ch",
@@ -2104,7 +2083,7 @@ var Container = ({
   space = 0,
   children,
   ...props
-}) => /* @__PURE__ */ jsx38(
+}) => /* @__PURE__ */ jsx36(
   "div",
   {
     ...props,
@@ -2115,7 +2094,7 @@ var Container = ({
       gridColumn[align],
       gapSpace5[space]
     ),
-    style: createVar7({
+    style: createVar5({
       maxTextWidth: containerTextLength[contentLength],
       maxHeadlineWidth: containerHeadlineLength[contentLength]
     }),
@@ -2133,45 +2112,45 @@ import {
   Popover as Popover2,
   DialogTrigger as RACDialogTrigger
 } from "react-aria-components";
-import { useClassNames as useClassNames22 } from "@marigold/system";
+import { useClassNames as useClassNames21 } from "@marigold/system";
 
 // src/ContextualHelp/ContextualHelpContent.tsx
-import { useClassNames as useClassNames20 } from "@marigold/system";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useClassNames as useClassNames19 } from "@marigold/system";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var ContextualHelpContent = ({
   children,
   variant,
   size: size2
 }) => {
-  const classNames3 = useClassNames20({
+  const classNames3 = useClassNames19({
     component: "ContextualHelp",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ jsx39("div", { className: classNames3.content, children });
+  return /* @__PURE__ */ jsx37("div", { className: classNames3.content, children });
 };
 
 // src/ContextualHelp/ContextualHelpTitle.tsx
 import { Heading as Heading2 } from "react-aria-components";
-import { useClassNames as useClassNames21 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { useClassNames as useClassNames20 } from "@marigold/system";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var ContextualHelpTitle = ({
   children,
   variant,
   size: size2
 }) => {
-  const classNames3 = useClassNames21({
+  const classNames3 = useClassNames20({
     component: "ContextualHelp",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ jsx40(Heading2, { className: classNames3.title, children });
+  return /* @__PURE__ */ jsx38(Heading2, { className: classNames3.title, children });
 };
 
 // src/ContextualHelp/ContextualHelp.tsx
-import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
 var icons = {
-  help: () => /* @__PURE__ */ jsxs16(
+  help: () => /* @__PURE__ */ jsxs15(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2185,13 +2164,13 @@ var icons = {
       strokeLinejoin: "round",
       className: "lucide lucide-circle-help-icon lucide-circle-help h-5",
       children: [
-        /* @__PURE__ */ jsx41("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx41("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-        /* @__PURE__ */ jsx41("path", { d: "M12 17h.01" })
+        /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx39("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+        /* @__PURE__ */ jsx39("path", { d: "M12 17h.01" })
       ]
     }
   ),
-  info: () => /* @__PURE__ */ jsxs16(
+  info: () => /* @__PURE__ */ jsxs15(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2205,15 +2184,15 @@ var icons = {
       strokeLinejoin: "round",
       className: "lucide lucide-info-icon lucide-info h-5",
       children: [
-        /* @__PURE__ */ jsx41("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx41("path", { d: "M12 16v-4" }),
-        /* @__PURE__ */ jsx41("path", { d: "M12 8h.01" })
+        /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx39("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx39("path", { d: "M12 8h.01" })
       ]
     }
   )
 };
 var DialogTrigger = forwardRef15(
-  ({ open, ...rest }, ref) => /* @__PURE__ */ jsx41(RACDialogTrigger, { isOpen: open, ...rest })
+  ({ open, ...rest }, ref) => /* @__PURE__ */ jsx39(RACDialogTrigger, { isOpen: open, ...rest })
 );
 var _ContextualHelp = forwardRef15(
   ({
@@ -2229,19 +2208,19 @@ var _ContextualHelp = forwardRef15(
   }, ref) => {
     var _a;
     const icon = (_a = icons[variant]) == null ? void 0 : _a.call(icons);
-    const classNames3 = useClassNames22({
+    const classNames3 = useClassNames21({
       component: "ContextualHelp",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs15(
       DialogTrigger,
       {
         defaultOpen,
         open,
         onOpenChange,
         children: [
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx39(
             Button5,
             {
               ref,
@@ -2250,7 +2229,7 @@ var _ContextualHelp = forwardRef15(
               children: icon
             }
           ),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx39(
             Popover2,
             {
               placement,
@@ -2259,7 +2238,7 @@ var _ContextualHelp = forwardRef15(
               ...{
                 [`data-${width != null ? width : "medium"}`]: true
               },
-              children: /* @__PURE__ */ jsx41(Dialog, { className: (classNames3.dialog, "prose"), children })
+              children: /* @__PURE__ */ jsx39(Dialog, { className: (classNames3.dialog, "prose"), children })
             }
           )
         ]
@@ -2273,33 +2252,33 @@ _ContextualHelp.Content = ContextualHelpContent;
 // src/Dialog/Dialog.tsx
 import {
   forwardRef as forwardRef19,
-  useContext as useContext9
+  useContext as useContext8
 } from "react";
 import { Dialog as Dialog2, OverlayTriggerStateContext as OverlayTriggerStateContext2 } from "react-aria-components";
-import { cn as cn26, useClassNames as useClassNames28 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames27 } from "@marigold/system";
 
 // src/CloseButton/CloseButton.tsx
 import { forwardRef as forwardRef16 } from "react";
 import { Button as Button6 } from "react-aria-components";
-import { useClassNames as useClassNames23 } from "@marigold/system";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { useClassNames as useClassNames22 } from "@marigold/system";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var CloseButton = forwardRef16(
   ({ className, size: size2, variant, ...props }, ref) => {
-    const classNames3 = useClassNames23({
+    const classNames3 = useClassNames22({
       component: "CloseButton",
       className,
       size: size2,
       variant
     });
-    return /* @__PURE__ */ jsx42(Button6, { ref, className: classNames3, ...props, children: /* @__PURE__ */ jsx42("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx42("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+    return /* @__PURE__ */ jsx40(Button6, { ref, className: classNames3, ...props, children: /* @__PURE__ */ jsx40("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx40("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
   }
 );
 
 // src/Overlay/Modal.tsx
 import { forwardRef as forwardRef17 } from "react";
 import { Modal } from "react-aria-components";
-import { useClassNames as useClassNames24 } from "@marigold/system";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { useClassNames as useClassNames23 } from "@marigold/system";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var _Modal = forwardRef17(({ size: size2, open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
@@ -2307,20 +2286,20 @@ var _Modal = forwardRef17(({ size: size2, open, dismissable, keyboardDismissable
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  const className = useClassNames24({ component: "Modal", size: size2 });
-  return /* @__PURE__ */ jsx43(
+  const className = useClassNames23({ component: "Modal", size: size2 });
+  return /* @__PURE__ */ jsx41(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
-      children: /* @__PURE__ */ jsx43(Modal, { ...props, className, ref, children: props.children })
+      children: /* @__PURE__ */ jsx41(Modal, { ...props, className, ref, children: props.children })
     }
   );
 });
 
 // src/Overlay/NonModal.tsx
-import { forwardRef as forwardRef18, useContext as useContext8 } from "react";
+import { forwardRef as forwardRef18, useContext as useContext7 } from "react";
 import {
   OverlayTriggerStateContext,
   Provider
@@ -2409,7 +2388,7 @@ var useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
 };
 
 // src/Overlay/NonModal.tsx
-import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
 var NonModalInner = ({ state, isExiting, ...props }) => {
   const { nonModalProps } = useNonModal(props, state);
   const ref = props.nonModalRef;
@@ -2429,7 +2408,7 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
     ...renderProps.style,
     "--visual-viewport-height": viewport.height + "px"
   };
-  const overlay = /* @__PURE__ */ jsxs17(
+  const overlay = /* @__PURE__ */ jsxs16(
     "div",
     {
       ...mergeProps(filterDOMProps(props), nonModalProps),
@@ -2444,17 +2423,17 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
       "data-exiting": isExiting || void 0,
       children: [
         renderProps.children,
-        /* @__PURE__ */ jsx44(DismissButton, { onDismiss: state.close })
+        /* @__PURE__ */ jsx42(DismissButton, { onDismiss: state.close })
       ]
     }
   );
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx42(
     Overlay,
     {
       isExiting,
       portalContainer,
       disableFocusManagement: true,
-      children: /* @__PURE__ */ jsx44(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx44(Provider, { values: [[OverlayTriggerStateContext, state]], children: overlay }) })
+      children: /* @__PURE__ */ jsx42(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx42(Provider, { values: [[OverlayTriggerStateContext, state]], children: overlay }) })
     }
   );
 };
@@ -2465,7 +2444,7 @@ var NonModal = forwardRef18(
       ...rest
     };
     ref = useObjectRef(ref);
-    const contextState = useContext8(OverlayTriggerStateContext);
+    const contextState = useContext7(OverlayTriggerStateContext);
     const localState = useOverlayTriggerState(props);
     const state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
     const isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;
@@ -2473,7 +2452,7 @@ var NonModal = forwardRef18(
     if (state && !state.isOpen && !isExiting || isSSR) {
       return null;
     }
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx42(
       NonModalInner,
       {
         ...props,
@@ -2486,44 +2465,44 @@ var NonModal = forwardRef18(
 );
 
 // src/Dialog/DialogActions.tsx
-import { cn as cn23, useClassNames as useClassNames25 } from "@marigold/system";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { cn as cn23, useClassNames as useClassNames24 } from "@marigold/system";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var DialogActions = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames25({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ jsx45("div", { className: cn23("[grid-area:actions]", classNames3.actions), children });
+  const classNames3 = useClassNames24({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ jsx43("div", { className: cn23("[grid-area:actions]", classNames3.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-import { cn as cn24, useClassNames as useClassNames26 } from "@marigold/system";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { cn as cn24, useClassNames as useClassNames25 } from "@marigold/system";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var DialogContent = ({
   variant,
   size: size2,
   children
 }) => {
-  const classNames3 = useClassNames26({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ jsx46("div", { className: cn24("[grid-area:content]", classNames3.content), children });
+  const classNames3 = useClassNames25({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ jsx44("div", { className: cn24("[grid-area:content]", classNames3.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
 import { Header as Header2, Heading as Heading3 } from "react-aria-components";
-import { cn as cn25, useClassNames as useClassNames27 } from "@marigold/system";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { cn as cn25, useClassNames as useClassNames26 } from "@marigold/system";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var DialogTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames27({
+  const classNames3 = useClassNames26({
     component: "Dialog",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ jsx47(Header2, { className: cn25("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ jsx47(Heading3, { slot: "title", className: classNames3.title, children }) });
+  return /* @__PURE__ */ jsx45(Header2, { className: cn25("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ jsx45(Heading3, { slot: "title", className: classNames3.title, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
-import { createContext as createContext6 } from "react";
+import { createContext as createContext5 } from "react";
 import { DialogTrigger as DialogTrigger2 } from "react-aria-components";
 import { PressResponder } from "@react-aria/interactions";
-import { jsx as jsx48 } from "react/jsx-runtime";
-var DialogContext = createContext6({});
+import { jsx as jsx46 } from "react/jsx-runtime";
+var DialogContext = createContext5({});
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -2536,33 +2515,33 @@ var _DialogTrigger = ({
     isKeyboardDismissDisabled: !keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx48(DialogContext.Provider, { value: props, children: /* @__PURE__ */ jsx48(DialogTrigger2, { ...props, children: /* @__PURE__ */ jsx48(PressResponder, { isPressed: false, children: props.children }) }) });
+  return /* @__PURE__ */ jsx46(DialogContext.Provider, { value: props, children: /* @__PURE__ */ jsx46(DialogTrigger2, { ...props, children: /* @__PURE__ */ jsx46(PressResponder, { isPressed: false, children: props.children }) }) });
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs17 } from "react/jsx-runtime";
 var _Dialog = forwardRef19(
   ({ variant, size: size2, ...props }, ref) => {
     var _a;
-    const classNames3 = useClassNames28({
+    const classNames3 = useClassNames27({
       component: "Dialog",
       variant,
       size: size2
     });
-    const { isDismissable, isKeyboardDismissDisabled, isOpen } = useContext9(DialogContext);
-    const state = useContext9(OverlayTriggerStateContext2);
+    const { isDismissable, isKeyboardDismissDisabled, isOpen } = useContext8(DialogContext);
+    const state = useContext8(OverlayTriggerStateContext2);
     const children = typeof props.children === "function" ? props.children({
       close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
       }
     }) : props.children;
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx47(
       _Modal,
       {
         dismissable: isDismissable,
         keyboardDismissable: isKeyboardDismissDisabled,
         open: isOpen,
         size: size2,
-        children: /* @__PURE__ */ jsxs18(
+        children: /* @__PURE__ */ jsxs17(
           Dialog2,
           {
             ...props,
@@ -2573,7 +2552,7 @@ var _Dialog = forwardRef19(
               classNames3.container
             ),
             children: [
-              props.closeButton && /* @__PURE__ */ jsx49(
+              props.closeButton && /* @__PURE__ */ jsx47(
                 CloseButton,
                 {
                   className: classNames3.closeButton,
@@ -2595,38 +2574,38 @@ _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { cn as cn27, useClassNames as useClassNames29 } from "@marigold/system";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { cn as cn27, useClassNames as useClassNames28 } from "@marigold/system";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames3 = useClassNames29({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx50(Separator, { className: cn27("border-none", classNames3), ...props });
+  const classNames3 = useClassNames28({ component: "Divider", variant });
+  return /* @__PURE__ */ jsx48(Separator, { className: cn27("border-none", classNames3), ...props });
 };
 
 // src/Drawer/Drawer.tsx
-import { useContext as useContext11, useRef } from "react";
+import { useContext as useContext10, useRef } from "react";
 import { Dialog as Dialog3, OverlayTriggerStateContext as OverlayTriggerStateContext3 } from "react-aria-components";
 import { useLandmark } from "@react-aria/landmark";
-import { cn as cn32, useClassNames as useClassNames33, useSmallScreen as useSmallScreen3 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames32, useSmallScreen as useSmallScreen3 } from "@marigold/system";
 
 // src/Drawer/Context.tsx
-import { createContext as createContext7, useContext as useContext10 } from "react";
-var DrawerContext = createContext7({
+import { createContext as createContext6, useContext as useContext9 } from "react";
+var DrawerContext = createContext6({
   variant: void 0,
   size: void 0
 });
-var useDrawerContext = () => useContext10(DrawerContext);
+var useDrawerContext = () => useContext9(DrawerContext);
 
 // src/Drawer/DrawerActions.tsx
-import { cn as cn28, useClassNames as useClassNames30 } from "@marigold/system";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { cn as cn28, useClassNames as useClassNames29 } from "@marigold/system";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var DrawerActions = ({ variant, size: size2, children }) => {
   const ctx = useDrawerContext();
-  const classNames3 = useClassNames30({
+  const classNames3 = useClassNames29({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
   });
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn28("[grid-area:actions]", classNames3.actions),
@@ -2637,20 +2616,20 @@ var DrawerActions = ({ variant, size: size2, children }) => {
 };
 
 // src/Drawer/DrawerContent.tsx
-import { cn as cn29, useClassNames as useClassNames31 } from "@marigold/system";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { cn as cn29, useClassNames as useClassNames30 } from "@marigold/system";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var DrawerContent = ({
   variant,
   size: size2,
   children
 }) => {
   const ctx = useDrawerContext();
-  const classNames3 = useClassNames31({
+  const classNames3 = useClassNames30({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
   });
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       className: cn29("[grid-area:content]", classNames3.content),
@@ -2662,14 +2641,14 @@ var DrawerContent = ({
 
 // src/Drawer/DrawerModal.tsx
 import { cn as cn30, useSmallScreen as useSmallScreen2 } from "@marigold/system";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var DrawerModal = ({
   children,
   className,
   ...props
 }) => {
   const isSmallScreen = useSmallScreen2();
-  return isSmallScreen ? /* @__PURE__ */ jsx53(_Modal, { children }) : /* @__PURE__ */ jsx53(
+  return isSmallScreen ? /* @__PURE__ */ jsx51(_Modal, { children }) : /* @__PURE__ */ jsx51(
     NonModal,
     {
       ...props,
@@ -2681,36 +2660,36 @@ var DrawerModal = ({
 
 // src/Drawer/DrawerTitle.tsx
 import { Header as Header3, Heading as Heading4 } from "react-aria-components";
-import { cn as cn31, useClassNames as useClassNames32 } from "@marigold/system";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { cn as cn31, useClassNames as useClassNames31 } from "@marigold/system";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var DrawerTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames32({
+  const classNames3 = useClassNames31({
     component: "Drawer",
     size: size2,
     variant,
     context: DrawerContext
   });
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx52(
     Header3,
     {
       className: cn31("[grid-area:title]", classNames3.header),
       style: { "--i": 0 },
-      children: /* @__PURE__ */ jsx54(Heading4, { slot: "title", level: 2, className: classNames3.title, children })
+      children: /* @__PURE__ */ jsx52(Heading4, { slot: "title", level: 2, className: classNames3.title, children })
     }
   );
 };
 
 // src/Drawer/DrawerTrigger.tsx
 import { DialogTrigger as DialogTrigger3 } from "react-aria-components";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var DrawerTrigger = ({
   open,
   children,
   ...props
-}) => /* @__PURE__ */ jsx55(DialogTrigger3, { isOpen: open, ...props, children });
+}) => /* @__PURE__ */ jsx53(DialogTrigger3, { isOpen: open, ...props, children });
 
 // src/Drawer/Drawer.tsx
-import { jsx as jsx56, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
 var Drawer = ({
   children,
   variant,
@@ -2722,18 +2701,18 @@ var Drawer = ({
   ...props
 }) => {
   const ref = useRef(null);
-  const classNames3 = useClassNames33({ component: "Drawer", variant, size: size2 });
-  const ctx = useContext11(OverlayTriggerStateContext3);
+  const classNames3 = useClassNames32({ component: "Drawer", variant, size: size2 });
+  const ctx = useContext10(OverlayTriggerStateContext3);
   const isSmallScreen = useSmallScreen3();
   const landmarkAria = useLandmark({ ...props, role }, ref);
   const landmarkProps = isSmallScreen ? {} : landmarkAria.landmarkProps;
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx54(
     DrawerModal,
     {
       className: classNames3.overlay,
       open,
       keyboardDismissable,
-      children: /* @__PURE__ */ jsx56(DrawerContext.Provider, { value: { variant, size: size2 }, children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsx54(DrawerContext.Provider, { value: { variant, size: size2 }, children: /* @__PURE__ */ jsxs18(
         Dialog3,
         {
           ...props,
@@ -2744,7 +2723,7 @@ var Drawer = ({
             classNames3.container
           ),
           children: [
-            closeButton && /* @__PURE__ */ jsx56(
+            closeButton && /* @__PURE__ */ jsx54(
               CloseButton,
               {
                 "aria-label": "dismiss drawer",
@@ -2766,18 +2745,18 @@ Drawer.Content = DrawerContent;
 Drawer.Actions = DrawerActions;
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames34 } from "@marigold/system";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { useClassNames as useClassNames33 } from "@marigold/system";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames34({ component: "Footer", variant, size: size2 });
-  return /* @__PURE__ */ jsx57("footer", { ...props, className: classNames3, children });
+  const classNames3 = useClassNames33({ component: "Footer", variant, size: size2 });
+  return /* @__PURE__ */ jsx55("footer", { ...props, className: classNames3, children });
 };
 
 // src/Form/Form.tsx
 import { Form } from "react-aria-components";
 import { cn as cn33, maxWidth as twMaxWidth } from "@marigold/system";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ jsx58(
+import { jsx as jsx56 } from "react/jsx-runtime";
+var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ jsx56(
   Form,
   {
     ...props,
@@ -2789,11 +2768,11 @@ var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ jsx58
 import { alignment, cn as cn34, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
 
 // src/Grid/GridArea.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
-var GridArea = ({ name, children }) => /* @__PURE__ */ jsx59("div", { style: { gridArea: name }, children });
+import { jsx as jsx57 } from "react/jsx-runtime";
+var GridArea = ({ name, children }) => /* @__PURE__ */ jsx57("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
 var Grid = ({
@@ -2808,7 +2787,7 @@ var Grid = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx58(
     "div",
     {
       className: cn34(
@@ -2832,15 +2811,15 @@ Grid.Area = GridArea;
 
 // src/Header/Header.tsx
 import { Header as Header4 } from "react-aria-components";
-import { useClassNames as useClassNames35 } from "@marigold/system";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { useClassNames as useClassNames34 } from "@marigold/system";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var _Header = ({ variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames35({
+  const classNames3 = useClassNames34({
     component: "Header",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ jsx61(Header4, { className: classNames3, ...props, children: props.children });
+  return /* @__PURE__ */ jsx59(Header4, { className: classNames3, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
@@ -2849,9 +2828,9 @@ import {
   cn as cn35,
   ensureCssVar,
   textAlign,
-  useClassNames as useClassNames36
+  useClassNames as useClassNames35
 } from "@marigold/system";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
   size: size2,
@@ -2861,12 +2840,12 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const classNames3 = useClassNames36({
+  const classNames3 = useClassNames35({
     component: "Headline",
     variant,
     size: size2 != null ? size2 : `level-${level}`
   });
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx60(
     Heading5,
     {
       level: Number(level),
@@ -2888,9 +2867,9 @@ import {
   cn as cn36,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames37
+  useClassNames as useClassNames36
 } from "@marigold/system";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size: size2,
@@ -2898,8 +2877,8 @@ var Image = ({
   position: position2 = "none",
   ...props
 }) => {
-  const classNames3 = useClassNames37({ component: "Image", variant, size: size2 });
-  return /* @__PURE__ */ jsx63(
+  const classNames3 = useClassNames36({ component: "Image", variant, size: size2 });
+  return /* @__PURE__ */ jsx61(
     "img",
     {
       ...props,
@@ -2916,7 +2895,7 @@ var Image = ({
 
 // src/Inline/Inline.tsx
 import { alignment as alignment2, cn as cn37, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   alignX,
@@ -2925,7 +2904,7 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx62(
     "div",
     {
       ...props,
@@ -2933,7 +2912,8 @@ var Inline = ({
         "flex flex-wrap",
         gapSpace7[space],
         alignX && ((_b = (_a = alignment2) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
+        alignY === "center" && "items-end [&:has([slot=description])]:items-center [&:has([slot=errorMessage])]:items-center"
       ),
       children
     }
@@ -2946,14 +2926,14 @@ import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
 import { DateInput, Group } from "react-aria-components";
-import { useClassNames as useClassNames38 } from "@marigold/system";
+import { useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
 import { cn as cn38 } from "@marigold/system";
-import { Fragment as Fragment5, jsx as jsx65, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx63, jsxs as jsxs19 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx63(
     DateSegment,
     {
       ...props,
@@ -2961,8 +2941,8 @@ var _DateSegment = ({ segment, ...props }) => {
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs20(Fragment5, { children: [
-        /* @__PURE__ */ jsx65(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs19(Fragment4, { children: [
+        /* @__PURE__ */ jsx63(
           "span",
           {
             "aria-hidden": "true",
@@ -2973,24 +2953,24 @@ var _DateSegment = ({ segment, ...props }) => {
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx65("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ jsx63("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-import { jsx as jsx66, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs20 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
-  const classNames3 = useClassNames38({ component: "DateField", variant, size: size2 });
-  return /* @__PURE__ */ jsxs21(Group, { className: classNames3.field, children: [
-    /* @__PURE__ */ jsx66(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx66(_DateSegment, { className: classNames3.segment, segment }) }),
+  const classNames3 = useClassNames37({ component: "DateField", variant, size: size2 });
+  return /* @__PURE__ */ jsxs20(Group, { className: classNames3.field, children: [
+    /* @__PURE__ */ jsx64(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx64(_DateSegment, { className: classNames3.segment, segment }) }),
     action ? action : null
   ] });
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var _DateField = forwardRef20(
   ({
     variant,
@@ -3009,7 +2989,7 @@ var _DateField = forwardRef20(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx65(
       FieldBase,
       {
         as: DateField,
@@ -3017,7 +2997,7 @@ var _DateField = forwardRef20(
         size: size2,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx67(_DateInput, { action })
+        children: /* @__PURE__ */ jsx65(_DateInput, { action })
       }
     );
   }
@@ -3026,7 +3006,7 @@ var _DateField = forwardRef20(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn44, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -3034,18 +3014,18 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn39, useClassNames as useClassNames40 } from "@marigold/system";
+import { cn as cn39, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
-import { useContext as useContext12, useMemo as useMemo2 } from "react";
+import { useContext as useContext11, useMemo as useMemo2 } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
-import { useClassNames as useClassNames39 } from "@marigold/system";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { useClassNames as useClassNames38 } from "@marigold/system";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
-  const state = useContext12(CalendarStateContext);
+  const state = useContext11(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
   const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
@@ -3060,17 +3040,17 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames3 = useClassNames39({ component: "Calendar" });
-  return /* @__PURE__ */ jsx68("thead", { ...headerProps, children: /* @__PURE__ */ jsx68("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ jsx68("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
+  const classNames3 = useClassNames38({ component: "Calendar" });
+  return /* @__PURE__ */ jsx66("thead", { ...headerProps, children: /* @__PURE__ */ jsx66("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ jsx66("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx69, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs21 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
-  const classNames3 = useClassNames40({ component: "Calendar" });
-  return /* @__PURE__ */ jsxs22(CalendarGrid, { className: classNames3.calendarGrid, children: [
-    /* @__PURE__ */ jsx69(CalendarGridHeader, {}),
-    /* @__PURE__ */ jsx69(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx69(
+  const classNames3 = useClassNames39({ component: "Calendar" });
+  return /* @__PURE__ */ jsxs21(CalendarGrid, { className: classNames3.calendarGrid, children: [
+    /* @__PURE__ */ jsx67(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx67(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx67(
       CalendarCell,
       {
         date,
@@ -3084,14 +3064,14 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext14 } from "react";
+import { useContext as useContext13 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { cn as cn40 } from "@marigold/system";
 
 // src/Calendar/Context.tsx
-import { createContext as createContext8, useContext as useContext13 } from "react";
-var CalendarContext = createContext8({});
-var useCalendarContext = () => useContext13(CalendarContext);
+import { createContext as createContext7, useContext as useContext12 } from "react";
+var CalendarContext = createContext7({});
+var useCalendarContext = () => useContext12(CalendarContext);
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -3110,17 +3090,17 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-import { jsx as jsx70, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs22 } from "react/jsx-runtime";
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext14(CalendarStateContext2);
+  const state = useContext13(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { classNames: classNames3 } = useCalendarContext();
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "button",
     {
       disabled: isDisabled,
@@ -3129,18 +3109,18 @@ function CalendarListBox({
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ jsx70(ChevronDown, {})
+        /* @__PURE__ */ jsx68(ChevronDown, {})
       ]
     }
   );
 }
 
 // src/Calendar/MonthControls.tsx
-import { cn as cn41, useClassNames as useClassNames41 } from "@marigold/system";
-import { jsx as jsx71, jsxs as jsxs24 } from "react/jsx-runtime";
+import { cn as cn41, useClassNames as useClassNames40 } from "@marigold/system";
+import { jsx as jsx69, jsxs as jsxs23 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames3 = useClassNames41({ component: "Calendar" });
-  return /* @__PURE__ */ jsxs24(
+  const classNames3 = useClassNames40({ component: "Calendar" });
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn41(
@@ -3148,22 +3128,22 @@ function MonthControls() {
         classNames3.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsx69(
           IconButton,
           {
             className: cn41("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "previous",
-            children: /* @__PURE__ */ jsx71(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx69(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsx69(
           IconButton,
           {
             className: cn41("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "next",
-            children: /* @__PURE__ */ jsx71(ChevronRight, {})
+            children: /* @__PURE__ */ jsx69(ChevronRight, {})
           }
         )
       ]
@@ -3173,13 +3153,13 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext15 } from "react";
+import { useContext as useContext14 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
 import { Button as Button7 } from "react-aria-components";
 import { cn as cn42 } from "@marigold/system";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext15(CalendarStateContext3);
+  const state = useContext14(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange2 = (index2) => {
     let value = Number(index2) + 1;
@@ -3187,14 +3167,14 @@ var MonthListBox = ({ setSelectedDropdown }) => {
     state.setFocusedDate(date);
   };
   const { classNames: classNames3 } = useCalendarContext();
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx70(
     "ul",
     {
       "data-testid": "monthOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 p-2",
       children: months.map((month, index2) => {
         const isSelected = index2 === state.focusedDate.month - 1;
-        return /* @__PURE__ */ jsx72("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx72(
+        return /* @__PURE__ */ jsx70("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx70(
           Button7,
           {
             slot: "previous",
@@ -3219,16 +3199,16 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext16,
+  useContext as useContext15,
   useEffect,
   useRef as useRef2
 } from "react";
 import { Button as Button8, CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
 import { cn as cn43 } from "@marigold/system";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext16(CalendarStateContext4);
+  const state = useContext15(CalendarStateContext4);
   const { classNames: classNames3 } = useCalendarContext();
   const years = [];
   let formatter = useDateFormatter3({
@@ -3257,19 +3237,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index2].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx71(
     "ul",
     {
       "data-testid": "yearOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: years.map((year, index2) => {
         const isSelected = +year.formatted === state.focusedDate.year;
-        return /* @__PURE__ */ jsx73("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx73(
+        return /* @__PURE__ */ jsx71("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx71(
           "div",
           {
             ref: isSelected ? activeButtonRef : null,
             className: "flex size-full justify-center",
-            children: /* @__PURE__ */ jsx73(
+            children: /* @__PURE__ */ jsx71(
               Button8,
               {
                 slot: "previous",
@@ -3296,7 +3276,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { jsx as jsx74, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs24 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -3311,13 +3291,13 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = useClassNames42({ component: "Calendar", size: size2, variant });
+  const classNames3 = useClassNames41({ component: "Calendar", size: size2, variant });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
-    month: /* @__PURE__ */ jsx74(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ jsx74(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ jsx72(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx72(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx74(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx72(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs24(
     Calendar,
     {
       className: cn44(
@@ -3326,7 +3306,7 @@ var _Calendar = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx74(
+        /* @__PURE__ */ jsx72(
           "div",
           {
             className: cn44(
@@ -3336,7 +3316,7 @@ var _Calendar = ({
             children: ViewMap[selectedDropdown]
           }
         ),
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs24(
           "div",
           {
             className: cn44(
@@ -3344,8 +3324,8 @@ var _Calendar = ({
               selectedDropdown && "pointer-events-none opacity-0"
             ),
             children: [
-              /* @__PURE__ */ jsxs25("div", { className: "mb-4 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx74("div", { className: "flex w-fit gap-4", children: ["month", "year"].map((dateType) => /* @__PURE__ */ jsx74(
+              /* @__PURE__ */ jsxs24("div", { className: "mb-4 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx72("div", { className: "flex w-fit gap-4", children: ["month", "year"].map((dateType) => /* @__PURE__ */ jsx72(
                   CalendarListBox,
                   {
                     type: dateType,
@@ -3354,9 +3334,9 @@ var _Calendar = ({
                   },
                   dateType
                 )) }),
-                /* @__PURE__ */ jsx74(MonthControls_default, {})
+                /* @__PURE__ */ jsx72(MonthControls_default, {})
               ] }),
-              /* @__PURE__ */ jsx74(_CalendarGrid, {})
+              /* @__PURE__ */ jsx72(_CalendarGrid, {})
             ]
           }
         )
@@ -3368,8 +3348,8 @@ var _Calendar = ({
 // src/DatePicker/DatePicker.tsx
 import React6 from "react";
 import { DatePicker, Dialog as Dialog4 } from "react-aria-components";
-import { useClassNames as useClassNames43 } from "@marigold/system";
-import { jsx as jsx75, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useClassNames as useClassNames42 } from "@marigold/system";
+import { jsx as jsx73, jsxs as jsxs25 } from "react/jsx-runtime";
 var _DatePicker = React6.forwardRef(
   ({
     dateUnavailable,
@@ -3393,12 +3373,12 @@ var _DatePicker = React6.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = useClassNames43({
+    const classNames3 = useClassNames42({
       component: "DatePicker",
       size: size2,
       variant
     });
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs25(
       FieldBase,
       {
         as: DatePicker,
@@ -3407,10 +3387,10 @@ var _DatePicker = React6.forwardRef(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsx73(
             _DateInput,
             {
-              action: /* @__PURE__ */ jsx75(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx75(
+              action: /* @__PURE__ */ jsx73(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx73(
                 "svg",
                 {
                   "data-testid": "action",
@@ -3418,12 +3398,12 @@ var _DatePicker = React6.forwardRef(
                   width: 24,
                   height: 24,
                   fill: "currentColor",
-                  children: /* @__PURE__ */ jsx75("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                  children: /* @__PURE__ */ jsx73("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
                 }
               ) })
             }
           ),
-          /* @__PURE__ */ jsx75(_Popover, { children: /* @__PURE__ */ jsx75(Dialog4, { children: /* @__PURE__ */ jsx75(_Calendar, { disabled }) }) })
+          /* @__PURE__ */ jsx73(_Popover, { children: /* @__PURE__ */ jsx73(Dialog4, { children: /* @__PURE__ */ jsx73(_Calendar, { disabled }) }) })
         ]
       }
     );
@@ -3437,8 +3417,8 @@ import {
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx76 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx76(
+import { jsx as jsx74 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx74(
   "div",
   {
     className: cn45(
@@ -3453,36 +3433,36 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx76(
 // src/Link/Link.tsx
 import { forwardRef as forwardRef21 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames44 } from "@marigold/system";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { useClassNames as useClassNames43 } from "@marigold/system";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var _Link = forwardRef21(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = useClassNames44({
+    const classNames3 = useClassNames43({
       component: "Link",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ jsx77(Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx75(Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames45 } from "@marigold/system";
+import { useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext9, useContext as useContext17 } from "react";
-var ListContext = createContext9({});
-var useListContext = () => useContext17(ListContext);
+import { createContext as createContext8, useContext as useContext16 } from "react";
+var ListContext = createContext8({});
+var useListContext = () => useContext16(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames3 } = useListContext();
-  return /* @__PURE__ */ jsx78("li", { ...props, className: classNames3, children });
+  return /* @__PURE__ */ jsx76("li", { ...props, className: classNames3, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -3491,38 +3471,38 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = useClassNames45({ component: "List", variant, size: size2 });
-  return /* @__PURE__ */ jsx79(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx79(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
+  const classNames3 = useClassNames44({ component: "List", variant, size: size2 });
+  return /* @__PURE__ */ jsx77(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx77(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import { Button as Button9, Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames48 } from "@marigold/system";
+import { useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames46 } from "@marigold/system";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { useClassNames as useClassNames45 } from "@marigold/system";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = useClassNames46({ component: "Menu" });
-  return /* @__PURE__ */ jsx80(MenuItem, { ...props, className: classNames3.item, children });
+  const classNames3 = useClassNames45({ component: "Menu" });
+  return /* @__PURE__ */ jsx78(MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { MenuSection } from "react-aria-components";
-import { useClassNames as useClassNames47 } from "@marigold/system";
-import { jsx as jsx81, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useClassNames as useClassNames46 } from "@marigold/system";
+import { jsx as jsx79, jsxs as jsxs26 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames47({ component: "Menu" });
-  return /* @__PURE__ */ jsxs27(MenuSection, { ...props, children: [
-    /* @__PURE__ */ jsx81(_Header, { className: className.section, children: title }),
+  const className = useClassNames46({ component: "Menu" });
+  return /* @__PURE__ */ jsxs26(MenuSection, { ...props, children: [
+    /* @__PURE__ */ jsx79(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx82, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
 var _Menu = ({
   children,
   label,
@@ -3534,9 +3514,9 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = useClassNames48({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ jsxs28(MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ jsx82(
+  const classNames3 = useClassNames47({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ jsxs27(MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ jsx80(
       Button9,
       {
         className: classNames3.button,
@@ -3545,7 +3525,7 @@ var _Menu = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx82(_Popover, { open, placement, children: /* @__PURE__ */ jsx82(Menu, { ...props, className: classNames3.container, children }) })
+    /* @__PURE__ */ jsx80(_Popover, { open, placement, children: /* @__PURE__ */ jsx80(Menu, { ...props, className: classNames3.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -3553,17 +3533,17 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Button as Button10, Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { useClassNames as useClassNames49 } from "@marigold/system";
-import { jsx as jsx83, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useClassNames as useClassNames48 } from "@marigold/system";
+import { jsx as jsx81, jsxs as jsxs28 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
   size: size2,
   disabled,
   ...props
 }) => {
-  const classNames3 = useClassNames49({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ jsxs29(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx83(Button10, { className: classNames3.button, isDisabled: disabled, children: /* @__PURE__ */ jsxs29(
+  const classNames3 = useClassNames48({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ jsxs28(MenuTrigger2, { children: [
+    /* @__PURE__ */ jsx81(Button10, { className: classNames3.button, isDisabled: disabled, children: /* @__PURE__ */ jsxs28(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3574,54 +3554,54 @@ var ActionMenu = ({
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx83("circle", { cx: 12, cy: 12, r: 1 }),
-          /* @__PURE__ */ jsx83("circle", { cx: 12, cy: 5, r: 1 }),
-          /* @__PURE__ */ jsx83("circle", { cx: 12, cy: 19, r: 1 })
+          /* @__PURE__ */ jsx81("circle", { cx: 12, cy: 12, r: 1 }),
+          /* @__PURE__ */ jsx81("circle", { cx: 12, cy: 5, r: 1 }),
+          /* @__PURE__ */ jsx81("circle", { cx: 12, cy: 19, r: 1 })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx83(_Popover, { children: /* @__PURE__ */ jsx83(Menu2, { ...props, className: classNames3.container, children: props.children }) })
+    /* @__PURE__ */ jsx81(_Popover, { children: /* @__PURE__ */ jsx81(Menu2, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
 import { useRef as useRef3, useState as useState2 } from "react";
 import { useButton } from "@react-aria/button";
-import { cn as cn48, useClassNames as useClassNames50 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
-import { createContext as createContext10, useContext as useContext18 } from "react";
-var SectionMessageContext = createContext10({});
-var useSectionMessageContext = () => useContext18(SectionMessageContext);
+import { createContext as createContext9, useContext as useContext17 } from "react";
+var SectionMessageContext = createContext9({});
+var useSectionMessageContext = () => useContext17(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
 import { cn as cn46 } from "@marigold/system";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx84("div", { className: cn46("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ jsx82("div", { className: cn46("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
 import { cn as cn47 } from "@marigold/system";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx85("div", { className: cn47("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ jsx83("div", { className: cn47("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { jsx as jsx86, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs29 } from "react/jsx-runtime";
 var icons2 = {
-  success: () => /* @__PURE__ */ jsx86(
+  success: () => /* @__PURE__ */ jsx84(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx86(
+      children: /* @__PURE__ */ jsx84(
         "path",
         {
           fillRule: "evenodd",
@@ -3631,13 +3611,13 @@ var icons2 = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx86(
+  info: () => /* @__PURE__ */ jsx84(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx86(
+      children: /* @__PURE__ */ jsx84(
         "path",
         {
           fillRule: "evenodd",
@@ -3647,13 +3627,13 @@ var icons2 = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx86(
+  warning: () => /* @__PURE__ */ jsx84(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx86(
+      children: /* @__PURE__ */ jsx84(
         "path",
         {
           fillRule: "evenodd",
@@ -3663,13 +3643,13 @@ var icons2 = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx86(
+  error: () => /* @__PURE__ */ jsx84(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx86(
+      children: /* @__PURE__ */ jsx84(
         "path",
         {
           fillRule: "evenodd",
@@ -3690,7 +3670,7 @@ var SectionMessage = ({
   ...props
 }) => {
   const buttonRef = useRef3(null);
-  const classNames3 = useClassNames50({
+  const classNames3 = useClassNames49({
     component: "SectionMessage",
     variant,
     size: size2
@@ -3706,15 +3686,15 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ jsx86(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx84(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs29(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
       className: cn48("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ jsx86("div", { className: cn48("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx86(Icon4, {}) }),
-        closeButton && /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx84("div", { className: cn48("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx84(Icon4, {}) }),
+        closeButton && /* @__PURE__ */ jsx84(
           CloseButton,
           {
             ...buttonProps,
@@ -3879,7 +3859,7 @@ function _objectWithoutProperties(e, t) {
   return i;
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.8_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
 import { useState as useState3, useCallback } from "react";
 var _excluded = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref3) {
@@ -3937,7 +3917,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.8_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
 import * as React11 from "react";
 import { forwardRef as forwardRef24, useMemo as useMemo5 } from "react";
 
@@ -4045,13 +4025,13 @@ function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.8_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
 import * as React10 from "react";
-import { useMemo as useMemo4, Fragment as Fragment8, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect3, Component } from "react";
+import { useMemo as useMemo4, Fragment as Fragment7, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect3, Component } from "react";
 
-// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.5_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
+// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.8_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React8 from "react";
-import { useContext as useContext20, forwardRef as forwardRef23 } from "react";
+import { useContext as useContext19, forwardRef as forwardRef23 } from "react";
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -5223,7 +5203,7 @@ var syncFallback = function syncFallback2(create) {
 var useInsertionEffect2 = React7["useInsertionEffect"] ? React7["useInsertionEffect"] : false;
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser3 ? syncFallback : useInsertionEffect2 || syncFallback;
 
-// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.5_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
+// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.8_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var isDevelopment3 = false;
 var isBrowser4 = typeof document !== "undefined";
 var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
@@ -5240,14 +5220,14 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
   return /* @__PURE__ */ forwardRef23(function(props, ref) {
-    var cache = useContext20(EmotionCacheContext);
+    var cache = useContext19(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = useContext20(EmotionCacheContext);
+      var cache = useContext19(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -5327,11 +5307,11 @@ var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
 });
 var Emotion$1 = Emotion;
 
-// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.5_react@19.1.0/node_modules/@emotion/react/dist/emotion-react.esm.js
+// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.8_react@19.1.0/node_modules/@emotion/react/dist/emotion-react.esm.js
 import * as React9 from "react";
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
-var jsx87 = function jsx88(type, props) {
+var jsx85 = function jsx86(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
     return React9.createElement.apply(void 0, args);
@@ -5349,7 +5329,7 @@ var jsx87 = function jsx88(type, props) {
   var JSX2;
   /* @__PURE__ */ (function(_JSX) {
   })(JSX2 || (JSX2 = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx87 || (jsx87 = {}));
+})(jsx85 || (jsx85 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -5378,8 +5358,8 @@ function _taggedTemplateLiteral(e, t) {
   }));
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
-import { useContext as useContext22, useRef as useRef5, useState as useState4, useMemo as useMemo3, useCallback as useCallback2, createContext as createContext12 } from "react";
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.8_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
+import { useContext as useContext21, useRef as useRef5, useState as useState4, useMemo as useMemo3, useCallback as useCallback2, createContext as createContext11 } from "react";
 import { createPortal } from "react-dom";
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -5779,12 +5759,12 @@ function autoUpdate(reference, floating, update, options2) {
   };
 }
 
-// ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.0_@types+react@19.1.5_react@19.1.0/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
+// ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.0_@types+react@19.1.8_react@19.1.0/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 import { useLayoutEffect as useLayoutEffect2, useEffect as useEffect2 } from "react";
 var isClient = typeof document !== "undefined";
 var index = isClient ? useLayoutEffect2 : useEffect2;
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.8_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
 var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
 var noop = function noop2() {
 };
@@ -6116,10 +6096,10 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ createContext12(null);
+var PortalPlacementContext = /* @__PURE__ */ createContext11(null);
 var MenuPlacer = function MenuPlacer2(props) {
   var children = props.children, minMenuHeight = props.minMenuHeight, maxMenuHeight = props.maxMenuHeight, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition, menuShouldScrollIntoView = props.menuShouldScrollIntoView, theme = props.theme;
-  var _ref3 = useContext22(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var _ref3 = useContext21(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
   var ref = useRef5(null);
   var _useState = useState4(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
   var _useState3 = useState4(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
@@ -6152,7 +6132,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu3 = function Menu4(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx85("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -6174,7 +6154,7 @@ var menuListCSS = function menuListCSS2(_ref4, unstyled) {
 };
 var MenuList = function MenuList2(props) {
   var children = props.children, innerProps = props.innerProps, innerRef = props.innerRef, isMulti = props.isMulti;
-  return jsx87("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx85("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -6194,7 +6174,7 @@ var noOptionsMessageCSS = noticeCSS;
 var loadingMessageCSS = noticeCSS;
 var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
   var _ref6$children = _ref6.children, children = _ref6$children === void 0 ? "No options" : _ref6$children, innerProps = _ref6.innerProps, restProps = _objectWithoutProperties(_ref6, _excluded$3);
-  return jsx87("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx85("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -6204,7 +6184,7 @@ var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
 };
 var LoadingMessage = function LoadingMessage2(_ref7) {
   var _ref7$children = _ref7.children, children = _ref7$children === void 0 ? "Loading..." : _ref7$children, innerProps = _ref7.innerProps, restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  return jsx87("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx85("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -6267,7 +6247,7 @@ var MenuPortal = function MenuPortal2(props) {
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx87("div", _extends({
+  var menuWrapper = jsx85("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -6276,7 +6256,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx87(PortalPlacementContext.Provider, {
+  return jsx85(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ createPortal(menuWrapper, appendTo) : menuWrapper);
 };
@@ -6292,7 +6272,7 @@ var containerCSS = function containerCSS2(_ref3) {
 };
 var SelectContainer = function SelectContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isDisabled = props.isDisabled, isRtl = props.isRtl;
-  return jsx87("div", _extends({}, getStyleProps(props, "container", {
+  return jsx85("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -6313,7 +6293,7 @@ var valueContainerCSS = function valueContainerCSS2(_ref23, unstyled) {
 };
 var ValueContainer = function ValueContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isMulti = props.isMulti, hasValue = props.hasValue;
-  return jsx87("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx85("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -6329,7 +6309,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx85("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -6350,7 +6330,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size2 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx87("svg", _extends({
+  return jsx85("svg", _extends({
     height: size2,
     width: size2,
     viewBox: "0 0 20 20",
@@ -6360,16 +6340,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx87(Svg, _extends({
+  return jsx85(Svg, _extends({
     size: 20
-  }, props), jsx87("path", {
+  }, props), jsx85("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron2(props) {
-  return jsx87(Svg, _extends({
+  return jsx85(Svg, _extends({
     size: 20
-  }, props), jsx87("path", {
+  }, props), jsx85("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
   }));
 };
@@ -6390,18 +6370,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx85("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx87(DownChevron, null));
+  }), innerProps), children || jsx85(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx85("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx87(CrossIcon, null));
+  }), innerProps), children || jsx85(CrossIcon, null));
 };
 var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
   var isDisabled = _ref4.isDisabled, _ref4$theme = _ref4.theme, baseUnit2 = _ref4$theme.spacing.baseUnit, colors2 = _ref4$theme.colors;
@@ -6417,7 +6397,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx87("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx85("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -6441,7 +6421,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset2 = _ref6.offset;
-  return jsx87("span", {
+  return jsx85("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -6456,20 +6436,20 @@ var LoadingDot = function LoadingDot2(_ref6) {
 };
 var LoadingIndicator = function LoadingIndicator2(_ref7) {
   var innerProps = _ref7.innerProps, isRtl = _ref7.isRtl, _ref7$size = _ref7.size, size2 = _ref7$size === void 0 ? 4 : _ref7$size, restProps = _objectWithoutProperties(_ref7, _excluded2);
-  return jsx87("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx85("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size2
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx87(LoadingDot, {
+  }), innerProps), jsx85(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx87(LoadingDot, {
+  }), jsx85(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx87(LoadingDot, {
+  }), jsx85(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -6501,7 +6481,7 @@ var css$1 = function css2(_ref3, unstyled) {
 };
 var Control = function Control2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, innerRef = props.innerRef, innerProps = props.innerProps, menuIsOpen = props.menuIsOpen;
-  return jsx87("div", _extends({
+  return jsx85("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -6523,15 +6503,15 @@ var groupCSS = function groupCSS2(_ref3, unstyled) {
 };
 var Group2 = function Group3(props) {
   var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames2 = props.getClassNames, Heading6 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "group", {
+  return jsx85("div", _extends({}, getStyleProps(props, "group", {
     group: true
-  }), innerProps), jsx87(Heading6, _extends({}, headingProps, {
+  }), innerProps), jsx85(Heading6, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames: getClassNames2,
     cx
-  }), label), jsx87("div", null, children));
+  }), label), jsx85("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -6553,7 +6533,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx87("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx85("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -6605,11 +6585,11 @@ var inputStyle = function inputStyle2(isHidden) {
 var Input2 = function Input3(props) {
   var cx = props.cx, value = props.value;
   var _cleanCommonProps = cleanCommonProps(props), innerRef = _cleanCommonProps.innerRef, isDisabled = _cleanCommonProps.isDisabled, isHidden = _cleanCommonProps.isHidden, inputClassName = _cleanCommonProps.inputClassName, innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded3);
-  return jsx87("div", _extends({}, getStyleProps(props, "input", {
+  return jsx85("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx87("input", _extends({
+  }), jsx85("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -6663,35 +6643,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx87("div", innerProps, children);
+  return jsx85("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx87("div", _extends({
+  return jsx85("div", _extends({
     role: "button"
-  }, innerProps), children || jsx87(CrossIcon, {
+  }, innerProps), children || jsx85(CrossIcon, {
     size: 14
   }));
 }
 var MultiValue = function MultiValue2(props) {
   var children = props.children, components2 = props.components, data = props.data, innerProps = props.innerProps, isDisabled = props.isDisabled, removeProps3 = props.removeProps, selectProps = props.selectProps;
   var Container2 = components2.Container, Label3 = components2.Label, Remove = components2.Remove;
-  return jsx87(Container2, {
+  return jsx85(Container2, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx87(Label3, {
+  }, jsx85(Label3, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx87(Remove, {
+  }, children), jsx85(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -6724,7 +6704,7 @@ var optionCSS = function optionCSS2(_ref3, unstyled) {
 };
 var Option = function Option2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, isSelected = props.isSelected, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "option", {
+  return jsx85("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -6748,7 +6728,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx85("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -6770,7 +6750,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx87("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx85("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -6858,7 +6838,7 @@ function memoizeOne(resultFn, isEqual2) {
   return memoized;
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.8_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
 function _EMOTION_STRINGIFIED_CSS_ERROR__$2() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
@@ -6872,7 +6852,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx87("span", _extends({
+  return jsx85("span", _extends({
     css: _ref
   }, props));
 };
@@ -7007,18 +6987,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx87(Fragment8, null, jsx87("span", {
+  var ScreenReaderText = jsx85(Fragment7, null, jsx85("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx87("span", {
+  }, ariaSelected), jsx85("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx87("span", {
+  }, ariaFocused), jsx85("span", {
     id: "aria-results"
-  }, ariaResults), jsx87("span", {
+  }, ariaResults), jsx85("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx87(Fragment8, null, jsx87(A11yText$1, {
+  return jsx85(Fragment7, null, jsx85(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx87(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx85(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -7331,7 +7311,7 @@ var _excluded4 = ["innerRef"];
 function DummyInput(_ref3) {
   var innerRef = _ref3.innerRef, props = _objectWithoutProperties(_ref3, _excluded4);
   var filteredProps = removeProps(props, "onExited", "in", "enter", "exit", "appear");
-  return jsx87("input", _extends({
+  return jsx85("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -7573,7 +7553,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx87(Fragment8, null, lockEnabled && jsx87("div", {
+  return jsx85(Fragment7, null, lockEnabled && jsx85("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -7592,7 +7572,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx87("input", {
+  return jsx85("input", {
     required: true,
     name,
     tabIndex: -1,
@@ -9154,7 +9134,7 @@ var Select = /* @__PURE__ */ function(_Component) {
 }(Component);
 Select.defaultProps = defaultProps;
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.8_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
 var import_objectSpread24 = __toESM(require_objectSpread2());
 var import_slicedToArray3 = __toESM(require_slicedToArray());
 var import_objectWithoutProperties4 = __toESM(require_objectWithoutProperties());
@@ -9175,7 +9155,7 @@ var StateManagedSelect = /* @__PURE__ */ forwardRef24(function(props, ref) {
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
-// ../../node_modules/.pnpm/@react-aria+label@3.7.18_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useLabel.mjs
+// ../../node_modules/.pnpm/@react-aria+label@3.7.19_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useLabel.mjs
 import { useId as $83Elw$useId, useLabels as $83Elw$useLabels } from "@react-aria/utils";
 function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   let { id, label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, labelElementType = "label" } = props;
@@ -9200,7 +9180,7 @@ function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   };
 }
 
-// ../../node_modules/.pnpm/@react-aria+label@3.7.18_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useField.mjs
+// ../../node_modules/.pnpm/@react-aria+label@3.7.19_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useField.mjs
 import { useSlotId as $2kC82$useSlotId, mergeProps as $2kC82$mergeProps } from "@react-aria/utils";
 function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
   let { description, errorMessage, isInvalid, validationState } = props;
@@ -9239,8 +9219,8 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 import { useId } from "@react-aria/utils";
-import { cn as cn49, useClassNames as useClassNames51 } from "@marigold/system";
-import { jsx as jsx89, jsxs as jsxs31 } from "react/jsx-runtime";
+import { cn as cn49, useClassNames as useClassNames50 } from "@marigold/system";
+import { jsx as jsx87, jsxs as jsxs30 } from "react/jsx-runtime";
 var propsToBeRemoved = [
   "clearValue",
   "getStyles",
@@ -9266,7 +9246,7 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
     },
     {}
   );
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx87(
     _Input2,
     {
       disabled: props.isDisabled,
@@ -9277,7 +9257,7 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  return /* @__PURE__ */ jsx89(Button11, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx89("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx89("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ jsx87(Button11, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var getClassNames = (classNames3) => ({
   control: () => cn49(
@@ -9309,9 +9289,10 @@ var Multiselect = ({
   description,
   onChange: onChange2,
   onSelectionChange,
+  width,
   ...rest
 }) => {
-  const classNames3 = useClassNames51({
+  const classNames3 = useClassNames50({
     component: "MultiSelect",
     size: size2,
     variant
@@ -9329,7 +9310,7 @@ var Multiselect = ({
     label: props.label,
     errorMessage
   });
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx87(
     Provider2,
     {
       values: [
@@ -9359,16 +9340,16 @@ var Multiselect = ({
           }
         ]
       ],
-      children: /* @__PURE__ */ jsxs31(
+      children: /* @__PURE__ */ jsxs30(
         "div",
         {
-          className: cn49(classNames3.field, "group/field"),
+          className: cn49(classNames3.field, "group/field", `w-${width}`),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
           children: [
-            props.label && /* @__PURE__ */ jsx89(_Label, { ...labelProps, children: props.label }),
-            /* @__PURE__ */ jsx89(
+            props.label && /* @__PURE__ */ jsx87(_Label, { ...labelProps, children: props.label }),
+            /* @__PURE__ */ jsx87(
               StateManagedSelect$1,
               {
                 ...props,
@@ -9404,19 +9385,19 @@ var Multiselect = ({
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
                   // eslint-disable-next-line react/prop-types
-                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ jsx89(
+                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ jsx87(
                     "button",
                     {
                       ...innerProps,
                       disabled: isDisabled,
                       className: classNames3.icon,
-                      children: /* @__PURE__ */ jsx89(ChevronDown, { className: "size-4" })
+                      children: /* @__PURE__ */ jsx87(ChevronDown, { className: "size-4" })
                     }
                   )
                 }
               }
             ),
-            /* @__PURE__ */ jsx89(HelpText, { description, errorMessage })
+            /* @__PURE__ */ jsx87(HelpText, { description, errorMessage })
           ]
         }
       )
@@ -9427,13 +9408,13 @@ var Multiselect = ({
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef25 } from "react";
 import { Group as Group4, Input as Input5, NumberField } from "react-aria-components";
-import { cn as cn51, useClassNames as useClassNames52 } from "@marigold/system";
+import { cn as cn51, useClassNames as useClassNames51 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button12 } from "react-aria-components";
 import { cn as cn50 } from "@marigold/system";
-import { jsx as jsx90 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx90("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx90(
+import { jsx as jsx88 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx88("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx88(
   "path",
   {
     fillRule: "evenodd",
@@ -9441,7 +9422,7 @@ var Plus = () => /* @__PURE__ */ jsx90("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx90("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx90(
+var Minus = () => /* @__PURE__ */ jsx88("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx88(
   "path",
   {
     fillRule: "evenodd",
@@ -9451,7 +9432,7 @@ var Minus = () => /* @__PURE__ */ jsx90("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx88(
     Button12,
     {
       className: cn50(
@@ -9462,13 +9443,13 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx90(Icon4, {})
+      children: /* @__PURE__ */ jsx88(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx91, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs31 } from "react/jsx-runtime";
 var _NumberField = forwardRef25(
   ({
     variant,
@@ -9480,7 +9461,7 @@ var _NumberField = forwardRef25(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames52({
+    const classNames3 = useClassNames51({
       component: "NumberField",
       size: size2,
       variant
@@ -9493,15 +9474,15 @@ var _NumberField = forwardRef25(
       ...rest
     };
     const showStepper = !hideStepper && !readOnly;
-    return /* @__PURE__ */ jsx91(
+    return /* @__PURE__ */ jsx89(
       FieldBase,
       {
         as: NumberField,
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        children: /* @__PURE__ */ jsxs32(Group4, { className: cn51("flex items-stretch", classNames3.group), children: [
-          showStepper && /* @__PURE__ */ jsx91(
+        children: /* @__PURE__ */ jsxs31(Group4, { className: cn51("flex items-stretch", classNames3.group), children: [
+          showStepper && /* @__PURE__ */ jsx89(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9509,14 +9490,14 @@ var _NumberField = forwardRef25(
               slot: "decrement"
             }
           ),
-          /* @__PURE__ */ jsx91(
+          /* @__PURE__ */ jsx89(
             Input5,
             {
               ref,
               className: cn51("h-full flex-1 outline-none", classNames3.input)
             }
           ),
-          showStepper && /* @__PURE__ */ jsx91(
+          showStepper && /* @__PURE__ */ jsx89(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9533,12 +9514,12 @@ var _NumberField = forwardRef25(
 // src/Pagination/Pagination.tsx
 import { useEffect as useEffect4, useRef as useRef9, useState as useState5 } from "react";
 import { FocusScope as FocusScope2, useFocusManager } from "@react-aria/focus";
-import { useClassNames as useClassNames55 } from "@marigold/system";
+import { useClassNames as useClassNames54 } from "@marigold/system";
 
 // src/Pagination/Ellipsis.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var Ellipsis = () => {
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx90(
     "span",
     {
       className: "text-text-base flex h-8 w-8 items-center justify-center",
@@ -9551,11 +9532,11 @@ var Ellipsis = () => {
 // src/Pagination/NavigationButton.tsx
 import { useRef as useRef7 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
-import { cn as cn52, useClassNames as useClassNames53 } from "@marigold/system";
-import { jsxs as jsxs33 } from "react/jsx-runtime";
+import { cn as cn52, useClassNames as useClassNames52 } from "@marigold/system";
+import { jsxs as jsxs32 } from "react/jsx-runtime";
 var NavigationButton = (props) => {
   const ref = useRef7(null);
-  const classNames3 = useClassNames53({
+  const classNames3 = useClassNames52({
     component: "Pagination"
   });
   let { buttonProps } = useButton2(props, ref);
@@ -9568,7 +9549,7 @@ var NavigationButton = (props) => {
     position: position2,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(
     "button",
     {
       ref,
@@ -9589,16 +9570,16 @@ var NavigationButton = (props) => {
 // src/Pagination/PageButton.tsx
 import { useRef as useRef8 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
-import { useClassNames as useClassNames54 } from "@marigold/system";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { useClassNames as useClassNames53 } from "@marigold/system";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var PageButton = (props) => {
   const ref = useRef8(null);
-  const classNames3 = useClassNames54({
+  const classNames3 = useClassNames53({
     component: "Pagination"
   });
   let { buttonProps } = useButton3(props, ref);
   let { page, selected, isDisabled } = props;
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx91(
     "button",
     {
       ref,
@@ -9645,7 +9626,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-import { Fragment as Fragment9, jsx as jsx94, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx92, jsxs as jsxs33 } from "react/jsx-runtime";
 var InnerPagination = ({
   currentPage,
   pageSize,
@@ -9672,7 +9653,7 @@ var InnerPagination = ({
       onChange2(newPage);
     }
   };
-  const classNames3 = useClassNames55({ component: "Pagination" });
+  const classNames3 = useClassNames54({ component: "Pagination" });
   const handleKeyDown = (onEnter) => (e) => {
     if (e.key === "ArrowRight") {
       e.preventDefault();
@@ -9685,8 +9666,8 @@ var InnerPagination = ({
       onEnter();
     }
   };
-  return /* @__PURE__ */ jsxs34(Fragment9, { children: [
-    /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsxs33(Fragment8, { children: [
+    /* @__PURE__ */ jsx92(
       NavigationButton,
       {
         onClick: () => handlePageChange(Math.max(1, currentPage - 1)),
@@ -9695,11 +9676,11 @@ var InnerPagination = ({
         controlLabel: controlLabels == null ? void 0 : controlLabels[0],
         position: "left",
         onKeyDown: handleKeyDown(() => handlePageChange(currentPage - 1)),
-        children: /* @__PURE__ */ jsx94(ChevronLeft, { className: classNames3.icon })
+        children: /* @__PURE__ */ jsx92(ChevronLeft, { className: classNames3.icon })
       }
     ),
-    /* @__PURE__ */ jsx94("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
-      (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx94(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ jsx94(
+    /* @__PURE__ */ jsx92("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
+      (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx92(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ jsx92(
         PageButton,
         {
           page: pageNumber,
@@ -9709,8 +9690,8 @@ var InnerPagination = ({
         },
         pageNumber
       )
-    ) : /* @__PURE__ */ jsx94(PageButton, { page: 1, isDisabled: true }, 1) }),
-    /* @__PURE__ */ jsx94(
+    ) : /* @__PURE__ */ jsx92(PageButton, { page: 1, isDisabled: true }, 1) }),
+    /* @__PURE__ */ jsx92(
       NavigationButton,
       {
         onClick: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
@@ -9719,7 +9700,7 @@ var InnerPagination = ({
         controlLabel: controlLabels == null ? void 0 : controlLabels[1],
         position: "right",
         onKeyDown: handleKeyDown(() => handlePageChange(currentPage + 1)),
-        children: /* @__PURE__ */ jsx94(ChevronRight, { className: classNames3.icon })
+        children: /* @__PURE__ */ jsx92(ChevronRight, { className: classNames3.icon })
       }
     )
   ] });
@@ -9734,12 +9715,12 @@ var _Pagination = ({
   const [currentPage, setCurrentPage] = useState5(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
   const pageRange = usePageRange({ currentPage, totalPages });
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx92(
     "nav",
     {
       className: "flex items-center justify-center space-x-2",
       "aria-label": `Page ${currentPage} of ${totalPages}`,
-      children: /* @__PURE__ */ jsx94(FocusScope2, { restoreFocus: true, children: /* @__PURE__ */ jsx94(
+      children: /* @__PURE__ */ jsx92(FocusScope2, { restoreFocus: true, children: /* @__PURE__ */ jsx92(
         InnerPagination,
         {
           pageSize,
@@ -9759,19 +9740,19 @@ import {
   forwardRef as forwardRef26
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn54, useClassNames as useClassNames57 } from "@marigold/system";
+import { cn as cn54, useClassNames as useClassNames56 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext13, useContext as useContext23 } from "react";
-var RadioGroupContext = createContext13(
+import { createContext as createContext12, useContext as useContext22 } from "react";
+var RadioGroupContext = createContext12(
   null
 );
-var useRadioGroupContext = () => useContext23(RadioGroupContext);
+var useRadioGroupContext = () => useContext22(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn53, useClassNames as useClassNames56 } from "@marigold/system";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { cn as cn53, useClassNames as useClassNames55 } from "@marigold/system";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size: size2,
@@ -9787,7 +9768,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = useClassNames56({ component: "Radio", variant, size: size2 });
+  const classNames3 = useClassNames55({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9795,7 +9776,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx93(
     FieldBase,
     {
       as: RadioGroup,
@@ -9806,7 +9787,7 @@ var _RadioGroup = ({
       variant,
       size: size2,
       ...props,
-      children: /* @__PURE__ */ jsx95(
+      children: /* @__PURE__ */ jsx93(
         "div",
         {
           role: "presentation",
@@ -9817,7 +9798,7 @@ var _RadioGroup = ({
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx95(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
+          children: /* @__PURE__ */ jsx93(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
         }
       )
     }
@@ -9825,9 +9806,9 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment10, jsx as jsx96, jsxs as jsxs35 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx96("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx96("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx96(
+import { Fragment as Fragment9, jsx as jsx94, jsxs as jsxs34 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx94("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx94("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx94(
   "div",
   {
     className: cn54(
@@ -9836,18 +9817,18 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx96(
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ jsx96(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx94(Dot, {}) : null
   }
 );
 var _Radio = forwardRef26(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = useClassNames57({
+    const classNames3 = useClassNames56({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
     });
-    return /* @__PURE__ */ jsx96(
+    return /* @__PURE__ */ jsx94(
       Radio,
       {
         ref,
@@ -9860,8 +9841,8 @@ var _Radio = forwardRef26(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs35(Fragment10, { children: [
-          /* @__PURE__ */ jsx96(
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs34(Fragment9, { children: [
+          /* @__PURE__ */ jsx94(
             Icon3,
             {
               checked: isSelected,
@@ -9871,7 +9852,7 @@ var _Radio = forwardRef26(
               )
             }
           ),
-          /* @__PURE__ */ jsx96("div", { className: classNames3.label, children })
+          /* @__PURE__ */ jsx94("div", { className: classNames3.label, children })
         ] })
       }
     );
@@ -9882,7 +9863,7 @@ _Radio.Group = _RadioGroup;
 // src/SearchField/SearchField.tsx
 import { forwardRef as forwardRef27 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var _SearchField = forwardRef27(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
@@ -9892,7 +9873,7 @@ var _SearchField = forwardRef27(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx97(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx95(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx95(
       SearchInput,
       {
         ref,
@@ -9905,8 +9886,8 @@ var _SearchField = forwardRef27(
 // src/Select/Select.tsx
 import { forwardRef as forwardRef28 } from "react";
 import { Select as Select2, SelectValue } from "react-aria-components";
-import { cn as cn55, useClassNames as useClassNames58 } from "@marigold/system";
-import { jsx as jsx98, jsxs as jsxs36 } from "react/jsx-runtime";
+import { cn as cn55, useClassNames as useClassNames57 } from "@marigold/system";
+import { jsx as jsx96, jsxs as jsxs35 } from "react/jsx-runtime";
 var _Select = forwardRef28(
   ({
     disabled,
@@ -9927,9 +9908,9 @@ var _Select = forwardRef28(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = useClassNames58({ component: "Select", variant, size: size2 });
-    return /* @__PURE__ */ jsxs36(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
-      /* @__PURE__ */ jsxs36(
+    const classNames3 = useClassNames57({ component: "Select", variant, size: size2 });
+    return /* @__PURE__ */ jsxs35(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
+      /* @__PURE__ */ jsxs35(
         IconButton,
         {
           className: cn55(
@@ -9937,12 +9918,12 @@ var _Select = forwardRef28(
             classNames3.select
           ),
           children: [
-            /* @__PURE__ */ jsx98(SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ jsx98(ChevronDown, { className: cn55("size-4", classNames3.icon) })
+            /* @__PURE__ */ jsx96(SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ jsx96(ChevronDown, { className: cn55("size-4", classNames3.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ jsx98(_Popover, { children: /* @__PURE__ */ jsx98(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ jsx96(_Popover, { children: /* @__PURE__ */ jsx96(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -9954,21 +9935,21 @@ import {
   forwardRef as forwardRef30
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn57, useClassNames as useClassNames59 } from "@marigold/system";
+import { cn as cn57, useClassNames as useClassNames58 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext14, useContext as useContext24 } from "react";
-var SelectListContext = createContext14(
+import { createContext as createContext13, useContext as useContext23 } from "react";
+var SelectListContext = createContext13(
   {}
 );
-var useSelectListContext = () => useContext24(SelectListContext);
+var useSelectListContext = () => useContext23(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
 import { forwardRef as forwardRef29 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
 import { cn as cn56 } from "@marigold/system";
-import { Fragment as Fragment11, jsx as jsx99, jsxs as jsxs37 } from "react/jsx-runtime";
-var CheckMark3 = ({ className }) => /* @__PURE__ */ jsx99("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ jsx99(
+import { jsx as jsx97, jsxs as jsxs36 } from "react/jsx-runtime";
+var CheckMark3 = ({ className }) => /* @__PURE__ */ jsx97("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ jsx97(
   "path",
   {
     fill: "currentColor",
@@ -9979,26 +9960,27 @@ var CheckMark3 = ({ className }) => /* @__PURE__ */ jsx99("svg", { width: "12px"
 var SelectionIndicator = ({ selectionMode }) => {
   switch (selectionMode) {
     case "multiple": {
-      return /* @__PURE__ */ jsx99(_Checkbox, { slot: "selection" });
+      return /* @__PURE__ */ jsx97(_Checkbox, { slot: "selection" });
     }
     case "single": {
-      return /* @__PURE__ */ jsx99(CheckMark3, { className: "invisible hidden" });
+      return /* @__PURE__ */ jsx97(CheckMark3, { className: "invisible hidden" });
     }
   }
 };
 var _SelectListItem = forwardRef29(
-  ({ children, ...props }, ref) => {
+  ({ children, disabled, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames3 } = useSelectListContext();
-    return /* @__PURE__ */ jsx99(
+    return /* @__PURE__ */ jsx97(
       SelectListItem,
       {
+        isDisabled: disabled,
         textValue,
         ...props,
         className: cn56("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.item),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ jsxs37(Fragment11, { children: [
-          /* @__PURE__ */ jsx99(SelectionIndicator, { selectionMode }),
+        children: ({ selectionMode }) => /* @__PURE__ */ jsxs36("div", { className: "selection-indicator contents", children: [
+          /* @__PURE__ */ jsx97(SelectionIndicator, { selectionMode }),
           children
         ] })
       }
@@ -10007,15 +9989,15 @@ var _SelectListItem = forwardRef29(
 );
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var _SelectList = forwardRef30(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = useClassNames59({ component: "ListBox" });
+    const classNames3 = useClassNames58({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
     };
-    return /* @__PURE__ */ jsx100(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx100("div", { className: classNames3.container, children: /* @__PURE__ */ jsx100(
+    return /* @__PURE__ */ jsx98(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx98("div", { className: classNames3.container, children: /* @__PURE__ */ jsx98(
       SelectList,
       {
         ...props,
@@ -10033,19 +10015,19 @@ var _SelectList = forwardRef30(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn58, createVar as createVar8, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { cn as cn58, createVar as createVar6, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx101(
+}) => /* @__PURE__ */ jsx99(
   "div",
   {
     ...props,
     className: cn58(["sticky h-(--height) overflow-auto", twWidth2[width]]),
-    style: createVar8({ height }),
+    style: createVar6({ height }),
     children
   }
 );
@@ -10061,9 +10043,9 @@ import {
 import {
   cn as cn59,
   width as twWidth3,
-  useClassNames as useClassNames60
+  useClassNames as useClassNames59
 } from "@marigold/system";
-import { Fragment as Fragment12, jsx as jsx102, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx100, jsxs as jsxs37 } from "react/jsx-runtime";
 var _Slider = forwardRef31(
   ({
     thumbLabels,
@@ -10074,7 +10056,7 @@ var _Slider = forwardRef31(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames60({
+    const classNames3 = useClassNames59({
       component: "Slider",
       variant,
       size: size2
@@ -10083,7 +10065,7 @@ var _Slider = forwardRef31(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs37(
       FieldBase,
       {
         as: Slider,
@@ -10095,14 +10077,14 @@ var _Slider = forwardRef31(
         ref,
         ...props,
         children: [
-          label && /* @__PURE__ */ jsx102(_Label, { children: label }),
-          /* @__PURE__ */ jsx102(SliderOutput, { className: cn59("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx102(
+          label && /* @__PURE__ */ jsx100(_Label, { children: label }),
+          /* @__PURE__ */ jsx100(SliderOutput, { className: cn59("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx100(
             SliderTrack,
             {
               className: cn59("relative col-span-2 h-2 w-full", classNames3.track),
-              children: ({ state }) => /* @__PURE__ */ jsxs38(Fragment12, { children: [
-                /* @__PURE__ */ jsx102(
+              children: ({ state }) => /* @__PURE__ */ jsxs37(Fragment10, { children: [
+                /* @__PURE__ */ jsx100(
                   "div",
                   {
                     className: cn59(
@@ -10111,7 +10093,7 @@ var _Slider = forwardRef31(
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx102(
+                /* @__PURE__ */ jsx100(
                   "div",
                   {
                     className: cn59(
@@ -10124,7 +10106,7 @@ var _Slider = forwardRef31(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ jsx102(
+                state.values.map((_, i) => /* @__PURE__ */ jsx100(
                   SliderThumb,
                   {
                     className: cn59("top-1/2 cursor-pointer", classNames3.thumb),
@@ -10144,23 +10126,27 @@ var _Slider = forwardRef31(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx103 } from "react/jsx-runtime";
-var Split = () => /* @__PURE__ */ jsx103("div", { role: "separator", className: "grow" });
+import { jsx as jsx101 } from "react/jsx-runtime";
+var Split = () => /* @__PURE__ */ jsx101("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
+import { Children as Children3 } from "react";
 import { alignment as alignment3, cn as cn60, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
   stretch = false,
   alignX,
   alignY,
+  asList = false,
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx104(
-    "div",
+  const Component2 = asList ? "ul" : "div";
+  const stackChildren = asList ? Children3.map(children, (child) => child != null ? /* @__PURE__ */ jsx102("li", { children: child }) : null) : children;
+  return /* @__PURE__ */ jsx102(
+    Component2,
     {
       className: cn60(
         "flex flex-col",
@@ -10170,7 +10156,7 @@ var Stack = ({
         stretch && "h-full w-full"
       ),
       ...props,
-      children
+      children: stackChildren
     }
   );
 };
@@ -10181,9 +10167,9 @@ import { Switch } from "react-aria-components";
 import {
   cn as cn61,
   width as twWidth4,
-  useClassNames as useClassNames61
+  useClassNames as useClassNames60
 } from "@marigold/system";
-import { jsx as jsx105, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs38 } from "react/jsx-runtime";
 var _Switch = forwardRef32(
   ({
     variant,
@@ -10195,14 +10181,14 @@ var _Switch = forwardRef32(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames61({ component: "Switch", size: size2, variant });
+    const classNames3 = useClassNames60({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs38(
       Switch,
       {
         ...props,
@@ -10214,8 +10200,8 @@ var _Switch = forwardRef32(
           classNames3.container
         ),
         children: [
-          label && /* @__PURE__ */ jsx105(_Label, { elementType: "span", children: label }),
-          /* @__PURE__ */ jsx105("div", { className: "relative", children: /* @__PURE__ */ jsx105("div", { className: classNames3.track, children: /* @__PURE__ */ jsx105("div", { className: classNames3.thumb }) }) })
+          label && /* @__PURE__ */ jsx103(_Label, { elementType: "span", children: label }),
+          /* @__PURE__ */ jsx103("div", { className: "relative", children: /* @__PURE__ */ jsx103("div", { className: classNames3.track, children: /* @__PURE__ */ jsx103("div", { className: classNames3.thumb }) }) })
         ]
       }
     );
@@ -10233,16 +10219,16 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn67, useClassNames as useClassNames63 } from "@marigold/system";
+import { cn as cn67, useClassNames as useClassNames62 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext15, useContext as useContext25 } from "react";
-var TableContext = createContext15({});
-var useTableContext = () => useContext25(TableContext);
+import { createContext as createContext14, useContext as useContext24 } from "react";
+var TableContext = createContext14({});
+var useTableContext = () => useContext24(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var TableBody = ({
   children,
   className,
@@ -10251,7 +10237,7 @@ var TableBody = ({
   const { rowGroupProps } = useTableRowGroup();
   const { state, classNames: classNames3 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ jsx106("tbody", { className, children: /* @__PURE__ */ jsx106("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ jsx106(
+    return /* @__PURE__ */ jsx104("tbody", { className, children: /* @__PURE__ */ jsx104("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ jsx104(
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
@@ -10261,7 +10247,7 @@ var TableBody = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx106("tbody", { ...rowGroupProps, className, children });
+  return /* @__PURE__ */ jsx104("tbody", { ...rowGroupProps, className, children });
 };
 
 // src/Table/TableCell.tsx
@@ -10270,7 +10256,7 @@ import { useFocusRing } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
 import { useStateProps } from "@marigold/system";
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var TableCell = ({
   cell,
   align = "left",
@@ -10297,7 +10283,7 @@ var TableCell = ({
   };
   const { focusProps, isFocusVisible } = useFocusRing();
   const stateProps = useStateProps({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx105(
     "td",
     {
       ref,
@@ -10339,7 +10325,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
 var TableCheckboxCell = ({
   cell,
   alignY = "middle"
@@ -10359,7 +10345,7 @@ var TableCheckboxCell = ({
   );
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx106(
     "td",
     {
       ref,
@@ -10367,7 +10353,7 @@ var TableCheckboxCell = ({
       ...mergeProps3(gridCellProps, focusProps),
       ...stateProps,
       valign: alignY,
-      children: /* @__PURE__ */ jsx108(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx106(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -10379,7 +10365,7 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
 import { cn as cn63, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
-import { jsx as jsx109, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs39 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column: column2,
   width = "auto",
@@ -10401,7 +10387,7 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs39(
     "th",
     {
       colSpan: column2.colspan,
@@ -10412,7 +10398,7 @@ var TableColumnHeader = ({
       align,
       children: [
         column2.rendered,
-        column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx109(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx109(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx109("span", { className: "hidden", children: /* @__PURE__ */ jsx109(SortDown, { className: "inline-block" }) }))
+        column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx107(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx107(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx107("span", { className: "hidden", children: /* @__PURE__ */ jsx107(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -10421,17 +10407,16 @@ var TableColumnHeader = ({
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 import { cn as cn64 } from "@marigold/system";
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
   const { classNames: classNames3 } = useTableContext();
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx108(
     "thead",
     {
       ...rowGroupProps,
       className: cn64(
         classNames3 == null ? void 0 : classNames3.thead,
-        // for sticky header &th needs to be sticky for b2b and core theme
         // for rui sticky is applied to thead
         stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""
       ),
@@ -10443,7 +10428,7 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef13 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
 var TableHeaderRow = ({
   item,
   className,
@@ -10452,7 +10437,7 @@ var TableHeaderRow = ({
   const { state } = useTableContext();
   const ref = useRef13(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx111("tr", { ...rowProps, className, ref, children });
+  return /* @__PURE__ */ jsx109("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -10461,13 +10446,13 @@ import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { cn as cn65, useClassNames as useClassNames62, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { cn as cn65, useClassNames as useClassNames61, useStateProps as useStateProps4 } from "@marigold/system";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = useClassNames62({
+  const classNames3 = useClassNames61({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10492,7 +10477,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx110(
     "tr",
     {
       ref,
@@ -10523,7 +10508,7 @@ import {
   width as twWidth6,
   useStateProps as useStateProps5
 } from "@marigold/system";
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column: column2,
   width = "auto",
@@ -10545,7 +10530,7 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx111(
     "th",
     {
       ref,
@@ -10553,13 +10538,13 @@ var TableSelectAllCell = ({
       ...mergeProps6(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx113(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx111(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx114, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs40 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size: size2,
@@ -10583,17 +10568,17 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames3 = useClassNames63({
+  const classNames3 = useClassNames62({
     component: "Table",
     variant,
     size: size2
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx112(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames3, variant, size: size2 },
-      children: /* @__PURE__ */ jsxs41(
+      children: /* @__PURE__ */ jsxs40(
         "table",
         {
           ref: tableRef,
@@ -10605,7 +10590,7 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx114(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx114(
+            /* @__PURE__ */ jsx112(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx112(
               TableHeaderRow,
               {
                 item: headerRow,
@@ -10613,7 +10598,7 @@ var Table = ({
                 children: [...collection.getChildren(headerRow.key)].map(
                   (column2) => {
                     var _a, _b, _c, _d, _e;
-                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx114(
+                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx112(
                       TableSelectAllCell,
                       {
                         width: (_b = column2.props) == null ? void 0 : _b.width,
@@ -10621,7 +10606,7 @@ var Table = ({
                         align: (_c = column2.props) == null ? void 0 : _c.align
                       },
                       column2.key
-                    ) : /* @__PURE__ */ jsx114(
+                    ) : /* @__PURE__ */ jsx112(
                       TableColumnHeader,
                       {
                         width: (_d = column2.props) == null ? void 0 : _d.width,
@@ -10635,19 +10620,19 @@ var Table = ({
               },
               headerRow.key
             )) }),
-            /* @__PURE__ */ jsxs41(TableBody, { className: classNames3.body, emptyState, children: [
+            /* @__PURE__ */ jsxs40(TableBody, { className: classNames3.body, emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx114(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx112(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
                   var _a, _b;
                   const currentColumn = collection.columns[index2];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx114(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx112(
                     TableCheckboxCell,
                     {
                       cell,
                       alignY
                     },
                     cell.key
-                  ) : /* @__PURE__ */ jsx114(
+                  ) : /* @__PURE__ */ jsx112(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -10681,9 +10666,9 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames64
+  useClassNames as useClassNames63
 } from "@marigold/system";
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var _Text = ({
   variant,
   size: size2,
@@ -10697,14 +10682,14 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = useClassNames64({
+  const classNames3 = useClassNames63({
     component: "Text",
     variant,
     size: size2
   });
   const Component2 = props.slot ? Text2 : as;
   const elementType = props.slot ? { elementType: as } : {};
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx113(
     Component2,
     {
       ...props,
@@ -10728,8 +10713,8 @@ var _Text = ({
 // src/TextArea/TextArea.tsx
 import { forwardRef as forwardRef33 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames65 } from "@marigold/system";
-import { jsx as jsx116 } from "react/jsx-runtime";
+import { useClassNames as useClassNames64 } from "@marigold/system";
+import { jsx as jsx114 } from "react/jsx-runtime";
 var _TextArea = forwardRef33(
   ({
     variant,
@@ -10741,7 +10726,7 @@ var _TextArea = forwardRef33(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames65({ component: "TextArea", variant, size: size2 });
+    const classNames3 = useClassNames64({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10749,14 +10734,14 @@ var _TextArea = forwardRef33(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx116(FieldBase, { as: TextField, ...props, variant, size: size2, children: /* @__PURE__ */ jsx116(TextArea, { className: classNames3, ref, rows }) });
+    return /* @__PURE__ */ jsx114(FieldBase, { as: TextField, ...props, variant, size: size2, children: /* @__PURE__ */ jsx114(TextArea, { className: classNames3, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 import { forwardRef as forwardRef34 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx117 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 var _TextField = forwardRef34(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
@@ -10766,13 +10751,13 @@ var _TextField = forwardRef34(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx117(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx117(_Input, { ref }) });
+    return /* @__PURE__ */ jsx115(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx115(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn69, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
-import { jsx as jsx118 } from "react/jsx-runtime";
+import { cn as cn69, createVar as createVar7, gapSpace as gapSpace9 } from "@marigold/system";
+import { jsx as jsx116 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -10785,7 +10770,7 @@ var Tiles = ({
   if (stretch) {
     column2 = `minmax(${column2}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx118(
+  return /* @__PURE__ */ jsx116(
     "div",
     {
       ...props,
@@ -10795,7 +10780,7 @@ var Tiles = ({
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: createVar9({ column: column2, tilesWidth }),
+      style: createVar7({ column: column2, tilesWidth }),
       children
     }
   );
@@ -10803,11 +10788,12 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn70, useClassNames as useClassNames66 } from "@marigold/system";
+import { UNSAFE_PortalProvider as UNSAFE_PortalProvider3 } from "@react-aria/overlays";
+import { cn as cn70, useClassNames as useClassNames65 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -10821,28 +10807,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx119(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx117(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx120, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs41 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames3 = useClassNames66({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = useClassNames65({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsxs42(
-    Tooltip,
+  return /* @__PURE__ */ jsx118(
+    UNSAFE_PortalProvider3,
     {
-      ...props,
-      className: cn70("group/tooltip", classNames3.container),
-      UNSTABLE_portalContainer: portal,
-      children: [
-        /* @__PURE__ */ jsx120(OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ jsx120("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx120("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+      getContainer: () => portal instanceof HTMLElement ? portal : null,
+      children: /* @__PURE__ */ jsxs41(Tooltip, { ...props, className: cn70("group/tooltip", classNames3.container), children: [
+        /* @__PURE__ */ jsx118(OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ jsx118("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx118("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
-      ]
+      ] })
     }
   );
 };
@@ -10850,22 +10834,22 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 import { Tag } from "react-aria-components";
-import { cn as cn71, useClassNames as useClassNames68 } from "@marigold/system";
+import { cn as cn71, useClassNames as useClassNames67 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames67 } from "@marigold/system";
+import { useClassNames as useClassNames66 } from "@marigold/system";
 
 // src/TagGroup/TagGroupHiddenInput.tsx
-import { useContext as useContext26 } from "react";
+import { useContext as useContext25 } from "react";
 import { ListStateContext } from "react-aria-components";
-import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
 var TagGroupHiddenInput = ({ name }) => {
   var _a;
-  const state = useContext26(ListStateContext);
+  const state = useContext25(ListStateContext);
   const selectedKeys = Array.from((_a = state == null ? void 0 : state.selectionManager.selectedKeys) != null ? _a : []);
   if (!selectedKeys.length) return null;
-  return /* @__PURE__ */ jsx121("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx119("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ jsx119(
     "input",
     {
       type: "checkbox",
@@ -10879,7 +10863,7 @@ var TagGroupHiddenInput = ({ name }) => {
 };
 
 // src/TagGroup/TagGroup.tsx
-import { jsx as jsx122, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs42 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -10890,9 +10874,9 @@ var _TagGroup = ({
   name,
   ...rest
 }) => {
-  const classNames3 = useClassNames67({ component: "Tag", variant, size: size2 });
-  return /* @__PURE__ */ jsxs43(FieldBase, { as: TagGroup, ...rest, children: [
-    /* @__PURE__ */ jsx122(
+  const classNames3 = useClassNames66({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ jsxs42(FieldBase, { as: TagGroup, ...rest, children: [
+    /* @__PURE__ */ jsx120(
       TagList,
       {
         items,
@@ -10901,28 +10885,28 @@ var _TagGroup = ({
         children
       }
     ),
-    name ? /* @__PURE__ */ jsx122(TagGroupHiddenInput, { name }) : null
+    name ? /* @__PURE__ */ jsx120(TagGroupHiddenInput, { name }) : null
   ] });
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment13, jsx as jsx123, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx121, jsxs as jsxs43 } from "react/jsx-runtime";
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = useClassNames68({ component: "Tag", variant, size: size2 });
+  const classNames3 = useClassNames67({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx121(
     Tag,
     {
       textValue,
       ...props,
       className: cn71("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs44(Fragment13, { children: [
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs43(Fragment11, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ jsx123(CloseButton, { className: classNames3.closeButton, slot: "remove" })
+        allowsRemoving && /* @__PURE__ */ jsx121(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
     }
   );
@@ -10935,12 +10919,12 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 // src/XLoader/XLoader.tsx
 import { Dialog as Dialog5, Modal as Modal2 } from "react-aria-components";
 import { useId as useId2 } from "@react-aria/utils";
-import { useClassNames as useClassNames70 } from "@marigold/system";
+import { useClassNames as useClassNames69 } from "@marigold/system";
 
 // src/XLoader/BaseLoader.tsx
 import { Label as Label2, ProgressBar as ProgressBar2 } from "react-aria-components";
 import { useLocalizedStringFormatter as useLocalizedStringFormatter2 } from "@react-aria/i18n";
-import { useClassNames as useClassNames69 } from "@marigold/system";
+import { useClassNames as useClassNames68 } from "@marigold/system";
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10953,7 +10937,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-import { jsx as jsx124, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs44 } from "react/jsx-runtime";
 var BaseLoader = ({
   variant,
   size: size2,
@@ -10962,8 +10946,8 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = useLocalizedStringFormatter2(intlMessages2, "marigold");
-  const className = useClassNames69({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ jsxs45(
+  const className = useClassNames68({ component: "XLoader", variant, size: size2 });
+  return /* @__PURE__ */ jsxs44(
     ProgressBar2,
     {
       className: className.container,
@@ -10971,7 +10955,7 @@ var BaseLoader = ({
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs45(
+        /* @__PURE__ */ jsxs44(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -10979,13 +10963,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ jsx124("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_5_",
                   d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10998,12 +10982,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_18_",
                   d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11016,12 +11000,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_19_",
                   d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11034,12 +11018,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_20_",
                   d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11052,12 +11036,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_21_",
                   d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11070,12 +11054,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_22_",
                   d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11088,12 +11072,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_23_",
                   d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11106,12 +11090,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_24_",
                   d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11124,12 +11108,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_25_",
                   d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11142,12 +11126,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_26_",
                   d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11160,12 +11144,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx122(
                 "path",
                 {
                   id: "XMLID_27_",
                   d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ jsx124(
+                  children: /* @__PURE__ */ jsx122(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11181,44 +11165,44 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ jsx124(Label2, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ jsx122(Label2, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var LoaderFullScreen = (props) => {
   const id = useId2();
-  return /* @__PURE__ */ jsx125(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx125(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx125(Dialog5, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx125(BaseLoader, { id, ...props }) }) }) });
+  return /* @__PURE__ */ jsx123(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx123(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx123(Dialog5, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx123(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = useClassNames70({
+  const className = useClassNames69({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ jsx125("div", { className, children: /* @__PURE__ */ jsx125(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ jsx123("div", { className, children: /* @__PURE__ */ jsx123(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx125(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx125(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx125(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx123(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx123(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx123(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames71 } from "@marigold/system";
+import { useClassNames as useClassNames70 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext16, useContext as useContext27 } from "react";
-var TabContext = createContext16({});
-var useTabContext = () => useContext27(TabContext);
+import { createContext as createContext15, useContext as useContext26 } from "react";
+var TabContext = createContext15({});
+var useTabContext = () => useContext26(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
 import { cn as cn72 } from "@marigold/system";
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx124(
     Tab,
     {
       ...props,
@@ -11234,10 +11218,10 @@ var _Tab = (props) => {
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
 import { cn as cn73, gapSpace as gapSpace10 } from "@marigold/system";
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx125(
     TabList,
     {
       ...props,
@@ -11249,25 +11233,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx128 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx128(TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx126(TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = useClassNames71({
+  const classNames3 = useClassNames70({
     component: "Tabs",
     size: size2,
     variant
   });
-  return /* @__PURE__ */ jsx129(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx129(Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ jsx127(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx127(Tabs, { ...props, className: classNames3.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -11279,8 +11263,8 @@ import { RouterProvider } from "react-aria-components";
 // src/TimeField/TimeField.tsx
 import { forwardRef as forwardRef35 } from "react";
 import { DateInput as DateInput2, DateSegment as DateSegment2, TimeField } from "react-aria-components";
-import { useClassNames as useClassNames72 } from "@marigold/system";
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { useClassNames as useClassNames71 } from "@marigold/system";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var _TimeField = forwardRef35(
   ({
     required,
@@ -11292,7 +11276,7 @@ var _TimeField = forwardRef35(
     width = "full",
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames72({ component: "DateField", variant, size: size2 });
+    const classNames3 = useClassNames71({ component: "DateField", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -11300,7 +11284,7 @@ var _TimeField = forwardRef35(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx130(
+    return /* @__PURE__ */ jsx128(
       FieldBase,
       {
         as: TimeField,
@@ -11309,7 +11293,7 @@ var _TimeField = forwardRef35(
         width,
         ...props,
         ref,
-        children: /* @__PURE__ */ jsx130(DateInput2, { className: classNames3.field, children: (segment) => /* @__PURE__ */ jsx130(DateSegment2, { className: classNames3.segment, segment }) })
+        children: /* @__PURE__ */ jsx128(DateInput2, { className: classNames3.field, children: (segment) => /* @__PURE__ */ jsx128(DateSegment2, { className: classNames3.segment, segment }) })
       }
     );
   }
@@ -11341,8 +11325,6 @@ export {
   _Divider as Divider,
   Drawer,
   FieldBase,
-  FieldGroup,
-  FieldGroupContext,
   Footer,
   _Form as Form,
   Grid,
@@ -11395,7 +11377,6 @@ export {
   gridColsAlign,
   gridColumn,
   useAsyncList,
-  useFieldGroupContext,
   useListData,
   usePortalContainer,
   useTheme