@marigold/components 7.3.1 → 7.4.0

package/dist/index.mjs

@@ -14,7 +14,7 @@ import { useTreeState } from "@react-stately/tree";
 
 // src/Accordion/AccordionItem.tsx
 import { useEffect, useRef } from "react";
-import { FocusRing, useFocusRing } from "@react-aria/focus";
+import { useFocusRing } from "@react-aria/focus";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
 import { cn, useClassNames, useStateProps } from "@marigold/system";
 
@@ -168,7 +168,7 @@ var AccordionItem = ({
   });
   const classNames2 = useClassNames({ component: "Accordion", variant, size });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", ...props, children: [
-    /* @__PURE__ */ jsx3(FocusRing, { within: true, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs(
       "button",
       {
         className: cn(
@@ -183,7 +183,7 @@ var AccordionItem = ({
           expanded ? /* @__PURE__ */ jsx3(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ jsx3(ChevronDown, { className: "h3 w-6" })
         ]
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx3(
       "div",
       {
@@ -309,8 +309,8 @@ var Aspect = ({
 import {
   forwardRef as forwardRef8
 } from "react";
-import React2 from "react";
-import { ComboBox, ComboBoxStateContext as ComboBoxStateContext2 } from "react-aria-components";
+import React from "react";
+import { ComboBox, ComboBoxStateContext } from "react-aria-components";
 
 // src/FieldBase/FieldBase.tsx
 import { forwardRef as forwardRef3 } from "react";
@@ -446,6 +446,12 @@ var _FieldBase = (props, ref) => {
 };
 var FieldBase = fixedForwardRef(_FieldBase);
 
+// src/Input/SearchInput.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Button } from "react-aria-components";
+import { useLocalizedStringFormatter } from "@react-aria/i18n";
+import { cn as cn8 } from "@marigold/system";
+
 // src/Input/Input.tsx
 import { cloneElement as cloneElement2, forwardRef as forwardRef4 } from "react";
 import { Input } from "react-aria-components";
@@ -459,20 +465,20 @@ var _Input = forwardRef4(
       size
     });
     const inputIcon = icon ? cloneElement2(icon, {
+      ...icon.props,
       className: cn7(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
-      ),
-      ...icon.props
+      )
     }) : null;
     const inputAction = action && !props.readOnly ? cloneElement2(action, {
+      ...action.props,
       className: cn7(
-        "absolute",
+        "absolute right-0",
         classNames2.action,
         action.props.className
-      ),
-      ...action.props
+      )
     }) : null;
     return /* @__PURE__ */ jsxs6(
       "div",
@@ -505,12 +511,78 @@ var _Input = forwardRef4(
   }
 );
 
+// src/Input/SearchInput.tsx
+import { jsx as jsx12 } from "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__ */ jsx12(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: 24,
+    height: 24,
+    ...props,
+    children: /* @__PURE__ */ jsx12("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+  }
+);
+var SearchInput = forwardRef5(
+  ({ className, onClear, ...props }, ref) => {
+    const stringFormatter = useLocalizedStringFormatter(intlMessages);
+    return /* @__PURE__ */ jsx12(
+      _Input,
+      {
+        type: "search",
+        className: cn8(
+          "[&::-webkit-search-cancel-button]:hidden",
+          className == null ? void 0 : className.input
+        ),
+        ref,
+        icon: /* @__PURE__ */ jsx12(SearchIcon, {}),
+        action: /* @__PURE__ */ jsx12(
+          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__ */ jsx12(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                width: 20,
+                height: 20,
+                children: /* @__PURE__ */ jsx12("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+              }
+            )
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+
 // src/ListBox/ListBox.tsx
 import {
-  forwardRef as forwardRef5
+  forwardRef as forwardRef6
 } from "react";
 import { ListBox } from "react-aria-components";
-import { cn as cn9, useClassNames as useClassNames6 } from "@marigold/system";
+import { cn as cn10, useClassNames as useClassNames6 } from "@marigold/system";
 
 // src/ListBox/Context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -519,41 +591,43 @@ var useListBoxContext = () => useContext2(ListBoxContext);
 
 // src/ListBox/ListBoxOption.tsx
 import { ListBoxItem } from "react-aria-components";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var _ListBoxItem = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ jsx12(ListBoxItem, { ...props, className: classNames2.option });
+  return /* @__PURE__ */ jsx13(ListBoxItem, { ...props, className: classNames2.option });
 };
 
 // src/ListBox/ListBoxSection.tsx
 import { Section } from "react-aria-components";
-import { cn as cn8 } from "@marigold/system";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { cn as cn9 } from "@marigold/system";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var _Section = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Section,
     {
       ...props,
-      className: cn8(classNames2.section, classNames2.sectionTitle)
+      className: cn9(classNames2.section, classNames2.sectionTitle)
     }
   );
 };
 
 // src/ListBox/ListBox.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var _ListBox = forwardRef5(
+import { jsx as jsx15 } from "react/jsx-runtime";
+var _ListBox = forwardRef6(
   ({ variant, size, ...props }, ref) => {
     const classNames2 = useClassNames6({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ jsx14(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx14("div", { className: classNames2.container, children: /* @__PURE__ */ jsx14(
+    const listBoxProps = { shouldSelectOnPressUp: false };
+    return /* @__PURE__ */ jsx15(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx15("div", { className: classNames2.container, children: /* @__PURE__ */ jsx15(
       ListBox,
       {
         ...props,
-        className: cn9(
+        className: cn10(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
         ref,
+        ...listBoxProps,
         children: props.children
       }
     ) }) });
@@ -563,9 +637,9 @@ _ListBox.Item = _ListBoxItem;
 _ListBox.Section = _Section;
 
 // src/Overlay/Popover.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 import { Popover } from "react-aria-components";
-import { cn as cn11, useClassNames as useClassNames8, useSmallScreen } from "@marigold/system";
+import { cn as cn12, useClassNames as useClassNames8, useSmallScreen } from "@marigold/system";
 
 // src/Provider/OverlayContainerProvider.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -581,32 +655,24 @@ var usePortalContainer = () => {
 
 // src/Overlay/Underlay.tsx
 import { ModalOverlay } from "react-aria-components";
-import { cn as cn10, useClassNames as useClassNames7 } from "@marigold/system";
+import { cn as cn11, useClassNames as useClassNames7 } from "@marigold/system";
 
 // src/Provider/index.ts
-import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigold/system";
+import { useTheme, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 import { I18nProvider } from "@react-aria/i18n";
 
 // src/Provider/MarigoldProvider.tsx
-import { OverlayProvider } from "@react-aria/overlays";
-import {
-  ThemeProvider,
-  defaultTheme,
-  useTheme
-} from "@marigold/system";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { ThemeProvider } from "@marigold/system";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
-  theme,
-  portalContainer
+  theme
 }) {
-  const outerTheme = useTheme();
-  const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx15(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx15(OverlayContainerProvider, { value: portalContainer, children: /* @__PURE__ */ jsx15(OverlayProvider, { children }) }) : children });
+  return /* @__PURE__ */ jsx16(ThemeProvider, { theme, children });
 }
 
 // src/Overlay/Underlay.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Underlay = ({
   size,
   variant,
@@ -623,10 +689,10 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => cn10(
+      className: ({ isEntering, isExiting }) => cn11(
         "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" : "",
@@ -641,8 +707,8 @@ var Underlay = ({
 };
 
 // src/Overlay/Popover.tsx
-import { Fragment, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
-var _Popover = forwardRef6(
+import { Fragment, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var _Popover = forwardRef7(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
       isKeyboardDismissDisabled: keyboardDismissDisabled,
@@ -658,21 +724,21 @@ var _Popover = forwardRef6(
     });
     const isSmallScreen = useSmallScreen();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ jsx17(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-      /* @__PURE__ */ jsx17(Underlay, { open, variant: "modal" }),
-      /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx18(Underlay, { open, variant: "modal" }),
+      /* @__PURE__ */ jsx18(
         Popover,
         {
           ref,
           ...props,
-          className: cn11(
+          className: cn12(
             "!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col"
           ),
           UNSTABLE_portalContainer: portal,
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx17(
+    ] }) : /* @__PURE__ */ jsx18(
       Popover,
       {
         ref,
@@ -686,87 +752,21 @@ var _Popover = forwardRef6(
   }
 );
 
-// src/Autocomplete/ClearButton.tsx
-import React from "react";
-import { ComboBoxStateContext } from "react-aria-components";
-import { cn as cn13 } from "@marigold/system";
-
-// src/Button/Button.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { Button } from "react-aria-components";
-import { cn as cn12, useClassNames as useClassNames9 } from "@marigold/system";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var _Button = forwardRef7(
-  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
-    const classNames2 = useClassNames9({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    return /* @__PURE__ */ jsx18(
-      Button,
-      {
-        ...props,
-        ref,
-        className: cn12(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0
-        ),
-        isDisabled: disabled,
-        children
-      }
-    );
-  }
-);
-
-// src/Autocomplete/ClearButton.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var AutocompleteClearButton = ({
-  className,
-  onClear
+// src/Autocomplete/Autocomplete.tsx
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+var AutocompleteInput = ({
+  onSubmit,
+  onClear,
+  ref
 }) => {
-  let state = React.useContext(ComboBoxStateContext);
+  const state = React.useContext(ComboBoxStateContext);
   return /* @__PURE__ */ jsx19(
-    _Button,
-    {
-      "aria-label": "Clear",
-      "data-testid": "clear-button",
-      onPress: () => {
-        state == null ? void 0 : state.setInputValue("");
-        onClear == null ? void 0 : onClear();
-      },
-      variant: "icon",
-      className: cn13(
-        "cursor-pointer appearance-none border-none p-0 pr-1",
-        className
-      ),
-      children: /* @__PURE__ */ jsx19(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 20 20",
-          fill: "currentColor",
-          width: 20,
-          height: 20,
-          children: /* @__PURE__ */ jsx19("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
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
-var SearchInput = ({ onSubmit, onClear, ref }) => {
-  const state = React2.useContext(ComboBoxStateContext2);
-  return /* @__PURE__ */ jsx20(
-    _Input,
+    SearchInput,
     {
       ref,
-      icon: /* @__PURE__ */ jsx20(SearchIcon, {}),
-      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ jsx20(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();
@@ -776,22 +776,15 @@ 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__ */ jsx20(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    width: 24,
-    height: 24,
-    ...props,
-    children: /* @__PURE__ */ jsx20("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 = forwardRef8(
   ({
     children,
@@ -818,19 +811,52 @@ var _Autocomplete = forwardRef8(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx20(Fragment2, { children: /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ...props, children: [
-      /* @__PURE__ */ jsx20(SearchInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ jsx20(_Popover, { children: /* @__PURE__ */ jsx20(_ListBox, { children }) })
-    ] }) });
+    return /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ...props, children: [
+      /* @__PURE__ */ jsx19(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ jsx19(_Popover, { children: /* @__PURE__ */ jsx19(_ListBox, { children }) })
+    ] });
   }
 );
 _Autocomplete.Item = _ListBox.Item;
 
 // src/ComboBox/ComboBox.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import { ComboBox as ComboBox2 } from "react-aria-components";
+import { useClassNames as useClassNames10 } from "@marigold/system";
+
+// src/Button/Button.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { Button as Button2 } from "react-aria-components";
+import { cn as cn13, useClassNames as useClassNames9 } from "@marigold/system";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var _Button = forwardRef9(
+  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
+    const classNames2 = useClassNames9({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    return /* @__PURE__ */ jsx20(
+      Button2,
+      {
+        ...props,
+        ref,
+        className: cn13(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0
+        ),
+        isDisabled: disabled,
+        children
+      }
+    );
+  }
+);
+
+// src/ComboBox/ComboBox.tsx
 import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
-var _ComboBox = forwardRef9(
+var _ComboBox = forwardRef10(
   ({
     variant,
     size,
@@ -854,11 +880,13 @@ var _ComboBox = forwardRef9(
       onInputChange: onChange,
       ...rest
     };
+    const classNames2 = useClassNames10({ component: "ComboBox", variant, size });
+    console.log(classNames2);
     return /* @__PURE__ */ jsxs9(FieldBase, { as: ComboBox2, ref, ...props, children: [
       /* @__PURE__ */ jsx21(
         _Input,
         {
-          action: /* @__PURE__ */ jsx21(_Button, { className: "absolute right-2 size-4 border-none bg-transparent p-0", children: /* @__PURE__ */ jsx21(ChevronDown, { className: "size-4" }) })
+          action: /* @__PURE__ */ jsx21(_Button, { className: classNames2, children: /* @__PURE__ */ jsx21(ChevronDown, { className: "size-4" }) })
         }
       ),
       /* @__PURE__ */ jsx21(_Popover, { children: /* @__PURE__ */ jsx21(_ListBox, { children }) })
@@ -868,10 +896,10 @@ var _ComboBox = forwardRef9(
 _ComboBox.Item = _ListBox.Item;
 
 // src/Badge/Badge.tsx
-import { useClassNames as useClassNames10 } from "@marigold/system";
+import { useClassNames as useClassNames11 } from "@marigold/system";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = useClassNames10({ component: "Badge", variant, size });
+  const classNames2 = useClassNames11({ component: "Badge", variant, size });
   return /* @__PURE__ */ jsx22("div", { ...props, className: classNames2, children });
 };
 
@@ -905,10 +933,10 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import { useClassNames as useClassNames11 } from "@marigold/system";
+import { useClassNames as useClassNames12 } from "@marigold/system";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames11({ component: "Body", variant, size });
+  const classNames2 = useClassNames12({ component: "Body", variant, size });
   return /* @__PURE__ */ jsx24("section", { ...props, className: classNames2, children });
 };
 
@@ -923,7 +951,7 @@ import {
   paddingSpaceX,
   paddingSpaceY,
   paddingTop,
-  useClassNames as useClassNames12
+  useClassNames as useClassNames13
 } from "@marigold/system";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var Card = ({
@@ -940,7 +968,7 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = useClassNames12({ component: "Card", variant, size });
+  const classNames2 = useClassNames13({ component: "Card", variant, size });
   return /* @__PURE__ */ jsx25(
     "div",
     {
@@ -987,10 +1015,10 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn17, useClassNames as useClassNames13 } from "@marigold/system";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+import { cn as cn17, useClassNames as useClassNames14 } from "@marigold/system";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var CheckMark = () => /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx27(
   "path",
   {
@@ -1024,7 +1052,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     }
   );
 };
-var _Checkbox = forwardRef10(
+var _Checkbox = forwardRef11(
   ({
     className,
     indeterminate,
@@ -1049,7 +1077,7 @@ var _Checkbox = forwardRef10(
       defaultSelected: defaultChecked,
       ...rest
     };
-    const classNames2 = useClassNames13({ component: "Checkbox", variant, size });
+    const classNames2 = useClassNames14({ component: "Checkbox", variant, size });
     return /* @__PURE__ */ jsx27(
       Checkbox,
       {
@@ -1060,7 +1088,7 @@ var _Checkbox = forwardRef10(
           classNames2.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
           /* @__PURE__ */ jsx27(
             Icon2,
             {
@@ -1078,7 +1106,7 @@ var _Checkbox = forwardRef10(
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
-import { useClassNames as useClassNames14 } from "@marigold/system";
+import { useClassNames as useClassNames15 } from "@marigold/system";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
@@ -1090,7 +1118,7 @@ var _CheckboxGroup = ({
   error,
   ...rest
 }) => {
-  const classNames2 = useClassNames14({
+  const classNames2 = useClassNames15({
     component: "Checkbox",
     variant,
     size,
@@ -1196,7 +1224,7 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 import { useContext as useContext4 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn21, useClassNames as useClassNames16 } from "@marigold/system";
+import { cn as cn21, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
@@ -1205,8 +1233,8 @@ import {
   createVar as createVar8,
   getColor,
   textAlign,
-  useClassNames as useClassNames15,
-  useTheme as useTheme3
+  useClassNames as useClassNames16,
+  useTheme as useTheme2
 } from "@marigold/system";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var _Headline = ({
@@ -1218,8 +1246,8 @@ var _Headline = ({
   level = 1,
   ...props
 }) => {
-  const theme = useTheme3();
-  const classNames2 = useClassNames15({
+  const theme = useTheme2();
+  const classNames2 = useClassNames16({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
@@ -1248,10 +1276,10 @@ import { Children as Children4 } from "react";
 import { DialogTrigger } from "react-aria-components";
 
 // src/Overlay/Modal.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { Modal } from "react-aria-components";
 import { jsx as jsx32 } from "react/jsx-runtime";
-var _Modal = forwardRef11(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var _Modal = forwardRef12(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -1303,7 +1331,7 @@ var _DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs12 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
   const { close } = useContext4(OverlayTriggerStateContext);
   return /* @__PURE__ */ jsx34("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx34(
@@ -1333,7 +1361,7 @@ var _Dialog = ({
   isNonModal,
   ...props
 }) => {
-  const classNames2 = useClassNames16({ component: "Dialog", variant, size });
+  const classNames2 = useClassNames17({ component: "Dialog", variant, size });
   let state = useContext4(OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
@@ -1347,7 +1375,7 @@ var _Dialog = ({
     {
       ...props,
       className: cn21("relative outline-none", classNames2.container),
-      children: /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      children: /* @__PURE__ */ jsxs12(Fragment3, { children: [
         closeButton && /* @__PURE__ */ jsx34(CloseButton, { className: classNames2.closeButton }),
         children
       ] })
@@ -1359,18 +1387,18 @@ _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { useClassNames as useClassNames17 } from "@marigold/system";
+import { useClassNames as useClassNames18 } from "@marigold/system";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = useClassNames17({ component: "Divider", variant });
+  const classNames2 = useClassNames18({ component: "Divider", variant });
   return /* @__PURE__ */ jsx35(Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames18 } from "@marigold/system";
+import { useClassNames as useClassNames19 } from "@marigold/system";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames18({ component: "Footer", variant, size });
+  const classNames2 = useClassNames19({ component: "Footer", variant, size });
   return /* @__PURE__ */ jsx36("footer", { ...props, className: classNames2, children });
 };
 
@@ -1379,10 +1407,10 @@ import { Form } from "react-aria-components";
 
 // src/Header/Header.tsx
 import { Header } from "react-aria-components";
-import { useClassNames as useClassNames19 } from "@marigold/system";
+import { useClassNames as useClassNames20 } from "@marigold/system";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = useClassNames19({
+  const classNames2 = useClassNames20({
     component: "Header",
     variant,
     size
@@ -1395,7 +1423,7 @@ import {
   cn as cn22,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames20
+  useClassNames as useClassNames21
 } from "@marigold/system";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var Image = ({
@@ -1405,7 +1433,7 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames20({ component: "Image", variant, size });
+  const classNames2 = useClassNames21({ component: "Image", variant, size });
   return /* @__PURE__ */ jsx38(
     "img",
     {
@@ -1453,17 +1481,17 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
 import { DateInput, Group } from "react-aria-components";
-import { useClassNames as useClassNames21 } from "@marigold/system";
+import { useClassNames as useClassNames22 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
 import { cn as cn24 } from "@marigold/system";
-import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
   return /* @__PURE__ */ jsx40(
     DateSegment,
@@ -1473,7 +1501,7 @@ var _DateSegment = ({ segment, ...props }) => {
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs13(Fragment5, { children: [
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
         /* @__PURE__ */ jsx40(
           "span",
           {
@@ -1494,7 +1522,7 @@ var _DateSegment = ({ segment, ...props }) => {
 // src/DateField/DateInput.tsx
 import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size, action, ...props }) => {
-  const classNames2 = useClassNames21({ component: "DateField", variant, size });
+  const classNames2 = useClassNames22({ component: "DateField", variant, size });
   return /* @__PURE__ */ jsxs14(Group, { className: classNames2.field, children: [
     /* @__PURE__ */ jsx41(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx41(_DateSegment, { className: classNames2.segment, segment }) }),
     action ? action : /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx41(
@@ -1513,7 +1541,7 @@ var _DateInput = ({ variant, size, action, ...props }) => {
 
 // src/DateField/DateField.tsx
 import { jsx as jsx42 } from "react/jsx-runtime";
-var _DateField = forwardRef12(
+var _DateField = forwardRef13(
   ({
     variant,
     size,
@@ -1548,7 +1576,7 @@ var _DateField = forwardRef12(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames27 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -1556,7 +1584,7 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
+import { cn as cn25, useClassNames as useClassNames24 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
@@ -1564,7 +1592,7 @@ import { useContext as useContext5, useMemo } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
-import { useClassNames as useClassNames22 } from "@marigold/system";
+import { useClassNames as useClassNames23 } from "@marigold/system";
 import { jsx as jsx43 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
   const state = useContext5(CalendarStateContext);
@@ -1582,14 +1610,14 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames2 = useClassNames22({ component: "Calendar" });
+  const classNames2 = useClassNames23({ component: "Calendar" });
   return /* @__PURE__ */ jsx43("thead", { ...headerProps, children: /* @__PURE__ */ jsx43("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx43("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
 import { jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
-  const classNames2 = useClassNames23({ component: "Calendar" });
+  const classNames2 = useClassNames24({ component: "Calendar" });
   return /* @__PURE__ */ jsxs15(CalendarGrid, { className: classNames2.calendarGrid, children: [
     /* @__PURE__ */ jsx44(CalendarGridHeader, {}),
     /* @__PURE__ */ jsx44(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx44(
@@ -1609,7 +1637,7 @@ var _CalendarGrid = () => {
 import { useContext as useContext6 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
-import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames25 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -1637,7 +1665,7 @@ function CalendarListBox({
   const state = useContext6(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = useClassNames24({ component: "Select" });
+  const { select: selectClassNames } = useClassNames25({ component: "Select" });
   return /* @__PURE__ */ jsxs16(
     "button",
     {
@@ -1654,13 +1682,13 @@ function CalendarListBox({
 }
 
 // src/Calendar/MonthControls.tsx
-import { Button as Button2 } from "react-aria-components";
+import { Button as Button3 } from "react-aria-components";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames26 } from "@marigold/system";
 import { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames2 = useClassNames25({ component: "Calendar" });
-  const buttonClassNames = useClassNames25({ component: "Button" });
+  const classNames2 = useClassNames26({ component: "Calendar" });
+  const buttonClassNames = useClassNames26({ component: "Button" });
   return /* @__PURE__ */ jsxs17(
     "div",
     {
@@ -1670,7 +1698,7 @@ function MonthControls() {
       ),
       children: [
         /* @__PURE__ */ jsx46(
-          Button2,
+          Button3,
           {
             className: cn27(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1681,7 +1709,7 @@ function MonthControls() {
           }
         ),
         /* @__PURE__ */ jsx46(
-          Button2,
+          Button3,
           {
             className: cn27(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1810,7 +1838,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -1823,7 +1851,7 @@ var _Calendar = ({
     isReadOnly: readOnly,
     ...rest
   };
-  const classNames2 = useClassNames26({ component: "Calendar" });
+  const classNames2 = useClassNames27({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
     month: /* @__PURE__ */ jsx49(MonthListBox_default, { setSelectedDropdown }),
@@ -1837,7 +1865,7 @@ var _Calendar = ({
         classNames2.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs18(Fragment5, { children: [
         /* @__PURE__ */ jsxs18("div", { className: "mb-4 flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs18("div", { className: "flex w-full gap-4", children: [
             /* @__PURE__ */ jsx49(
@@ -1867,7 +1895,7 @@ var _Calendar = ({
 
 // src/DatePicker/DatePicker.tsx
 import { DatePicker } from "react-aria-components";
-import { useClassNames as useClassNames27 } from "@marigold/system";
+import { useClassNames as useClassNames28 } from "@marigold/system";
 import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
 var _DatePicker = ({
   disabled,
@@ -1887,7 +1915,7 @@ var _DatePicker = ({
     isOpen: open,
     ...rest
   };
-  const classNames2 = useClassNames27({
+  const classNames2 = useClassNames28({
     component: "DatePicker",
     size,
     variant
@@ -1942,13 +1970,13 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx51(
 );
 
 // src/Link/Link.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames28 } from "@marigold/system";
+import { useClassNames as useClassNames29 } from "@marigold/system";
 import { jsx as jsx52 } from "react/jsx-runtime";
-var _Link = forwardRef13(
+var _Link = forwardRef14(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = useClassNames28({
+    const classNames2 = useClassNames29({
       component: "Link",
       variant,
       size
@@ -1958,7 +1986,7 @@ var _Link = forwardRef13(
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames29 } from "@marigold/system";
+import { useClassNames as useClassNames30 } from "@marigold/system";
 
 // src/List/Context.ts
 import { createContext as createContext4, useContext as useContext9 } from "react";
@@ -1982,30 +2010,30 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames29({ component: "List", variant, size });
+  const classNames2 = useClassNames30({ component: "List", variant, size });
   return /* @__PURE__ */ jsx54(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx54(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import { Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames32 } from "@marigold/system";
+import { useClassNames as useClassNames33 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames30 } from "@marigold/system";
+import { useClassNames as useClassNames31 } from "@marigold/system";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames2 = useClassNames30({ component: "Menu" });
+  const classNames2 = useClassNames31({ component: "Menu" });
   return /* @__PURE__ */ jsx55(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { Section as Section2 } from "react-aria-components";
-import { useClassNames as useClassNames31 } from "@marigold/system";
+import { useClassNames as useClassNames32 } from "@marigold/system";
 import { jsx as jsx56, jsxs as jsxs20 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames31({ component: "Menu" });
+  const className = useClassNames32({ component: "Menu" });
   return /* @__PURE__ */ jsxs20(Section2, { ...props, children: [
     /* @__PURE__ */ jsx56(_Header, { className: className.section, children: title }),
     children
@@ -2023,7 +2051,7 @@ var _Menu = ({
   open,
   ...props
 }) => {
-  const classNames2 = useClassNames32({ component: "Menu", variant, size });
+  const classNames2 = useClassNames33({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs21(MenuTrigger, { ...props, children: [
     /* @__PURE__ */ jsx57(_Button, { variant: "menu", disabled, children: label }),
     /* @__PURE__ */ jsx57(_Popover, { open, children: /* @__PURE__ */ jsx57(Menu, { ...props, className: classNames2.container, children }) })
@@ -2034,7 +2062,7 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG4, useClassNames as useClassNames33 } from "@marigold/system";
+import { SVG as SVG4, useClassNames as useClassNames34 } from "@marigold/system";
 import { jsx as jsx58, jsxs as jsxs22 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
@@ -2042,7 +2070,7 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames2 = useClassNames33({ component: "Menu", variant, size });
+  const classNames2 = useClassNames34({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs22(MenuTrigger2, { children: [
     /* @__PURE__ */ jsx58(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx58(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("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__ */ jsx58(_Popover, { children: /* @__PURE__ */ jsx58(Menu2, { ...props, className: classNames2.container, children: props.children }) })
@@ -2050,7 +2078,8 @@ var ActionMenu = ({
 };
 
 // src/Message/Message.tsx
-import { cn as cn30, useClassNames as useClassNames34 } from "@marigold/system";
+import { forwardRef as forwardRef15 } from "react";
+import { cn as cn30, useClassNames as useClassNames35 } from "@marigold/system";
 import { jsx as jsx59, jsxs as jsxs23 } from "react/jsx-runtime";
 var icons = {
   success: () => /* @__PURE__ */ jsx59(
@@ -2118,45 +2147,45 @@ var icons = {
     }
   )
 };
-var Message = ({
-  messageTitle,
-  variant = "info",
-  size,
-  children,
-  ...props
-}) => {
-  const classNames2 = useClassNames34({ component: "Message", variant, size });
-  const Icon4 = icons[variant];
-  return /* @__PURE__ */ jsxs23(
-    "div",
-    {
-      className: cn30(
-        "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
-        classNames2.container
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx59("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx59(Icon4, {}) }),
-        /* @__PURE__ */ jsx59(
-          "div",
-          {
-            className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
-            children: messageTitle
-          }
+var Message = forwardRef15(
+  ({ messageTitle, variant = "info", size, children, ...props }, ref) => {
+    const classNames2 = useClassNames35({ component: "Message", variant, size });
+    const Icon4 = icons[variant];
+    return /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        className: cn30(
+          "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
+          classNames2.container
         ),
-        /* @__PURE__ */ jsx59("div", { className: cn30("col-start-2", classNames2.content), children })
-      ]
-    }
-  );
-};
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx59("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx59(Icon4, {}) }),
+          /* @__PURE__ */ jsx59(
+            "div",
+            {
+              className: cn30(
+                "col-start-2 row-start-1 self-center",
+                classNames2.title
+              ),
+              children: messageTitle
+            }
+          ),
+          /* @__PURE__ */ jsx59("div", { className: cn30("col-start-2", classNames2.content), children })
+        ]
+      }
+    );
+  }
+);
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn32, useClassNames as useClassNames35 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames36 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import { Button as Button3 } from "react-aria-components";
+import { Button as Button4 } from "react-aria-components";
 import { cn as cn31 } from "@marigold/system";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var Plus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx60(
@@ -2178,7 +2207,7 @@ var Minus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox:
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
   return /* @__PURE__ */ jsx60(
-    Button3,
+    Button4,
     {
       className: cn31(
         [
@@ -2195,7 +2224,7 @@ var _StepButton = ({ direction, className, ...props }) => {
 
 // src/NumberField/NumberField.tsx
 import { jsx as jsx61, jsxs as jsxs24 } from "react/jsx-runtime";
-var _NumberField = forwardRef14(
+var _NumberField = forwardRef16(
   ({
     variant,
     size,
@@ -2206,7 +2235,7 @@ var _NumberField = forwardRef14(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames35({
+    const classNames2 = useClassNames36({
       component: "NumberField",
       size,
       variant
@@ -2251,10 +2280,10 @@ var _NumberField = forwardRef14(
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef15
+  forwardRef as forwardRef17
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames37 } from "@marigold/system";
+import { cn as cn34, useClassNames as useClassNames38 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext5, useContext as useContext10 } from "react";
@@ -2265,7 +2294,7 @@ var useRadioGroupContext = () => useContext10(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn33, useClassNames as useClassNames37 } from "@marigold/system";
 import { jsx as jsx62 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -2282,7 +2311,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames36({ component: "Radio", variant, size });
+  const classNames2 = useClassNames37({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2320,7 +2349,7 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment7, jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
 var Dot = () => /* @__PURE__ */ jsx63("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx63("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx63(
   "div",
@@ -2334,10 +2363,10 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx63(
     children: checked ? /* @__PURE__ */ jsx63(Dot, {}) : null
   }
 );
-var _Radio = forwardRef15(
+var _Radio = forwardRef17(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames37({
+    const classNames2 = useClassNames38({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
@@ -2355,7 +2384,7 @@ var _Radio = forwardRef15(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
           /* @__PURE__ */ jsx63(
             Icon3,
             {
@@ -2375,22 +2404,10 @@ var _Radio = forwardRef15(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import { SearchField } from "react-aria-components";
 import { jsx as jsx64 } from "react/jsx-runtime";
-var SearchIcon2 = (props) => /* @__PURE__ */ jsx64(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    width: 24,
-    height: 24,
-    ...props,
-    children: /* @__PURE__ */ jsx64("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 = forwardRef16(
+var _SearchField = forwardRef18(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2399,20 +2416,26 @@ var _SearchField = forwardRef16(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx64(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx64(_Input, { ref, icon: /* @__PURE__ */ jsx64(SearchIcon2, {}) }) });
+    return /* @__PURE__ */ jsx64(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx64(
+      SearchInput,
+      {
+        ref,
+        className: { action: "group-data-[empty=true]/field:hidden" }
+      }
+    ) });
   }
 );
 
 // src/Select/Select.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import {
-  Button as Button4,
+  Button as Button5,
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn35, useClassNames as useClassNames39 } from "@marigold/system";
 import { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
-var _Select = forwardRef17(
+var _Select = forwardRef19(
   ({
     disabled,
     required,
@@ -2432,10 +2455,10 @@ var _Select = forwardRef17(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = useClassNames38({ component: "Select", variant, size });
+    const classNames2 = useClassNames39({ component: "Select", variant, size });
     return /* @__PURE__ */ jsxs26(FieldBase, { isOpen: true, as: Select, ref, ...props, children: [
       /* @__PURE__ */ jsxs26(
-        Button4,
+        Button5,
         {
           className: cn35(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
@@ -2473,7 +2496,7 @@ var Scrollable = ({
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -2483,10 +2506,10 @@ import {
 import {
   cn as cn37,
   width as twWidth3,
-  useClassNames as useClassNames39
+  useClassNames as useClassNames40
 } from "@marigold/system";
 import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
-var _Slider = forwardRef18(
+var _Slider = forwardRef20(
   ({
     thumbLabels,
     variant,
@@ -2495,7 +2518,7 @@ var _Slider = forwardRef18(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames39({
+    const classNames2 = useClassNames40({
       component: "Slider",
       variant,
       size
@@ -2576,15 +2599,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { Switch } from "react-aria-components";
 import {
   cn as cn39,
   width as twWidth4,
-  useClassNames as useClassNames40
+  useClassNames as useClassNames41
 } from "@marigold/system";
 import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
-var _Switch = forwardRef19(
+var _Switch = forwardRef21(
   ({
     variant,
     size,
@@ -2595,7 +2618,7 @@ var _Switch = forwardRef19(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames40({ component: "Switch", size, variant });
+    const classNames2 = useClassNames41({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -2654,7 +2677,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn45, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn45, useClassNames as useClassNames43 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext6, useContext as useContext11 } from "react";
@@ -2848,13 +2871,13 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn43, useClassNames as useClassNames41, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn43, useClassNames as useClassNames42, useStateProps as useStateProps5 } from "@marigold/system";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames41({
+  const classNames2 = useClassNames42({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -2964,7 +2987,7 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames42({
+  const classNames2 = useClassNames43({
     component: "Table",
     variant,
     size
@@ -3046,8 +3069,8 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames43,
-  useTheme as useTheme4
+  useClassNames as useClassNames44,
+  useTheme as useTheme3
 } from "@marigold/system";
 import { jsx as jsx80 } from "react/jsx-runtime";
 var Text2 = ({
@@ -3062,8 +3085,8 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = useTheme4();
-  const classNames2 = useClassNames43({
+  const theme = useTheme3();
+  const classNames2 = useClassNames44({
     component: "Text",
     variant,
     size
@@ -3095,11 +3118,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames44 } from "@marigold/system";
+import { useClassNames as useClassNames45 } from "@marigold/system";
 import { jsx as jsx81 } from "react/jsx-runtime";
-var _TextArea = forwardRef20(
+var _TextArea = forwardRef22(
   ({
     variant,
     size,
@@ -3110,7 +3133,7 @@ var _TextArea = forwardRef20(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames44({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames45({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3123,10 +3146,10 @@ var _TextArea = forwardRef20(
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
 import { jsx as jsx82 } from "react/jsx-runtime";
-var _TextField = forwardRef21(
+var _TextField = forwardRef23(
   ({
     variant,
     size,
@@ -3180,7 +3203,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn48, useClassNames as useClassNames45 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames46 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -3208,7 +3231,7 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames45({ component: "Tooltip", variant, size });
+  const classNames2 = useClassNames46({ component: "Tooltip", variant, size });
   return /* @__PURE__ */ jsxs31(Tooltip, { ...props, className: cn48("group/tooltip", classNames2.container), children: [
     /* @__PURE__ */ jsx85(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx85("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx85("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
@@ -3217,34 +3240,43 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-import { Button as Button5, Tag } from "react-aria-components";
-import { cn as cn49, useClassNames as useClassNames47 } from "@marigold/system";
+import { Button as Button6, Tag } from "react-aria-components";
+import { cn as cn49, useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames46 } from "@marigold/system";
+import { useClassNames as useClassNames47 } from "@marigold/system";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
   children,
+  renderEmptyState,
   variant,
   size,
   ...rest
 }) => {
-  const classNames2 = useClassNames46({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx86(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx86(TagList, { items, className: classNames2.listItems, children }) });
+  const classNames2 = useClassNames47({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx86(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx86(
+    TagList,
+    {
+      items,
+      className: classNames2.listItems,
+      renderEmptyState,
+      children
+    }
+  ) });
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment8, jsx as jsx87, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx87, jsxs as jsxs32 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx87(Button5, { slot: "remove", className, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ jsx87(Button6, { slot: "remove", className, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = useClassNames47({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx87(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs32(Fragment8, { children: [
+  const classNames2 = useClassNames48({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx87(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs32(Fragment7, { children: [
     children,
     allowsRemoving && /* @__PURE__ */ jsx87(
       CloseButton2,
@@ -3260,10 +3292,10 @@ _Tag.Group = _TagGroup;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
 import { jsx as jsx88, jsxs as jsxs33 } from "react/jsx-runtime";
-var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
+var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs33(
   SVG5,
   {
     id: "XLoader",
@@ -3478,7 +3510,7 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames48 } from "@marigold/system";
+import { useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext7, useContext as useContext12 } from "react";
@@ -3535,7 +3567,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames48({
+  const classNames2 = useClassNames49({
     component: "Tabs",
     size,
     variant
@@ -3617,5 +3649,5 @@ export {
   useFieldGroupContext,
   useListData,
   usePortalContainer,
-  useTheme2 as useTheme
+  useTheme
 };