@marigold/components 7.3.1 → 7.3.3

package/dist/index.d.mts

@@ -480,9 +480,8 @@ interface UnderlayProps extends Omit<RAC.ModalOverlayProps, 'isOpen' | 'isDismis
 declare const Underlay: ({ size, variant, open, dismissable, keyboardDismissable, ...rest }: UnderlayProps) => react_jsx_runtime.JSX.Element;
 
 interface MarigoldProviderProps<T extends Theme> extends ThemeProviderProps<T> {
-    portalContainer?: string;
 }
-declare function MarigoldProvider<T extends Theme>({ children, theme, portalContainer, }: MarigoldProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function MarigoldProvider<T extends Theme>({ children, theme, }: MarigoldProviderProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const OverlayContainerProvider: react.Provider<string | undefined>;
 declare const usePortalContainer: () => HTMLElement | null;
@@ -646,6 +645,7 @@ interface TextAreaProps extends Omit<RAC.TextFieldProps, RemovedProps$4>, Pick<R
     readOnly?: RAC.TextFieldProps['isReadOnly'];
     value?: string;
     defaultValue?: string;
+    placeholder?: string;
 }
 declare const _TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/index.d.ts

@@ -480,9 +480,8 @@ interface UnderlayProps extends Omit<RAC.ModalOverlayProps, 'isOpen' | 'isDismis
 declare const Underlay: ({ size, variant, open, dismissable, keyboardDismissable, ...rest }: UnderlayProps) => react_jsx_runtime.JSX.Element;
 
 interface MarigoldProviderProps<T extends Theme> extends ThemeProviderProps<T> {
-    portalContainer?: string;
 }
-declare function MarigoldProvider<T extends Theme>({ children, theme, portalContainer, }: MarigoldProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function MarigoldProvider<T extends Theme>({ children, theme, }: MarigoldProviderProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const OverlayContainerProvider: react.Provider<string | undefined>;
 declare const usePortalContainer: () => HTMLElement | null;
@@ -646,6 +645,7 @@ interface TextAreaProps extends Omit<RAC.TextFieldProps, RemovedProps$4>, Pick<R
     readOnly?: RAC.TextFieldProps['isReadOnly'];
     value?: string;
     defaultValue?: string;
+    placeholder?: string;
 }
 declare const _TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/index.js

@@ -60,7 +60,7 @@ __export(src_exports, {
   Form: () => import_react_aria_components20.Form,
   Header: () => _Header,
   Headline: () => _Headline,
-  I18nProvider: () => import_i18n.I18nProvider,
+  I18nProvider: () => import_i18n2.I18nProvider,
   Image: () => Image,
   Inline: () => Inline,
   Input: () => _Input,
@@ -90,7 +90,7 @@ __export(src_exports, {
   Text: () => Text2,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
-  ThemeProvider: () => import_system13.ThemeProvider,
+  ThemeProvider: () => import_system14.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => _Tooltip,
   Underlay: () => Underlay,
@@ -101,7 +101,7 @@ __export(src_exports, {
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
   usePortalContainer: () => usePortalContainer,
-  useTheme: () => import_system13.useTheme
+  useTheme: () => import_system14.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -270,7 +270,7 @@ var AccordionItem = ({
   });
   const classNames2 = (0, import_system3.useClassNames)({ component: "Accordion", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_focus.FocusRing, { within: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         className: (0, import_system3.cn)(
@@ -285,7 +285,7 @@ var AccordionItem = ({
           expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown, { className: "h3 w-6" })
         ]
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
@@ -408,9 +408,9 @@ var Aspect = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react15 = require("react");
-var import_react16 = __toESM(require("react"));
-var import_react_aria_components11 = require("react-aria-components");
+var import_react14 = require("react");
+var import_react15 = __toESM(require("react"));
+var import_react_aria_components10 = require("react-aria-components");
 
 // src/FieldBase/FieldBase.tsx
 var import_react7 = require("react");
@@ -546,6 +546,12 @@ var _FieldBase = (props, ref) => {
 };
 var FieldBase = fixedForwardRef(_FieldBase);
 
+// src/Input/SearchInput.tsx
+var import_react9 = require("react");
+var import_react_aria_components4 = require("react-aria-components");
+var import_i18n = require("@react-aria/i18n");
+var import_system10 = require("@marigold/system");
+
 // src/Input/Input.tsx
 var import_react8 = require("react");
 var import_react_aria_components3 = require("react-aria-components");
@@ -559,20 +565,20 @@ var _Input = (0, import_react8.forwardRef)(
       size
     });
     const inputIcon = icon ? (0, import_react8.cloneElement)(icon, {
+      ...icon.props,
       className: (0, import_system9.cn)(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
-      ),
-      ...icon.props
+      )
     }) : null;
     const inputAction = action && !props.readOnly ? (0, import_react8.cloneElement)(action, {
+      ...action.props,
       className: (0, import_system9.cn)(
-        "absolute",
+        "absolute right-0",
         classNames2.action,
         action.props.className
-      ),
-      ...action.props
+      )
     }) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
@@ -605,49 +611,115 @@ var _Input = (0, import_react8.forwardRef)(
   }
 );
 
+// src/Input/SearchInput.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var intlMessages = {
+  "de-DE": {
+    "Clear search": "Suche zur\xFCcksetzen"
+  },
+  "en-US": {
+    "Clear search": "Clear search"
+  },
+  "fr-FR": {
+    "Clear search": "Effacer la recherche"
+  }
+};
+var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: 24,
+    height: 24,
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+  }
+);
+var SearchInput = (0, import_react9.forwardRef)(
+  ({ className, onClear, ...props }, ref) => {
+    const stringFormatter = (0, import_i18n.useLocalizedStringFormatter)(intlMessages);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      _Input,
+      {
+        type: "search",
+        className: (0, import_system10.cn)(
+          "[&::-webkit-search-cancel-button]:hidden",
+          className == null ? void 0 : className.input
+        ),
+        ref,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SearchIcon, {}),
+        action: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react_aria_components4.Button,
+          {
+            className: className == null ? void 0 : className.action,
+            onPress: () => onClear == null ? void 0 : onClear(),
+            slot: null,
+            "aria-label": stringFormatter.format("Clear search"),
+            excludeFromTabOrder: true,
+            preventFocusOnPress: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                width: 20,
+                height: 20,
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+              }
+            )
+          }
+        ),
+        ...props
+      }
+    );
+  }
+);
+
 // src/ListBox/ListBox.tsx
