@marigold/components 7.3.1 → 7.4.0

package/dist/index.js

@@ -60,7 +60,7 @@ __export(src_exports, {
   Form: () => import_react_aria_components20.Form,
   Header: () => _Header,
   Headline: () => _Headline,
-  I18nProvider: () => import_i18n.I18nProvider,
+  I18nProvider: () => import_i18n2.I18nProvider,
   Image: () => Image,
   Inline: () => Inline,
   Input: () => _Input,
@@ -90,7 +90,7 @@ __export(src_exports, {
   Text: () => Text2,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
-  ThemeProvider: () => import_system13.ThemeProvider,
+  ThemeProvider: () => import_system14.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => _Tooltip,
   Underlay: () => Underlay,
@@ -101,7 +101,7 @@ __export(src_exports, {
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
   usePortalContainer: () => usePortalContainer,
-  useTheme: () => import_system13.useTheme
+  useTheme: () => import_system14.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -270,7 +270,7 @@ var AccordionItem = ({
   });
   const classNames2 = (0, import_system3.useClassNames)({ component: "Accordion", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_focus.FocusRing, { within: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         className: (0, import_system3.cn)(
@@ -285,7 +285,7 @@ var AccordionItem = ({
           expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown, { className: "h3 w-6" })
         ]
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
@@ -408,9 +408,9 @@ var Aspect = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react15 = require("react");
-var import_react16 = __toESM(require("react"));
-var import_react_aria_components11 = require("react-aria-components");
+var import_react14 = require("react");
+var import_react15 = __toESM(require("react"));
+var import_react_aria_components10 = require("react-aria-components");
 
 // src/FieldBase/FieldBase.tsx
 var import_react7 = require("react");
@@ -546,6 +546,12 @@ var _FieldBase = (props, ref) => {
 };
 var FieldBase = fixedForwardRef(_FieldBase);
 
+// src/Input/SearchInput.tsx
+var import_react9 = require("react");
+var import_react_aria_components4 = require("react-aria-components");
+var import_i18n = require("@react-aria/i18n");
+var import_system10 = require("@marigold/system");
+
 // src/Input/Input.tsx
 var import_react8 = require("react");
 var import_react_aria_components3 = require("react-aria-components");
@@ -559,20 +565,20 @@ var _Input = (0, import_react8.forwardRef)(
       size
     });
     const inputIcon = icon ? (0, import_react8.cloneElement)(icon, {
+      ...icon.props,
       className: (0, import_system9.cn)(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
-      ),
-      ...icon.props
+      )
     }) : null;
     const inputAction = action && !props.readOnly ? (0, import_react8.cloneElement)(action, {
+      ...action.props,
       className: (0, import_system9.cn)(
-        "absolute",
+        "absolute right-0",
         classNames2.action,
         action.props.className
-      ),
-      ...action.props
+      )
     }) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
@@ -605,53 +611,121 @@ var _Input = (0, import_react8.forwardRef)(
   }
 );
 
+// src/Input/SearchInput.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var intlMessages = {
+  "de-DE": {
+    "Clear search": "Suche zur\xFCcksetzen"
+  },
+  "en-US": {
+    "Clear search": "Clear search"
+  },
+  "fr-FR": {
+    "Clear search": "Effacer la recherche"
+  }
+};
+var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: 24,
+    height: 24,
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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 = (0, import_react9.forwardRef)(
+  ({ className, onClear, ...props }, ref) => {
+    const stringFormatter = (0, import_i18n.useLocalizedStringFormatter)(intlMessages);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      _Input,
+      {
+        type: "search",
+        className: (0, import_system10.cn)(
+          "[&::-webkit-search-cancel-button]:hidden",
+          className == null ? void 0 : className.input
+        ),
+        ref,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SearchIcon, {}),
+        action: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react_aria_components4.Button,
+          {
+            className: className == null ? void 0 : className.action,
+            onPress: () => onClear == null ? void 0 : onClear(),
+            slot: null,
+            "aria-label": stringFormatter.format("Clear search"),
+            excludeFromTabOrder: true,
+            preventFocusOnPress: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                width: 20,
+                height: 20,
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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" })
+              }
+            )
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+
 // src/ListBox/ListBox.tsx
-var import_react10 = require("react");
-var import_react_aria_components6 = require("react-aria-components");
-var import_system11 = require("@marigold/system");
+var import_react11 = require("react");
+var import_react_aria_components7 = require("react-aria-components");
+var import_system12 = require("@marigold/system");
 
 // src/ListBox/Context.ts
-var import_react9 = require("react");
-var ListBoxContext = (0, import_react9.createContext)({});
-var useListBoxContext = () => (0, import_react9.useContext)(ListBoxContext);
+var import_react10 = require("react");
+var ListBoxContext = (0, import_react10.createContext)({});
+var useListBoxContext = () => (0, import_react10.useContext)(ListBoxContext);
 
 // src/ListBox/ListBoxOption.tsx
-var import_react_aria_components4 = require("react-aria-components");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react_aria_components5 = require("react-aria-components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var _ListBoxItem = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components4.ListBoxItem, { ...props, className: classNames2.option });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components5.ListBoxItem, { ...props, className: classNames2.option });
 };
 
 // src/ListBox/ListBoxSection.tsx
-var import_react_aria_components5 = require("react-aria-components");
-var import_system10 = require("@marigold/system");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_aria_components6 = require("react-aria-components");
+var import_system11 = require("@marigold/system");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var _Section = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_aria_components5.Section,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_aria_components6.Section,
     {
       ...props,
-      className: (0, import_system10.cn)(classNames2.section, classNames2.sectionTitle)
+      className: (0, import_system11.cn)(classNames2.section, classNames2.sectionTitle)
     }
   );
 };
 
 // src/ListBox/ListBox.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var _ListBox = (0, import_react10.forwardRef)(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var _ListBox = (0, import_react11.forwardRef)(
   ({ variant, size, ...props }, ref) => {
-    const classNames2 = (0, import_system11.useClassNames)({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react_aria_components6.ListBox,
+    const classNames2 = (0, import_system12.useClassNames)({ component: "ListBox", variant, size });
+    const listBoxProps = { shouldSelectOnPressUp: false };
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_aria_components7.ListBox,
       {
         ...props,
-        className: (0, import_system11.cn)(
+        className: (0, import_system12.cn)(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
         ref,
+        ...listBoxProps,
         children: props.children
       }
     ) }) });
@@ -661,46 +735,42 @@ _ListBox.Item = _ListBoxItem;
 _ListBox.Section = _Section;
 
 // src/Overlay/Popover.tsx
-var import_react12 = require("react");
-var import_react_aria_components8 = require("react-aria-components");
-var import_system15 = require("@marigold/system");
+var import_react13 = require("react");
+var import_react_aria_components9 = require("react-aria-components");
+var import_system16 = require("@marigold/system");
 
 // src/Provider/OverlayContainerProvider.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_ssr = require("@react-aria/ssr");
-var OverlayContainerContext = (0, import_react11.createContext)(void 0);
+var OverlayContainerContext = (0, import_react12.createContext)(void 0);
 var OverlayContainerProvider = OverlayContainerContext.Provider;
 var usePortalContainer = () => {
-  const portalContainer = (0, import_react11.useContext)(OverlayContainerContext);
+  const portalContainer = (0, import_react12.useContext)(OverlayContainerContext);
   const isSSR = (0, import_ssr.useIsSSR)();
   const portal = isSSR ? null : portalContainer ? document.getElementById(portalContainer) : document.body;
   return portal;
 };
 
 // src/Overlay/Underlay.tsx
-var import_react_aria_components7 = require("react-aria-components");
-var import_system14 = require("@marigold/system");
+var import_react_aria_components8 = require("react-aria-components");
+var import_system15 = require("@marigold/system");
 
 // src/Provider/index.ts
-var import_system13 = require("@marigold/system");
-var import_i18n = require("@react-aria/i18n");
+var import_system14 = require("@marigold/system");
+var import_i18n2 = require("@react-aria/i18n");
 
 // src/Provider/MarigoldProvider.tsx
-var import_overlays = require("@react-aria/overlays");
-var import_system12 = require("@marigold/system");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_system13 = require("@marigold/system");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
-  theme,
-  portalContainer
+  theme
 }) {
-  const outerTheme = (0, import_system12.useTheme)();
-  const isTopLevel = outerTheme === import_system12.defaultTheme;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_system12.ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(OverlayContainerProvider, { value: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_overlays.OverlayProvider, { children }) }) : children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_system13.ThemeProvider, { theme, children });
 }
 
 // src/Overlay/Underlay.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Underlay = ({
   size,
   variant,
