@marigold/components 7.3.1 → 7.3.3

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,37 +591,37 @@ 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(
+    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
         ),
@@ -563,9 +635,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,7 +653,7 @@ 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";
@@ -594,19 +666,18 @@ import {
   defaultTheme,
   useTheme
 } from "@marigold/system";
-import { jsx as jsx15 } from "react/jsx-runtime";
+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: isTopLevel ? /* @__PURE__ */ jsx16(OverlayProvider, { children }) : 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 +694,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 +712,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 +729,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 +757,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 +781,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 +816,51 @@ 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";
+
+// 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,
@@ -987,10 +1017,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 { 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 +1054,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     }
   );
 };
-var _Checkbox = forwardRef10(
+var _Checkbox = forwardRef11(
   ({
     className,
     indeterminate,
@@ -1060,7 +1090,7 @@ var _Checkbox = forwardRef10(
           classNames2.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
           /* @__PURE__ */ jsx27(
             Icon2,
             {
@@ -1248,10 +1278,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 +1333,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(
@@ -1347,7 +1377,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
       ] })
@@ -1453,7 +1483,7 @@ 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
@@ -1463,7 +1493,7 @@ import { useClassNames as useClassNames21 } 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 +1503,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",
           {
@@ -1513,7 +1543,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,
@@ -1654,7 +1684,7 @@ 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 { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -1670,7 +1700,7 @@ function MonthControls() {
       ),
       children: [
         /* @__PURE__ */ jsx46(
-          Button2,
+          Button3,
           {
             className: cn27(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1681,7 +1711,7 @@ function MonthControls() {
           }
         ),
         /* @__PURE__ */ jsx46(
-          Button2,
+          Button3,
           {
             className: cn27(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1810,7 +1840,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,
@@ -1837,7 +1867,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(
@@ -1942,11 +1972,11 @@ 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 { jsx as jsx52 } from "react/jsx-runtime";
-var _Link = forwardRef13(
+var _Link = forwardRef14(
   ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = useClassNames28({
       component: "Link",
@@ -2151,12 +2181,12 @@ var Message = ({
 };
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
 import { cn as cn32, useClassNames as useClassNames35 } 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 +2208,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 +2225,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 = forwardRef15(
   ({
     variant,
     size,
@@ -2251,7 +2281,7 @@ var _NumberField = forwardRef14(
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef15
+  forwardRef as forwardRef16
 } from "react";
 import { Radio } from "react-aria-components";
 import { cn as cn34, useClassNames as useClassNames37 } from "@marigold/system";
@@ -2320,7 +2350,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,7 +2364,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx63(
     children: checked ? /* @__PURE__ */ jsx63(Dot, {}) : null
   }
 );
-var _Radio = forwardRef15(
+var _Radio = forwardRef16(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
     const classNames2 = useClassNames37({
@@ -2355,7 +2385,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 +2405,10 @@ var _Radio = forwardRef15(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } 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 = forwardRef17(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2399,20 +2417,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 forwardRef18 } 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 { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
-var _Select = forwardRef17(
+var _Select = forwardRef18(
   ({
     disabled,
     required,
@@ -2435,7 +2459,7 @@ var _Select = forwardRef17(
     const classNames2 = useClassNames38({ 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 +2497,7 @@ var Scrollable = ({
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -2486,7 +2510,7 @@ import {
   useClassNames as useClassNames39
 } from "@marigold/system";
 import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
-var _Slider = forwardRef18(
+var _Slider = forwardRef19(
   ({
     thumbLabels,
     variant,
@@ -2576,7 +2600,7 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { Switch } from "react-aria-components";
 import {
   cn as cn39,
@@ -2584,7 +2608,7 @@ import {
   useClassNames as useClassNames40
 } from "@marigold/system";
 import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
-var _Switch = forwardRef19(
+var _Switch = forwardRef20(
   ({
     variant,
     size,
@@ -3095,11 +3119,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { TextArea, TextField } from "react-aria-components";
 import { useClassNames as useClassNames44 } from "@marigold/system";
 import { jsx as jsx81 } from "react/jsx-runtime";
-var _TextArea = forwardRef20(
+var _TextArea = forwardRef21(
   ({
     variant,
     size,
@@ -3123,10 +3147,10 @@ var _TextArea = forwardRef20(
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
 import { jsx as jsx82 } from "react/jsx-runtime";
-var _TextField = forwardRef21(
+var _TextField = forwardRef22(
   ({
     variant,
     size,
@@ -3217,7 +3241,7 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-import { Button as Button5, Tag } from "react-aria-components";
+import { Button as Button6, Tag } from "react-aria-components";
 import { cn as cn49, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
@@ -3237,14 +3261,14 @@ var _TagGroup = ({
 };
 
 // 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: [
+  return /* @__PURE__ */ jsx87(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs32(Fragment7, { children: [
     children,
     allowsRemoving && /* @__PURE__ */ jsx87(
       CloseButton2,
@@ -3260,10 +3284,10 @@ _Tag.Group = _TagGroup;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef23 } 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 = forwardRef23((props, ref) => /* @__PURE__ */ jsxs33(
   SVG5,
   {
     id: "XLoader",