-var import_react10 = require("react");
-var import_react_aria_components6 = require("react-aria-components");
-var import_system11 = require("@marigold/system");
+var import_react11 = require("react");
+var import_react_aria_components7 = require("react-aria-components");
+var import_system12 = require("@marigold/system");
 
 // src/ListBox/Context.ts
-var import_react9 = require("react");
-var ListBoxContext = (0, import_react9.createContext)({});
-var useListBoxContext = () => (0, import_react9.useContext)(ListBoxContext);
+var import_react10 = require("react");
+var ListBoxContext = (0, import_react10.createContext)({});
+var useListBoxContext = () => (0, import_react10.useContext)(ListBoxContext);
 
 // src/ListBox/ListBoxOption.tsx
-var import_react_aria_components4 = require("react-aria-components");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react_aria_components5 = require("react-aria-components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var _ListBoxItem = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components4.ListBoxItem, { ...props, className: classNames2.option });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components5.ListBoxItem, { ...props, className: classNames2.option });
 };
 
 // src/ListBox/ListBoxSection.tsx
-var import_react_aria_components5 = require("react-aria-components");
-var import_system10 = require("@marigold/system");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_aria_components6 = require("react-aria-components");
+var import_system11 = require("@marigold/system");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var _Section = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_aria_components5.Section,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_aria_components6.Section,
     {
       ...props,
-      className: (0, import_system10.cn)(classNames2.section, classNames2.sectionTitle)
+      className: (0, import_system11.cn)(classNames2.section, classNames2.sectionTitle)
     }
   );
 };
 
 // src/ListBox/ListBox.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var _ListBox = (0, import_react10.forwardRef)(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var _ListBox = (0, import_react11.forwardRef)(
   ({ variant, size, ...props }, ref) => {
-    const classNames2 = (0, import_system11.useClassNames)({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react_aria_components6.ListBox,
+    const classNames2 = (0, import_system12.useClassNames)({ component: "ListBox", variant, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_aria_components7.ListBox,
       {
         ...props,
-        className: (0, import_system11.cn)(
+        className: (0, import_system12.cn)(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -661,46 +733,45 @@ _ListBox.Item = _ListBoxItem;
 _ListBox.Section = _Section;
 
 // src/Overlay/Popover.tsx
-var import_react12 = require("react");
-var import_react_aria_components8 = require("react-aria-components");
-var import_system15 = require("@marigold/system");
+var import_react13 = require("react");
+var import_react_aria_components9 = require("react-aria-components");
+var import_system16 = require("@marigold/system");
 
 // src/Provider/OverlayContainerProvider.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_ssr = require("@react-aria/ssr");
-var OverlayContainerContext = (0, import_react11.createContext)(void 0);
+var OverlayContainerContext = (0, import_react12.createContext)(void 0);
 var OverlayContainerProvider = OverlayContainerContext.Provider;
 var usePortalContainer = () => {
-  const portalContainer = (0, import_react11.useContext)(OverlayContainerContext);
+  const portalContainer = (0, import_react12.useContext)(OverlayContainerContext);
   const isSSR = (0, import_ssr.useIsSSR)();
   const portal = isSSR ? null : portalContainer ? document.getElementById(portalContainer) : document.body;
   return portal;
 };
 
 // src/Overlay/Underlay.tsx
-var import_react_aria_components7 = require("react-aria-components");
-var import_system14 = require("@marigold/system");
+var import_react_aria_components8 = require("react-aria-components");
+var import_system15 = require("@marigold/system");
 
 // src/Provider/index.ts
-var import_system13 = require("@marigold/system");
-var import_i18n = require("@react-aria/i18n");
+var import_system14 = require("@marigold/system");
+var import_i18n2 = require("@react-aria/i18n");
 
 // src/Provider/MarigoldProvider.tsx
 var import_overlays = require("@react-aria/overlays");
-var import_system12 = require("@marigold/system");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_system13 = require("@marigold/system");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
-  theme,
-  portalContainer
+  theme
 }) {
-  const outerTheme = (0, import_system12.useTheme)();
-  const isTopLevel = outerTheme === import_system12.defaultTheme;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_system12.ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(OverlayContainerProvider, { value: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_overlays.OverlayProvider, { children }) }) : children });
+  const outerTheme = (0, import_system13.useTheme)();
+  const isTopLevel = outerTheme === import_system13.defaultTheme;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_system13.ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_overlays.OverlayProvider, { children }) : children });
 }
 
 // src/Overlay/Underlay.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Underlay = ({
   size,
   variant,