@@ -709,7 +779,7 @@ var Underlay = ({
   keyboardDismissable,
   ...rest
 }) => {
-  const classNames2 = (0, import_system14.useClassNames)({ component: "Underlay", size, variant });
+  const classNames2 = (0, import_system15.useClassNames)({ component: "Underlay", size, variant });
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -717,10 +787,10 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_aria_components7.ModalOverlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_aria_components8.ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => (0, import_system14.cn)(
+      className: ({ isEntering, isExiting }) => (0, import_system15.cn)(
         "fixed inset-0 z-10 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur ",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
@@ -735,8 +805,8 @@ var Underlay = ({
 };
 
 // src/Overlay/Popover.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var _Popover = (0, import_react12.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var _Popover = (0, import_react13.forwardRef)(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
       isKeyboardDismissDisabled: keyboardDismissDisabled,
@@ -744,30 +814,30 @@ var _Popover = (0, import_react12.forwardRef)(
       placement,
       ...rest
     };
-    const classNames2 = (0, import_system15.useClassNames)({
+    const classNames2 = (0, import_system16.useClassNames)({
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
       className: "min-w-[--trigger-width]"
     });
-    const isSmallScreen = (0, import_system15.useSmallScreen)();
+    const isSmallScreen = (0, import_system16.useSmallScreen)();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Underlay, { open, variant: "modal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react_aria_components8.Popover,
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Underlay, { open, variant: "modal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react_aria_components9.Popover,
         {
           ref,
           ...props,
-          className: (0, import_system15.cn)(
+          className: (0, import_system16.cn)(
             "!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col"
           ),
           UNSTABLE_portalContainer: portal,
           children
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_aria_components8.Popover,
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_aria_components9.Popover,
       {
         ref,
         ...props,
@@ -780,87 +850,21 @@ var _Popover = (0, import_react12.forwardRef)(
   }
 );
 
-// src/Autocomplete/ClearButton.tsx
-var import_react14 = __toESM(require("react"));
-var import_react_aria_components10 = require("react-aria-components");
-var import_system17 = require("@marigold/system");
-
-// src/Button/Button.tsx
-var import_react13 = require("react");
-var import_react_aria_components9 = require("react-aria-components");
-var import_system16 = require("@marigold/system");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var _Button = (0, import_react13.forwardRef)(
-  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
-    const classNames2 = (0, import_system16.useClassNames)({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_react_aria_components9.Button,
-      {
-        ...props,
-        ref,
-        className: (0, import_system16.cn)(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0
-        ),
-        isDisabled: disabled,
-        children
-      }
-    );
-  }
-);
-
-// src/Autocomplete/ClearButton.tsx
+// src/Autocomplete/Autocomplete.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var AutocompleteClearButton = ({
-  className,
-  onClear
+var AutocompleteInput = ({
+  onSubmit,
+  onClear,
+  ref
 }) => {
-  let state = import_react14.default.useContext(import_react_aria_components10.ComboBoxStateContext);
+  const state = import_react15.default.useContext(import_react_aria_components10.ComboBoxStateContext);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    _Button,
-    {
-      "aria-label": "Clear",
-      "data-testid": "clear-button",
-      onPress: () => {
-        state == null ? void 0 : state.setInputValue("");
-        onClear == null ? void 0 : onClear();
-      },
-      variant: "icon",
-      className: (0, import_system17.cn)(
-        "cursor-pointer appearance-none border-none p-0 pr-1",
-        className
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 20 20",
-          fill: "currentColor",
-          width: 20,
-          height: 20,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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" })
-        }
-      )
-    }
-  );
-};
-
-// src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SearchInput = ({ onSubmit, onClear, ref }) => {
-  const state = import_react16.default.useContext(import_react_aria_components11.ComboBoxStateContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    _Input,
+    SearchInput,
     {
       ref,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchIcon, {}),
-      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutocompleteClearButton, { onClear }) : void 0,
+      className: {
+        action: (state == null ? void 0 : state.inputValue) === "" ? "hidden" : void 0
+      },
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === "Escape") {
           e.preventDefault();
@@ -870,23 +874,16 @@ var SearchInput = ({ onSubmit, onClear, ref }) => {
             onSubmit == null ? void 0 : onSubmit(null, state.inputValue);
           }
         }
+      },
+      onClear: () => {
+        state == null ? void 0 : state.setInputValue("");
+        state == null ? void 0 : state.setSelectedKey(null);
+        onClear == null ? void 0 : onClear();
       }
     }
   );
 };
-var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    width: 24,
-    height: 24,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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 _Autocomplete = (0, import_react15.forwardRef)(
+var _Autocomplete = (0, import_react14.forwardRef)(
   ({
     children,
     defaultValue,
@@ -912,10 +909,10 @@ var _Autocomplete = (0, import_react15.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FieldBase, { as: import_react_aria_components11.ComboBox, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_ListBox, { children }) })
-    ] }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FieldBase, { as: import_react_aria_components10.ComboBox, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(_ListBox, { children }) })
+    ] });
   }
 );
 _Autocomplete.Item = _ListBox.Item;
@@ -923,6 +920,39 @@ _Autocomplete.Item = _ListBox.Item;
 // src/ComboBox/ComboBox.tsx
 var import_react17 = require("react");
 var import_react_aria_components12 = require("react-aria-components");
