@marigold/components 6.1.0 → 6.2.0

package/dist/index.mjs

@@ -2,20 +2,116 @@
 import { useAsyncList, useListData } from "@react-stately/data";
 
 // src/Accordion/Accordion.tsx
-import React6, { Children, useRef as useRef2 } from "react";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useRef as useRef2
+} from "react";
 import { useAccordion } from "@react-aria/accordion";
 import { Item } from "@react-stately/collections";
+import { useTreeState } from "@react-stately/tree";
 
 // src/Accordion/AccordionItem.tsx
-import React5, { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { FocusRing, useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
 import { useClassNames as useClassNames2, useStateProps as useStateProps2 } from "@marigold/system";
 
-// src/Accordion/useAccordionItem.ts
-import { mergeProps, useId } from "@react-aria/utils";
+// src/Button/Button.tsx
+import { forwardRef } from "react";
 import { useButton } from "@react-aria/button";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
+import { cn, useClassNames, useStateProps } from "@marigold/system";
+var Button = forwardRef(
+  ({
+    as = "button",
+    children,
+    variant,
+    size,
+    disabled,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    fullWidth,
+    excludeFromTabOrder,
+    className,
+    ...props
+  }, ref) => {
+    const Component = as;
+    const buttonRef = useObjectRef(ref);
+    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = useFocusRing({
+      autoFocus: props.autoFocus
+    });
+    const { buttonProps, isPressed } = useButton(
+      {
+        /**
+         * `react-aria` only expected `Element` but we casted
+         * it to a `HTMLButtonElement` internally.
+         */
+        ...props,
+        onPress,
+        onPressStart,
+        onPressEnd,
+        onPressChange,
+        onPressUp,
+        elementType: typeof as === "string" ? as : "span",
+        isDisabled: disabled,
+        excludeFromTabOrder
+      },
+      buttonRef
+    );
+    const classNames2 = useClassNames({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    const stateProps = useStateProps({
+      active: isPressed,
+      focusVisible: isFocusVisible,
+      hover: isHovered
+    });
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ...mergeProps(buttonProps, focusProps, hoverProps, props),
+        ...stateProps,
+        ref: buttonRef,
+        className: cn(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0
+        )
+      },
+      children
+    );
+  }
+);
+
+// src/Chevron/ChevronUp.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { SVG } from "@marigold/system";
+var ChevronUp = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(SVG, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React.createElement("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }))
+);
+
+// src/Chevron/ChevronDown.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { SVG as SVG2 } from "@marigold/system";
+var ChevronDown = forwardRef3(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(SVG2, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React.createElement("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }))
+);
+
+// src/Accordion/useAccordionItem.ts
+import { useButton as useButton2 } from "@react-aria/button";
 import { useSelectableItem } from "@react-aria/selection";
+import { mergeProps as mergeProps2, useId } from "@react-aria/utils";
 import { isAppleDevice } from "@react-aria/utils";
 import { isMac } from "@react-aria/utils";
 function isNonContiguousSelectionModifier(e) {
@@ -83,11 +179,12 @@ function useAccordionItem(props, state, ref) {
       }
     }
   };
-  let { buttonProps } = useButton(
-    mergeProps(itemProps, {
+  let { buttonProps } = useButton2(
+    mergeProps2(itemProps, {
       id: buttonId,
       elementType: "button",
       isDisabled,
+      // if remove than everything click
       onPress: onSelect
     }),
     ref
@@ -107,98 +204,6 @@ function useAccordionItem(props, state, ref) {
   };
 }
 
-// src/Button/Button.tsx
-import React2, { forwardRef } from "react";
-import { useButton as useButton2 } from "@react-aria/button";
-import { useFocusRing } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import { mergeProps as mergeProps2, useObjectRef } from "@react-aria/utils";
-import { cn, useClassNames, useStateProps } from "@marigold/system";
-var Button = forwardRef(
-  ({
-    as = "button",
-    children,
-    variant,
-    size,
-    disabled,
-    onClick,
-    onPress,
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPressUp,
-    fullWidth,
-    excludeFromTabOrder,
-    className,
-    ...props
-  }, ref) => {
-    const Component = as;
-    const buttonRef = useObjectRef(ref);
-    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing({
-      autoFocus: props.autoFocus
-    });
-    const { buttonProps, isPressed } = useButton2(
-      {
-        /**
-         * `react-aria` only expected `Element` but we casted
-         * it to a `HTMLButtonElement` internally.
-         */
-        ...props,
-        onClick,
-        onPress,
-        onPressStart,
-        onPressEnd,
-        onPressChange,
-        onPressUp,
-        elementType: typeof as === "string" ? as : "span",
-        isDisabled: disabled,
-        excludeFromTabOrder
-      },
-      buttonRef
-    );
-    const classNames2 = useClassNames({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    const stateProps = useStateProps({
-      active: isPressed,
-      focusVisible: isFocusVisible,
-      hover: isHovered
-    });
-    return /* @__PURE__ */ React2.createElement(
-      Component,
-      {
-        ...mergeProps2(buttonProps, focusProps, hoverProps, props),
-        ...stateProps,
-        ref: buttonRef,
-        className: cn(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0
-        )
-      },
-      children
-    );
-  }
-);
-
-// src/Chevron/ChevronUp.tsx
-import React3, { forwardRef as forwardRef2 } from "react";
-import { SVG } from "@marigold/system";
-var ChevronUp = forwardRef2(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(SVG, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React3.createElement("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }))
-);
-
-// src/Chevron/ChevronDown.tsx
-import React4, { forwardRef as forwardRef3 } from "react";
-import { SVG as SVG2 } from "@marigold/system";
-var ChevronDown = forwardRef3(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React4.createElement(SVG2, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React4.createElement("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }))
-);
-
 // src/Accordion/AccordionItem.tsx
 var AccordionItem = ({
   item,
@@ -213,7 +218,7 @@ var AccordionItem = ({
     item.key.toString().replace(".$", "")
   );
   const expanded = state.selectionManager.isSelected(item.key);
-  React5.useEffect(() => {
+  useEffect(() => {
     if (defaultExpanded) {
       if (state.selectionManager.selectionMode === "multiple") {
         state.expandedKeys.forEach((key) => {
@@ -225,14 +230,20 @@ var AccordionItem = ({
       }
     }
   }, [defaultExpanded, item.key, state.expandedKeys, state.selectionManager]);
-  const { buttonProps, regionProps } = useAccordionItem({ item }, state, ref);
+  const { buttonProps, regionProps } = useAccordionItem(
+    {
+      item
+    },
+    state,
+    ref
+  );
   const { isFocusVisible, focusProps } = useFocusRing2();
   const stateProps = useStateProps2({
     focus: isFocusVisible,
     expanded: defaultExpanded || expanded
   });
   const classNames2 = useClassNames2({ component: "Accordion", variant, size });
-  return /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col", ...props }, /* @__PURE__ */ React5.createElement(FocusRing, { within: true }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col", ...props }, /* @__PURE__ */ React.createElement(FocusRing, { within: true }, /* @__PURE__ */ React.createElement(
     Button,
     {
       className: classNames2.button,
@@ -241,8 +252,8 @@ var AccordionItem = ({
       "aria-label": item.textValue
     },
     title,
-    !expanded ? /* @__PURE__ */ React5.createElement(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ React5.createElement(ChevronDown, { className: "h3 w-6" })
-  )), expanded || defaultExpanded ? /* @__PURE__ */ React5.createElement(
+    !expanded ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h3 w-6" })
+  )), expanded || defaultExpanded ? /* @__PURE__ */ React.createElement(
     "div",
     {
       ...mergeProps3(regionProps, focusProps, stateProps),
@@ -253,16 +264,15 @@ var AccordionItem = ({
 };
 
 // src/Accordion/Accordion.tsx
-import { useTreeState } from "@react-stately/tree";
 var Accordion = ({ children, ...props }) => {
   const ownProps = {
     ...props,
     // we have to do this because JSX childs are not supported
     children: Children.toArray(children).map((child) => {
-      if (!React6.isValidElement(child)) {
+      if (!isValidElement(child)) {
         return child;
       }
-      return React6.cloneElement(child, {
+      return cloneElement(child, {
         hasChildItems: false,
         ...child.props
       });
@@ -278,7 +288,7 @@ var Accordion = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ React6.createElement("div", { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React.createElement(
     AccordionItem,
     {
       key: item.key,
@@ -293,7 +303,7 @@ var Accordion = ({ children, ...props }) => {
 Accordion.Item = Item;
 
 // src/Aside/Aside.tsx
-import React7 from "react";
+import { Children as Children2 } from "react";
 import { cn as cn2, createVar, gapSpace } from "@marigold/system";
 var classNames = {
   aside: "grow basis-[--sideWidth]",
@@ -307,12 +317,12 @@ var Aside = ({
   stretch = true,
   wrap = "50%"
 }) => {
-  const [left, right] = React7.Children.toArray(children);
+  const [left, right] = Children2.toArray(children);
   const vars = {
     aside: createVar({ sideWidth }),
     content: createVar({ wrap })
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn2(
@@ -321,7 +331,7 @@ var Aside = ({
         !stretch && "items-start"
       )
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         className: classNames[side === "left" ? "aside" : "content"],
@@ -329,7 +339,7 @@ var Aside = ({
       },
       left
     ),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         className: classNames[side === "right" ? "aside" : "content"],
@@ -341,13 +351,12 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-import React8 from "react";
-import { cn as cn3, createVar as createVar2, aspect } from "@marigold/system";
+import { aspect, cn as cn3, createVar as createVar2 } from "@marigold/system";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ React8.createElement(
+}) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn3("overflow-hidden", aspect[ratio], "max-w-[var(--maxWidth)]"),
@@ -357,57 +366,21 @@ var Aspect = ({
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import React23, { useRef as useRef7 } from "react";
+import { useRef as useRef7 } from "react";
 import { useSearchAutocomplete } from "@react-aria/autocomplete";
 import { useFilter } from "@react-aria/i18n";
-import { useComboBoxState } from "@react-stately/combobox";
 import { Item as Item2 } from "@react-stately/collections";
+import { useComboBoxState } from "@react-stately/combobox";
 
 // src/FieldBase/FieldBase.tsx
-import React12 from "react";
 import {
   cn as cn6,
-  useClassNames as useClassNames5,
-  width as twWidth
+  width as twWidth,
+  useClassNames as useClassNames5
 } from "@marigold/system";
 
-// src/Label/Label.tsx
-import React9 from "react";
-import { SVG as SVG3, cn as cn4, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
-var Label = ({
-  as = "label",
-  children,
-  variant,
-  size,
-  labelWidth,
-  ...props
-}) => {
-  const Component = as;
-  const classNames2 = useClassNames3({ component: "Label", size, variant });
-  return /* @__PURE__ */ React9.createElement(
-    Component,
-    {
-      ...props,
-      className: cn4(classNames2.container, "flex w-[var(--labelWidth)]"),
-      style: createVar3({ labelWidth })
-    },
-    children,
-    /* @__PURE__ */ React9.createElement(
-      SVG3,
-      {
-        viewBox: "0 0 24 24",
-        role: "presentation",
-        size: 16,
-        className: cn4("hidden", classNames2.indicator)
-      },
-      /* @__PURE__ */ React9.createElement("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
-    )
-  );
-};
-
 // src/HelpText/HelpText.tsx
-import React10 from "react";
-import { SVG as SVG4, cn as cn5, useClassNames as useClassNames4 } from "@marigold/system";
+import { SVG as SVG3, cn as cn4, useClassNames as useClassNames3 } from "@marigold/system";
 var HelpText = ({
   variant,
   size,
@@ -421,38 +394,70 @@ var HelpText = ({
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
-  const classNames2 = useClassNames4({
+  const classNames2 = useClassNames3({
     component: "HelpText",
     variant,
     size,
     className
   });
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
       ...hasErrorMessage ? errorMessageProps : descriptionProps,
-      className: cn5("flex items-center gap-1", classNames2.container)
+      className: cn4("flex items-center gap-1", classNames2.container)
     },
-    hasErrorMessage ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
-      SVG4,
+    hasErrorMessage ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      SVG3,
       {
-        className: cn5("h-4 w-4", classNames2.icon),
+        className: cn4("h-4 w-4", classNames2.icon),
         viewBox: "0 0 24 24",
         role: "presentation"
       },
-      /* @__PURE__ */ React10.createElement("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
-    ), errorMessage) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, description)
+      /* @__PURE__ */ React.createElement("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+    ), errorMessage) : /* @__PURE__ */ React.createElement(React.Fragment, null, description)
+  );
+};
+
+// src/Label/Label.tsx
+import { SVG as SVG4, cn as cn5, createVar as createVar3, useClassNames as useClassNames4 } from "@marigold/system";
+var Label = ({
+  as = "label",
+  children,
+  variant,
+  size,
+  labelWidth,
+  ...props
+}) => {
+  const Component = as;
+  const classNames2 = useClassNames4({ component: "Label", size, variant });
+  return /* @__PURE__ */ React.createElement(
+    Component,
+    {
+      ...props,
+      className: cn5(classNames2.container, "flex w-[var(--labelWidth)]"),
+      style: createVar3({ labelWidth })
+    },
+    children,
+    /* @__PURE__ */ React.createElement(
+      SVG4,
+      {
+        viewBox: "0 0 24 24",
+        role: "presentation",
+        size: 16,
+        className: cn5("hidden", classNames2.indicator)
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
+    )
   );
 };
 
 // src/FieldBase/FieldGroup.tsx
-import React11 from "react";
 import { createContext, useContext } from "react";
 var FieldGroupContext = createContext({});
 var useFieldGroupContext = () => useContext(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ React11.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
+  return /* @__PURE__ */ React.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
 };
 
 // src/FieldBase/FieldBase.tsx
@@ -479,14 +484,14 @@ var FieldBase = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
       ...stateProps,
       className: cn6("group/field", twWidth[width], classNames2)
     },
-    label && /* @__PURE__ */ React12.createElement(
+    label && /* @__PURE__ */ React.createElement(
       Label,
       {
         variant,
@@ -497,7 +502,7 @@ var FieldBase = ({
       label
     ),
     children,
-    hasHelpText && /* @__PURE__ */ React12.createElement(
+    hasHelpText && /* @__PURE__ */ React.createElement(
       HelpText,
       {
         variant,
@@ -514,7 +519,10 @@ var FieldBase = ({
 };
 
 // src/Input/Input.tsx
-import React13, { cloneElement, forwardRef as forwardRef4 } from "react";
+import {
+  cloneElement as cloneElement2,
+  forwardRef as forwardRef4
+} from "react";
 import { cn as cn7, useClassNames as useClassNames6 } from "@marigold/system";
 var Input = forwardRef4(
   ({
@@ -532,7 +540,7 @@ var Input = forwardRef4(
       size,
       className
     });
-    const inputIcon = icon ? cloneElement(icon, {
+    const inputIcon = icon ? cloneElement2(icon, {
       className: cn7(
         "pointer-events-none absolute",
         classNames2.icon,
@@ -540,7 +548,7 @@ var Input = forwardRef4(
       ),
       ...icon.props
     }) : null;
-    const inputAction = action && !props.readOnly ? cloneElement(action, {
+    const inputAction = action && !props.readOnly ? cloneElement2(action, {
       className: cn7(
         "absolute",
         classNames2.action,
@@ -548,7 +556,7 @@ var Input = forwardRef4(
       ),
       ...action.props
     }) : null;
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "group/input relative flex items-center",
@@ -556,7 +564,7 @@ var Input = forwardRef4(
         "data-action": action && ""
       },
       inputIcon,
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ...props,
@@ -578,22 +586,18 @@ var Input = forwardRef4(
 );
 
 // src/ListBox/ListBox.tsx
-import React16, { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef5 } from "react";
+import { useListBox } from "@react-aria/listbox";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { cn as cn8, useClassNames as useClassNames7 } from "@marigold/system";
-import { useListBox } from "@react-aria/listbox";
 
 // src/ListBox/Context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext2(ListBoxContext);
 
-// src/ListBox/ListBoxSection.tsx
-import React15 from "react";
-import { useListBoxSection } from "@react-aria/listbox";
-
 // src/ListBox/ListBoxOption.tsx
-import React14, { useRef as useRef3 } from "react";
+import { useRef as useRef3 } from "react";
 import { useOption } from "@react-aria/listbox";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
 import { useStateProps as useStateProps3 } from "@marigold/system";
@@ -613,7 +617,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React.createElement(
     "li",
     {
       ref,
@@ -625,13 +629,14 @@ var ListBoxOption = ({ item, state }) => {
 };
 
 // src/ListBox/ListBoxSection.tsx
+import { useListBoxSection } from "@react-aria/listbox";
 var ListBoxSection = ({ section, state }) => {
   const { classNames: classNames2 } = useListBoxContext();
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ React15.createElement("li", { className: classNames2.section, ...itemProps }, section.rendered && /* @__PURE__ */ React15.createElement("div", { className: classNames2.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React15.createElement("ul", { className: classNames2.list, ...groupProps }, [...section.props.children].map((node) => /* @__PURE__ */ React15.createElement(ListBoxOption, { key: node.key, item: node, state }))));
+  return /* @__PURE__ */ React.createElement("li", { className: classNames2.section, ...itemProps }, section.rendered && /* @__PURE__ */ React.createElement("div", { className: classNames2.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React.createElement("ul", { className: classNames2.list, ...groupProps }, [...section.props.children].map((node) => /* @__PURE__ */ React.createElement(ListBoxOption, { key: node.key, item: node, state }))));
 };
 
 // src/ListBox/ListBox.tsx
@@ -640,7 +645,7 @@ var ListBox = forwardRef5(
     const innerRef = useObjectRef2(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
     const classNames2 = useClassNames7({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ React16.createElement(ListBoxContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React16.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React.createElement(ListBoxContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React.createElement(
       "ul",
       {
         className: cn8(
@@ -651,24 +656,23 @@ var ListBox = forwardRef5(
         ...listBoxProps
       },
       [...state.collection].map(
-        (item) => item.type === "section" ? /* @__PURE__ */ React16.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React16.createElement(ListBoxOption, { key: item.key, item, state })
+        (item) => item.type === "section" ? /* @__PURE__ */ React.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React.createElement(ListBoxOption, { key: item.key, item, state })
       )
     )));
   }
 );
 
 // src/Overlay/Modal.tsx
-import React18, { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
 import { mergeProps as mergeProps5, useObjectRef as useObjectRef3 } from "@react-aria/utils";
 
 // src/Overlay/Underlay.tsx
-import React17 from "react";
 import { cn as cn9, useClassNames as useClassNames8 } from "@marigold/system";
 var Underlay = ({ size, variant, ...props }) => {
   const classNames2 = useClassNames8({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ React17.createElement("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
+  return /* @__PURE__ */ React.createElement("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
 };
 
 // src/Overlay/Modal.tsx
@@ -686,20 +690,20 @@ var Modal = forwardRef6(
     );
     usePreventScroll();
     const { modalProps } = useModal({});
-    return /* @__PURE__ */ React18.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React18.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "pointer-none fixed inset-0 z-50 flex items-center justify-center",
         ref: modalRef,
         ...mergeProps5(props, overlayProps, modalProps)
       },
-      /* @__PURE__ */ React18.createElement("div", { style: { pointerEvents: "auto" } }, children)
+      /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "auto" } }, children)
     ));
   }
 );
 
 // src/Overlay/Overlay.tsx
-import React19, { useRef as useRef4 } from "react";
+import { useRef as useRef4 } from "react";
 import {
   Overlay as ReactAriaOverlay
 } from "@react-aria/overlays";
@@ -711,7 +715,7 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: nodeRef,
@@ -724,19 +728,19 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-import React20, { forwardRef as forwardRef7, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef5 } from "react";
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import {
   DismissButton,
   usePopover
 } from "@react-aria/overlays";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import { useClassNames as useClassNames9 } from "@marigold/system";
 var Popover = forwardRef7(
   (props, ref) => {
     const fallbackRef = useRef5(null);
     const popoverRef = ref || fallbackRef;
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ React20.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React20.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
+    return /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
   }
 );
 var PopoverWrapper = forwardRef7(
@@ -761,7 +765,7 @@ var PopoverWrapper = forwardRef7(
       component: "Popover",
       variant: placement
     });
-    return /* @__PURE__ */ React20.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React20.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React.createElement(
       "div",
       {
         ...popoverProps,
@@ -773,26 +777,25 @@ var PopoverWrapper = forwardRef7(
         ref,
         role: "presentation"
       },
-      !isNonModal && /* @__PURE__ */ React20.createElement(DismissButton, { onDismiss: state.close }),
+      !isNonModal && /* @__PURE__ */ React.createElement(DismissButton, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React20.createElement(DismissButton, { onDismiss: state.close })
+      /* @__PURE__ */ React.createElement(DismissButton, { onDismiss: state.close })
     ));
   }
 );
 
 // src/Overlay/Tray.tsx
-import React21 from "react";
+import { forwardRef as forwardRef8 } from "react";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
 import {
   DismissButton as DismissButton2,
   useModalOverlay
 } from "@react-aria/overlays";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import { forwardRef as forwardRef8 } from "react";
 var Tray = forwardRef8(
   ({ state, children, ...props }, ref) => {
     const trayRef = useObjectRef4(ref);
-    return /* @__PURE__ */ React21.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React21.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
+    return /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
   }
 );
 var TrayWrapper = forwardRef8(
@@ -805,7 +808,7 @@ var TrayWrapper = forwardRef8(
       state,
       ref
     );
-    return /* @__PURE__ */ React21.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React21.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         ...modalProps,
@@ -813,18 +816,18 @@ var TrayWrapper = forwardRef8(
         className: "absolute bottom-0 w-full",
         "data-testid": "tray"
       },
-      /* @__PURE__ */ React21.createElement(DismissButton2, { onDismiss: state.close }),
+      /* @__PURE__ */ React.createElement(DismissButton2, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React21.createElement(DismissButton2, { onDismiss: state.close })
+      /* @__PURE__ */ React.createElement(DismissButton2, { onDismiss: state.close })
     )));
   }
 );
 
 // src/Autocomplete/ClearButton.tsx
-import React22, { useRef as useRef6 } from "react";
-import { useHover as useHover2 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import { useRef as useRef6 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
+import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
 import { cn as cn10, useStateProps as useStateProps4 } from "@marigold/system";
 var ClearButton = ({
@@ -869,7 +872,7 @@ var ClearButton = ({
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React.createElement(
     "button",
     {
       ...mergeProps6(buttonProps, focusProps, hoverProps, props),
@@ -880,7 +883,7 @@ var ClearButton = ({
         className
       )
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -889,13 +892,13 @@ var ClearButton = ({
         width: 20,
         height: 20
       },
-      /* @__PURE__ */ React22.createElement("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" })
+      /* @__PURE__ */ React.createElement("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 SearchIcon = (props) => /* @__PURE__ */ React23.createElement(
+var SearchIcon = (props) => /* @__PURE__ */ React.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -905,7 +908,7 @@ var SearchIcon = (props) => /* @__PURE__ */ React23.createElement(
     height: 24,
     ...props
   },
-  /* @__PURE__ */ React23.createElement("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" })
+  /* @__PURE__ */ React.createElement("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 = ({
   disabled,
@@ -959,7 +962,7 @@ var Autocomplete = ({
     state
   );
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       label: props.label,
@@ -970,13 +973,13 @@ var Autocomplete = ({
       disabled,
       width
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React.createElement(
       Input,
       {
         ...inputProps,
         ref: inputRef,
-        icon: /* @__PURE__ */ React23.createElement(SearchIcon, null),
-        action: state.inputValue !== "" ? /* @__PURE__ */ React23.createElement(
+        icon: /* @__PURE__ */ React.createElement(SearchIcon, null),
+        action: state.inputValue !== "" ? /* @__PURE__ */ React.createElement(
           ClearButton,
           {
             preventFocus: true,
@@ -986,7 +989,7 @@ var Autocomplete = ({
         ) : null
       }
     )
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React.createElement(
     Popover,
     {
       state,
@@ -995,18 +998,18 @@ var Autocomplete = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React23.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
 Autocomplete.Item = Item2;
 
 // src/ComboBox/ComboBox.tsx
-import React24 from "react";
-import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
+import React2 from "react";
+import { useButton as useButton4 } from "@react-aria/button";
 import { useComboBox } from "@react-aria/combobox";
 import { useFilter as useFilter2 } from "@react-aria/i18n";
-import { useButton as useButton4 } from "@react-aria/button";
 import { Item as Item3 } from "@react-stately/collections";
+import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
 var ComboBox = ({
   error,
   width,
@@ -1031,10 +1034,10 @@ var ComboBox = ({
   };
   const { contains } = useFilter2({ sensitivity: "base" });
   const state = useComboBoxState2({ ...props, defaultFilter: contains });
-  const buttonRef = React24.useRef(null);
-  const inputRef = React24.useRef(null);
-  const listBoxRef = React24.useRef(null);
-  const popoverRef = React24.useRef(null);
+  const buttonRef = React2.useRef(null);
+  const inputRef = React2.useRef(null);
+  const listBoxRef = React2.useRef(null);
+  const popoverRef = React2.useRef(null);
   const {
     buttonProps: triggerProps,
     inputProps,
@@ -1047,7 +1050,7 @@ var ComboBox = ({
   const errorMessageProps = { "aria-invalid": error };
   const { buttonProps } = useButton4(triggerProps, buttonRef);
   const { label, description, errorMessage } = props;
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
     FieldBase,
     {
       label,
@@ -1058,23 +1061,23 @@ var ComboBox = ({
       errorMessageProps,
       width
     },
-    /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React2.createElement(
       Input,
       {
         ...inputProps,
         ref: inputRef,
-        action: /* @__PURE__ */ React24.createElement(
+        action: /* @__PURE__ */ React2.createElement(
           Button,
           {
             className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
             ref: buttonRef,
             ...buttonProps
           },
-          /* @__PURE__ */ React24.createElement(ChevronDown, { className: "h-4 w-4" })
+          /* @__PURE__ */ React2.createElement(ChevronDown, { className: "h-4 w-4" })
         )
       }
     )
-  ), /* @__PURE__ */ React24.createElement(
+  ), /* @__PURE__ */ React2.createElement(
     Popover,
     {
       state,
@@ -1083,22 +1086,20 @@ var ComboBox = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React24.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React2.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
 ComboBox.Item = Item3;
 
 // src/Badge/Badge.tsx
-import React25 from "react";
 import { useClassNames as useClassNames10 } from "@marigold/system";
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = useClassNames10({ component: "Badge", variant, size });
-  return /* @__PURE__ */ React25.createElement("div", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React.createElement("div", { ...props, className: classNames2 }, children);
 };
 
 // src/Breakout/Breakout.tsx
-import React26 from "react";
-import { cn as cn11, createVar as createVar4, alignment } from "@marigold/system";
+import { alignment, cn as cn11, createVar as createVar4 } from "@marigold/system";
 var Breakout = ({
   height,
   children,
@@ -1108,7 +1109,7 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn11(
@@ -1126,15 +1127,13 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import React27 from "react";
 import { useClassNames as useClassNames11 } from "@marigold/system";
 var Body = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames11({ component: "Body", variant, size });
-  return /* @__PURE__ */ React27.createElement("section", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React.createElement("section", { ...props, className: classNames2 }, children);
 };
 
 // src/Card/Card.tsx
-import React28 from "react";
 import {
   cn as cn12,
   gapSpace as gapSpace2,
@@ -1162,7 +1161,7 @@ var Card = ({
   ...props
 }) => {
   const classNames2 = useClassNames12({ component: "Card", variant, size });
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
@@ -1184,7 +1183,6 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import React29 from "react";
 import { cn as cn13, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
 var Center = ({
   maxWidth = "100%",
@@ -1192,7 +1190,7 @@ var Center = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn13(
@@ -1208,7 +1206,7 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import React31, { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
@@ -1228,7 +1226,7 @@ var CheckboxField = ({ children, labelWidth }) => {
 };
 
 // src/Checkbox/CheckboxGroup.tsx
-import React30, { createContext as createContext3, useContext as useContext3 } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
@@ -1261,7 +1259,7 @@ var CheckboxGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       label: props.label,
@@ -1276,12 +1274,12 @@ var CheckboxGroup = ({
       width,
       ...groupProps
     },
-    /* @__PURE__ */ React30.createElement("div", { role: "presentation", className: "flex flex-col items-start" }, /* @__PURE__ */ React30.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children))
+    /* @__PURE__ */ React.createElement("div", { role: "presentation", className: "flex flex-col items-start" }, /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children))
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React31.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React31.createElement(
+var CheckMark = () => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1289,7 +1287,7 @@ var CheckMark = () => /* @__PURE__ */ React31.createElement("svg", { viewBox: "0
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ));
-var IndeterminateMark = () => /* @__PURE__ */ React31.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React31.createElement(
+var IndeterminateMark = () => /* @__PURE__ */ React.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1298,7 +1296,7 @@ var IndeterminateMark = () => /* @__PURE__ */ React31.createElement("svg", { wid
   }
 ));
 var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       "aria-hidden": "true",
@@ -1311,7 +1309,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
       ),
       ...props
     },
-    indeterminate ? /* @__PURE__ */ React31.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React31.createElement(CheckMark, null) : null
+    indeterminate ? /* @__PURE__ */ React.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React.createElement(CheckMark, null) : null
   );
 };
 var Checkbox = forwardRef9(
@@ -1378,7 +1376,7 @@ var Checkbox = forwardRef9(
       readOnly,
       indeterminate
     });
-    const component = /* @__PURE__ */ React31.createElement(
+    const component = /* @__PURE__ */ React.createElement(
       "label",
       {
         className: cn14(
@@ -1388,7 +1386,7 @@ var Checkbox = forwardRef9(
         ...hoverProps,
         ...stateProps
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ref: inputRef,
@@ -1397,7 +1395,7 @@ var Checkbox = forwardRef9(
           ...focusProps
         }
       ),
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React.createElement(
         Icon,
         {
           checked: inputProps.checked,
@@ -1405,18 +1403,14 @@ var Checkbox = forwardRef9(
           className: classNames2.checkbox
         }
       ),
-      props.children && /* @__PURE__ */ React31.createElement("div", { className: classNames2.label }, props.children)
+      props.children && /* @__PURE__ */ React.createElement("div", { className: classNames2.label }, props.children)
     );
-    return !groupState && labelWidth ? /* @__PURE__ */ React31.createElement(CheckboxField, { labelWidth }, component) : component;
+    return !groupState && labelWidth ? /* @__PURE__ */ React.createElement(CheckboxField, { labelWidth }, component) : component;
   }
 );
 
 // src/Columns/Columns.tsx
-import React32, {
-  Children as Children2,
-  cloneElement as cloneElement2,
-  isValidElement
-} from "react";
+import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
 import { cn as cn15, createVar as createVar7, gapSpace as gapSpace4 } from "@marigold/system";
 var Columns = ({
   space = 0,
@@ -1426,14 +1420,14 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (Children2.count(children) !== columns.length) {
+  if (Children3.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${Children2.count(
+      `Columns: expected ${columns.length} children, got ${Children3.count(
         children
       )}`
     );
   }
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn15(
@@ -1443,7 +1437,7 @@ var Columns = ({
       ),
       ...props
     },
-    Children2.map(children, (child, idx) => /* @__PURE__ */ React32.createElement(
+    Children3.map(children, (child, idx) => /* @__PURE__ */ React.createElement(
       "div",
       {
         className: cn15(
@@ -1451,19 +1445,18 @@ var Columns = ({
         ),
         style: createVar7({ collapseAt, columnSize: columns[idx] })
       },
-      isValidElement(child) ? cloneElement2(child) : child
+      isValidElement2(child) ? cloneElement3(child) : child
     ))
   );
 };
 
 // src/Container/Container.tsx
-import React33 from "react";
 import {
   cn as cn16,
   createVar as createVar8,
-  placeItems,
   gridColsAlign,
-  gridColumn
+  gridColumn,
+  placeItems
 } from "@marigold/system";
 var content = {
   small: "20ch",
@@ -1484,7 +1477,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn16(
@@ -1501,13 +1494,17 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React38, { useRef as useRef9 } from "react";
+import {
+  Children as Children5,
+  cloneElement as cloneElement4,
+  isValidElement as isValidElement3,
+  useRef as useRef9
+} from "react";
 import { useButton as useButton5 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import React34 from "react";
 import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
 var Header = ({
   children,
@@ -1522,18 +1519,17 @@ var Header = ({
     size,
     className
   });
-  return /* @__PURE__ */ React34.createElement("header", { ...props, className: cn17(classNames2) }, children);
+  return /* @__PURE__ */ React.createElement("header", { ...props, className: cn17(classNames2) }, children);
 };
 
 // src/Headline/Headline.tsx
-import React35 from "react";
 import {
-  useClassNames as useClassNames16,
   cn as cn18,
   createVar as createVar9,
+  get,
   textAlign,
-  useTheme as useTheme2,
-  get
+  useClassNames as useClassNames16,
+  useTheme as useTheme2
 } from "@marigold/system";
 var Headline = ({
   children,
@@ -1552,7 +1548,7 @@ var Headline = ({
     size: size != null ? size : `level-${level}`
   });
   const Component = as;
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React.createElement(
     Component,
     {
       ...props,
@@ -1575,28 +1571,22 @@ import { createContext as createContext4, useContext as useContext4 } from "reac
 var DialogContext = createContext4({});
 var useDialogContext = () => useContext4(DialogContext);
 
-// src/Dialog/DialogTrigger.tsx
-import React36, { useRef as useRef8 } from "react";
-import { PressResponder } from "@react-aria/interactions";
+// src/Dialog/DialogController.tsx
+import React3 from "react";
 import { useOverlayTriggerState } from "@react-stately/overlays";
-var DialogTrigger = ({
+var DialogController = ({
   children,
   dismissable = true,
-  keyboardDismissable = true
+  keyboardDismissable = true,
+  open,
+  onOpenChange
 }) => {
-  const [dialogTrigger, dialog] = React36.Children.toArray(children);
-  const dialogTriggerRef = useRef8(null);
-  const state = useOverlayTriggerState({});
+  const state = useOverlayTriggerState({
+    isOpen: open,
+    onOpenChange
+  });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React36.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React36.createElement(
-    PressResponder,
-    {
-      ref: dialogTriggerRef,
-      isPressed: state.isOpen,
-      onPress: state.toggle
-    },
-    dialogTrigger
-  ), /* @__PURE__ */ React36.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React3.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React3.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React3.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1604,26 +1594,32 @@ var DialogTrigger = ({
       dismissable,
       keyboardDismissable
     },
-    dialog
+    children
   )));
 };
 
-// src/Dialog/DialogController.tsx
+// src/Dialog/DialogTrigger.tsx
+import { Children as Children4, useRef as useRef8 } from "react";
+import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import React37 from "react";
-var DialogController = ({
+var DialogTrigger = ({
   children,
   dismissable = true,
-  keyboardDismissable = true,
-  open,
-  onOpenChange
+  keyboardDismissable = true
 }) => {
-  const state = useOverlayTriggerState2({
-    isOpen: open,
-    onOpenChange
-  });
+  const [dialogTrigger, dialog] = Children4.toArray(children);
+  const dialogTriggerRef = useRef8(null);
+  const state = useOverlayTriggerState2({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React37.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React37.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement(
+    PressResponder,
+    {
+      ref: dialogTriggerRef,
+      isPressed: state.isOpen,
+      onPress: state.toggle
+    },
+    dialogTrigger
+  ), /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1631,7 +1627,7 @@ var DialogController = ({
       dismissable,
       keyboardDismissable
     },
-    children
+    dialog
   )));
 };
 
@@ -1645,7 +1641,7 @@ var CloseButton = ({ className }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React38.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: cn19(
@@ -1655,7 +1651,7 @@ var CloseButton = ({ className }) => {
       ref,
       ...buttonProps
     },
-    /* @__PURE__ */ React38.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -1666,9 +1662,9 @@ var CloseButton = ({ className }) => {
   ));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = React38.Children.toArray(children);
+  const childs = Children5.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React38.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => isValidElement3(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1676,7 +1672,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React38.cloneElement(
+  const titleChild = cloneElement4(
     childs[titleIndex],
     titleProps
   );
@@ -1694,36 +1690,33 @@ var Dialog = ({
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
   const classNames2 = useClassNames17({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ React38.createElement("div", { className: classNames2.container, ...dialogProps }, closeButton && /* @__PURE__ */ React38.createElement(CloseButton, { className: classNames2.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  return /* @__PURE__ */ React.createElement("div", { className: classNames2.container, ...dialogProps }, closeButton && /* @__PURE__ */ React.createElement(CloseButton, { className: classNames2.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
 Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-import React39 from "react";
 import { useSeparator } from "@react-aria/separator";
 import { useClassNames as useClassNames18 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
   const classNames2 = useClassNames18({ component: "Divider", variant });
-  return /* @__PURE__ */ React39.createElement("div", { className: classNames2, ...props, ...separatorProps });
+  return /* @__PURE__ */ React.createElement("div", { className: classNames2, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-import React40 from "react";
 import { useClassNames as useClassNames19 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames19({ component: "Footer", variant, size });
-  return /* @__PURE__ */ React40.createElement("footer", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React.createElement("footer", { ...props, className: classNames2 }, children);
 };
 
 // src/Image/Image.tsx
-import React41 from "react";
 import {
   cn as cn20,
-  useClassNames as useClassNames20,
   objectFit,
-  objectPosition
+  objectPosition,
+  useClassNames as useClassNames20
 } from "@marigold/system";
 var Image = ({
   variant,
@@ -1733,7 +1726,7 @@ var Image = ({
   ...props
 }) => {
   const classNames2 = useClassNames20({ component: "Image", variant, size });
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React.createElement(
     "img",
     {
       ...props,
@@ -1749,11 +1742,10 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React42 from "react";
 import {
-  gapSpace as gapSpace5,
   alignment as alignment2,
-  cn as cn21
+  cn as cn21,
+  gapSpace as gapSpace5
 } from "@marigold/system";
 var Inline = ({
   space = 0,
@@ -1764,7 +1756,7 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn21(
@@ -1780,19 +1772,22 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import React44, { useRef as useRef11 } from "react";
+import { createCalendar } from "@internationalized/date";
+import { useRef as useRef11 } from "react";
+import { useDateField } from "@react-aria/datepicker";
+import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useLocale } from "@react-aria/i18n";
+import { useHover as useHover4 } from "@react-aria/interactions";
+import { mergeProps as mergeProps8 } from "@react-aria/utils";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { useDateField } from "@react-aria/datepicker";
-import { createCalendar } from "@internationalized/date";
 import { cn as cn23, useClassNames as useClassNames21, useStateProps as useStateProps8 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
-import React43, { useRef as useRef10 } from "react";
-import { cn as cn22, useStateProps as useStateProps7 } from "@marigold/system";
+import { useRef as useRef10 } from "react";
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
+import { cn as cn22, useStateProps as useStateProps7 } from "@marigold/system";
 var DateSegment = ({
   className,
   segment,
@@ -1810,7 +1805,7 @@ var DateSegment = ({
     focusVisible: isFocused
   });
   const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...mergeProps7(segmentProps, stateProps, focusProps),
@@ -1826,7 +1821,7 @@ var DateSegment = ({
         minWidth: maxValue != null ? String(maxValue).length + "ch" : void 0
       }
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React.createElement(
       "span",
       {
         "aria-hidden": "true",
@@ -1837,14 +1832,11 @@ var DateSegment = ({
       },
       isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
     ),
-    /* @__PURE__ */ React43.createElement("span", null, isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text)
+    /* @__PURE__ */ React.createElement("span", null, isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text)
   );
 };
 
 // src/DateField/DateField.tsx
-import { mergeProps as mergeProps8 } from "@react-aria/utils";
-import { useHover as useHover4 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 var DateField = ({
   disabled,
   readOnly,
@@ -1894,7 +1886,7 @@ var DateField = ({
     required,
     focus: isFocused || isPressed
   });
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       error,
@@ -1910,7 +1902,7 @@ var DateField = ({
       size,
       width
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         ...mergeProps8(fieldProps, focusProps, stateProps, hoverProps),
@@ -1922,9 +1914,9 @@ var DateField = ({
         "data-testid": "date-field",
         ref: triggerRef
       },
-      /* @__PURE__ */ React44.createElement("div", { ref, className: "flex basis-full items-center" }, state.segments.map((segment, i) => {
+      /* @__PURE__ */ React.createElement("div", { ref, className: "flex basis-full items-center" }, state.segments.map((segment, i) => {
         var _a;
-        return /* @__PURE__ */ React44.createElement(
+        return /* @__PURE__ */ React.createElement(
           DateSegment,
           {
             className: classNames2.segment,
@@ -1935,7 +1927,7 @@ var DateField = ({
           }
         );
       })),
-      action ? action : /* @__PURE__ */ React44.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React44.createElement(
+      action ? action : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement(
         "svg",
         {
           "data-testid": "action",
@@ -1944,34 +1936,36 @@ var DateField = ({
           width: 24,
           height: 24
         },
-        /* @__PURE__ */ React44.createElement("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+        /* @__PURE__ */ React.createElement("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
       ))
     )
   );
 };
 
 // src/Calendar/Calendar.tsx
-import React50, { useRef as useRef14 } from "react";
-import { useCalendarState } from "@react-stately/calendar";
+import { createCalendar as createCalendar2 } from "@internationalized/date";
+import { useRef as useRef14 } from "react";
 import {
   useCalendar
 } from "@react-aria/calendar";
 import { useLocale as useLocale3 } from "@react-aria/i18n";
-import { createCalendar as createCalendar2 } from "@internationalized/date";
+import { useCalendarState } from "@react-stately/calendar";
+import { ChevronLeft, ChevronRight } from "@marigold/icons";
+import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps11 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
-import React46 from "react";
+import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
 import { useMemo } from "react";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useLocale as useLocale2 } from "@react-aria/i18n";
-import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
 
 // src/Calendar/CalendarCell.tsx
-import React45, { useRef as useRef12 } from "react";
+import { useRef as useRef12 } from "react";
 import { useCalendarCell } from "@react-aria/calendar";
+import { useHover as useHover5 } from "@react-aria/interactions";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { cn as cn24, useClassNames as useClassNames22, useStateProps as useStateProps9 } from "@marigold/system";
-import { useHover as useHover5 } from "@react-aria/interactions";
 var CalendarCell = (props) => {
   const ref = useRef12(null);
   const { state } = props;
@@ -1988,7 +1982,7 @@ var CalendarCell = (props) => {
     hover: isHovered,
     selected: cellProps["aria-selected"]
   });
-  return /* @__PURE__ */ React45.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn24(
@@ -2004,7 +1998,6 @@ var CalendarCell = (props) => {
 };
 
 // src/Calendar/CalendarGrid.tsx
-import { useDateFormatter } from "@react-aria/i18n";
 var CalendarGrid = ({ state, ...props }) => {
   const { locale } = useLocale2();
   const { gridProps, headerProps } = useCalendarGrid(props, state);
@@ -2024,37 +2017,32 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React.createElement(
     "table",
     {
       className: "w-full border-spacing-[6px]",
       ...gridProps,
       cellPadding: "8"
     },
-    /* @__PURE__ */ React46.createElement("thead", { ...headerProps }, /* @__PURE__ */ React46.createElement("tr", null, weekDays.map((day, index) => /* @__PURE__ */ React46.createElement("th", { style: { fontWeight: "bolder" }, key: index }, day.substring(0, 2))))),
-    /* @__PURE__ */ React46.createElement("tbody", null, [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ React46.createElement("tr", { key: weekIndex }, state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React.createElement("thead", { ...headerProps }, /* @__PURE__ */ React.createElement("tr", null, weekDays.map((day, index) => /* @__PURE__ */ React.createElement("th", { style: { fontWeight: "bolder" }, key: index }, day.substring(0, 2))))),
+    /* @__PURE__ */ React.createElement("tbody", null, [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ React.createElement("tr", { key: weekIndex }, state.getDatesInWeek(weekIndex).map(
+      (date, i) => date ? /* @__PURE__ */ React.createElement(
         CalendarCell,
         {
           key: i,
           date,
           state
         }
-      ) : /* @__PURE__ */ React46.createElement("td", { key: i })
+      ) : /* @__PURE__ */ React.createElement("td", { key: i })
     ))))
   );
 };
 
-// src/Calendar/Calendar.tsx
-import { ChevronRight, ChevronLeft } from "@marigold/icons";
-import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps11 } from "@marigold/system";
-
 // src/Calendar/MonthDropdown.tsx
-import React48 from "react";
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
 
 // src/Select/Select.tsx
-import React47, {
+import {
   forwardRef as forwardRef10,
   useRef as useRef13
 } from "react";
@@ -2062,9 +2050,9 @@ import { useButton as useButton6 } from "@react-aria/button";
 import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 import { useLocalizedStringFormatter } from "@react-aria/i18n";
 import { HiddenSelect, useSelect } from "@react-aria/select";
-import { useSelectState } from "@react-stately/select";
-import { Item as Item4, Section } from "@react-stately/collections";
 import { mergeProps as mergeProps10, useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { Item as Item4, Section } from "@react-stately/collections";
+import { useSelectState } from "@react-stately/select";
 import {
   cn as cn25,
   useClassNames as useClassNames23,
@@ -2130,7 +2118,7 @@ var Select = forwardRef10(
       expanded: state.isOpen,
       required
     });
-    return /* @__PURE__ */ React47.createElement(
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         variant,
@@ -2146,7 +2134,7 @@ var Select = forwardRef10(
         stateProps,
         disabled
       },
-      /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React.createElement(
         HiddenSelect,
         {
           state,
@@ -2156,7 +2144,7 @@ var Select = forwardRef10(
           isDisabled: disabled
         }
       ),
-      /* @__PURE__ */ React47.createElement(
+      /* @__PURE__ */ React.createElement(
         "button",
         {
           className: cn25(
@@ -2167,10 +2155,10 @@ var Select = forwardRef10(
           ...mergeProps10(buttonProps, focusProps),
           ...stateProps
         },
-        /* @__PURE__ */ React47.createElement("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder),
-        /* @__PURE__ */ React47.createElement(ChevronDown, { className: "h-4 w-4" })
+        /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder),
+        /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4" })
       ),
-      isSmallScreen ? /* @__PURE__ */ React47.createElement(Tray, { state }, /* @__PURE__ */ React47.createElement(
+      isSmallScreen ? /* @__PURE__ */ React.createElement(Tray, { state }, /* @__PURE__ */ React.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2179,7 +2167,7 @@ var Select = forwardRef10(
           size,
           ...menuProps
         }
-      )) : /* @__PURE__ */ React47.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React47.createElement(
+      )) : /* @__PURE__ */ React.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2212,7 +2200,7 @@ var MonthDropdown = ({ state }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React.createElement(
     Select,
     {
       "aria-label": "Month",
@@ -2221,13 +2209,12 @@ var MonthDropdown = ({ state }) => {
       "data-testid": "month",
       disabled: state.isDisabled
     },
-    months.map((month, i) => /* @__PURE__ */ React48.createElement(Select.Option, { key: i + 1 }, month.substring(0, 3)))
+    months.map((month, i) => /* @__PURE__ */ React.createElement(Select.Option, { key: i + 1 }, month.substring(0, 3)))
   );
 };
 var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
-import React49 from "react";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
 var YearDropdown = ({ state }) => {
   const years = [];
@@ -2247,7 +2234,7 @@ var YearDropdown = ({ state }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React.createElement(
     Select,
     {
       "aria-label": "Year",
@@ -2256,7 +2243,7 @@ var YearDropdown = ({ state }) => {
       "data-testid": "year",
       disabled: state.isDisabled
     },
-    years.map((year, i) => /* @__PURE__ */ React49.createElement(Select.Option, { key: i }, year.formatted))
+    years.map((year, i) => /* @__PURE__ */ React.createElement(Select.Option, { key: i }, year.formatted))
   );
 };
 var YearDropdown_default = YearDropdown;
@@ -2285,13 +2272,22 @@ var Calendar = ({
     props,
     state
   );
-  const { isDisabled: prevIsDisabled, ...prevPropsRest } = prevButtonProps;
-  const { isDisabled: nextIsDisabled, ...nextPropsRest } = nextButtonProps;
+  const {
+    isDisabled: prevIsDisabled,
+    onFocusChange: prevFocusChange,
+    ...prevPropsRest
+  } = prevButtonProps;
+  const {
+    isDisabled: nextIsDisabled,
+    onFocusChange: nextFocusChange,
+    ...nextPropsRest
+  } = nextButtonProps;
   const calendarState = useStateProps11({
-    disabled: state.isDisabled
+    disabled: state.isDisabled,
+    focusVisible: state.isFocused
   });
   const classNames2 = useClassNames24({ component: "Calendar" });
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       tabIndex: -1,
@@ -2303,33 +2299,33 @@ var Calendar = ({
       ...calendarState,
       ref
     },
-    /* @__PURE__ */ React50.createElement("div", { className: "mb-4 flex items-center gap-[60px]" }, /* @__PURE__ */ React50.createElement("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex" }, /* @__PURE__ */ React50.createElement(MonthDropdown_default, { state }), /* @__PURE__ */ React50.createElement(YearDropdown_default, { state })), /* @__PURE__ */ React50.createElement("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1" }, /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center gap-[60px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex" }, /* @__PURE__ */ React.createElement(MonthDropdown_default, { state }), /* @__PURE__ */ React.createElement(YearDropdown_default, { state })), /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1" }, /* @__PURE__ */ React.createElement(
       Button,
       {
         className: classNames2.calendarControllers,
         ...prevPropsRest,
         disabled: prevIsDisabled
       },
-      /* @__PURE__ */ React50.createElement(ChevronLeft, null)
-    ), /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React.createElement(ChevronLeft, null)
+    ), /* @__PURE__ */ React.createElement(
       Button,
       {
         className: classNames2.calendarControllers,
         ...nextPropsRest,
         disabled: nextIsDisabled
       },
-      /* @__PURE__ */ React50.createElement(ChevronRight, null)
+      /* @__PURE__ */ React.createElement(ChevronRight, null)
     ))),
-    /* @__PURE__ */ React50.createElement(CalendarGrid, { state })
+    /* @__PURE__ */ React.createElement(CalendarGrid, { state })
   );
 };
 
 // src/DatePicker/DatePicker.tsx
-import React51, { useRef as useRef15 } from "react";
-import { useDatePickerState } from "@react-stately/datepicker";
+import { useRef as useRef15 } from "react";
 import { useDatePicker } from "@react-aria/datepicker";
-import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps12 } from "@marigold/system";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { useDatePickerState } from "@react-stately/datepicker";
+import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps12 } from "@marigold/system";
 var DatePicker = ({
   disabled,
   required,
@@ -2367,7 +2363,7 @@ var DatePicker = ({
     size,
     variant
   });
-  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement("div", { className: "flex w-full min-w-[300px]", ...groupProps }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex w-full min-w-[300px]", ...groupProps }, /* @__PURE__ */ React.createElement(
     DateField,
     {
       ...fieldProps,
@@ -2379,14 +2375,14 @@ var DatePicker = ({
       error,
       description: !state.isOpen && description,
       triggerRef: ref,
-      action: /* @__PURE__ */ React51.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React51.createElement(
+      action: /* @__PURE__ */ React.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React.createElement(
         Button,
         {
           ...mergeProps11(buttonProps, stateProps),
           className: cn27("absolute right-0 top-0", classNames2.button),
           disabled: isDisabled
         },
-        /* @__PURE__ */ React51.createElement(
+        /* @__PURE__ */ React.createElement(
           "svg",
           {
             width: "24",
@@ -2394,27 +2390,26 @@ var DatePicker = ({
             viewBox: "0 0 24 24",
             fill: "currentColor"
           },
-          /* @__PURE__ */ React51.createElement("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+          /* @__PURE__ */ React.createElement("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
         )
       ))
     }
-  )), state.isOpen && /* @__PURE__ */ React51.createElement(Popover, { triggerRef: ref, state }, /* @__PURE__ */ React51.createElement(Calendar, { disabled, ...calendarProps })));
+  )), state.isOpen && /* @__PURE__ */ React.createElement(Popover, { triggerRef: ref, state }, /* @__PURE__ */ React.createElement(Calendar, { disabled, ...calendarProps })));
 };
 
 // src/Inset/Inset.tsx
-import React52 from "react";
 import {
+  cn as cn28,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
-  paddingSpaceY as paddingSpaceY2,
-  cn as cn28
+  paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
 var Inset = ({
   space = 0,
   spaceX = 0,
   spaceY = 0,
   children
-}) => /* @__PURE__ */ React52.createElement(
+}) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn28(
@@ -2426,10 +2421,10 @@ var Inset = ({
 );
 
 // src/Link/Link.tsx
-import React53, { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { useLink } from "@react-aria/link";
-import { useClassNames as useClassNames26 } from "@marigold/system";
 import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { useClassNames as useClassNames26 } from "@marigold/system";
 var Link = forwardRef11(
   ({
     as = "a",
@@ -2458,7 +2453,7 @@ var Link = forwardRef11(
       size,
       className
     });
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React.createElement(
       Component,
       {
         ...props,
@@ -2473,7 +2468,6 @@ var Link = forwardRef11(
 );
 
 // src/List/List.tsx
-import React55 from "react";
 import { useClassNames as useClassNames27 } from "@marigold/system";
 
 // src/List/Context.ts
@@ -2482,10 +2476,9 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import React54 from "react";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ React54.createElement("li", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React.createElement("li", { ...props, className: classNames2 }, children);
 };
 
 // src/List/List.tsx
@@ -2498,16 +2491,16 @@ var List = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames27({ component: "List", variant, size });
-  return /* @__PURE__ */ React55.createElement(Component, { ...props, className: classNames2[as] }, /* @__PURE__ */ React55.createElement(ListContext.Provider, { value: { classNames: classNames2.item } }, children));
+  return /* @__PURE__ */ React.createElement(Component, { ...props, className: classNames2[as] }, /* @__PURE__ */ React.createElement(ListContext.Provider, { value: { classNames: classNames2.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React59, { useRef as useRef18 } from "react";
+import { useRef as useRef18 } from "react";
 import { useMenu } from "@react-aria/menu";
+import { useSyncRef } from "@react-aria/utils";
 import { Item as Item5, Section as Section2 } from "@react-stately/collections";
 import { useTreeState as useTreeState2 } from "@react-stately/tree";
-import { useSyncRef } from "@react-aria/utils";
 import { useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/Menu/Context.ts
@@ -2518,52 +2511,8 @@ import {
 var MenuContext = createContext6({});
 var useMenuContext = () => useContext6(MenuContext);
 
-// src/Menu/MenuTrigger.tsx
-import React56, { useRef as useRef16 } from "react";
-import { useMenuTriggerState } from "@react-stately/menu";
-import { PressResponder as PressResponder2 } from "@react-aria/interactions";
-import { useMenuTrigger } from "@react-aria/menu";
-import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
-import { useSmallScreen as useSmallScreen2 } from "@marigold/system";
-var MenuTrigger = ({
-  disabled,
-  open,
-  onOpenChange,
-  children
-}) => {
-  const [menuTrigger, menu] = React56.Children.toArray(children);
-  const menuTriggerRef = useRef16(null);
-  const menuRef = useObjectRef8();
-  const state = useMenuTriggerState({
-    isOpen: open,
-    onOpenChange
-  });
-  const { menuTriggerProps, menuProps } = useMenuTrigger(
-    { trigger: "press", isDisabled: disabled },
-    state,
-    menuTriggerRef
-  );
-  const menuContext = {
-    ...menuProps,
-    ref: menuRef,
-    open: state.isOpen,
-    onClose: state.close,
-    autoFocus: state.focusStrategy
-  };
-  const isSmallScreen = useSmallScreen2();
-  return /* @__PURE__ */ React56.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React56.createElement(
-    PressResponder2,
-    {
-      ...menuTriggerProps,
-      ref: menuTriggerRef,
-      isPressed: state.isOpen
-    },
-    menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ React56.createElement(Tray, { state }, menu) : /* @__PURE__ */ React56.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
-};
-
 // src/Menu/MenuItem.tsx
-import React57, { useRef as useRef17 } from "react";
+import { useRef as useRef16 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
@@ -2574,7 +2523,7 @@ var MenuItem = ({
   onAction,
   className
 }) => {
-  const ref = useRef17(null);
+  const ref = useRef16(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = useMenuItem(
     {
@@ -2590,7 +2539,7 @@ var MenuItem = ({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React.createElement(
     "li",
     {
       ref,
@@ -2607,7 +2556,6 @@ var MenuItem = ({
 };
 
 // src/Menu/MenuSection.tsx
-import React58 from "react";
 import { useMenuSection } from "@react-aria/menu";
 import { useClassNames as useClassNames28 } from "@marigold/system";
 var MenuSection = ({ onAction, item, state }) => {
@@ -2616,7 +2564,7 @@ var MenuSection = ({ onAction, item, state }) => {
     "aria-label": item["aria-label"]
   });
   const className = useClassNames28({ component: "Menu" });
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ React58.createElement("li", null, /* @__PURE__ */ React58.createElement(Divider, { variant: "section" })), /* @__PURE__ */ React58.createElement("ul", { ...itemProps }, item.rendered && /* @__PURE__ */ React58.createElement("span", { ...headingProps, className: className.section }, item.rendered), /* @__PURE__ */ React58.createElement("li", { ...groupProps, className: "pb-1" }, [...item.props.children].map((node) => /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(Divider, { variant: "section" })), /* @__PURE__ */ React.createElement("li", { ...itemProps }, item.rendered && /* @__PURE__ */ React.createElement("span", { ...headingProps, className: className.section }, item.rendered), /* @__PURE__ */ React.createElement("ul", { ...groupProps, className: "pb-1" }, [...item.props.children].map((node) => /* @__PURE__ */ React.createElement(
     MenuItem,
     {
       key: node.key,
@@ -2629,6 +2577,50 @@ var MenuSection = ({ onAction, item, state }) => {
 };
 var MenuSection_default = MenuSection;
 
+// src/Menu/MenuTrigger.tsx
+import { Children as Children6, useRef as useRef17 } from "react";
+import { PressResponder as PressResponder2 } from "@react-aria/interactions";
+import { useMenuTrigger } from "@react-aria/menu";
+import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useSmallScreen as useSmallScreen2 } from "@marigold/system";
+var MenuTrigger = ({
+  disabled,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [menuTrigger, menu] = Children6.toArray(children);
+  const menuTriggerRef = useRef17(null);
+  const menuRef = useObjectRef8();
+  const state = useMenuTriggerState({
+    isOpen: open,
+    onOpenChange
+  });
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    { trigger: "press", isDisabled: disabled },
+    state,
+    menuTriggerRef
+  );
+  const menuContext = {
+    ...menuProps,
+    ref: menuRef,
+    open: state.isOpen,
+    onClose: state.close,
+    autoFocus: state.focusStrategy
+  };
+  const isSmallScreen = useSmallScreen2();
+  return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React.createElement(
+    PressResponder2,
+    {
+      ...menuTriggerProps,
+      ref: menuTriggerRef,
+      isPressed: state.isOpen
+    },
+    menuTrigger
+  ), isSmallScreen ? /* @__PURE__ */ React.createElement(Tray, { state }, menu) : /* @__PURE__ */ React.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+};
+
 // src/Menu/Menu.tsx
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
@@ -2638,9 +2630,9 @@ var Menu = ({ variant, size, ...props }) => {
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
   const classNames2 = useClassNames29({ component: "Menu", variant, size });
-  return /* @__PURE__ */ React59.createElement("ul", { ref, className: classNames2.container, ...menuProps }, [...state.collection].map((item) => {
+  return /* @__PURE__ */ React.createElement("ul", { ref, className: classNames2.container, ...menuProps }, [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ React59.createElement(
+      return /* @__PURE__ */ React.createElement(
         MenuSection_default,
         {
           key: item.key,
@@ -2650,7 +2642,7 @@ var Menu = ({ variant, size, ...props }) => {
         }
       );
     }
-    return /* @__PURE__ */ React59.createElement(
+    return /* @__PURE__ */ React.createElement(
       MenuItem,
       {
         key: item.key,
@@ -2667,24 +2659,22 @@ Menu.Item = Item5;
 Menu.Section = Section2;
 
 // src/Menu/ActionMenu.tsx
-import React60 from "react";
 import { SVG as SVG5 } from "@marigold/system";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ React60.createElement(Menu.Trigger, null, /* @__PURE__ */ React60.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React60.createElement(SVG5, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React60.createElement("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__ */ React60.createElement(Menu, { ...props }));
+  return /* @__PURE__ */ React.createElement(Menu.Trigger, null, /* @__PURE__ */ React.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React.createElement(SVG5, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("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__ */ React.createElement(Menu, { ...props }));
 };
 
 // src/Message/Message.tsx
-import React61 from "react";
 import { cn as cn29, useClassNames as useClassNames30 } from "@marigold/system";
 var icons = {
-  info: () => /* @__PURE__ */ React61.createElement(
+  info: () => /* @__PURE__ */ React.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2693,14 +2683,14 @@ var icons = {
       }
     )
   ),
-  warning: () => /* @__PURE__ */ React61.createElement(
+  warning: () => /* @__PURE__ */ React.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2709,14 +2699,14 @@ var icons = {
       }
     )
   ),
-  error: () => /* @__PURE__ */ React61.createElement(
+  error: () => /* @__PURE__ */ React.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2735,7 +2725,7 @@ var Message = ({
 }) => {
   const classNames2 = useClassNames30({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn29(
@@ -2744,35 +2734,35 @@ var Message = ({
       ),
       ...props
     },
-    /* @__PURE__ */ React61.createElement("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ React61.createElement(Icon3, null)),
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ React.createElement(Icon3, null)),
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         className: cn29("col-start-2 row-start-1 self-center", classNames2.title)
       },
       messageTitle
     ),
-    /* @__PURE__ */ React61.createElement("div", { className: cn29("col-start-2", classNames2.content) }, children)
+    /* @__PURE__ */ React.createElement("div", { className: cn29("col-start-2", classNames2.content) }, children)
   );
 };
 
 // src/NumberField/NumberField.tsx
-import React63, { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
-import { useHover as useHover7 } from "@react-aria/interactions";
 import { useLocale as useLocale4 } from "@react-aria/i18n";
+import { useHover as useHover7 } from "@react-aria/interactions";
 import { useNumberField } from "@react-aria/numberfield";
 import { mergeProps as mergeProps14, useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import { cn as cn31, useClassNames as useClassNames31, useStateProps as useStateProps15 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import React62, { useRef as useRef19 } from "react";
+import { useRef as useRef19 } from "react";
 import { useButton as useButton7 } from "@react-aria/button";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
 import { cn as cn30, useStateProps as useStateProps14 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React62.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React62.createElement(
+var Plus = () => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2780,7 +2770,7 @@ var Plus = () => /* @__PURE__ */ React62.createElement("svg", { width: 16, heigh
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ));
-var Minus = () => /* @__PURE__ */ React62.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React62.createElement(
+var Minus = () => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2805,7 +2795,7 @@ var StepButton = ({
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn30(
@@ -2818,7 +2808,7 @@ var StepButton = ({
       ...mergeProps13(buttonProps, hoverProps),
       ...stateProps
     },
-    /* @__PURE__ */ React62.createElement(Icon3, null)
+    /* @__PURE__ */ React.createElement(Icon3, null)
   );
 };
 
@@ -2874,7 +2864,7 @@ var NumberField = forwardRef12(
       size,
       variant
     });
-    return /* @__PURE__ */ React63.createElement(
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         label: props.label,
@@ -2889,7 +2879,7 @@ var NumberField = forwardRef12(
         size,
         width
       },
-      /* @__PURE__ */ React63.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           "data-group": true,
@@ -2898,7 +2888,7 @@ var NumberField = forwardRef12(
           ...mergeProps14(groupProps, focusProps, hoverProps),
           ...stateProps
         },
-        showStepper && /* @__PURE__ */ React63.createElement(
+        showStepper && /* @__PURE__ */ React.createElement(
           StepButton,
           {
             className: classNames2.stepper,
@@ -2906,7 +2896,7 @@ var NumberField = forwardRef12(
             ...decrementButtonProps
           }
         ),
-        /* @__PURE__ */ React63.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React63.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement(
           Input,
           {
             ref: inputRef,
@@ -2919,7 +2909,7 @@ var NumberField = forwardRef12(
             ...stateProps
           }
         )),
-        showStepper && /* @__PURE__ */ React63.createElement(
+        showStepper && /* @__PURE__ */ React.createElement(
           StepButton,
           {
             className: classNames2.stepper,
@@ -2936,7 +2926,6 @@ var NumberField = forwardRef12(
 import { useTheme as useTheme4, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 
 // src/Provider/MarigoldProvider.tsx
-import React64 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   ThemeProvider,
@@ -2949,15 +2938,15 @@ function MarigoldProvider({
 }) {
   const outerTheme = useTheme3();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ React64.createElement(ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ React64.createElement(OverlayProvider, null, children) : children);
+  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ React.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React66, {
+import {
   forwardRef as forwardRef13
 } from "react";
-import { useHover as useHover8 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
+import { useHover as useHover8 } from "@react-aria/interactions";
 import { useRadio } from "@react-aria/radio";
 import { mergeProps as mergeProps15, useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
@@ -2974,7 +2963,6 @@ var RadioGroupContext = createContext7(
 var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React65 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import { cn as cn32, useStateProps as useStateProps16 } from "@marigold/system";
@@ -3003,7 +2991,7 @@ var RadioGroup = ({
     error,
     required
   });
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       width,
@@ -3018,7 +3006,7 @@ var RadioGroup = ({
       stateProps,
       ...radioGroupProps
     },
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         role: "presentation",
@@ -3028,14 +3016,14 @@ var RadioGroup = ({
           orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
         )
       },
-      /* @__PURE__ */ React65.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
+      /* @__PURE__ */ React.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
     )
   );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React66.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React66.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React66.createElement(
+var Dot = () => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn33(
@@ -3045,7 +3033,7 @@ var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React66.create
     "aria-hidden": "true",
     ...props
   },
-  checked ? /* @__PURE__ */ React66.createElement(Dot, null) : null
+  checked ? /* @__PURE__ */ React.createElement(Dot, null) : null
 );
 var Radio = forwardRef13(
   ({ width, disabled, ...props }, ref) => {
@@ -3077,7 +3065,7 @@ var Radio = forwardRef13(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React66.createElement(
+    return /* @__PURE__ */ React.createElement(
       "label",
       {
         className: cn33(
@@ -3088,7 +3076,7 @@ var Radio = forwardRef13(
         ),
         ...mergeProps15(hoverProps, stateProps)
       },
-      /* @__PURE__ */ React66.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ref: inputRef,
@@ -3099,23 +3087,24 @@ var Radio = forwardRef13(
           ...mergeProps15(inputProps, focusProps)
         }
       ),
-      /* @__PURE__ */ React66.createElement(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
-      /* @__PURE__ */ React66.createElement("div", { className: classNames2.label }, props.children)
+      /* @__PURE__ */ React.createElement(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
+      /* @__PURE__ */ React.createElement("div", { className: classNames2.label }, props.children)
     );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Slider/Slider.tsx
-import React68, { forwardRef as forwardRef14 } from "react";
-import { useSlider } from "@react-aria/slider";
-import { useSliderState } from "@react-stately/slider";
+import { forwardRef as forwardRef14 } from "react";
 import { useNumberFormatter } from "@react-aria/i18n";
+import { useSlider } from "@react-aria/slider";
 import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
+import { useSliderState } from "@react-stately/slider";
 import { cn as cn35, createVar as createVar10, useClassNames as useClassNames33, useStateProps as useStateProps19 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React67, { useEffect } from "react";
+import { useEffect as useEffect2, useRef as useRef20 } from "react";
+import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useSliderThumb } from "@react-aria/slider";
 import { mergeProps as mergeProps16 } from "@react-aria/utils";
 import { cn as cn34, useStateProps as useStateProps18 } from "@marigold/system";
@@ -3124,10 +3113,9 @@ import { cn as cn34, useStateProps as useStateProps18 } from "@marigold/system";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/Slider/Thumb.tsx
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 var Thumb = ({ state, trackRef, className, ...props }) => {
   const { disabled } = props;
-  const inputRef = React67.useRef(null);
+  const inputRef = useRef20(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing11();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
   const stateProps = useStateProps18({
@@ -3143,10 +3131,10 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
     },
     state
   );
-  useEffect(() => {
+  useEffect2(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React67.createElement("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ React67.createElement(VisuallyHidden, null, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ React.createElement(VisuallyHidden, null, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "range",
@@ -3179,14 +3167,14 @@ var Slider = forwardRef14(
     const sliderState = useStateProps19({
       disabled: props.disabled
     });
-    return /* @__PURE__ */ React68.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "flex w-[var(--slideWidth)] touch-none flex-col",
         style: createVar10({ slideWidth: width }),
         ...groupProps
       },
-      /* @__PURE__ */ React68.createElement("div", { className: "flex self-stretch" }, props.children && /* @__PURE__ */ React68.createElement("label", { className: classNames2.label, ...labelProps }, props.children), /* @__PURE__ */ React68.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "flex self-stretch" }, props.children && /* @__PURE__ */ React.createElement("label", { className: classNames2.label, ...labelProps }, props.children), /* @__PURE__ */ React.createElement(
         "output",
         {
           className: cn35(
@@ -3197,7 +3185,7 @@ var Slider = forwardRef14(
         },
         state.getThumbValueLabel(0)
       )),
-      /* @__PURE__ */ React68.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           className: "h-8 w-full cursor-pointer data-[disabled]:cursor-not-allowed",
@@ -3205,7 +3193,7 @@ var Slider = forwardRef14(
           ...sliderState,
           ref: trackRef
         },
-        /* @__PURE__ */ React68.createElement(
+        /* @__PURE__ */ React.createElement(
           "div",
           {
             className: cn35(
@@ -3214,7 +3202,7 @@ var Slider = forwardRef14(
             )
           }
         ),
-        /* @__PURE__ */ React68.createElement(
+        /* @__PURE__ */ React.createElement(
           Thumb,
           {
             state,
@@ -3229,15 +3217,13 @@ var Slider = forwardRef14(
 );
 
 // src/Split/Split.tsx
-import React69 from "react";
-var Split = (props) => /* @__PURE__ */ React69.createElement("div", { ...props, role: "separator", className: "grow" });
+var Split = (props) => /* @__PURE__ */ React.createElement("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import React70 from "react";
 import {
+  alignment as alignment3,
   cn as cn36,
-  gapSpace as gapSpace6,
-  alignment as alignment3
+  gapSpace as gapSpace6
 } from "@marigold/system";
 var Stack = ({
   children,
@@ -3249,7 +3235,7 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn36(
@@ -3266,12 +3252,12 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import React71, { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
 import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
-import { cn as cn37, createVar as createVar11, useStateProps as useStateProps20, useClassNames as useClassNames34 } from "@marigold/system";
+import { cn as cn37, createVar as createVar11, useClassNames as useClassNames34, useStateProps as useStateProps20 } from "@marigold/system";
 var Switch = forwardRef15(
   ({
     variant,
@@ -3301,7 +3287,7 @@ var Switch = forwardRef15(
       focus: isFocusVisible
     });
     const classNames2 = useClassNames34({ component: "Switch", size, variant });
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React.createElement(
       "label",
       {
         className: cn37(
@@ -3312,7 +3298,7 @@ var Switch = forwardRef15(
         style: createVar11({ switchWidth: width }),
         ...stateProps
       },
-      /* @__PURE__ */ React71.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ref: inputRef,
@@ -3321,8 +3307,8 @@ var Switch = forwardRef15(
           ...focusProps
         }
       ),
-      props.children && /* @__PURE__ */ React71.createElement(React71.Fragment, null, props.children),
-      /* @__PURE__ */ React71.createElement(
+      props.children && /* @__PURE__ */ React.createElement(React.Fragment, null, props.children),
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           className: cn37(
@@ -3330,7 +3316,7 @@ var Switch = forwardRef15(
             classNames2.track
           )
         },
-        /* @__PURE__ */ React71.createElement(
+        /* @__PURE__ */ React.createElement(
           "div",
           {
             className: cn37(
@@ -3349,7 +3335,7 @@ var Switch = forwardRef15(
 );
 
 // src/Table/Table.tsx
-import React80, { useRef as useRef26 } from "react";
+import { useRef as useRef27 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
@@ -3367,21 +3353,20 @@ var TableContext = createContext8({});
 var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React72 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React72.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-import React73, { useRef as useRef20 } from "react";
-import { useTableCell } from "@react-aria/table";
+import { useRef as useRef21 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
+import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps17 } from "@react-aria/utils";
 import { useStateProps as useStateProps21 } from "@marigold/system";
 var TableCell = ({ cell }) => {
-  const ref = useRef20(null);
+  const ref = useRef21(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3402,7 +3387,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing13();
   const stateProps = useStateProps21({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React.createElement(
     "td",
     {
       ref,
@@ -3415,9 +3400,9 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React74, { useRef as useRef21 } from "react";
-import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
+import { useRef as useRef22 } from "react";
 import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
+import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps18 } from "@react-aria/utils";
 import { cn as cn38, useStateProps as useStateProps22 } from "@marigold/system";
 
@@ -3443,7 +3428,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef21(null);
+  const ref = useRef22(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3458,7 +3443,7 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing14();
   const stateProps = useStateProps22({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React.createElement(
     "td",
     {
       ref,
@@ -3466,41 +3451,25 @@ var TableCheckboxCell = ({ cell }) => {
       ...mergeProps18(gridCellProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React74.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import React75, { useRef as useRef22 } from "react";
+import { useRef as useRef23 } from "react";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps19 } from "@react-aria/utils";
+import { SortDown, SortUp } from "@marigold/icons";
 import { cn as cn39, useStateProps as useStateProps23 } from "@marigold/system";
 import { width as twWidth2 } from "@marigold/system";
-var SortIndicator = ({
-  direction = "ascending",
-  visible
-}) => {
-  return /* @__PURE__ */ React75.createElement(
-    "span",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn39(
-        "ps-[0.5ch] text-current",
-        visible ? "visible" : "invisible"
-      )
-    },
-    direction === "ascending" ? "\u25B2" : "\u25BC"
-  );
-};
 var TableColumnHeader = ({
   column,
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = useRef22(null);
+  const ref = useRef23(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3515,7 +3484,7 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React.createElement(
     "th",
     {
       colSpan: column.colspan,
@@ -3525,43 +3494,36 @@ var TableColumnHeader = ({
       ...stateProps
     },
     column.rendered,
-    column.props.allowsSorting && /* @__PURE__ */ React75.createElement(
-      SortIndicator,
-      {
-        direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
-        visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
-      }
-    )
+    column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ React.createElement(SortUp, { className: "inline-block" }) : /* @__PURE__ */ React.createElement(SortDown, { className: "inline-block" }) : /* @__PURE__ */ React.createElement(SortDown, { className: "inline-block" }))
   );
 };
 
 // src/Table/TableHeader.tsx
-import React76 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React76.createElement("thead", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React77, { useRef as useRef23 } from "react";
+import { useRef as useRef24 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef23(null);
+  const ref = useRef24(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React77.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ React.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-import React78, { useRef as useRef24 } from "react";
+import { useRef as useRef25 } from "react";
 import { useFocusRing as useFocusRing16 } from "@react-aria/focus";
 import { useHover as useHover10 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps20 } from "@react-aria/utils";
 import { cn as cn40, useClassNames as useClassNames35, useStateProps as useStateProps24 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
-  const ref = useRef24(null);
+  const ref = useRef25(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
   const classNames2 = useClassNames35({
@@ -3589,7 +3551,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React.createElement(
     "tr",
     {
       ref,
@@ -3607,7 +3569,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React79, { useRef as useRef25 } from "react";
+import { useRef as useRef26 } from "react";
 import { useFocusRing as useFocusRing17 } from "@react-aria/focus";
 import { useHover as useHover11 } from "@react-aria/interactions";
 import {
@@ -3624,7 +3586,7 @@ var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = useRef25(null);
+  const ref = useRef26(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3640,7 +3602,7 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React.createElement(
     "th",
     {
       ref,
@@ -3652,7 +3614,7 @@ var TableSelectAllCell = ({
       ...mergeProps21(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React79.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
@@ -3665,7 +3627,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef26(null);
+  const tableRef = useRef27(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3679,33 +3641,34 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React.createElement(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size }
     },
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React.createElement(
       "table",
       {
         ref: tableRef,
         className: cn42(
+          "group/table",
           "border-collapse overflow-auto whitespace-nowrap",
           stretch ? "table w-full" : "block",
           classNames2.table
         ),
         ...gridProps
       },
-      /* @__PURE__ */ React80.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React80.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...collection.getChildren(headerRow.key)].map(
+      /* @__PURE__ */ React.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...collection.getChildren(headerRow.key)].map(
         (column) => {
           var _a, _b, _c;
-          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React80.createElement(
+          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React.createElement(
             TableSelectAllCell,
             {
               width: (_b = column.props) == null ? void 0 : _b.width,
               key: column.key,
               column
             }
-          ) : /* @__PURE__ */ React80.createElement(
+          ) : /* @__PURE__ */ React.createElement(
             TableColumnHeader,
             {
               width: (_c = column.props) == null ? void 0 : _c.width,
@@ -3715,11 +3678,11 @@ var Table = ({
           );
         }
       )))),
-      /* @__PURE__ */ React80.createElement(TableBody, null, ...collection.rows.map(
-        (row) => row.type === "item" && /* @__PURE__ */ React80.createElement(TableRow, { key: row.key, row }, [...collection.getChildren(row.key)].map(
+      /* @__PURE__ */ React.createElement(TableBody, null, ...collection.rows.map(
+        (row) => row.type === "item" && /* @__PURE__ */ React.createElement(TableRow, { key: row.key, row }, [...collection.getChildren(row.key)].map(
           (cell) => {
             var _a;
-            return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React80.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React80.createElement(TableCell, { key: cell.key, cell });
+            return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React.createElement(TableCell, { key: cell.key, cell });
           }
         ))
       ))
@@ -3733,7 +3696,6 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React81 from "react";
 import {
   cn as cn43,
   createVar as createVar12,
@@ -3741,10 +3703,10 @@ import {
   fontWeight,
   get as get2,
   textAlign as textAlign2,
-  useClassNames as useClassNames37,
-  useTheme as useTheme5,
   textSize,
-  textStyle
+  textStyle,
+  useClassNames as useClassNames37,
+  useTheme as useTheme5
 } from "@marigold/system";
 var Text = ({
   variant,
@@ -3764,7 +3726,7 @@ var Text = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React.createElement(
     "p",
     {
       ...props,
@@ -3791,9 +3753,9 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import React82, { forwardRef as forwardRef16 } from "react";
-import { useHover as useHover12 } from "@react-aria/interactions";
+import { forwardRef as forwardRef16 } from "react";
 import { useFocusRing as useFocusRing18 } from "@react-aria/focus";
+import { useHover as useHover12 } from "@react-aria/interactions";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
 import { useClassNames as useClassNames38, useStateProps as useStateProps26 } from "@marigold/system";
@@ -3833,7 +3795,7 @@ var TextArea = forwardRef16(
       error
     });
     const classNames2 = useClassNames38({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         label,
@@ -3848,7 +3810,7 @@ var TextArea = forwardRef16(
         size,
         width
       },
-      /* @__PURE__ */ React82.createElement(
+      /* @__PURE__ */ React.createElement(
         "textarea",
         {
           className: classNames2,
@@ -3864,9 +3826,9 @@ var TextArea = forwardRef16(
 );
 
 // src/TextField/TextField.tsx
-import React83, { forwardRef as forwardRef17 } from "react";
-import { useHover as useHover13 } from "@react-aria/interactions";
+import { forwardRef as forwardRef17 } from "react";
 import { useFocusRing as useFocusRing19 } from "@react-aria/focus";
+import { useHover as useHover13 } from "@react-aria/interactions";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { mergeProps as mergeProps22, useObjectRef as useObjectRef14 } from "@react-aria/utils";
 import { useStateProps as useStateProps27 } from "@marigold/system";
@@ -3897,7 +3859,7 @@ var TextField = forwardRef17(
       readOnly,
       required
     });
-    return /* @__PURE__ */ React83.createElement(
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         label,
@@ -3912,7 +3874,7 @@ var TextField = forwardRef17(
         size,
         width
       },
-      /* @__PURE__ */ React83.createElement(
+      /* @__PURE__ */ React.createElement(
         Input,
         {
           ref: inputRef,
@@ -3926,8 +3888,7 @@ var TextField = forwardRef17(
 );
 
 // src/Tiles/Tiles.tsx
-import React84 from "react";
-import { gapSpace as gapSpace7, cn as cn44, createVar as createVar13 } from "@marigold/system";
+import { cn as cn44, createVar as createVar13, gapSpace as gapSpace7 } from "@marigold/system";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3940,7 +3901,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
@@ -3957,7 +3918,6 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import React86 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import { cn as cn45, useClassNames as useClassNames39 } from "@marigold/system";
 
@@ -3967,7 +3927,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React85, { useRef as useRef27 } from "react";
+import { Children as Children7, useRef as useRef28 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -3980,7 +3940,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React85.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = Children7.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3988,8 +3948,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = useRef27(null);
-  const overlayRef = useRef27(null);
+  const tooltipTriggerRef = useRef28(null);
+  const overlayRef = useRef28(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     props,
@@ -4008,7 +3968,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React85.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React.createElement(
     TooltipContext.Provider,
     {
       value: {
@@ -4020,7 +3980,7 @@ var TooltipTrigger = ({
         ...positionProps
       }
     },
-    /* @__PURE__ */ React85.createElement(Overlay, { open: state.isOpen }, tooltip)
+    /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, tooltip)
   ));
 };
 
@@ -4029,7 +3989,7 @@ var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
   const classNames2 = useClassNames39({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...tooltipProps,
@@ -4038,8 +3998,8 @@ var Tooltip = ({ children, variant, size }) => {
       className: cn45("group/tooltip", classNames2.container),
       "data-placement": placement
     },
-    /* @__PURE__ */ React86.createElement("div", null, children),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React.createElement("div", null, children),
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         ...arrowProps,
@@ -4054,23 +4014,23 @@ Tooltip.Trigger = TooltipTrigger;
 import { Item as Item6 } from "@react-stately/collections";
 
 // src/TagGroup/TagGroup.tsx
-import React88, { useRef as useRef28 } from "react";
+import { useRef as useRef29 } from "react";
 import { useTagGroup } from "@react-aria/tag";
 import { useListState } from "@react-stately/list";
 import { useStateProps as useStateProps28 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
-import React87 from "react";
-import { useTag } from "@react-aria/tag";
+import React4 from "react";
 import { useFocusRing as useFocusRing20 } from "@react-aria/focus";
-import { cn as cn46, useClassNames as useClassNames40 } from "@marigold/system";
+import { useTag } from "@react-aria/tag";
 import { mergeProps as mergeProps23 } from "@react-aria/utils";
+import { cn as cn46, useClassNames as useClassNames40 } from "@marigold/system";
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
     item,
     ...rest
   };
-  let ref = React87.useRef(null);
+  let ref = React4.useRef(null);
   let { focusProps } = useFocusRing20({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
     {
@@ -4081,21 +4041,21 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     ref
   );
   const classNames2 = useClassNames40({ component: "Tag", variant, size });
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "span",
     {
       ref,
       ...mergeProps23(rowProps, focusProps),
       className: classNames2.tag
     },
-    /* @__PURE__ */ React87.createElement("div", { ...gridCellProps, className: classNames2.gridCell }, /* @__PURE__ */ React87.createElement("span", null, item.rendered), allowsRemoving && /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React4.createElement("div", { ...gridCellProps, className: classNames2.gridCell }, /* @__PURE__ */ React4.createElement("span", null, item.rendered), allowsRemoving && /* @__PURE__ */ React4.createElement(
       Button,
       {
         ...removeButtonProps,
         className: cn46("flex items-center", classNames2.closeButton),
         role: "button"
       },
-      /* @__PURE__ */ React87.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ React87.createElement("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" }))
+      /* @__PURE__ */ React4.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ React4.createElement("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" }))
     ))
   );
 };
@@ -4113,14 +4073,14 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = useRef28(null);
+  const inputRef = useRef29(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
   const stateProps = useStateProps28({
     error,
     required
   });
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       width,
@@ -4134,14 +4094,14 @@ var TagGroup = ({
       stateProps,
       ...gridProps
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         role: "presentation",
         ref: inputRef,
         className: "flex flex-wrap items-start gap-1"
       },
-      [...state.collection].map((item) => /* @__PURE__ */ React88.createElement(
+      [...state.collection].map((item) => /* @__PURE__ */ React.createElement(
         Tag,
         {
           ...item.props,
@@ -4162,9 +4122,9 @@ var Tag2 = Item6;
 Tag2.Group = TagGroup;
 
 // src/XLoader/XLoader.tsx
+import { forwardRef as forwardRef18 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-import React89, { forwardRef as forwardRef18 } from "react";
-var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement(
+var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React.createElement(
   SVG6,
   {
     id: "XLoader",
@@ -4174,14 +4134,14 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
     ...props,
     ...ref
   },
-  /* @__PURE__ */ React89.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_5_",
       d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4193,13 +4153,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_18_",
       d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4211,13 +4171,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_19_",
       d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4229,13 +4189,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_20_",
       d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4247,13 +4207,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_21_",
       d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4265,13 +4225,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_22_",
       d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4283,13 +4243,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_23_",
       d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4301,13 +4261,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_24_",
       d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4319,13 +4279,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_25_",
       d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4337,13 +4297,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_26_",
       d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4355,13 +4315,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
       }
     )
   ),
-  /* @__PURE__ */ React89.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_27_",
       d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4376,8 +4336,7 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement
 ));
 
 // src/Tabs/Tabs.tsx
-import React92 from "react";
-import { useRef as useRef31 } from "react";
+import { useRef as useRef32 } from "react";
 import { useTabList } from "@react-aria/tabs";
 import { Item as Item7 } from "@react-stately/collections";
 import { useTabListState } from "@react-stately/tabs";
@@ -4389,15 +4348,14 @@ var TabContext = createContext10({});
 var useTabContext = () => useContext10(TabContext);
 
 // src/Tabs/Tab.tsx
-import React90 from "react";
-import { useRef as useRef29 } from "react";
-import { cn as cn47, useStateProps as useStateProps29 } from "@marigold/system";
-import { useTab } from "@react-aria/tabs";
+import { useRef as useRef30 } from "react";
 import { useFocus, useHover as useHover14 } from "@react-aria/interactions";
+import { useTab } from "@react-aria/tabs";
 import { mergeProps as mergeProps24 } from "@react-aria/utils";
+import { cn as cn47, useStateProps as useStateProps29 } from "@marigold/system";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = useRef29(null);
+  const ref = useRef30(null);
   const { tabProps, isSelected } = useTab({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
   const { hoverProps, isHovered } = useHover14({
@@ -4406,7 +4364,7 @@ var Tab = ({ item, state }) => {
   const { focusProps } = useFocus({});
   const stateProps = useStateProps29({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn47(
@@ -4421,17 +4379,16 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-import React91 from "react";
-import { useRef as useRef30 } from "react";
+import { useRef as useRef31 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
 import { cn as cn48 } from "@marigold/system";
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = useRef30(null);
+  const ref = useRef31(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ React91.createElement("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps }, selectedItemProps == null ? void 0 : selectedItemProps.children);
+  return /* @__PURE__ */ React.createElement("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps }, selectedItemProps == null ? void 0 : selectedItemProps.children);
 };
 
 // src/Tabs/Tabs.tsx
@@ -4443,7 +4400,7 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const props = {
     isDisabled: disabled,
     ...rest
@@ -4455,7 +4412,7 @@ var Tabs = ({
     size,
     variant
   });
-  return /* @__PURE__ */ React92.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React92.createElement("div", { className: cn49(classNames2.container) }, /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React.createElement("div", { className: cn49(classNames2.container) }, /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn49("flex", gapSpace8[space], classNames2.tabs),
@@ -4463,9 +4420,9 @@ var Tabs = ({
       ref
     },
     [...state.collection].map((item) => {
-      return /* @__PURE__ */ React92.createElement(Tab, { key: item.key, item, state });
+      return /* @__PURE__ */ React.createElement(Tab, { key: item.key, item, state });
     })
-  ), /* @__PURE__ */ React92.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state })));
+  ), /* @__PURE__ */ React.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state })));
 };
 Tabs.Item = Item7;
 export {
@@ -4515,6 +4472,7 @@ export {
   Overlay,
   Popover,
   Radio,
+  RadioGroup,
   Select,
   Slider,
   Split,