@@ -709,7 +780,7 @@ var Underlay = ({
   keyboardDismissable,
   ...rest
 }) => {
-  const classNames2 = (0, import_system14.useClassNames)({ component: "Underlay", size, variant });
+  const classNames2 = (0, import_system15.useClassNames)({ component: "Underlay", size, variant });
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -717,10 +788,10 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_aria_components7.ModalOverlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_aria_components8.ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => (0, import_system14.cn)(
+      className: ({ isEntering, isExiting }) => (0, import_system15.cn)(
         "fixed inset-0 z-10 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur ",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
@@ -735,8 +806,8 @@ var Underlay = ({
 };
 
 // src/Overlay/Popover.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var _Popover = (0, import_react12.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var _Popover = (0, import_react13.forwardRef)(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
       isKeyboardDismissDisabled: keyboardDismissDisabled,
@@ -744,30 +815,30 @@ var _Popover = (0, import_react12.forwardRef)(
       placement,
       ...rest
     };
-    const classNames2 = (0, import_system15.useClassNames)({
+    const classNames2 = (0, import_system16.useClassNames)({
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
       className: "min-w-[--trigger-width]"
     });
-    const isSmallScreen = (0, import_system15.useSmallScreen)();
+    const isSmallScreen = (0, import_system16.useSmallScreen)();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Underlay, { open, variant: "modal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_react_aria_components8.Popover,
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Underlay, { open, variant: "modal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react_aria_components9.Popover,
         {
           ref,
           ...props,
-          className: (0, import_system15.cn)(
+          className: (0, import_system16.cn)(
             "!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col"
           ),
           UNSTABLE_portalContainer: portal,
           children
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_aria_components8.Popover,
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_aria_components9.Popover,
       {
         ref,
         ...props,
@@ -780,87 +851,21 @@ var _Popover = (0, import_react12.forwardRef)(
   }
 );
 
-// src/Autocomplete/ClearButton.tsx
-var import_react14 = __toESM(require("react"));
-var import_react_aria_components10 = require("react-aria-components");
-var import_system17 = require("@marigold/system");
-
-// src/Button/Button.tsx
-var import_react13 = require("react");
-var import_react_aria_components9 = require("react-aria-components");
-var import_system16 = require("@marigold/system");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var _Button = (0, import_react13.forwardRef)(
-  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
-    const classNames2 = (0, import_system16.useClassNames)({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_react_aria_components9.Button,
-      {
-        ...props,
-        ref,
-        className: (0, import_system16.cn)(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0
-        ),
-        isDisabled: disabled,
-        children
-      }
-    );
-  }
-);
-
-// src/Autocomplete/ClearButton.tsx
+// src/Autocomplete/Autocomplete.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var AutocompleteClearButton = ({
-  className,
-  onClear
+var AutocompleteInput = ({
+  onSubmit,
+  onClear,
+  ref
 }) => {
-  let state = import_react14.default.useContext(import_react_aria_components10.ComboBoxStateContext);
+  const state = import_react15.default.useContext(import_react_aria_components10.ComboBoxStateContext);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    _Button,
-    {
-      "aria-label": "Clear",
-      "data-testid": "clear-button",
-      onPress: () => {
-        state == null ? void 0 : state.setInputValue("");
-        onClear == null ? void 0 : onClear();
-      },
-      variant: "icon",
-      className: (0, import_system17.cn)(
-        "cursor-pointer appearance-none border-none p-0 pr-1",
-        className
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 20 20",
-          fill: "currentColor",
-          width: 20,
-          height: 20,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
-        }
-      )
-    }
-  );
-};
-
-// src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SearchInput = ({ onSubmit, onClear, ref }) => {
-  const state = import_react16.default.useContext(import_react_aria_components11.ComboBoxStateContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    _Input,
+    SearchInput,
     {
       ref,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchIcon, {}),
-      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutocompleteClearButton, { onClear }) : void 0,
+      className: {
+        action: (state == null ? void 0 : state.inputValue) === "" ? "hidden" : void 0
+      },
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === "Escape") {
           e.preventDefault();
@@ -870,23 +875,16 @@ var SearchInput = ({ onSubmit, onClear, ref }) => {
             onSubmit == null ? void 0 : onSubmit(null, state.inputValue);
           }
         }
+      },
+      onClear: () => {
+        state == null ? void 0 : state.setInputValue("");
+        state == null ? void 0 : state.setSelectedKey(null);
+        onClear == null ? void 0 : onClear();
       }
     }
   );
 };
-var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    width: 24,
-    height: 24,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
-  }
-);
-var _Autocomplete = (0, import_react15.forwardRef)(
+var _Autocomplete = (0, import_react14.forwardRef)(
   ({
     children,
     defaultValue,
@@ -912,10 +910,10 @@ var _Autocomplete = (0, import_react15.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FieldBase, { as: import_react_aria_components11.ComboBox, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_ListBox, { children }) })
-    ] }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FieldBase, { as: import_react_aria_components10.ComboBox, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(_ListBox, { children }) })
+    ] });
   }
 );
 _Autocomplete.Item = _ListBox.Item;