+var import_system18 = require("@marigold/system");
+
+// src/Button/Button.tsx
+var import_react16 = require("react");
+var import_react_aria_components11 = require("react-aria-components");
+var import_system17 = require("@marigold/system");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var _Button = (0, import_react16.forwardRef)(
+  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
+    const classNames2 = (0, import_system17.useClassNames)({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react_aria_components11.Button,
+      {
+        ...props,
+        ref,
+        className: (0, import_system17.cn)(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0
+        ),
+        isDisabled: disabled,
+        children
+      }
+    );
+  }
+);
+
+// src/ComboBox/ComboBox.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var _ComboBox = (0, import_react17.forwardRef)(
   ({
@@ -948,11 +978,13 @@ var _ComboBox = (0, import_react17.forwardRef)(
       onInputChange: onChange,
       ...rest
     };
+    const classNames2 = (0, import_system18.useClassNames)({ component: "ComboBox", variant, size });
+    console.log(classNames2);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FieldBase, { as: import_react_aria_components12.ComboBox, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         _Input,
         {
-          action: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_Button, { className: "absolute right-2 size-4 border-none bg-transparent p-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDown, { className: "size-4" }) })
+          action: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_Button, { className: classNames2, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDown, { className: "size-4" }) })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(_ListBox, { children }) })
@@ -962,15 +994,15 @@ var _ComboBox = (0, import_react17.forwardRef)(
 _ComboBox.Item = _ListBox.Item;
 
 // src/Badge/Badge.tsx
-var import_system18 = require("@marigold/system");
+var import_system19 = require("@marigold/system");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = (0, import_system18.useClassNames)({ component: "Badge", variant, size });
+  const classNames2 = (0, import_system19.useClassNames)({ component: "Badge", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...props, className: classNames2, children });
 };
 
 // src/Breakout/Breakout.tsx
-var import_system19 = require("@marigold/system");
+var import_system20 = require("@marigold/system");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var Breakout = ({
   height,
@@ -984,14 +1016,14 @@ var Breakout = ({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
-      className: (0, import_system19.cn)(
+      className: (0, import_system20.cn)(
         "col-start-[1_!important] col-end-[-1_!important] w-full",
-        alignX && ((_b = (_a = import_system19.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system19.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
+        alignX && ((_b = (_a = import_system20.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system20.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
         alignX || alignY ? "flex" : "block",
         "h-[--height]"
       ),
-      style: (0, import_system19.createVar)({ height }),
+      style: (0, import_system20.createVar)({ height }),
       ...props,
       children
     }
@@ -999,15 +1031,15 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-var import_system20 = require("@marigold/system");
+var import_system21 = require("@marigold/system");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system20.useClassNames)({ component: "Body", variant, size });
+  const classNames2 = (0, import_system21.useClassNames)({ component: "Body", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
-var import_system21 = require("@marigold/system");
+var import_system22 = require("@marigold/system");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Card = ({
   children,
@@ -1023,22 +1055,22 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = (0, import_system21.useClassNames)({ component: "Card", variant, size });
+  const classNames2 = (0, import_system22.useClassNames)({ component: "Card", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system21.cn)(
+      className: (0, import_system22.cn)(
         "flex flex-col",
         classNames2,
-        import_system21.gapSpace[space],
-        import_system21.paddingSpace !== void 0 && import_system21.paddingSpace[p],
-        import_system21.paddingSpaceX !== void 0 && import_system21.paddingSpaceX[px],
-        import_system21.paddingSpaceY !== void 0 && import_system21.paddingSpaceY[py],
-        import_system21.paddingRight !== void 0 && import_system21.paddingRight[pr],
-        import_system21.paddingLeft !== void 0 && import_system21.paddingLeft[pl],
-        import_system21.paddingBottom !== void 0 && import_system21.paddingBottom[pb],
-        import_system21.paddingTop !== void 0 && import_system21.paddingTop[pt]
+        import_system22.gapSpace[space],
+        import_system22.paddingSpace !== void 0 && import_system22.paddingSpace[p],
+        import_system22.paddingSpaceX !== void 0 && import_system22.paddingSpaceX[px],
+        import_system22.paddingSpaceY !== void 0 && import_system22.paddingSpaceY[py],
+        import_system22.paddingRight !== void 0 && import_system22.paddingRight[pr],
+        import_system22.paddingLeft !== void 0 && import_system22.paddingLeft[pl],
+        import_system22.paddingBottom !== void 0 && import_system22.paddingBottom[pb],
+        import_system22.paddingTop !== void 0 && import_system22.paddingTop[pt]
       ),
       children
     }
@@ -1046,7 +1078,7 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-var import_system22 = require("@marigold/system");
+var import_system23 = require("@marigold/system");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Center = ({
   maxWidth = "100%",
@@ -1058,12 +1090,12 @@ var Center = ({
     "div",
     {
       ...props,
-      className: (0, import_system22.cn)(
+      className: (0, import_system23.cn)(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
-        import_system22.gapSpace[space],
+        import_system23.gapSpace[space],
         "max-w-[--maxWidth]"
       ),
-      style: (0, import_system22.createVar)({ maxWidth }),
+      style: (0, import_system23.createVar)({ maxWidth }),
       children
     }
   );
@@ -1072,7 +1104,7 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 var import_react18 = require("react");
 var import_react_aria_components13 = require("react-aria-components");
-var import_system23 = require("@marigold/system");
+var import_system24 = require("@marigold/system");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
   "path",
@@ -1095,7 +1127,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     "div",
     {
       "aria-hidden": "true",
-      className: (0, import_system23.cn)(
+      className: (0, import_system24.cn)(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1132,12 +1164,12 @@ var _Checkbox = (0, import_react18.forwardRef)(
       defaultSelected: defaultChecked,
       ...rest
     };
-    const classNames2 = (0, import_system23.useClassNames)({ component: "Checkbox", variant, size });
+    const classNames2 = (0, import_system24.useClassNames)({ component: "Checkbox", variant, size });
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_react_aria_components13.Checkbox,
       {
         ref,
-        className: (0, import_system23.cn)(
+        className: (0, import_system24.cn)(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-[disabled]:cursor-not-allowed",
           classNames2.container
@@ -1161,7 +1193,7 @@ var _Checkbox = (0, import_react18.forwardRef)(
 
 // src/Checkbox/CheckboxGroup.tsx
 var import_react_aria_components14 = require("react-aria-components");
-var import_system24 = require("@marigold/system");
+var import_system25 = require("@marigold/system");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var _CheckboxGroup = ({
   children,
@@ -1173,7 +1205,7 @@ var _CheckboxGroup = ({
   error,
   ...rest
 }) => {
-  const classNames2 = (0, import_system24.useClassNames)({
+  const classNames2 = (0, import_system25.useClassNames)({
     component: "Checkbox",
     variant,
     size,
@@ -1192,7 +1224,7 @@ var _CheckboxGroup = ({
 
 // src/Columns/Columns.tsx
 var import_react19 = require("react");
-var import_system25 = require("@marigold/system");
+var import_system26 = require("@marigold/system");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Columns = ({
   space = 0,
@@ -1212,19 +1244,19 @@ var Columns = ({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
-      className: (0, import_system25.cn)(
+      className: (0, import_system26.cn)(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
-        import_system25.gapSpace[space]
+        import_system26.gapSpace[space]
       ),
       ...props,
       children: import_react19.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "div",
         {
-          className: (0, import_system25.cn)(
+          className: (0, import_system26.cn)(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
-          style: (0, import_system25.createVar)({ collapseAt, columnSize: columns[idx] }),
+          style: (0, import_system26.createVar)({ collapseAt, columnSize: columns[idx] }),
           children: child
         }
       ))
@@ -1233,7 +1265,7 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-var import_system26 = require("@marigold/system");
+var import_system27 = require("@marigold/system");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var content = {
   small: "20ch",
@@ -1258,13 +1290,13 @@ var Container = ({
     "div",
     {
       ...props,
-      className: (0, import_system26.cn)(
+      className: (0, import_system27.cn)(
         "grid",
-        import_system26.placeItems[alignItems],
-        import_system26.gridColsAlign[align],
-        import_system26.gridColumn[align]
+        import_system27.placeItems[alignItems],
+        import_system27.gridColsAlign[align],
+        import_system27.gridColumn[align]
       ),
-      style: (0, import_system26.createVar)({ maxWidth }),
+      style: (0, import_system27.createVar)({ maxWidth }),
       children
     }
   );
@@ -1273,11 +1305,11 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 var import_react22 = require("react");
 var import_react_aria_components18 = require("react-aria-components");
-var import_system28 = require("@marigold/system");
+var import_system29 = require("@marigold/system");
 
 // src/Headline/Headline.tsx
 var import_react_aria_components15 = require("react-aria-components");
-var import_system27 = require("@marigold/system");
+var import_system28 = require("@marigold/system");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var _Headline = ({
   variant,
@@ -1288,8 +1320,8 @@ var _Headline = ({
   level = 1,
   ...props
 }) => {
-  const theme = (0, import_system27.useTheme)();
-  const classNames2 = (0, import_system27.useClassNames)({
+  const theme = (0, import_system28.useTheme)();
+  const classNames2 = (0, import_system28.useClassNames)({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
@@ -1299,9 +1331,9 @@ var _Headline = ({
     {
       level: Number(level),
       ...props,
-      className: (0, import_system27.cn)(classNames2, "text-[--color]", import_system27.textAlign[align]),
-      style: (0, import_system27.createVar)({
-        color: color && (0, import_system27.getColor)(
+      className: (0, import_system28.cn)(classNames2, "text-[--color]", import_system28.textAlign[align]),
+      style: (0, import_system28.createVar)({
+        color: color && (0, import_system28.getColor)(
           theme,
           color,
           color
@@ -1379,7 +1411,7 @@ var CloseButton = ({ className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "button",
     {
-      className: (0, import_system28.cn)(
+      className: (0, import_system29.cn)(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
@@ -1403,7 +1435,7 @@ var _Dialog = ({
   isNonModal,
   ...props
 }) => {
-  const classNames2 = (0, import_system28.useClassNames)({ component: "Dialog", variant, size });
+  const classNames2 = (0, import_system29.useClassNames)({ component: "Dialog", variant, size });
   let state = (0, import_react22.useContext)(import_react_aria_components18.OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
@@ -1416,7 +1448,7 @@ var _Dialog = ({
     import_react_aria_components18.Dialog,
     {
       ...props,
-      className: (0, import_system28.cn)("relative outline-none", classNames2.container),
+      className: (0, import_system29.cn)("relative outline-none", classNames2.container),
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
         closeButton && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CloseButton, { className: classNames2.closeButton }),
         children
@@ -1429,18 +1461,18 @@ _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 var import_react_aria_components19 = require("react-aria-components");
-var import_system29 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = (0, import_system29.useClassNames)({ component: "Divider", variant });
+  const classNames2 = (0, import_system30.useClassNames)({ component: "Divider", variant });
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components19.Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
-var import_system30 = require("@marigold/system");
+var import_system31 = require("@marigold/system");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system30.useClassNames)({ component: "Footer", variant, size });
+  const classNames2 = (0, import_system31.useClassNames)({ component: "Footer", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("footer", { ...props, className: classNames2, children });
 };
 
@@ -1449,10 +1481,10 @@ var import_react_aria_components20 = require("react-aria-components");
 
 // src/Header/Header.tsx
 var import_react_aria_components21 = require("react-aria-components");
-var import_system31 = require("@marigold/system");
+var import_system32 = require("@marigold/system");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = (0, import_system31.useClassNames)({
+  const classNames2 = (0, import_system32.useClassNames)({
     component: "Header",
     variant,
     size
@@ -1461,7 +1493,7 @@ var _Header = ({ variant, size, ...props }) => {
 };
 
 // src/Image/Image.tsx
-var import_system32 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var Image = ({
   variant,
@@ -1470,24 +1502,24 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = (0, import_system32.useClassNames)({ component: "Image", variant, size });
+  const classNames2 = (0, import_system33.useClassNames)({ component: "Image", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system32.cn)(
+      className: (0, import_system33.cn)(
         fit !== "none" && "h-full w-full",
         classNames2,
-        import_system32.objectFit[fit],
-        import_system32.objectPosition[position]
+        import_system33.objectFit[fit],
+        import_system33.objectPosition[position]
       )
     }
   );
 };
 
 // src/Inline/Inline.tsx
-var import_system33 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var Inline = ({
   space = 0,
@@ -1502,11 +1534,11 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: (0, import_system33.cn)(
+      className: (0, import_system34.cn)(
         "flex flex-wrap",
-        import_system33.gapSpace[space],
-        alignX && ((_b2 = (_a2 = import_system33.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system33.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        import_system34.gapSpace[space],
+        alignX && ((_b2 = (_a2 = import_system34.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system34.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -1519,11 +1551,11 @@ var import_react_aria_components24 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
 var import_react_aria_components23 = require("react-aria-components");
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
 var import_react_aria_components22 = require("react-aria-components");
-var import_system34 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -1539,7 +1571,7 @@ var _DateSegment = ({ segment, ...props }) => {
           "span",
           {
             "aria-hidden": "true",
-            className: (0, import_system34.cn)(
+            className: (0, import_system35.cn)(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1555,7 +1587,7 @@ var _DateSegment = ({ segment, ...props }) => {
 // src/DateField/DateInput.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size, action, ...props }) => {
-  const classNames2 = (0, import_system35.useClassNames)({ component: "DateField", variant, size });
+  const classNames2 = (0, import_system36.useClassNames)({ component: "DateField", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_aria_components23.Group, { className: classNames2.field, children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_aria_components23.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(_DateSegment, { className: classNames2.segment, segment }) }),
     action ? action : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -1609,25 +1641,25 @@ var _DateField = (0, import_react23.forwardRef)(
 // src/Calendar/Calendar.tsx
 var import_react28 = require("react");
 var import_react_aria_components31 = require("react-aria-components");
-var import_system40 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
 var import_react_aria_components26 = require("react-aria-components");
-var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
 var import_react24 = require("react");
 var import_react_aria_components25 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
-var import_i18n2 = require("@react-aria/i18n");
-var import_system36 = require("@marigold/system");
+var import_i18n3 = require("@react-aria/i18n");
+var import_system37 = require("@marigold/system");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
   const state = (0, import_react24.useContext)(import_react_aria_components25.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
-  const { locale } = (0, import_i18n2.useLocale)();
-  const dayFormatter = (0, import_i18n2.useDateFormatter)({
+  const { locale } = (0, import_i18n3.useLocale)();
+  const dayFormatter = (0, import_i18n3.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
@@ -1639,21 +1671,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames2 = (0, import_system36.useClassNames)({ component: "Calendar" });
+  const classNames2 = (0, import_system37.useClassNames)({ component: "Calendar" });
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
-  const classNames2 = (0, import_system37.useClassNames)({ component: "Calendar" });
+  const classNames2 = (0, import_system38.useClassNames)({ component: "Calendar" });
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_aria_components26.CalendarGrid, { className: classNames2.calendarGrid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CalendarGridHeader, {}),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components26.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       import_react_aria_components26.CalendarCell,
       {
         date,
-        className: (0, import_system37.cn)(
+        className: (0, import_system38.cn)(
           "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
           classNames2.calendarCell
         )
@@ -1666,13 +1698,13 @@ var _CalendarGrid = () => {
 var import_react25 = require("react");
 var import_react_aria_components27 = require("react-aria-components");
 var import_icons = require("@marigold/icons");
-var import_system38 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
 
 // src/Calendar/useFormattedMonths.tsx
-var import_i18n3 = require("@react-aria/i18n");
+var import_i18n4 = require("@react-aria/i18n");
 function useFormattedMonths(timeZone, focusedDate) {
   let months = [];
-  let formatter = (0, import_i18n3.useDateFormatter)({
+  let formatter = (0, import_i18n4.useDateFormatter)({
     month: "long",
     timeZone
   });
@@ -1694,13 +1726,13 @@ function CalendarListBox({
   const state = (0, import_react25.useContext)(import_react_aria_components27.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = (0, import_system38.useClassNames)({ component: "Select" });
+  const { select: selectClassNames } = (0, import_system39.useClassNames)({ component: "Select" });
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: (0, import_system38.cn)(buttonStyles, selectClassNames),
+      className: (0, import_system39.cn)(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
@@ -1713,15 +1745,15 @@ function CalendarListBox({
 // src/Calendar/MonthControls.tsx
 var import_react_aria_components28 = require("react-aria-components");
 var import_icons2 = require("@marigold/icons");
-var import_system39 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function MonthControls() {
-  const classNames2 = (0, import_system39.useClassNames)({ component: "Calendar" });
-  const buttonClassNames = (0, import_system39.useClassNames)({ component: "Button" });
+  const classNames2 = (0, import_system40.useClassNames)({ component: "Calendar" });
+  const buttonClassNames = (0, import_system40.useClassNames)({ component: "Button" });
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
-      className: (0, import_system39.cn)(
+      className: (0, import_system40.cn)(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
         classNames2.calendarControllers
       ),
@@ -1729,7 +1761,7 @@ function MonthControls() {
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           import_react_aria_components28.Button,
           {
-            className: (0, import_system39.cn)(
+            className: (0, import_system40.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1740,7 +1772,7 @@ function MonthControls() {
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           import_react_aria_components28.Button,
           {
-            className: (0, import_system39.cn)(
+            className: (0, import_system40.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1795,12 +1827,12 @@ var MonthListBox_default = MonthListBox;
 // src/Calendar/YearListBox.tsx
 var import_react27 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
-var import_i18n4 = require("@react-aria/i18n");
+var import_i18n5 = require("@react-aria/i18n");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
   const state = (0, import_react27.useContext)(import_react_aria_components30.CalendarStateContext);
   const years = [];
-  let formatter = (0, import_i18n4.useDateFormatter)({
+  let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
     timeZone: state.timeZone
   });
@@ -1876,7 +1908,7 @@ var _Calendar = ({
     isReadOnly: readOnly,
     ...rest
   };
-  const classNames2 = (0, import_system40.useClassNames)({ component: "Calendar" });
+  const classNames2 = (0, import_system41.useClassNames)({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = (0, import_react28.useState)();
   const ViewMap = {
     month: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MonthListBox_default, { setSelectedDropdown }),
@@ -1885,7 +1917,7 @@ var _Calendar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_react_aria_components31.Calendar,
     {
-      className: (0, import_system40.cn)(
+      className: (0, import_system41.cn)(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
@@ -1920,7 +1952,7 @@ var _Calendar = ({
 
 // src/DatePicker/DatePicker.tsx
 var import_react_aria_components32 = require("react-aria-components");
-var import_system41 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var _DatePicker = ({
   disabled,
@@ -1940,7 +1972,7 @@ var _DatePicker = ({
     isOpen: open,
     ...rest
   };
-  const classNames2 = (0, import_system41.useClassNames)({
+  const classNames2 = (0, import_system42.useClassNames)({
     component: "DatePicker",
     size,
     variant
@@ -1975,15 +2007,15 @@ var _DatePicker = ({
 };
 
 // src/Inset/Inset.tsx
-var import_system42 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   "div",
   {
-    className: (0, import_system42.cn)(
-      space && import_system42.paddingSpace[space],
-      !space && spaceX && import_system42.paddingSpaceX[spaceX],
-      !space && spaceY && import_system42.paddingSpaceY[spaceY]
+    className: (0, import_system43.cn)(
+      space && import_system43.paddingSpace[space],
+      !space && spaceX && import_system43.paddingSpaceX[spaceX],
+      !space && spaceY && import_system43.paddingSpaceY[spaceY]
     ),
     children
   }
@@ -1992,11 +2024,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 // src/Link/Link.tsx
 var import_react29 = require("react");
 var import_react_aria_components33 = require("react-aria-components");
-var import_system43 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var _Link = (0, import_react29.forwardRef)(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = (0, import_system43.useClassNames)({
+    const classNames2 = (0, import_system44.useClassNames)({
       component: "Link",
       variant,
       size
@@ -2006,7 +2038,7 @@ var _Link = (0, import_react29.forwardRef)(
 );
 
 // src/List/List.tsx
-var import_system44 = require("@marigold/system");
+var import_system45 = require("@marigold/system");
 
 // src/List/Context.ts
 var import_react30 = require("react");
@@ -2030,30 +2062,30 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = (0, import_system44.useClassNames)({ component: "List", variant, size });
+  const classNames2 = (0, import_system45.useClassNames)({ component: "List", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 var import_react_aria_components36 = require("react-aria-components");
-var import_system47 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
 var import_react_aria_components34 = require("react-aria-components");
-var import_system45 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
-  const classNames2 = (0, import_system45.useClassNames)({ component: "Menu" });
+  const classNames2 = (0, import_system46.useClassNames)({ component: "Menu" });
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components34.MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 var import_react_aria_components35 = require("react-aria-components");
-var import_system46 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = (0, import_system46.useClassNames)({ component: "Menu" });
+  const className = (0, import_system47.useClassNames)({ component: "Menu" });
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_aria_components35.Section, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(_Header, { className: className.section, children: title }),
     children
@@ -2071,7 +2103,7 @@ var _Menu = ({
   open,
   ...props
 }) => {
-  const classNames2 = (0, import_system47.useClassNames)({ component: "Menu", variant, size });
+  const classNames2 = (0, import_system48.useClassNames)({ component: "Menu", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_aria_components36.MenuTrigger, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(_Button, { variant: "menu", disabled, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(_Popover, { open, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_aria_components36.Menu, { ...props, className: classNames2.container, children }) })
@@ -2082,7 +2114,7 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 var import_react_aria_components37 = require("react-aria-components");
-var import_system48 = require("@marigold/system");
+var import_system49 = require("@marigold/system");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var ActionMenu = ({
   variant,
@@ -2090,15 +2122,16 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames2 = (0, import_system48.useClassNames)({ component: "Menu", variant, size });
+  const classNames2 = (0, import_system49.useClassNames)({ component: "Menu", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_aria_components37.MenuTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_system48.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_system49.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components37.Menu, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/Message/Message.tsx
-var import_system49 = require("@marigold/system");
+var import_react31 = require("react");
+var import_system50 = require("@marigold/system");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var icons = {
   success: () => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -2166,46 +2199,46 @@ var icons = {
     }
   )
 };
-var Message = ({
-  messageTitle,
-  variant = "info",
-  size,
-  children,
-  ...props
-}) => {
-  const classNames2 = (0, import_system49.useClassNames)({ component: "Message", variant, size });
-  const Icon4 = icons[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-    "div",
-    {
-      className: (0, import_system49.cn)(
-        "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
-        classNames2.container
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_system49.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon4, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          "div",
-          {
-            className: (0, import_system49.cn)("col-start-2 row-start-1 self-center", classNames2.title),
-            children: messageTitle
-          }
+var Message = (0, import_react31.forwardRef)(
+  ({ messageTitle, variant = "info", size, children, ...props }, ref) => {
+    const classNames2 = (0, import_system50.useClassNames)({ component: "Message", variant, size });
+    const Icon4 = icons[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      "div",
+      {
+        className: (0, import_system50.cn)(
+          "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
+          classNames2.container
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_system49.cn)("col-start-2", classNames2.content), children })
-      ]
-    }
-  );
-};
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_system50.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon4, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            "div",
+            {
+              className: (0, import_system50.cn)(
+                "col-start-2 row-start-1 self-center",
+                classNames2.title
+              ),
+              children: messageTitle
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_system50.cn)("col-start-2", classNames2.content), children })
+        ]
+      }
+    );
+  }
+);
 
 // src/NumberField/NumberField.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_aria_components39 = require("react-aria-components");
-var import_system51 = require("@marigold/system");
+var import_system52 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
 var import_react_aria_components38 = require("react-aria-components");
-var import_system50 = require("@marigold/system");
+var import_system51 = require("@marigold/system");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   "path",
@@ -2228,7 +2261,7 @@ var _StepButton = ({ direction, className, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     import_react_aria_components38.Button,
     {
-      className: (0, import_system50.cn)(
+      className: (0, import_system51.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2243,7 +2276,7 @@ var _StepButton = ({ direction, className, ...props }) => {
 
 // src/NumberField/NumberField.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var _NumberField = (0, import_react31.forwardRef)(
+var _NumberField = (0, import_react32.forwardRef)(
   ({
     variant,
     size,
@@ -2254,7 +2287,7 @@ var _NumberField = (0, import_react31.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system51.useClassNames)({
+    const classNames2 = (0, import_system52.useClassNames)({
       component: "NumberField",
       size,
       variant
@@ -2267,7 +2300,7 @@ var _NumberField = (0, import_react31.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FieldBase, { as: import_react_aria_components39.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_aria_components39.Group, { className: (0, import_system51.cn)("flex items-stretch", classNames2.group), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FieldBase, { as: import_react_aria_components39.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_aria_components39.Group, { className: (0, import_system52.cn)("flex items-stretch", classNames2.group), children: [
       showStepper && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         _StepButton,
         {
@@ -2298,20 +2331,20 @@ var _NumberField = (0, import_react31.forwardRef)(
 );
 
 // src/Radio/Radio.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_react_aria_components41 = require("react-aria-components");
-var import_system53 = require("@marigold/system");
+var import_system54 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react32 = require("react");
-var RadioGroupContext = (0, import_react32.createContext)(
+var import_react33 = require("react");
+var RadioGroupContext = (0, import_react33.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react32.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react33.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 var import_react_aria_components40 = require("react-aria-components");
-var import_system52 = require("@marigold/system");
+var import_system53 = require("@marigold/system");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
@@ -2328,7 +2361,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = (0, import_system52.useClassNames)({ component: "Radio", variant, size });
+  const classNames2 = (0, import_system53.useClassNames)({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2353,7 +2386,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system52.cn)(
+          className: (0, import_system53.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -2371,7 +2404,7 @@ var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("svg", { viewBox:
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   "div",
   {
-    className: (0, import_system53.cn)(
+    className: (0, import_system54.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -2380,10 +2413,10 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx
     children: checked ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react33.forwardRef)(
+var _Radio = (0, import_react34.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = (0, import_system53.useClassNames)({
+    const classNames2 = (0, import_system54.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
@@ -2392,7 +2425,7 @@ var _Radio = (0, import_react33.forwardRef)(
       import_react_aria_components41.Radio,
       {
         ref,
-        className: (0, import_system53.cn)(
+        className: (0, import_system54.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2406,7 +2439,7 @@ var _Radio = (0, import_react33.forwardRef)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system53.cn)(
+              className: (0, import_system54.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
@@ -2421,22 +2454,10 @@ var _Radio = (0, import_react33.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_aria_components42 = require("react-aria-components");
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var SearchIcon2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    width: 24,
-    height: 24,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("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 _SearchField = (0, import_react34.forwardRef)(
+var _SearchField = (0, import_react35.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2445,16 +2466,22 @@ var _SearchField = (0, import_react34.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(FieldBase, { as: import_react_aria_components42.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_Input, { ref, icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SearchIcon2, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(FieldBase, { as: import_react_aria_components42.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      SearchInput,
+      {
+        ref,
+        className: { action: "group-data-[empty=true]/field:hidden" }
+      }
+    ) });
   }
 );
 
 // src/Select/Select.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_aria_components43 = require("react-aria-components");
-var import_system54 = require("@marigold/system");
+var import_system55 = require("@marigold/system");
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var _Select = (0, import_react35.forwardRef)(
+var _Select = (0, import_react36.forwardRef)(
   ({
     disabled,
     required,
@@ -2474,12 +2501,12 @@ var _Select = (0, import_react35.forwardRef)(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = (0, import_system54.useClassNames)({ component: "Select", variant, size });
+    const classNames2 = (0, import_system55.useClassNames)({ component: "Select", variant, size });
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(FieldBase, { isOpen: true, as: import_react_aria_components43.Select, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
         import_react_aria_components43.Button,
         {
-          className: (0, import_system54.cn)(
+          className: (0, import_system55.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
@@ -2497,7 +2524,7 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/Scrollable/Scrollable.tsx
-var import_system55 = require("@marigold/system");
+var import_system56 = require("@marigold/system");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
@@ -2508,18 +2535,18 @@ var Scrollable = ({
   "div",
   {
     ...props,
-    className: (0, import_system55.cn)(["sticky h-[--height] overflow-auto", import_system55.width[width]]),
-    style: (0, import_system55.createVar)({ height }),
+    className: (0, import_system56.cn)(["sticky h-[--height] overflow-auto", import_system56.width[width]]),
+    style: (0, import_system56.createVar)({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_react_aria_components44 = require("react-aria-components");
-var import_system56 = require("@marigold/system");
+var import_system57 = require("@marigold/system");
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var _Slider = (0, import_react36.forwardRef)(
+var _Slider = (0, import_react37.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -2528,7 +2555,7 @@ var _Slider = (0, import_react36.forwardRef)(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system56.useClassNames)({
+    const classNames2 = (0, import_system57.useClassNames)({
       component: "Slider",
       variant,
       size
@@ -2540,24 +2567,24 @@ var _Slider = (0, import_react36.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
       import_react_aria_components44.Slider,
       {
-        className: (0, import_system56.cn)(
+        className: (0, import_system57.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          import_system56.width[width]
+          import_system57.width[width]
         ),
         ref,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_aria_components44.SliderOutput, { className: (0, import_system56.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_aria_components44.SliderOutput, { className: (0, import_system57.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             import_react_aria_components44.SliderTrack,
             {
-              className: (0, import_system56.cn)("relative col-span-2 h-2 w-full", classNames2.track),
+              className: (0, import_system57.cn)("relative col-span-2 h-2 w-full", classNames2.track),
               children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                 import_react_aria_components44.SliderThumb,
                 {
-                  className: (0, import_system56.cn)("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: (0, import_system57.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2576,7 +2603,7 @@ var import_jsx_runtime68 = require("react/jsx-runtime");
 var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system57 = require("@marigold/system");
+var import_system58 = require("@marigold/system");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var Stack = ({
   children,
@@ -2591,11 +2618,11 @@ var Stack = ({
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "div",
     {
-      className: (0, import_system57.cn)(
+      className: (0, import_system58.cn)(
         "flex flex-col",
-        import_system57.gapSpace[space],
-        alignX && ((_b = (_a = import_system57.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system57.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system58.gapSpace[space],
+        alignX && ((_b = (_a = import_system58.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system58.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -2605,11 +2632,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_react_aria_components45 = require("react-aria-components");
-var import_system58 = require("@marigold/system");
+var import_system59 = require("@marigold/system");
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var _Switch = (0, import_react37.forwardRef)(
+var _Switch = (0, import_react38.forwardRef)(
   ({
     variant,
     size,
@@ -2620,7 +2647,7 @@ var _Switch = (0, import_react37.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system58.useClassNames)({ component: "Switch", size, variant });
+    const classNames2 = (0, import_system59.useClassNames)({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -2632,8 +2659,8 @@ var _Switch = (0, import_react37.forwardRef)(
       {
         ...props,
         ref,
-        className: (0, import_system58.cn)(
-          import_system58.width[width],
+        className: (0, import_system59.cn)(
+          import_system59.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
@@ -2643,14 +2670,14 @@ var _Switch = (0, import_react37.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "div",
             {
-              className: (0, import_system58.cn)(
+              className: (0, import_system59.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                 "div",
                 {
-                  className: (0, import_system58.cn)(
+                  className: (0, import_system59.cn)(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2669,15 +2696,15 @@ var _Switch = (0, import_react37.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system65 = require("@marigold/system");
+var import_system66 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react38 = require("react");
-var TableContext = (0, import_react38.createContext)({});
-var useTableContext = () => (0, import_react38.useContext)(TableContext);
+var import_react39 = require("react");
+var TableContext = (0, import_react39.createContext)({});
+var useTableContext = () => (0, import_react39.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
@@ -2688,14 +2715,14 @@ var TableBody = ({ children }) => {
 };
 
 // src/Table/TableCell.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_focus2 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils3 = require("@react-aria/utils");
-var import_system59 = require("@marigold/system");
+var import_system60 = require("@marigold/system");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react39.useRef)(null);
+  const ref = (0, import_react40.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -2715,12 +2742,12 @@ var TableCell = ({ cell, align = "left" }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus2.useFocusRing)();
-  const stateProps = (0, import_system59.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system60.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system59.cn)(classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system60.cn)(classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils3.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
@@ -2730,11 +2757,11 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils4 = require("@react-aria/utils");
-var import_system60 = require("@marigold/system");
+var import_system61 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2759,7 +2786,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react40.useRef)(null);
+  const ref = (0, import_react41.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -2773,12 +2800,12 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system60.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system61.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system60.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system61.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils4.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_Checkbox, { ...checkboxProps })
@@ -2787,14 +2814,14 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_focus4 = require("@react-aria/focus");
 var import_interactions = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils6 = require("@react-aria/utils");
 var import_icons3 = require("@marigold/icons");
-var import_system61 = require("@marigold/system");
 var import_system62 = require("@marigold/system");
+var import_system63 = require("@marigold/system");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
@@ -2802,7 +2829,7 @@ var TableColumnHeader = ({
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react41.useRef)(null);
+  const ref = (0, import_react42.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -2813,7 +2840,7 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system61.useStateProps)({
+  const stateProps = (0, import_system62.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -2822,7 +2849,7 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system61.cn)("cursor-default", import_system62.width[width], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system62.cn)("cursor-default", import_system63.width[width], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils6.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -2850,29 +2877,29 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_table6 = require("@react-aria/table");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react42.useRef)(null);
+  const ref = (0, import_react43.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils7 = require("@react-aria/utils");
-var import_system63 = require("@marigold/system");
+var import_system64 = require("@marigold/system");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react43.useRef)(null);
+  const ref = (0, import_react44.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system63.useClassNames)({
+  const classNames2 = (0, import_system64.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -2890,7 +2917,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system63.useStateProps)({
+  const stateProps = (0, import_system64.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
@@ -2901,7 +2928,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: (0, import_system63.cn)(
+      className: (0, import_system64.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -2915,19 +2942,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils8 = require("@react-aria/utils");
-var import_system64 = require("@marigold/system");
+var import_system65 = require("@marigold/system");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react44.useRef)(null);
+  const ref = (0, import_react45.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -2939,7 +2966,7 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system64.useStateProps)({
+  const stateProps = (0, import_system65.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -2947,7 +2974,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: (0, import_system64.cn)(import_system64.width[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system65.cn)(import_system65.width[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils8.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -2967,7 +2994,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react45.useRef)(null);
+  const tableRef = (0, import_react46.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -2975,7 +3002,7 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system65.useClassNames)({
+  const classNames2 = (0, import_system66.useClassNames)({
     component: "Table",
     variant,
     size
@@ -2989,7 +3016,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: (0, import_system65.cn)(
+          className: (0, import_system66.cn)(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3048,7 +3075,7 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_system66 = require("@marigold/system");
+var import_system67 = require("@marigold/system");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var Text2 = ({
   variant,
@@ -3062,8 +3089,8 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system66.useTheme)();
-  const classNames2 = (0, import_system66.useClassNames)({
+  const theme = (0, import_system67.useTheme)();
+  const classNames2 = (0, import_system67.useClassNames)({
     component: "Text",
     variant,
     size
@@ -3072,17 +3099,17 @@ var Text2 = ({
     "p",
     {
       ...props,
-      className: (0, import_system66.cn)(
+      className: (0, import_system67.cn)(
         classNames2,
         "text-[--color] outline-[--outline]",
-        fontStyle && import_system66.textStyle[fontStyle],
-        align && import_system66.textAlign[align],
-        cursor && import_system66.cursorStyle[cursor],
-        weight && import_system66.fontWeight[weight],
-        fontSize && import_system66.textSize[fontSize]
+        fontStyle && import_system67.textStyle[fontStyle],
+        align && import_system67.textAlign[align],
+        cursor && import_system67.cursorStyle[cursor],
+        weight && import_system67.fontWeight[weight],
+        fontSize && import_system67.textSize[fontSize]
       ),
-      style: (0, import_system66.createVar)({
-        color: color && (0, import_system66.getColor)(
+      style: (0, import_system67.createVar)({
+        color: color && (0, import_system67.getColor)(
           theme,
           color,
           color
@@ -3095,11 +3122,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_react_aria_components46 = require("react-aria-components");
-var import_system67 = require("@marigold/system");
+var import_system68 = require("@marigold/system");
 var import_jsx_runtime81 = require("react/jsx-runtime");
-var _TextArea = (0, import_react46.forwardRef)(
+var _TextArea = (0, import_react47.forwardRef)(
   ({
     variant,
     size,
@@ -3110,7 +3137,7 @@ var _TextArea = (0, import_react46.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system67.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system68.useClassNames)({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3123,10 +3150,10 @@ var _TextArea = (0, import_react46.forwardRef)(
 );
 
 // src/TextField/TextField.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_react_aria_components47 = require("react-aria-components");
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var _TextField = (0, import_react47.forwardRef)(
+var _TextField = (0, import_react48.forwardRef)(
   ({
     variant,
     size,
@@ -3148,7 +3175,7 @@ var _TextField = (0, import_react47.forwardRef)(
 );
 
 // src/Tiles/Tiles.tsx
-var import_system68 = require("@marigold/system");
+var import_system69 = require("@marigold/system");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
@@ -3166,13 +3193,13 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: (0, import_system68.cn)(
+      className: (0, import_system69.cn)(
         "grid",
-        import_system68.gapSpace[space],
+        import_system69.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system68.createVar)({ column, tilesWidth }),
+      style: (0, import_system69.createVar)({ column, tilesWidth }),
       children
     }
   );
@@ -3180,7 +3207,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_react_aria_components49 = require("react-aria-components");
-var import_system69 = require("@marigold/system");
+var import_system70 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react_aria_components48 = require("react-aria-components");
@@ -3208,8 +3235,8 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames2 = (0, import_system69.useClassNames)({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_react_aria_components49.Tooltip, { ...props, className: (0, import_system69.cn)("group/tooltip", classNames2.container), children: [
+  const classNames2 = (0, import_system70.useClassNames)({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_react_aria_components49.Tooltip, { ...props, className: (0, import_system70.cn)("group/tooltip", classNames2.container), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react_aria_components49.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
@@ -3218,22 +3245,31 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 var import_react_aria_components51 = require("react-aria-components");
-var import_system71 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
 var import_react_aria_components50 = require("react-aria-components");
-var import_system70 = require("@marigold/system");
+var import_system71 = require("@marigold/system");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
   items,
   children,
+  renderEmptyState,
   variant,
   size,
   ...rest
 }) => {
-  const classNames2 = (0, import_system70.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FieldBase, { as: import_react_aria_components50.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_aria_components50.TagList, { items, className: classNames2.listItems, children }) });
+  const classNames2 = (0, import_system71.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FieldBase, { as: import_react_aria_components50.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    import_react_aria_components50.TagList,
+    {
+      items,
+      className: classNames2.listItems,
+      renderEmptyState,
+      children
+    }
+  ) });
 };
 
 // src/TagGroup/Tag.tsx
@@ -3243,13 +3279,13 @@ var CloseButton2 = ({ className }) => {
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = (0, import_system71.useClassNames)({ component: "Tag", variant, size });
+  const classNames2 = (0, import_system72.useClassNames)({ component: "Tag", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria_components51.Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
     children,
     allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       CloseButton2,
       {
-        className: (0, import_system71.cn)("flex items-center", classNames2.closeButton)
+        className: (0, import_system72.cn)("flex items-center", classNames2.closeButton)
       }
     )
   ] }) });
@@ -3260,11 +3296,11 @@ _Tag.Group = _TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react48 = require("react");
-var import_system72 = require("@marigold/system");
+var import_react49 = require("react");
+var import_system73 = require("@marigold/system");
 var import_jsx_runtime88 = require("react/jsx-runtime");
-var XLoader = (0, import_react48.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
-  import_system72.SVG,
+var XLoader = (0, import_react49.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+  import_system73.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3478,16 +3514,16 @@ var XLoader = (0, import_react48.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 
 // src/Tabs/Tabs.tsx
 var import_react_aria_components55 = require("react-aria-components");
-var import_system75 = require("@marigold/system");
+var import_system76 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react49 = require("react");
-var TabContext = (0, import_react49.createContext)({});
-var useTabContext = () => (0, import_react49.useContext)(TabContext);
+var import_react50 = require("react");
+var TabContext = (0, import_react50.createContext)({});
+var useTabContext = () => (0, import_react50.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
 var import_react_aria_components52 = require("react-aria-components");
-var import_system73 = require("@marigold/system");
+var import_system74 = require("@marigold/system");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3495,7 +3531,7 @@ var _Tab = (props) => {
     import_react_aria_components52.Tab,
     {
       ...props,
-      className: (0, import_system73.cn)(
+      className: (0, import_system74.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3506,7 +3542,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 var import_react_aria_components53 = require("react-aria-components");
-var import_system74 = require("@marigold/system");
+var import_system75 = require("@marigold/system");
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3514,7 +3550,7 @@ var _TabList = ({ space = 2, ...props }) => {
     import_react_aria_components53.TabList,
     {
       ...props,
-      className: (0, import_system74.cn)("flex", import_system74.gapSpace[space], classNames2.tabsList),
+      className: (0, import_system75.cn)("flex", import_system75.gapSpace[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3535,7 +3571,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = (0, import_system75.useClassNames)({
+  const classNames2 = (0, import_system76.useClassNames)({
     component: "Tabs",
     size,
     variant