@@ -923,6 +921,38 @@ _Autocomplete.Item = _ListBox.Item;
 // src/ComboBox/ComboBox.tsx
 var import_react17 = require("react");
 var import_react_aria_components12 = require("react-aria-components");
+
+// src/Button/Button.tsx
+var import_react16 = require("react");
+var import_react_aria_components11 = require("react-aria-components");
+var import_system17 = require("@marigold/system");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var _Button = (0, import_react16.forwardRef)(
+  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
+    const classNames2 = (0, import_system17.useClassNames)({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react_aria_components11.Button,
+      {
+        ...props,
+        ref,
+        className: (0, import_system17.cn)(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0
+        ),
+        isDisabled: disabled,
+        children
+      }
+    );
+  }
+);
+
+// src/ComboBox/ComboBox.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var _ComboBox = (0, import_react17.forwardRef)(
   ({
@@ -1620,14 +1650,14 @@ var import_date = require("@internationalized/date");
 var import_react24 = require("react");
 var import_react_aria_components25 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
-var import_i18n2 = require("@react-aria/i18n");
+var import_i18n3 = require("@react-aria/i18n");
 var import_system36 = require("@marigold/system");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
   const state = (0, import_react24.useContext)(import_react_aria_components25.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
-  const { locale } = (0, import_i18n2.useLocale)();
-  const dayFormatter = (0, import_i18n2.useDateFormatter)({
+  const { locale } = (0, import_i18n3.useLocale)();
+  const dayFormatter = (0, import_i18n3.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
@@ -1669,10 +1699,10 @@ var import_icons = require("@marigold/icons");
 var import_system38 = require("@marigold/system");
 
 // src/Calendar/useFormattedMonths.tsx
-var import_i18n3 = require("@react-aria/i18n");
+var import_i18n4 = require("@react-aria/i18n");
 function useFormattedMonths(timeZone, focusedDate) {
   let months = [];
-  let formatter = (0, import_i18n3.useDateFormatter)({
+  let formatter = (0, import_i18n4.useDateFormatter)({
     month: "long",
     timeZone
   });
@@ -1795,12 +1825,12 @@ var MonthListBox_default = MonthListBox;
 // src/Calendar/YearListBox.tsx
 var import_react27 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
-var import_i18n4 = require("@react-aria/i18n");
+var import_i18n5 = require("@react-aria/i18n");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
   const state = (0, import_react27.useContext)(import_react_aria_components30.CalendarStateContext);
   const years = [];
-  let formatter = (0, import_i18n4.useDateFormatter)({
+  let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
     timeZone: state.timeZone
   });
@@ -2424,18 +2454,6 @@ _Radio.Group = _RadioGroup;
 var import_react34 = require("react");
 var import_react_aria_components42 = require("react-aria-components");
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var SearchIcon2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    width: 24,
-    height: 24,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
-  }
-);
 var _SearchField = (0, import_react34.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
@@ -2445,7 +2463,13 @@ var _SearchField = (0, import_react34.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(FieldBase, { as: import_react_aria_components42.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_Input, { ref, icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SearchIcon2, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(FieldBase, { as: import_react_aria_components42.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      SearchInput,
+      {
+        ref,
+        className: { action: "group-data-[empty=true]/field:hidden" }
+      }
+    ) });
   }
 );