@marigold/components 5.3.0 → 5.5.0

package/dist/index.mjs

@@ -5,11 +5,309 @@ import { useAsyncList, useListData } from "@react-stately/data";
 import merge from "deepmerge";
 var extendTheme = (baseTheme, extendTheme2) => merge(baseTheme, extendTheme2);
 
+// src/Accordion/Accordion.tsx
+import React3, { Children, useRef as useRef2 } from "react";
+import { useAccordion } from "@react-aria/accordion";
+import { Item } from "@react-stately/collections";
+import { Box as Box3 } from "@marigold/system";
+
+// src/Accordion/AccordionItem.tsx
+import React2, { useRef } from "react";
+import { FocusRing, useFocusRing as useFocusRing2 } from "@react-aria/focus";
+import { mergeProps as mergeProps3 } from "@react-aria/utils";
+import {
+  Box as Box2,
+  SVG,
+  useComponentStyles as useComponentStyles2,
+  useStateProps as useStateProps2
+} from "@marigold/system";
+
+// src/Accordion/useAccordionItem.ts
+import { mergeProps, useId } from "@react-aria/utils";
+import { useButton } from "@react-aria/button";
+import { useSelectableItem } from "@react-aria/selection";
+import { isAppleDevice } from "@react-aria/utils";
+import { isMac } from "@react-aria/utils";
+function isNonContiguousSelectionModifier(e) {
+  return isAppleDevice() ? e.altKey : e.ctrlKey;
+}
+function isCtrlKeyPressed(e) {
+  if (isMac()) {
+    return e.metaKey;
+  }
+  return e.ctrlKey;
+}
+function useAccordionItem(props, state, ref) {
+  let { item } = props;
+  let key = item.key;
+  let manager = state.selectionManager;
+  let buttonId = useId();
+  let regionId = useId();
+  let isDisabled = state.disabledKeys.has(item.key);
+  let { itemProps } = useSelectableItem({
+    selectionManager: manager,
+    key,
+    ref
+  });
+  const isDefaultExpanded = state.expandedKeys.has(
+    item.key.toString().replace(".$", "")
+  );
+  let onSelect = (e) => {
+    if (e.pointerType === "keyboard" && isNonContiguousSelectionModifier(e)) {
+      if (isDefaultExpanded) {
+        state.expandedKeys.clear();
+      }
+      manager.toggleSelection(key);
+    } else {
+      if (manager.selectionMode === "none") {
+        return;
+      }
+      if (manager.selectionMode === "single") {
+        if (manager.isSelected(key) && !manager.disallowEmptySelection) {
+          if (isDefaultExpanded) {
+            state.expandedKeys.clear();
+          }
+          manager.toggleSelection(key);
+        } else {
+          if (isDefaultExpanded) {
+            state.expandedKeys.clear();
+          }
+          manager.replaceSelection(key);
+        }
+      } else if (e && e.shiftKey) {
+        if (isDefaultExpanded) {
+          state.expandedKeys.clear();
+        }
+        manager.extendSelection(key);
+      } else if (manager.selectionBehavior === "toggle" || e && (isCtrlKeyPressed(e) || e.pointerType === "touch" || e.pointerType === "virtual")) {
+        if (isDefaultExpanded) {
+          state.expandedKeys.clear();
+          manager.toggleSelection(key);
+        }
+        manager.toggleSelection(key);
+      } else {
+        if (isDefaultExpanded) {
+          state.expandedKeys.clear();
+        }
+        manager.replaceSelection(key);
+      }
+    }
+  };
+  let { buttonProps } = useButton(
+    mergeProps(itemProps, {
+      id: buttonId,
+      elementType: "button",
+      isDisabled,
+      onPress: onSelect
+    }),
+    ref
+  );
+  return {
+    buttonProps: {
+      ...buttonProps,
+      role: "button",
+      "aria-expanded": manager.isSelected(key) || isDefaultExpanded,
+      "aria-controls": manager.isSelected(key) || isDefaultExpanded ? regionId : void 0
+    },
+    regionProps: {
+      id: regionId,
+      role: "region",
+      "aria-labelledby": buttonId
+    }
+  };
+}
+
+// src/Button/Button.tsx
+import React, { 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 {
+  Box,
+  useComponentStyles,
+  useStateProps
+} from "@marigold/system";
+var Button = forwardRef(
+  ({
+    as = "button",
+    children,
+    variant,
+    size,
+    disabled,
+    onClick,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    fullWidth,
+    ...props
+  }, ref) => {
+    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
+      },
+      buttonRef
+    );
+    const styles = useComponentStyles("Button", { variant, size });
+    const stateProps = useStateProps({
+      active: isPressed,
+      focusVisible: isFocusVisible,
+      hover: isHovered
+    });
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        ...mergeProps2(buttonProps, focusProps, hoverProps, props),
+        ...stateProps,
+        as,
+        ref: buttonRef,
+        __baseCSS: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.5ch",
+          cursor: disabled ? "not-allowed" : "pointer",
+          width: fullWidth ? "100%" : void 0,
+          "&:focus": {
+            outline: 0
+          }
+        },
+        css: styles
+      },
+      children
+    );
+  }
+);
+
+// src/Accordion/AccordionItem.tsx
+var AccordionItem = ({
+  item,
+  state,
+  css,
+  title,
+  variant,
+  size,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const defaultExpanded = state.expandedKeys.has(
+    item.key.toString().replace(".$", "")
+  );
+  const expanded = state.selectionManager.isSelected(item.key);
+  React2.useEffect(() => {
+    if (defaultExpanded) {
+      if (state.selectionManager.selectionMode === "multiple") {
+        state.expandedKeys.forEach((key) => {
+          state.selectionManager.select(key);
+        });
+      } else {
+        state.expandedKeys.clear();
+        state.selectionManager.toggleSelection(item.key);
+      }
+    }
+  }, [defaultExpanded, item.key, state.expandedKeys, state.selectionManager]);
+  const { buttonProps, regionProps } = useAccordionItem({ item }, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing2();
+  const stateProps = useStateProps2({
+    focus: isFocusVisible,
+    expanded: defaultExpanded || expanded
+  });
+  const styles = useComponentStyles2(
+    "Accordion",
+    { variant, size },
+    { parts: ["item", "button"] }
+  );
+  return /* @__PURE__ */ React2.createElement(Box2, { ...props }, /* @__PURE__ */ React2.createElement(FocusRing, { within: true }, /* @__PURE__ */ React2.createElement(
+    Box2,
+    {
+      as: Button,
+      ...mergeProps3(buttonProps, stateProps, props),
+      ref,
+      __baseCSS: {
+        border: "none",
+        p: 0,
+        width: "100%",
+        justifyContent: "space-between"
+      },
+      css: styles.button,
+      "aria-label": item.textValue
+    },
+    title,
+    !expanded ? /* @__PURE__ */ React2.createElement(SVG, { viewBox: "0 0 24 24", "aria-hidden": true }, /* @__PURE__ */ React2.createElement("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" })) : /* @__PURE__ */ React2.createElement(SVG, { viewBox: "0 0 24 24", "aria-hidden": true }, /* @__PURE__ */ React2.createElement("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }))
+  )), expanded || defaultExpanded ? /* @__PURE__ */ React2.createElement(
+    Box2,
+    {
+      ...mergeProps3(regionProps, focusProps, stateProps),
+      css: styles.item
+    },
+    item.props.children
+  ) : null);
+};
+
+// 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 (!React3.isValidElement(child)) {
+        return child;
+      }
+      return React3.cloneElement(child, {
+        hasChildItems: false,
+        ...child.props
+      });
+    })
+  };
+  const ref = useRef2(null);
+  const state = useTreeState({
+    selectionMode: "single",
+    ...ownProps
+  });
+  const { accordionProps } = useAccordion(
+    { ...ownProps, children },
+    state,
+    ref
+  );
+  return /* @__PURE__ */ React3.createElement(Box3, { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React3.createElement(
+    AccordionItem,
+    {
+      key: item.key,
+      title: item.props.title,
+      item,
+      state,
+      variant: item.props.variant,
+      size: item.props.size
+    }
+  )));
+};
+Accordion.Item = Item;
+
 // src/Aside/Aside.tsx
-import React from "react";
+import React4 from "react";
 
 // src/Box.ts
-import { Box } from "@marigold/system";
+import { Box as Box4 } from "@marigold/system";
 
 // src/Aside/Aside.tsx
 var SIDE_MAP = {
@@ -25,8 +323,8 @@ var Aside = ({
   wrap = "50%"
 }) => {
   const [aside, content] = SIDE_MAP[side];
-  return /* @__PURE__ */ React.createElement(
-    Box,
+  return /* @__PURE__ */ React4.createElement(
+    Box4,
     {
       css: {
         display: "flex",
@@ -49,14 +347,14 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-import React2 from "react";
+import React5 from "react";
 import { aspect } from "@marigold/tokens";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ React2.createElement(
-  Box,
+}) => /* @__PURE__ */ React5.createElement(
+  Box4,
   {
     css: {
       aspectRatio: aspect[ratio],
@@ -68,26 +366,26 @@ var Aspect = ({
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import React17, { useRef as useRef5 } from "react";
+import React20, { 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 } from "@react-stately/collections";
+import { Item as Item2 } from "@react-stately/collections";
 import {
-  SVG as SVG3,
-  useComponentStyles as useComponentStyles7
+  SVG as SVG4,
+  useComponentStyles as useComponentStyles9
 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
-import React6 from "react";
+import React9 from "react";
 import {
-  Box as Box4,
-  useComponentStyles as useComponentStyles3
+  Box as Box7,
+  useComponentStyles as useComponentStyles5
 } from "@marigold/system";
 
 // src/Label/Label.tsx
-import React3 from "react";
-import { Box as Box2, SVG, useComponentStyles } from "@marigold/system";
+import React6 from "react";
+import { Box as Box5, SVG as SVG2, useComponentStyles as useComponentStyles3 } from "@marigold/system";
 var Label = ({
   as = "label",
   required,
@@ -97,9 +395,9 @@ var Label = ({
   labelWidth,
   ...props
 }) => {
-  const styles = useComponentStyles("Label", { size, variant });
-  return /* @__PURE__ */ React3.createElement(
-    Box2,
+  const styles = useComponentStyles3("Label", { size, variant });
+  return /* @__PURE__ */ React6.createElement(
+    Box5,
     {
       ...props,
       as,
@@ -111,16 +409,16 @@ var Label = ({
       css: styles
     },
     children,
-    required && /* @__PURE__ */ React3.createElement(SVG, { viewBox: "0 0 24 24", role: "presentation", size: 16, fill: "error" }, /* @__PURE__ */ React3.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" }))
+    required && /* @__PURE__ */ React6.createElement(SVG2, { viewBox: "0 0 24 24", role: "presentation", size: 16, fill: "error" }, /* @__PURE__ */ React6.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 React4 from "react";
+import React7 from "react";
 import {
-  Box as Box3,
-  SVG as SVG2,
-  useComponentStyles as useComponentStyles2
+  Box as Box6,
+  SVG as SVG3,
+  useComponentStyles as useComponentStyles4
 } from "@marigold/system";
 var HelpText = ({
   variant,
@@ -135,38 +433,38 @@ var HelpText = ({
 }) => {
   var _a;
   const hasErrorMessage = errorMessage && error;
-  const styles = useComponentStyles2(
+  const styles = useComponentStyles4(
     "HelpText",
     { variant, size },
     { parts: ["container", "icon"] }
   );
-  return /* @__PURE__ */ React4.createElement(
-    Box3,
+  return /* @__PURE__ */ React7.createElement(
+    Box6,
     {
       ...hasErrorMessage ? errorMessageProps : descriptionProps,
       ...props,
       __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
       css: styles.container
     },
-    hasErrorMessage ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-      SVG2,
+    hasErrorMessage ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+      SVG3,
       {
         viewBox: "0 0 24 24",
         role: "presentation",
         size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
       },
-      /* @__PURE__ */ React4.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__ */ React4.createElement(React4.Fragment, null, description)
+      /* @__PURE__ */ React7.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__ */ React7.createElement(React7.Fragment, null, description)
   );
 };
 
 // src/FieldBase/FieldGroup.tsx
-import React5 from "react";
+import React8 from "react";
 import { createContext, useContext } from "react";
 var FieldGroupContext = createContext({});
 var useFieldGroupContext = () => useContext(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ React5.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
+  return /* @__PURE__ */ React8.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
 };
 
 // src/FieldBase/FieldBase.tsx
@@ -188,10 +486,10 @@ var FieldBase = ({
   ...props
 }) => {
   const hasHelpText = !!description || errorMessage && error;
-  const style = useComponentStyles3("Field", { variant, size });
+  const style = useComponentStyles5("Field", { variant, size });
   const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ React6.createElement(
-    Box4,
+  return /* @__PURE__ */ React9.createElement(
+    Box7,
     {
       ...props,
       __baseCSS: {
@@ -202,7 +500,7 @@ var FieldBase = ({
       },
       css: style
     },
-    label && /* @__PURE__ */ React6.createElement(
+    label && /* @__PURE__ */ React9.createElement(
       Label,
       {
         required,
@@ -214,7 +512,7 @@ var FieldBase = ({
       },
       label
     ),
-    /* @__PURE__ */ React6.createElement(Box4, { __baseCSS: { display: "flex", flexDirection: "column" } }, children, hasHelpText && /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React9.createElement(Box7, { __baseCSS: { display: "flex", flexDirection: "column" } }, children, hasHelpText && /* @__PURE__ */ React9.createElement(
       HelpText,
       {
         ...stateProps,
@@ -232,24 +530,24 @@ var FieldBase = ({
 };
 
 // src/Input/Input.tsx
-import React7, { forwardRef } from "react";
+import React10, { forwardRef as forwardRef2 } from "react";
 import {
-  Box as Box5,
-  useComponentStyles as useComponentStyles4,
-  useStateProps
+  Box as Box8,
+  useComponentStyles as useComponentStyles6,
+  useStateProps as useStateProps3
 } from "@marigold/system";
-var Input = forwardRef(
+var Input = forwardRef2(
   ({ type = "text", icon, action, variant, size, ...props }, ref) => {
-    const styles = useComponentStyles4(
+    const styles = useComponentStyles6(
       "Input",
       { variant, size },
       { parts: ["input", "icon", "container"] }
     );
-    const stateProps = useStateProps({
+    const stateProps = useStateProps3({
       hasIcon: icon ? true : false
     });
-    return /* @__PURE__ */ React7.createElement(
-      Box5,
+    return /* @__PURE__ */ React10.createElement(
+      Box8,
       {
         __baseCSS: {
           position: "relative",
@@ -259,8 +557,8 @@ var Input = forwardRef(
         },
         css: styles.container
       },
-      /* @__PURE__ */ React7.createElement(
-        Box5,
+      /* @__PURE__ */ React10.createElement(
+        Box8,
         {
           __baseCSS: { border: 0, width: "100%", outline: "none", pl: 16 },
           ...props,
@@ -271,8 +569,8 @@ var Input = forwardRef(
           type
         }
       ),
-      icon && /* @__PURE__ */ React7.createElement(
-        Box5,
+      icon && /* @__PURE__ */ React10.createElement(
+        Box8,
         {
           __baseCSS: {
             position: "absolute",
@@ -283,8 +581,8 @@ var Input = forwardRef(
         },
         icon
       ),
-      /* @__PURE__ */ React7.createElement(
-        Box5,
+      /* @__PURE__ */ React10.createElement(
+        Box8,
         {
           __baseCSS: {
             display: "inline-flex",
@@ -299,11 +597,11 @@ var Input = forwardRef(
 );
 
 // src/ListBox/ListBox.tsx
-import React10, { forwardRef as forwardRef2 } from "react";
-import { useObjectRef } from "@react-aria/utils";
+import React13, { forwardRef as forwardRef3 } from "react";
+import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import {
-  Box as Box8,
-  useComponentStyles as useComponentStyles5
+  Box as Box11,
+  useComponentStyles as useComponentStyles7
 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
 
@@ -313,17 +611,17 @@ var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext2(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-import React9 from "react";
+import React12 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
-import { Box as Box7 } from "@marigold/system";
+import { Box as Box10 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React8, { useRef } from "react";
+import React11, { useRef as useRef3 } from "react";
 import { useOption } from "@react-aria/listbox";
-import { mergeProps } from "@react-aria/utils";
-import { Box as Box6, useStateProps as useStateProps2 } from "@marigold/system";
+import { mergeProps as mergeProps4 } from "@react-aria/utils";
+import { Box as Box9, useStateProps as useStateProps4 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
-  const ref = useRef(null);
+  const ref = useRef3(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption(
     {
       key: item.key
@@ -333,18 +631,18 @@ var ListBoxOption = ({ item, state }) => {
   );
   const { onPointerUp, ...props } = optionProps;
   const { styles } = useListBoxContext();
-  const stateProps = useStateProps2({
+  const stateProps = useStateProps4({
     selected: isSelected,
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React8.createElement(
-    Box6,
+  return /* @__PURE__ */ React11.createElement(
+    Box9,
     {
       as: "li",
       ref,
       css: styles.option,
-      ...mergeProps(props, { onPointerDown: onPointerUp }, { ...stateProps })
+      ...mergeProps4(props, { onPointerDown: onPointerUp }, { ...stateProps })
     },
     item.rendered
   );
@@ -357,30 +655,30 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React9.createElement(Box7, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ React9.createElement(Box7, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React9.createElement(
-    Box7,
+  return /* @__PURE__ */ React12.createElement(Box10, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ React12.createElement(Box10, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React12.createElement(
+    Box10,
     {
       as: "ul",
       __baseCSS: { listStyle: "none", p: 0 },
       css: styles.list,
       ...groupProps
     },
-    [...section.childNodes].map((node) => /* @__PURE__ */ React9.createElement(ListBoxOption, { key: node.key, item: node, state }))
+    [...section.childNodes].map((node) => /* @__PURE__ */ React12.createElement(ListBoxOption, { key: node.key, item: node, state }))
   ));
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = forwardRef2(
+var ListBox = forwardRef3(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = useObjectRef(ref);
+    const innerRef = useObjectRef2(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
-    const styles = useComponentStyles5(
+    const styles = useComponentStyles7(
       "ListBox",
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
     );
-    return /* @__PURE__ */ React10.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ React10.createElement(Box8, { css: styles.container }, /* @__PURE__ */ React10.createElement(
-      Box8,
+    return /* @__PURE__ */ React13.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ React13.createElement(Box11, { css: styles.container }, /* @__PURE__ */ React13.createElement(
+      Box11,
       {
         as: "ul",
         ref: innerRef,
@@ -389,25 +687,25 @@ var ListBox = forwardRef2(
         ...listBoxProps
       },
       [...state.collection].map(
-        (item) => item.type === "section" ? /* @__PURE__ */ React10.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React10.createElement(ListBoxOption, { key: item.key, item, state })
+        (item) => item.type === "section" ? /* @__PURE__ */ React13.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React13.createElement(ListBoxOption, { key: item.key, item, state })
       )
     )));
   }
 );
 
 // src/Overlay/Modal.tsx
-import React12, { forwardRef as forwardRef3 } from "react";
+import React15, { forwardRef as forwardRef4 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
-import { mergeProps as mergeProps2, useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { mergeProps as mergeProps5, useObjectRef as useObjectRef3 } from "@react-aria/utils";
 
 // src/Overlay/Underlay.tsx
-import React11 from "react";
-import { Box as Box9, useComponentStyles as useComponentStyles6 } from "@marigold/system";
+import React14 from "react";
+import { Box as Box12, useComponentStyles as useComponentStyles8 } from "@marigold/system";
 var Underlay = ({ size, variant, ...props }) => {
-  const styles = useComponentStyles6("Underlay", { size, variant });
-  return /* @__PURE__ */ React11.createElement(
-    Box9,
+  const styles = useComponentStyles8("Underlay", { size, variant });
+  return /* @__PURE__ */ React14.createElement(
+    Box12,
     {
       __baseCSS: {
         position: "fixed",
@@ -421,9 +719,9 @@ var Underlay = ({ size, variant, ...props }) => {
 };
 
 // src/Overlay/Modal.tsx
-var Modal = forwardRef3(
+var Modal = forwardRef4(
   ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
-    const modalRef = useObjectRef2(ref);
+    const modalRef = useObjectRef3(ref);
     const { overlayProps, underlayProps } = useOverlay(
       {
         isOpen: open,
@@ -435,7 +733,7 @@ var Modal = forwardRef3(
     );
     usePreventScroll();
     const { modalProps } = useModal({});
-    return /* @__PURE__ */ React12.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React12.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React15.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React15.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React15.createElement(
       "div",
       {
         style: {
@@ -448,15 +746,15 @@ var Modal = forwardRef3(
           pointerEvents: "none"
         },
         ref: modalRef,
-        ...mergeProps2(props, overlayProps, modalProps)
+        ...mergeProps5(props, overlayProps, modalProps)
       },
-      /* @__PURE__ */ React12.createElement("div", { style: { pointerEvents: "auto" } }, children)
+      /* @__PURE__ */ React15.createElement("div", { style: { pointerEvents: "auto" } }, children)
     ));
   }
 );
 
 // src/Overlay/Overlay.tsx
-import React13, { useRef as useRef2 } from "react";
+import React16, { useRef as useRef4 } from "react";
 import { Transition } from "react-transition-group";
 import {
   Overlay as ReactAriaOverlay
@@ -474,12 +772,12 @@ var transitionStyles = {
   unmounted: { opacity: 0 }
 };
 var Overlay = ({ children, container, open }) => {
-  const nodeRef = useRef2(null);
+  const nodeRef = useRef4(null);
   let mountOverlay = open;
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React13.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React13.createElement(Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React16.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React16.createElement(Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ React16.createElement(
     "div",
     {
       ref: nodeRef,
@@ -494,21 +792,21 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-import React14, { forwardRef as forwardRef4, useRef as useRef3 } from "react";
+import React17, { forwardRef as forwardRef5, useRef as useRef5 } from "react";
 import {
   DismissButton,
   usePopover
 } from "@react-aria/overlays";
 import { FocusScope as FocusScope2 } from "@react-aria/focus";
-var Popover = forwardRef4(
+var Popover = forwardRef5(
   (props, ref) => {
-    const fallbackRef = useRef3(null);
+    const fallbackRef = useRef5(null);
     const popoverRef = ref || fallbackRef;
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ React14.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React14.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
+    return /* @__PURE__ */ React17.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React17.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
   }
 );
-var PopoverWrapper = forwardRef4(
+var PopoverWrapper = forwardRef5(
   ({
     children,
     isNonModal,
@@ -526,7 +824,7 @@ var PopoverWrapper = forwardRef4(
       },
       state
     );
-    return /* @__PURE__ */ React14.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React14.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React17.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React17.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React17.createElement(
       "div",
       {
         ...popoverProps,
@@ -537,30 +835,30 @@ var PopoverWrapper = forwardRef4(
         ref,
         role: "presentation"
       },
-      !isNonModal && /* @__PURE__ */ React14.createElement(DismissButton, { onDismiss: state.close }),
+      !isNonModal && /* @__PURE__ */ React17.createElement(DismissButton, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React14.createElement(DismissButton, { onDismiss: state.close })
+      /* @__PURE__ */ React17.createElement(DismissButton, { onDismiss: state.close })
     ));
   }
 );
 
 // src/Overlay/Tray.tsx
-import React15 from "react";
-import { Box as Box10 } from "@marigold/system";
+import React18 from "react";
+import { Box as Box13 } from "@marigold/system";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
 import {
   DismissButton as DismissButton2,
   useModalOverlay
 } from "@react-aria/overlays";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
-import { forwardRef as forwardRef5 } from "react";
-var Tray = forwardRef5(
+import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
+import { forwardRef as forwardRef6 } from "react";
+var Tray = forwardRef6(
   ({ state, children, ...props }, ref) => {
-    const trayRef = useObjectRef3(ref);
-    return /* @__PURE__ */ React15.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React15.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
+    const trayRef = useObjectRef4(ref);
+    return /* @__PURE__ */ React18.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React18.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
   }
 );
-var TrayWrapper = forwardRef5(
+var TrayWrapper = forwardRef6(
   ({ children, state, ...props }, ref) => {
     let { modalProps, underlayProps } = useModalOverlay(
       {
@@ -570,28 +868,28 @@ var TrayWrapper = forwardRef5(
       state,
       ref
     );
-    return /* @__PURE__ */ React15.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React15.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React15.createElement(
-      Box10,
+    return /* @__PURE__ */ React18.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React18.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React18.createElement(
+      Box13,
       {
         ...modalProps,
         ref,
         __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
         "data-testid": "tray"
       },
-      /* @__PURE__ */ React15.createElement(DismissButton2, { onDismiss: state.close }),
+      /* @__PURE__ */ React18.createElement(DismissButton2, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React15.createElement(DismissButton2, { onDismiss: state.close })
+      /* @__PURE__ */ React18.createElement(DismissButton2, { onDismiss: state.close })
     )));
   }
 );
 
 // src/Autocomplete/ClearButton.tsx
-import React16, { useRef as useRef4 } from "react";
-import { useHover } from "@react-aria/interactions";
-import { useFocusRing } from "@react-aria/focus";
-import { useButton } from "@react-aria/button";
-import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { Box as Box11, useStateProps as useStateProps3 } from "@marigold/system";
+import React19, { useRef as useRef6 } from "react";
+import { useHover as useHover2 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import { useButton as useButton3 } from "@react-aria/button";
+import { mergeProps as mergeProps6 } from "@react-aria/utils";
+import { Box as Box14, useStateProps as useStateProps5 } from "@marigold/system";
 var ClearButton = ({
   css,
   preventFocus,
@@ -606,12 +904,12 @@ var ClearButton = ({
   preventFocusOnPress,
   ...props
 }) => {
-  const buttonRef = useRef4(null);
-  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
-  const { isFocusVisible, focusProps } = useFocusRing({
+  const buttonRef = useRef6(null);
+  const { hoverProps, isHovered } = useHover2({ isDisabled: disabled });
+  const { isFocusVisible, focusProps } = useFocusRing3({
     autoFocus: props.autoFocus
   });
-  const { buttonProps, isPressed } = useButton(
+  const { buttonProps, isPressed } = useButton3(
     {
       ...props,
       onClick,
@@ -629,15 +927,15 @@ var ClearButton = ({
   if (preventFocus) {
     delete buttonProps.tabIndex;
   }
-  const stateProps = useStateProps3({
+  const stateProps = useStateProps5({
     active: isPressed,
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ React16.createElement(
-    Box11,
+  return /* @__PURE__ */ React19.createElement(
+    Box14,
     {
-      ...mergeProps3(buttonProps, focusProps, hoverProps, props),
+      ...mergeProps6(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       as: "button",
       ref: buttonRef,
@@ -651,28 +949,28 @@ var ClearButton = ({
       },
       css
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React19.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 20 20",
         fill: "currentColor"
       },
-      /* @__PURE__ */ React16.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__ */ React19.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 = ({ css }) => /* @__PURE__ */ React17.createElement(
-  SVG3,
+var SearchIcon = ({ css }) => /* @__PURE__ */ React20.createElement(
+  SVG4,
   {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     css
   },
-  /* @__PURE__ */ React17.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__ */ React20.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,
@@ -709,9 +1007,9 @@ var Autocomplete = ({
     selectedKey: void 0,
     defaultSelectedKey: void 0
   });
-  const inputRef = useRef5(null);
-  const listBoxRef = useRef5(null);
-  const popoverRef = useRef5(null);
+  const inputRef = useRef7(null);
+  const listBoxRef = useRef7(null);
+  const popoverRef = useRef7(null);
   const { inputProps, listBoxProps, labelProps, clearButtonProps } = useSearchAutocomplete(
     {
       ...props,
@@ -727,12 +1025,12 @@ var Autocomplete = ({
   );
   const errorMessageProps = { "aria-invalid": error };
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  const styles = useComponentStyles7(
+  const styles = useComponentStyles9(
     "Autocomplete",
     { variant, size },
     { parts: ["icon", "clear"] }
   );
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     FieldBase,
     {
       label: props.label,
@@ -744,13 +1042,13 @@ var Autocomplete = ({
       disabled,
       width
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       Input,
       {
         ...inputProps,
         ref: inputRef,
-        icon: /* @__PURE__ */ React17.createElement(SearchIcon, { css: { height: 16, width: 16, ...styles.icon } }),
-        action: state.inputValue !== "" ? /* @__PURE__ */ React17.createElement(
+        icon: /* @__PURE__ */ React20.createElement(SearchIcon, { css: { height: 16, width: 16, ...styles.icon } }),
+        action: state.inputValue !== "" ? /* @__PURE__ */ React20.createElement(
           ClearButton,
           {
             preventFocus: true,
@@ -761,7 +1059,7 @@ var Autocomplete = ({
         ) : void 0
       }
     )
-  ), /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     Popover,
     {
       state,
@@ -770,21 +1068,21 @@ var Autocomplete = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React17.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React20.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
-Autocomplete.Item = Item;
+Autocomplete.Item = Item2;
 
 // src/Badge/Badge.tsx
-import React18 from "react";
-import { useComponentStyles as useComponentStyles8 } from "@marigold/system";
+import React21 from "react";
+import { useComponentStyles as useComponentStyles10 } from "@marigold/system";
 var Badge = ({ variant, size, children, ...props }) => {
-  const styles = useComponentStyles8("Badge", { variant, size });
-  return /* @__PURE__ */ React18.createElement(Box, { ...props, css: styles }, children);
+  const styles = useComponentStyles10("Badge", { variant, size });
+  return /* @__PURE__ */ React21.createElement(Box4, { ...props, css: styles }, children);
 };
 
 // src/Breakout/Breakout.tsx
-import React19 from "react";
+import React22 from "react";
 var useAlignment = (direction) => {
   switch (direction) {
     case "right":
@@ -805,8 +1103,8 @@ var Breakout = ({
 }) => {
   const alignItems = useAlignment(alignY);
   const justifyContent = useAlignment(alignX);
-  return /* @__PURE__ */ React19.createElement(
-    Box,
+  return /* @__PURE__ */ React22.createElement(
+    Box4,
     {
       css: {
         alignItems,
@@ -823,107 +1121,27 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import React20 from "react";
+import React23 from "react";
 import {
-  Box as Box12,
-  useComponentStyles as useComponentStyles9
+  Box as Box15,
+  useComponentStyles as useComponentStyles11
 } from "@marigold/system";
 var Body = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles9("Body", { variant, size });
-  return /* @__PURE__ */ React20.createElement(Box12, { as: "section", ...props, css: styles }, children);
+  const styles = useComponentStyles11("Body", { variant, size });
+  return /* @__PURE__ */ React23.createElement(Box15, { as: "section", ...props, __baseCSS: { flex: "1" }, css: styles }, children);
 };
 
-// src/Button/Button.tsx
-import React21, { forwardRef as forwardRef6 } from "react";
-import { useButton as useButton2 } from "@react-aria/button";
-import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
-import { useHover as useHover2 } from "@react-aria/interactions";
-import { mergeProps as mergeProps4, useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import {
-  Box as Box13,
-  useComponentStyles as useComponentStyles10,
-  useStateProps as useStateProps4
-} from "@marigold/system";
-var Button = forwardRef6(
-  ({
-    as = "button",
-    children,
-    variant,
-    size,
-    disabled,
-    onClick,
-    onPress,
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPressUp,
-    fullWidth,
-    ...props
-  }, ref) => {
-    const buttonRef = useObjectRef4(ref);
-    const { hoverProps, isHovered } = useHover2({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing2({
-      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
-      },
-      buttonRef
-    );
-    const styles = useComponentStyles10("Button", { variant, size });
-    const stateProps = useStateProps4({
-      active: isPressed,
-      focusVisible: isFocusVisible,
-      hover: isHovered
-    });
-    return /* @__PURE__ */ React21.createElement(
-      Box13,
-      {
-        ...mergeProps4(buttonProps, focusProps, hoverProps, props),
-        ...stateProps,
-        as,
-        ref: buttonRef,
-        __baseCSS: {
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "0.5ch",
-          cursor: disabled ? "not-allowed" : "pointer",
-          width: fullWidth ? "100%" : void 0,
-          "&:focus": {
-            outline: 0
-          }
-        },
-        css: styles
-      },
-      children
-    );
-  }
-);
-
 // src/Card/Card.tsx
-import React22 from "react";
+import React24 from "react";
 import {
-  Box as Box14,
-  useComponentStyles as useComponentStyles11
+  Box as Box16,
+  useComponentStyles as useComponentStyles12
 } from "@marigold/system";
 var Card = ({
   children,
   variant,
   size,
+  space = "none",
   p,
   px,
   py,
@@ -933,19 +1151,31 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const styles = useComponentStyles11("Card", { variant, size });
-  return /* @__PURE__ */ React22.createElement(Box14, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
+  const styles = useComponentStyles12("Card", { variant, size });
+  return /* @__PURE__ */ React24.createElement(
+    Box16,
+    {
+      ...props,
+      __baseCSS: {
+        display: "flex",
+        flexDirection: "column",
+        gap: space
+      },
+      css: [styles, { p, px, py, pt, pb, pl, pr }]
+    },
+    children
+  );
 };
 
 // src/Center/Center.tsx
-import React23 from "react";
+import React25 from "react";
 var Center = ({
   maxWidth,
   space = "none",
   children,
   ...props
-}) => /* @__PURE__ */ React23.createElement(
-  Box,
+}) => /* @__PURE__ */ React25.createElement(
+  Box4,
   {
     css: {
       boxSizing: "content-box",
@@ -963,25 +1193,25 @@ var Center = ({
 );
 
 // src/Checkbox/Checkbox.tsx
-import React25, { forwardRef as forwardRef7 } from "react";
+import React27, { forwardRef as forwardRef7 } from "react";
 import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
-import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import { useToggleState } from "@react-stately/toggle";
 import {
-  Box as Box16,
-  useComponentStyles as useComponentStyles12,
-  useStateProps as useStateProps6
+  Box as Box18,
+  useComponentStyles as useComponentStyles13,
+  useStateProps as useStateProps7
 } from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
-import React24, { createContext as createContext3, useContext as useContext3 } from "react";
+import React26, { createContext as createContext3, useContext as useContext3 } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
 } from "@react-stately/checkbox";
-import { Box as Box15, useStateProps as useStateProps5 } from "@marigold/system";
+import { Box as Box17, useStateProps as useStateProps6 } from "@marigold/system";
 var CheckboxGroupContext = createContext3(
   null
 );
@@ -1003,12 +1233,12 @@ var CheckboxGroup = ({
   };
   const state = useCheckboxGroupState(props);
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
-  const stateProps = useStateProps5({
+  const stateProps = useStateProps6({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement(
     FieldBase,
     {
       label: props.label,
@@ -1023,8 +1253,8 @@ var CheckboxGroup = ({
       required,
       ...groupProps
     },
-    /* @__PURE__ */ React24.createElement(
-      Box15,
+    /* @__PURE__ */ React26.createElement(
+      Box17,
       {
         role: "presentation",
         __baseCSS: {
@@ -1033,13 +1263,13 @@ var CheckboxGroup = ({
           alignItems: "start"
         }
       },
-      /* @__PURE__ */ React24.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
+      /* @__PURE__ */ React26.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
     )
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React25.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React25.createElement(
+var CheckMark = () => /* @__PURE__ */ React27.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React27.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1047,7 +1277,7 @@ var CheckMark = () => /* @__PURE__ */ React25.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__ */ React25.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React25.createElement(
+var IndeterminateMark = () => /* @__PURE__ */ React27.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React27.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1055,8 +1285,8 @@ var IndeterminateMark = () => /* @__PURE__ */ React25.createElement("svg", { wid
     d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
   }
 ));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React25.createElement(
-  Box16,
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React27.createElement(
+  Box18,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -1074,7 +1304,7 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React2
     css,
     ...props
   },
-  indeterminate ? /* @__PURE__ */ React25.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React25.createElement(CheckMark, null) : null
+  indeterminate ? /* @__PURE__ */ React27.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React27.createElement(CheckMark, null) : null
 );
 var Checkbox = forwardRef7(
   ({
@@ -1125,7 +1355,7 @@ var Checkbox = forwardRef7(
       }),
       inputRef
     );
-    const styles = useComponentStyles12(
+    const styles = useComponentStyles13(
       "Checkbox",
       {
         variant,
@@ -1134,8 +1364,8 @@ var Checkbox = forwardRef7(
       { parts: ["container", "label", "checkbox"] }
     );
     const { hoverProps, isHovered } = useHover3({});
-    const { isFocusVisible, focusProps } = useFocusRing3();
-    const stateProps = useStateProps6({
+    const { isFocusVisible, focusProps } = useFocusRing4();
+    const stateProps = useStateProps7({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1144,8 +1374,8 @@ var Checkbox = forwardRef7(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React25.createElement(
-      Box16,
+    return /* @__PURE__ */ React27.createElement(
+      Box18,
       {
         as: "label",
         __baseCSS: {
@@ -1158,8 +1388,8 @@ var Checkbox = forwardRef7(
         ...hoverProps,
         ...stateProps
       },
-      /* @__PURE__ */ React25.createElement(
-        Box16,
+      /* @__PURE__ */ React27.createElement(
+        Box18,
         {
           as: "input",
           ref: inputRef,
@@ -1177,7 +1407,7 @@ var Checkbox = forwardRef7(
           ...focusProps
         }
       ),
-      /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React27.createElement(
         Icon,
         {
           checked: inputProps.checked,
@@ -1186,14 +1416,14 @@ var Checkbox = forwardRef7(
           ...stateProps
         }
       ),
-      props.children && /* @__PURE__ */ React25.createElement(Box16, { css: styles.label, ...stateProps }, props.children)
+      props.children && /* @__PURE__ */ React27.createElement(Box18, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 
 // src/Columns/Columns.tsx
-import React26, {
-  Children,
+import React28, {
+  Children as Children2,
   cloneElement,
   isValidElement
 } from "react";
@@ -1205,15 +1435,15 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (Children.count(children) !== columns.length) {
+  if (Children2.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${Children.count(
+      `Columns: expected ${columns.length} children, got ${Children2.count(
         children
       )}`
     );
   }
-  return /* @__PURE__ */ React26.createElement(
-    Box,
+  return /* @__PURE__ */ React28.createElement(
+    Box4,
     {
       css: {
         display: "flex",
@@ -1231,8 +1461,8 @@ var Columns = ({
       },
       ...props
     },
-    Children.map(children, (child, idx) => /* @__PURE__ */ React26.createElement(
-      Box,
+    Children2.map(children, (child, idx) => /* @__PURE__ */ React28.createElement(
+      Box4,
       {
         css: {
           // Stretch each column to the given value
@@ -1245,7 +1475,7 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import React27 from "react";
+import React29 from "react";
 import { size as tokenSize } from "@marigold/tokens";
 var ALIGN_ITEMS = {
   left: "start",
@@ -1276,8 +1506,8 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = tokenSize[contentType][size];
-  return /* @__PURE__ */ React27.createElement(
-    Box,
+  return /* @__PURE__ */ React29.createElement(
+    Box4,
     {
       css: {
         display: "grid",
@@ -1294,29 +1524,29 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React32, { useRef as useRef7 } from "react";
-import { useButton as useButton3 } from "@react-aria/button";
+import React34, { useRef as useRef9 } from "react";
+import { useButton as useButton4 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import {
-  Box as Box18,
-  useComponentStyles as useComponentStyles15
+  Box as Box20,
+  useComponentStyles as useComponentStyles16
 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import React28 from "react";
+import React30 from "react";
 import {
-  useComponentStyles as useComponentStyles13
+  useComponentStyles as useComponentStyles14
 } from "@marigold/system";
 var Header = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles13("Header", { variant, size });
-  return /* @__PURE__ */ React28.createElement(Box, { as: "header", ...props, css: styles }, children);
+  const styles = useComponentStyles14("Header", { variant, size });
+  return /* @__PURE__ */ React30.createElement(Box4, { as: "header", ...props, css: styles }, children);
 };
 
 // src/Headline/Headline.tsx
-import React29 from "react";
+import React31 from "react";
 import {
-  Box as Box17,
-  useComponentStyles as useComponentStyles14
+  Box as Box19,
+  useComponentStyles as useComponentStyles15
 } from "@marigold/system";
 var Headline = ({
   children,
@@ -1327,12 +1557,12 @@ var Headline = ({
   level = "1",
   ...props
 }) => {
-  const styles = useComponentStyles14("Headline", {
+  const styles = useComponentStyles15("Headline", {
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ React29.createElement(
-    Box17,
+  return /* @__PURE__ */ React31.createElement(
+    Box19,
     {
       as: `h${level}`,
       ...props,
@@ -1348,7 +1578,7 @@ var DialogContext = createContext4({});
 var useDialogContext = () => useContext4(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-import React30, { useRef as useRef6 } from "react";
+import React32, { useRef as useRef8 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 var DialogTrigger = ({
@@ -1356,11 +1586,11 @@ var DialogTrigger = ({
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = React30.Children.toArray(children);
-  const dialogTriggerRef = useRef6(null);
+  const [dialogTrigger, dialog] = React32.Children.toArray(children);
+  const dialogTriggerRef = useRef8(null);
   const state = useOverlayTriggerState({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React30.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React32.createElement(
     PressResponder,
     {
       ref: dialogTriggerRef,
@@ -1368,7 +1598,7 @@ var DialogTrigger = ({
       onPress: state.toggle
     },
     dialogTrigger
-  ), /* @__PURE__ */ React30.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React30.createElement(
+  ), /* @__PURE__ */ React32.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React32.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1382,7 +1612,7 @@ var DialogTrigger = ({
 
 // src/Dialog/DialogController.tsx
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import React31 from "react";
+import React33 from "react";
 var DialogController = ({
   children,
   dismissable = true,
@@ -1395,7 +1625,7 @@ var DialogController = ({
     onOpenChange
   });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React31.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React31.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React33.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React33.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1409,16 +1639,16 @@ var DialogController = ({
 
 // src/Dialog/Dialog.tsx
 var CloseButton = ({ css }) => {
-  const ref = useRef7(null);
+  const ref = useRef9(null);
   const { close } = useDialogContext();
-  const { buttonProps } = useButton3(
+  const { buttonProps } = useButton4(
     {
       onPress: () => close == null ? void 0 : close()
     },
     ref
   );
-  return /* @__PURE__ */ React32.createElement(Box18, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React32.createElement(
-    Box18,
+  return /* @__PURE__ */ React34.createElement(Box20, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React34.createElement(
+    Box20,
     {
       as: "button",
       __baseCSS: {
@@ -1434,7 +1664,7 @@ var CloseButton = ({ css }) => {
       ref,
       ...buttonProps
     },
-    /* @__PURE__ */ React32.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React34.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React34.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -1445,9 +1675,9 @@ var CloseButton = ({ css }) => {
   ));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = React32.Children.toArray(children);
+  const childs = React34.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React32.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => React34.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1455,7 +1685,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React32.cloneElement(
+  const titleChild = React34.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1469,43 +1699,43 @@ var Dialog = ({
   closeButton,
   ...props
 }) => {
-  const ref = useRef7(null);
+  const ref = useRef9(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const styles = useComponentStyles15(
+  const styles = useComponentStyles16(
     "Dialog",
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ React32.createElement(Box18, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ React32.createElement(CloseButton, { css: styles.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  return /* @__PURE__ */ React34.createElement(Box20, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ React34.createElement(CloseButton, { css: styles.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 React33 from "react";
+import React35 from "react";
 import { useSeparator } from "@react-aria/separator";
-import { Box as Box19, useComponentStyles as useComponentStyles16 } from "@marigold/system";
+import { Box as Box21, useComponentStyles as useComponentStyles17 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
-  const styles = useComponentStyles16("Divider", { variant });
-  return /* @__PURE__ */ React33.createElement(Box19, { css: styles, ...props, ...separatorProps });
+  const styles = useComponentStyles17("Divider", { variant });
+  return /* @__PURE__ */ React35.createElement(Box21, { css: styles, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-import React34 from "react";
+import React36 from "react";
 import {
-  useComponentStyles as useComponentStyles17
+  useComponentStyles as useComponentStyles18
 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles17("Footer", { variant, size });
-  return /* @__PURE__ */ React34.createElement(Box, { as: "footer", ...props, css: styles }, children);
+  const styles = useComponentStyles18("Footer", { variant, size });
+  return /* @__PURE__ */ React36.createElement(Box4, { as: "footer", ...props, css: styles }, children);
 };
 
 // src/Image/Image.tsx
-import React35 from "react";
-import { Box as Box20 } from "@marigold/system";
-import { useComponentStyles as useComponentStyles18 } from "@marigold/system";
+import React37 from "react";
+import { Box as Box22 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles19 } from "@marigold/system";
 var Image = ({
   variant,
   size,
@@ -1513,14 +1743,14 @@ var Image = ({
   position,
   ...props
 }) => {
-  const styles = useComponentStyles18("Image", { variant, size });
+  const styles = useComponentStyles19("Image", { variant, size });
   const css = {
     ...styles,
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ React35.createElement(
-    Box20,
+  return /* @__PURE__ */ React37.createElement(
+    Box22,
     {
       ...props,
       as: "img",
@@ -1531,7 +1761,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React36 from "react";
+import React38 from "react";
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1548,8 +1778,8 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ React36.createElement(
-  Box,
+}) => /* @__PURE__ */ React38.createElement(
+  Box4,
   {
     css: {
       display: "flex",
@@ -1564,14 +1794,14 @@ var Inline = ({
 );
 
 // src/Inset/Inset.tsx
-import React37 from "react";
-import { Box as Box21 } from "@marigold/system";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ React37.createElement(Box21, { css: space ? { p: space } : { px: spaceX, py: spaceY } }, children);
+import React39 from "react";
+import { Box as Box23 } from "@marigold/system";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ React39.createElement(Box23, { css: space ? { p: space } : { px: spaceX, py: spaceY } }, children);
 
 // src/Link/Link.tsx
-import React38, { forwardRef as forwardRef8 } from "react";
+import React40, { forwardRef as forwardRef8 } from "react";
 import { useLink } from "@react-aria/link";
-import { useComponentStyles as useComponentStyles19 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles20 } from "@marigold/system";
 import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
 var Link = forwardRef8(
   ({
@@ -1593,9 +1823,9 @@ var Link = forwardRef8(
       },
       linkRef
     );
-    const styles = useComponentStyles19("Link", { variant, size });
-    return /* @__PURE__ */ React38.createElement(
-      Box,
+    const styles = useComponentStyles20("Link", { variant, size });
+    return /* @__PURE__ */ React40.createElement(
+      Box4,
       {
         as,
         role: "link",
@@ -1610,10 +1840,10 @@ var Link = forwardRef8(
 );
 
 // src/List/List.tsx
-import React40 from "react";
+import React42 from "react";
 import {
-  Box as Box23,
-  useComponentStyles as useComponentStyles20
+  Box as Box25,
+  useComponentStyles as useComponentStyles21
 } from "@marigold/system";
 
 // src/List/Context.ts
@@ -1622,11 +1852,11 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import React39 from "react";
-import { Box as Box22 } from "@marigold/system";
+import React41 from "react";
+import { Box as Box24 } from "@marigold/system";
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ React39.createElement(Box22, { ...props, as: "li", css: styles }, children);
+  return /* @__PURE__ */ React41.createElement(Box24, { ...props, as: "li", css: styles }, children);
 };
 
 // src/List/List.tsx
@@ -1637,23 +1867,23 @@ var List = ({
   size,
   ...props
 }) => {
-  const styles = useComponentStyles20(
+  const styles = useComponentStyles21(
     "List",
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ React40.createElement(Box23, { ...props, as, css: styles[as] }, /* @__PURE__ */ React40.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
+  return /* @__PURE__ */ React42.createElement(Box25, { ...props, as, css: styles[as] }, /* @__PURE__ */ React42.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React43, { useRef as useRef10 } from "react";
+import React46, { useRef as useRef12 } from "react";
 import { useMenu } from "@react-aria/menu";
-import { Item as Item2 } from "@react-stately/collections";
-import { useTreeState } from "@react-stately/tree";
+import { Item as Item3, Section } from "@react-stately/collections";
+import { useTreeState as useTreeState2 } from "@react-stately/tree";
 import {
-  Box as Box25,
-  useComponentStyles as useComponentStyles21
+  Box as Box28,
+  useComponentStyles as useComponentStyles23
 } from "@marigold/system";
 
 // src/Menu/Context.ts
@@ -1665,7 +1895,7 @@ var MenuContext = createContext6({});
 var useMenuContext = () => useContext6(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React41, { useRef as useRef8 } from "react";
+import React43, { useRef as useRef10 } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { PressResponder as PressResponder2 } from "@react-aria/interactions";
 import { useMenuTrigger } from "@react-aria/menu";
@@ -1677,8 +1907,8 @@ var MenuTrigger = ({
   onOpenChange,
   children
 }) => {
-  const [menuTrigger, menu] = React41.Children.toArray(children);
-  const menuTriggerRef = useRef8(null);
+  const [menuTrigger, menu] = React43.Children.toArray(children);
+  const menuTriggerRef = useRef10(null);
   const menuRef = useObjectRef7();
   const state = useMenuTriggerState({
     isOpen: open,
@@ -1697,7 +1927,7 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useResponsiveValue([true, false, false], 2);
-  return /* @__PURE__ */ React41.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React43.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React43.createElement(
     PressResponder2,
     {
       ...menuTriggerProps,
@@ -1705,17 +1935,17 @@ var MenuTrigger = ({
       isPressed: state.isOpen
     },
     menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ React41.createElement(Tray, { state }, menu) : /* @__PURE__ */ React41.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+  ), isSmallScreen ? /* @__PURE__ */ React43.createElement(Tray, { state }, menu) : /* @__PURE__ */ React43.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-import React42, { useRef as useRef9 } from "react";
-import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
+import React44, { useRef as useRef11 } from "react";
+import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
-import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { Box as Box24, useStateProps as useStateProps7 } from "@marigold/system";
+import { mergeProps as mergeProps7 } from "@react-aria/utils";
+import { Box as Box26, useStateProps as useStateProps8 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = useRef9(null);
+  const ref = useRef11(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = useMenuItem(
     {
@@ -1726,13 +1956,13 @@ var MenuItem = ({ item, state, onAction, css }) => {
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = useFocusRing4();
-  const stateProps = useStateProps7({
+  const { isFocusVisible, focusProps } = useFocusRing5();
+  const stateProps = useStateProps8({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React42.createElement(
-    Box24,
+  return /* @__PURE__ */ React44.createElement(
+    Box26,
     {
       as: "li",
       ref,
@@ -1742,7 +1972,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
         }
       },
       css,
-      ...mergeProps5(props, { onPointerDown: onPointerUp }, focusProps),
+      ...mergeProps7(props, { onPointerDown: onPointerUp }, focusProps),
       ...stateProps
     },
     item.rendered
@@ -1751,20 +1981,92 @@ var MenuItem = ({ item, state, onAction, css }) => {
 
 // src/Menu/Menu.tsx
 import { useSyncRef } from "@react-aria/utils";
+
+// src/Menu/MenuSection.tsx
+import React45 from "react";
+import { useMenuSection } from "@react-aria/menu";
+import { useSeparator as useSeparator2 } from "@react-aria/separator";
+import { Box as Box27, useComponentStyles as useComponentStyles22 } from "@marigold/system";
+var MenuSection = ({
+  onAction,
+  item,
+  state,
+  css
+}) => {
+  let { itemProps, headingProps, groupProps } = useMenuSection({
+    heading: item.rendered,
+    "aria-label": item["aria-label"]
+  });
+  let { separatorProps } = useSeparator2({
+    elementType: "li"
+  });
+  const styles = useComponentStyles22("Menu", {}, { parts: ["item"] });
+  return /* @__PURE__ */ React45.createElement(React45.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ React45.createElement(
+    Box27,
+    {
+      as: "li",
+      ...separatorProps,
+      __baseCSS: {
+        borderTop: "1px solid gray",
+        margin: "2px 5px"
+      }
+    }
+  ), /* @__PURE__ */ React45.createElement(Box27, { as: "li", ...itemProps }, item.rendered && /* @__PURE__ */ React45.createElement(
+    Box27,
+    {
+      as: "span",
+      ...headingProps,
+      __baseCSS: {
+        fontWeight: "normal",
+        padding: "4px 16px",
+        fontSize: "xxsmall",
+        color: "gray50"
+      }
+    },
+    item.rendered
+  ), /* @__PURE__ */ React45.createElement(
+    Box27,
+    {
+      as: "ul",
+      ...groupProps,
+      style: {
+        padding: 0,
+        listStyle: "none"
+      },
+      css
+    },
+    [...item.childNodes].map((node) => {
+      let item2 = /* @__PURE__ */ React45.createElement(
+        MenuItem,
+        {
+          key: node.key,
+          item: node,
+          state,
+          onAction,
+          css: styles.item
+        }
+      );
+      return item2;
+    })
+  )));
+};
+var MenuSection_default = MenuSection;
+
+// src/Menu/Menu.tsx
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
-  const ref = useRef10(null);
-  const state = useTreeState({ ...ownProps, selectionMode: "none" });
+  const ref = useRef12(null);
+  const state = useTreeState2({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const styles = useComponentStyles21(
+  const styles = useComponentStyles23(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ React43.createElement(
-    Box25,
+  return /* @__PURE__ */ React46.createElement(
+    Box28,
     {
       as: "ul",
       ref,
@@ -1776,31 +2078,45 @@ var Menu = ({ variant, size, ...props }) => {
       css: styles.container,
       ...menuProps
     },
-    [...state.collection].map((item) => /* @__PURE__ */ React43.createElement(
-      MenuItem,
-      {
-        key: item.key,
-        item,
-        state,
-        onAction: props.onAction,
-        css: styles.item
+    [...state.collection].map((item) => {
+      if (item.type === "section") {
+        return /* @__PURE__ */ React46.createElement(
+          MenuSection_default,
+          {
+            key: item.key,
+            item,
+            state,
+            onAction: props.onAction
+          }
+        );
       }
-    ))
+      return /* @__PURE__ */ React46.createElement(
+        MenuItem,
+        {
+          key: item.key,
+          item,
+          state,
+          onAction: props.onAction,
+          css: styles.item
+        }
+      );
+    })
   );
 };
 Menu.Trigger = MenuTrigger;
-Menu.Item = Item2;
+Menu.Item = Item3;
+Menu.Section = Section;
 
 // src/Menu/ActionMenu.tsx
-import React44 from "react";
-import { SVG as SVG4 } from "@marigold/system";
+import React47 from "react";
+import { SVG as SVG5 } from "@marigold/system";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ React44.createElement(Menu.Trigger, null, /* @__PURE__ */ React44.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React44.createElement(SVG4, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React44.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__ */ React44.createElement(Menu, { ...props }));
+  return /* @__PURE__ */ React47.createElement(Menu.Trigger, null, /* @__PURE__ */ React47.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React47.createElement(SVG5, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React47.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__ */ React47.createElement(Menu, { ...props }));
 };
 
 // src/Message/Message.tsx
-import React45 from "react";
-import { useComponentStyles as useComponentStyles22 } from "@marigold/system";
+import React48 from "react";
+import { useComponentStyles as useComponentStyles24 } from "@marigold/system";
 var Message = ({
   messageTitle,
   variant = "info",
@@ -1808,7 +2124,7 @@ var Message = ({
   children,
   ...props
 }) => {
-  const styles = useComponentStyles22(
+  const styles = useComponentStyles24(
     "Message",
     {
       variant,
@@ -1816,53 +2132,53 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React45.createElement("path", { d: "M12 2.85938C6.95437 2.85938 2.85938 6.95437 2.85938 12C2.85938 17.0456 6.95437 21.1406 12 21.1406C17.0456 21.1406 21.1406 17.0456 21.1406 12C21.1406 6.95437 17.0456 2.85938 12 2.85938ZM12.7875 15.9374H11.2125V11.2124H12.7875V15.9374ZM12.7875 9.6375H11.2125V8.0625H12.7875V9.6375Z" }));
+  var icon = /* @__PURE__ */ React48.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React48.createElement("path", { d: "M12 2.85938C6.95437 2.85938 2.85938 6.95437 2.85938 12C2.85938 17.0456 6.95437 21.1406 12 21.1406C17.0456 21.1406 21.1406 17.0456 21.1406 12C21.1406 6.95437 17.0456 2.85938 12 2.85938ZM12.7875 15.9374H11.2125V11.2124H12.7875V15.9374ZM12.7875 9.6375H11.2125V8.0625H12.7875V9.6375Z" }));
   if (variant === "warning") {
-    icon = /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React45.createElement("path", { d: "M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z" }));
+    icon = /* @__PURE__ */ React48.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React48.createElement("path", { d: "M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z" }));
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React45.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" }));
+    icon = /* @__PURE__ */ React48.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React48.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" }));
   }
-  return /* @__PURE__ */ React45.createElement(Box, { css: styles.container, ...props }, /* @__PURE__ */ React45.createElement(Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ React45.createElement(
-    Box,
+  return /* @__PURE__ */ React48.createElement(Box4, { css: styles.container, ...props }, /* @__PURE__ */ React48.createElement(Box4, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ React48.createElement(
+    Box4,
     {
       role: "presentation",
       __baseCSS: { flex: "0 0 16px" },
       css: styles.icon
     },
     icon
-  ), /* @__PURE__ */ React45.createElement(Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ React45.createElement(Box, { css: styles.content }, children));
+  ), /* @__PURE__ */ React48.createElement(Box4, { css: styles.title }, messageTitle)), /* @__PURE__ */ React48.createElement(Box4, { css: styles.content }, children));
 };
 
 // src/NumberField/NumberField.tsx
-import React47, { forwardRef as forwardRef9 } from "react";
-import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
+import React50, { forwardRef as forwardRef9 } from "react";
+import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps7, useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { mergeProps as mergeProps9, useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
-  Box as Box27,
-  useComponentStyles as useComponentStyles23,
-  useStateProps as useStateProps9
+  Box as Box30,
+  useComponentStyles as useComponentStyles25,
+  useStateProps as useStateProps10
 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import React46, { useRef as useRef11 } from "react";
-import { useButton as useButton4 } from "@react-aria/button";
+import React49, { useRef as useRef13 } from "react";
+import { useButton as useButton5 } from "@react-aria/button";
 import { useHover as useHover4 } from "@react-aria/interactions";
-import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { Box as Box26, useStateProps as useStateProps8 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React46.createElement(
-  Box26,
+import { mergeProps as mergeProps8 } from "@react-aria/utils";
+import { Box as Box29, useStateProps as useStateProps9 } from "@marigold/system";
+var Plus = () => /* @__PURE__ */ React49.createElement(
+  Box29,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ React46.createElement(
+  /* @__PURE__ */ React49.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1871,15 +2187,15 @@ var Plus = () => /* @__PURE__ */ React46.createElement(
     }
   )
 );
-var Minus = () => /* @__PURE__ */ React46.createElement(
-  Box26,
+var Minus = () => /* @__PURE__ */ React49.createElement(
+  Box29,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ React46.createElement(
+  /* @__PURE__ */ React49.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1889,20 +2205,20 @@ var Minus = () => /* @__PURE__ */ React46.createElement(
   )
 );
 var StepButton = ({ direction, css, ...props }) => {
-  const ref = useRef11(null);
-  const { buttonProps, isPressed } = useButton4(
+  const ref = useRef13(null);
+  const { buttonProps, isPressed } = useButton5(
     { ...props, elementType: "div" },
     ref
   );
   const { hoverProps, isHovered } = useHover4(props);
-  const stateProps = useStateProps8({
+  const stateProps = useStateProps9({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React46.createElement(
-    Box26,
+  return /* @__PURE__ */ React49.createElement(
+    Box29,
     {
       __baseCSS: {
         display: "flex",
@@ -1911,10 +2227,10 @@ var StepButton = ({ direction, css, ...props }) => {
         cursor: props.isDisabled ? "not-allowed" : "pointer"
       },
       css,
-      ...mergeProps6(buttonProps, hoverProps),
+      ...mergeProps8(buttonProps, hoverProps),
       ...stateProps
     },
-    /* @__PURE__ */ React46.createElement(Icon3, null)
+    /* @__PURE__ */ React49.createElement(Icon3, null)
   );
 };
 
@@ -1952,24 +2268,24 @@ var NumberField = forwardRef9(
       decrementButtonProps
     } = useNumberField(props, state, inputRef);
     const { hoverProps, isHovered } = useHover5({ isDisabled: disabled });
-    const { focusProps, isFocused } = useFocusRing5({
+    const { focusProps, isFocused } = useFocusRing6({
       within: true,
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = useComponentStyles23(
+    const styles = useComponentStyles25(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
     );
-    const stateProps = useStateProps9({
+    const stateProps = useStateProps10({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React47.createElement(
+    return /* @__PURE__ */ React50.createElement(
       FieldBase,
       {
         label: props.label,
@@ -1985,8 +2301,8 @@ var NumberField = forwardRef9(
         size,
         width
       },
-      /* @__PURE__ */ React47.createElement(
-        Box27,
+      /* @__PURE__ */ React50.createElement(
+        Box30,
         {
           "data-group": true,
           __baseCSS: {
@@ -1999,10 +2315,10 @@ var NumberField = forwardRef9(
             }
           },
           css: styles.group,
-          ...mergeProps7(groupProps, focusProps, hoverProps),
+          ...mergeProps9(groupProps, focusProps, hoverProps),
           ...stateProps
         },
-        showStepper && /* @__PURE__ */ React47.createElement(
+        showStepper && /* @__PURE__ */ React50.createElement(
           StepButton,
           {
             direction: "down",
@@ -2010,7 +2326,7 @@ var NumberField = forwardRef9(
             ...decrementButtonProps
           }
         ),
-        /* @__PURE__ */ React47.createElement(
+        /* @__PURE__ */ React50.createElement(
           Input,
           {
             ref: inputRef,
@@ -2020,7 +2336,7 @@ var NumberField = forwardRef9(
             ...stateProps
           }
         ),
-        showStepper && /* @__PURE__ */ React47.createElement(
+        showStepper && /* @__PURE__ */ React50.createElement(
           StepButton,
           {
             direction: "up",
@@ -2038,7 +2354,7 @@ import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigol
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React48 from "react";
+import React51 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -2061,27 +2377,27 @@ function MarigoldProvider({
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ React48.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React51.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React51.createElement(
     Global,
     {
       normalizeDocument: isTopLevel && normalizeDocument,
       selector
     }
-  ), isTopLevel ? /* @__PURE__ */ React48.createElement(OverlayProvider, null, children) : children);
+  ), isTopLevel ? /* @__PURE__ */ React51.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React50, {
+import React53, {
   forwardRef as forwardRef10
 } from "react";
 import { useHover as useHover6 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
-import { mergeProps as mergeProps8, useObjectRef as useObjectRef9 } from "@react-aria/utils";
+import { mergeProps as mergeProps10, useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import {
-  Box as Box29,
-  useComponentStyles as useComponentStyles24,
-  useStateProps as useStateProps11
+  Box as Box32,
+  useComponentStyles as useComponentStyles26,
+  useStateProps as useStateProps12
 } from "@marigold/system";
 
 // src/Radio/Context.ts
@@ -2092,10 +2408,10 @@ var RadioGroupContext = createContext7(
 var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React49 from "react";
+import React52 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
-import { Box as Box28, useStateProps as useStateProps10 } from "@marigold/system";
+import { Box as Box31, useStateProps as useStateProps11 } from "@marigold/system";
 var RadioGroup = ({
   children,
   orientation = "vertical",
@@ -2115,12 +2431,12 @@ var RadioGroup = ({
   };
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(props, state);
-  const stateProps = useStateProps10({
+  const stateProps = useStateProps11({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React52.createElement(
     FieldBase,
     {
       width,
@@ -2136,8 +2452,8 @@ var RadioGroup = ({
       required,
       ...radioGroupProps
     },
-    /* @__PURE__ */ React49.createElement(
-      Box28,
+    /* @__PURE__ */ React52.createElement(
+      Box31,
       {
         role: "presentation",
         "data-orientation": orientation,
@@ -2148,15 +2464,15 @@ var RadioGroup = ({
           gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
         }
       },
-      /* @__PURE__ */ React49.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
+      /* @__PURE__ */ React52.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
     )
   );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React50.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React50.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React50.createElement(
-  Box29,
+var Dot = () => /* @__PURE__ */ React53.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React53.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React53.createElement(
+  Box32,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -2173,7 +2489,7 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React50.createElemen
     css,
     ...props
   },
-  checked ? /* @__PURE__ */ React50.createElement(Dot, null) : null
+  checked ? /* @__PURE__ */ React53.createElement(Dot, null) : null
 );
 var Radio = forwardRef10(
   ({ width, disabled, ...props }, ref) => {
@@ -2190,14 +2506,14 @@ var Radio = forwardRef10(
       state,
       inputRef
     );
-    const styles = useComponentStyles24(
+    const styles = useComponentStyles26(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
     const { hoverProps, isHovered } = useHover6({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing6();
-    const stateProps = useStateProps11({
+    const { isFocusVisible, focusProps } = useFocusRing7();
+    const stateProps = useStateProps12({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -2205,8 +2521,8 @@ var Radio = forwardRef10(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React50.createElement(
-      Box29,
+    return /* @__PURE__ */ React53.createElement(
+      Box32,
       {
         as: "label",
         __baseCSS: {
@@ -2217,10 +2533,10 @@ var Radio = forwardRef10(
           width: width || groupWidth || "100%"
         },
         css: styles.container,
-        ...mergeProps8(hoverProps, stateProps)
+        ...mergeProps10(hoverProps, stateProps)
       },
-      /* @__PURE__ */ React50.createElement(
-        Box29,
+      /* @__PURE__ */ React53.createElement(
+        Box32,
         {
           as: "input",
           ref: inputRef,
@@ -2234,33 +2550,33 @@ var Radio = forwardRef10(
             opacity: 1e-4,
             cursor: inputProps.disabled ? "not-allowed" : "pointer"
           },
-          ...mergeProps8(inputProps, focusProps)
+          ...mergeProps10(inputProps, focusProps)
         }
       ),
-      /* @__PURE__ */ React50.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
-      /* @__PURE__ */ React50.createElement(Box29, { css: styles.label, ...stateProps }, props.children)
+      /* @__PURE__ */ React53.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
+      /* @__PURE__ */ React53.createElement(Box32, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React51, {
+import React54, {
   forwardRef as forwardRef11,
-  useRef as useRef12
+  useRef as useRef14
 } from "react";
-import { useButton as useButton5 } from "@react-aria/button";
-import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+import { useButton as useButton6 } from "@react-aria/button";
+import { useFocusRing as useFocusRing8 } 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 Item3, Section } from "@react-stately/collections";
-import { mergeProps as mergeProps9, useObjectRef as useObjectRef10 } from "@react-aria/utils";
+import { Item as Item4, Section as Section2 } from "@react-stately/collections";
+import { mergeProps as mergeProps11, useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
-  Box as Box30,
-  useComponentStyles as useComponentStyles25,
+  Box as Box33,
+  useComponentStyles as useComponentStyles27,
   useResponsiveValue as useResponsiveValue2,
-  useStateProps as useStateProps12
+  useStateProps as useStateProps13
 } from "@marigold/system";
 
 // src/Select/intl.ts
@@ -2274,8 +2590,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React51.createElement(
-  Box30,
+var Chevron = ({ css }) => /* @__PURE__ */ React54.createElement(
+  Box33,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16, fill: "none" },
@@ -2284,7 +2600,7 @@ var Chevron = ({ css }) => /* @__PURE__ */ React51.createElement(
     stroke: "currentColor",
     strokeWidth: 2
   },
-  /* @__PURE__ */ React51.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  /* @__PURE__ */ React54.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
 );
 var Select = forwardRef11(
   ({
@@ -2310,7 +2626,7 @@ var Select = forwardRef11(
     };
     const state = useSelectState(props);
     const buttonRef = useObjectRef10(ref);
-    const listboxRef = useRef12(null);
+    const listboxRef = useRef14(null);
     const isSmallScreen = useResponsiveValue2([true, false, false], 2);
     const {
       labelProps,
@@ -2320,23 +2636,23 @@ var Select = forwardRef11(
       descriptionProps,
       errorMessageProps
     } = useSelect(props, state, buttonRef);
-    const { buttonProps } = useButton5(
+    const { buttonProps } = useButton6(
       { isDisabled: disabled, ...triggerProps },
       buttonRef
     );
-    const { focusProps, isFocusVisible } = useFocusRing7();
-    const styles = useComponentStyles25(
+    const { focusProps, isFocusVisible } = useFocusRing8();
+    const styles = useComponentStyles27(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
     );
-    const stateProps = useStateProps12({
+    const stateProps = useStateProps13({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ React51.createElement(
+    return /* @__PURE__ */ React54.createElement(
       FieldBase,
       {
         variant,
@@ -2353,7 +2669,7 @@ var Select = forwardRef11(
         disabled,
         required
       },
-      /* @__PURE__ */ React51.createElement(
+      /* @__PURE__ */ React54.createElement(
         HiddenSelect,
         {
           state,
@@ -2363,8 +2679,8 @@ var Select = forwardRef11(
           isDisabled: disabled
         }
       ),
-      /* @__PURE__ */ React51.createElement(
-        Box30,
+      /* @__PURE__ */ React54.createElement(
+        Box33,
         {
           as: "button",
           __baseCSS: {
@@ -2376,11 +2692,11 @@ var Select = forwardRef11(
           },
           css: styles.button,
           ref: buttonRef,
-          ...mergeProps9(buttonProps, focusProps),
+          ...mergeProps11(buttonProps, focusProps),
           ...stateProps
         },
-        /* @__PURE__ */ React51.createElement(
-          Box30,
+        /* @__PURE__ */ React54.createElement(
+          Box33,
           {
             css: {
               overflow: "hidden",
@@ -2390,9 +2706,9 @@ var Select = forwardRef11(
           },
           state.selectedItem ? state.selectedItem.rendered : props.placeholder
         ),
-        /* @__PURE__ */ React51.createElement(Chevron, { css: styles.icon })
+        /* @__PURE__ */ React54.createElement(Chevron, { css: styles.icon })
       ),
-      isSmallScreen ? /* @__PURE__ */ React51.createElement(Tray, { state }, /* @__PURE__ */ React51.createElement(
+      isSmallScreen ? /* @__PURE__ */ React54.createElement(Tray, { state }, /* @__PURE__ */ React54.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2401,7 +2717,7 @@ var Select = forwardRef11(
           size,
           ...menuProps
         }
-      )) : /* @__PURE__ */ React51.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React51.createElement(
+      )) : /* @__PURE__ */ React54.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React54.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2414,34 +2730,34 @@ var Select = forwardRef11(
     );
   }
 );
-Select.Option = Item3;
-Select.Section = Section;
+Select.Option = Item4;
+Select.Section = Section2;
 
 // src/Slider/Slider.tsx
-import React53, { forwardRef as forwardRef12 } from "react";
+import React56, { forwardRef as forwardRef12 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
 import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
-import { useComponentStyles as useComponentStyles26 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles28 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React52, { useEffect } from "react";
+import React55, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
-import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { useStateProps as useStateProps13 } from "@marigold/system";
+import { mergeProps as mergeProps12 } from "@react-aria/utils";
+import { useStateProps as useStateProps14 } from "@marigold/system";
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/Slider/Thumb.tsx
-import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = React52.useRef(null);
-  const { isFocusVisible, focusProps, isFocused } = useFocusRing8();
+  const inputRef = React55.useRef(null);
+  const { isFocusVisible, focusProps, isFocused } = useFocusRing9();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = useStateProps13({
+  const stateProps = useStateProps14({
     focus: focused,
     disabled
   });
@@ -2457,21 +2773,21 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
   useEffect(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React52.createElement(
-    Box,
+  return /* @__PURE__ */ React55.createElement(
+    Box4,
     {
       __baseCSS: { top: "50%" },
       css: styles,
       ...thumbProps,
       ...stateProps
     },
-    /* @__PURE__ */ React52.createElement(VisuallyHidden, null, /* @__PURE__ */ React52.createElement(
-      Box,
+    /* @__PURE__ */ React55.createElement(VisuallyHidden, null, /* @__PURE__ */ React55.createElement(
+      Box4,
       {
         as: "input",
         type: "range",
         ref: inputRef,
-        ...mergeProps10(inputProps, focusProps)
+        ...mergeProps12(inputProps, focusProps)
       }
     ))
   );
@@ -2492,13 +2808,13 @@ var Slider = forwardRef12(
       state,
       trackRef
     );
-    const styles = useComponentStyles26(
+    const styles = useComponentStyles28(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ React53.createElement(
-      Box,
+    return /* @__PURE__ */ React56.createElement(
+      Box4,
       {
         __baseCSS: {
           display: "flex",
@@ -2508,8 +2824,8 @@ var Slider = forwardRef12(
         },
         ...groupProps
       },
-      /* @__PURE__ */ React53.createElement(Box, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ React53.createElement(Box, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ React53.createElement(
-        Box,
+      /* @__PURE__ */ React56.createElement(Box4, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ React56.createElement(Box4, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ React56.createElement(
+        Box4,
         {
           as: "output",
           ...outputProps,
@@ -2518,8 +2834,8 @@ var Slider = forwardRef12(
         },
         state.getThumbValueLabel(0)
       )),
-      /* @__PURE__ */ React53.createElement(
-        Box,
+      /* @__PURE__ */ React56.createElement(
+        Box4,
         {
           ...trackProps,
           ref: trackRef,
@@ -2529,8 +2845,8 @@ var Slider = forwardRef12(
             cursor: props.disabled ? "not-allowed" : "pointer"
           }
         },
-        /* @__PURE__ */ React53.createElement(
-          Box,
+        /* @__PURE__ */ React56.createElement(
+          Box4,
           {
             __baseCSS: {
               top: "50%",
@@ -2539,7 +2855,7 @@ var Slider = forwardRef12(
             css: styles.track
           }
         ),
-        /* @__PURE__ */ React53.createElement(
+        /* @__PURE__ */ React56.createElement(
           Thumb,
           {
             state,
@@ -2554,13 +2870,13 @@ var Slider = forwardRef12(
 );
 
 // src/Split/Split.tsx
-import React54 from "react";
-import { Box as Box31 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React54.createElement(Box31, { ...props, role: "separator", css: { flexGrow: 1 } });
+import React57 from "react";
+import { Box as Box34 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React57.createElement(Box34, { ...props, role: "separator", css: { flexGrow: 1 } });
 
 // src/Stack/Stack.tsx
-import React55 from "react";
-import { Box as Box32 } from "@marigold/system";
+import React58 from "react";
+import { Box as Box35 } from "@marigold/system";
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2580,8 +2896,8 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ React55.createElement(
-  Box32,
+}) => /* @__PURE__ */ React58.createElement(
+  Box35,
   {
     css: {
       display: "flex",
@@ -2598,14 +2914,14 @@ var Stack = ({
 );
 
 // src/Switch/Switch.tsx
-import React56, { forwardRef as forwardRef13 } from "react";
-import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
+import React59, { forwardRef as forwardRef13 } from "react";
+import { useFocusRing as useFocusRing10 } 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 {
-  useComponentStyles as useComponentStyles27,
-  useStateProps as useStateProps14
+  useComponentStyles as useComponentStyles29,
+  useStateProps as useStateProps15
 } from "@marigold/system";
 var Switch = forwardRef13(
   ({
@@ -2628,20 +2944,20 @@ var Switch = forwardRef13(
     };
     const state = useToggleState2(props);
     const { inputProps } = useSwitch(props, state, inputRef);
-    const { isFocusVisible, focusProps } = useFocusRing9();
-    const stateProps = useStateProps14({
+    const { isFocusVisible, focusProps } = useFocusRing10();
+    const stateProps = useStateProps15({
       checked: state.isSelected,
       disabled,
       readOnly,
       focus: isFocusVisible
     });
-    const styles = useComponentStyles27(
+    const styles = useComponentStyles29(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ React56.createElement(
-      Box,
+    return /* @__PURE__ */ React59.createElement(
+      Box4,
       {
         as: "label",
         __baseCSS: {
@@ -2654,8 +2970,8 @@ var Switch = forwardRef13(
         },
         css: styles.container
       },
-      /* @__PURE__ */ React56.createElement(
-        Box,
+      /* @__PURE__ */ React59.createElement(
+        Box4,
         {
           as: "input",
           ref: inputRef,
@@ -2673,9 +2989,9 @@ var Switch = forwardRef13(
           ...focusProps
         }
       ),
-      props.children && /* @__PURE__ */ React56.createElement(Box, { css: styles.label }, props.children),
-      /* @__PURE__ */ React56.createElement(
-        Box,
+      props.children && /* @__PURE__ */ React59.createElement(Box4, { css: styles.label }, props.children),
+      /* @__PURE__ */ React59.createElement(
+        Box4,
         {
           __baseCSS: {
             position: "relative",
@@ -2688,8 +3004,8 @@ var Switch = forwardRef13(
           css: styles.track,
           ...stateProps
         },
-        /* @__PURE__ */ React56.createElement(
-          Box,
+        /* @__PURE__ */ React59.createElement(
+          Box4,
           {
             __baseCSS: {
               display: "block",
@@ -2717,7 +3033,7 @@ var Switch = forwardRef13(
 );
 
 // src/Table/Table.tsx
-import React65, { useRef as useRef19 } from "react";
+import React68, { useRef as useRef21 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2728,8 +3044,8 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box38,
-  useComponentStyles as useComponentStyles29
+  Box as Box41,
+  useComponentStyles as useComponentStyles31
 } from "@marigold/system";
 
 // src/Table/Context.tsx
@@ -2738,21 +3054,21 @@ var TableContext = createContext8({});
 var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React57 from "react";
+import React60 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React57.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React60.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-import React58, { useRef as useRef13 } from "react";
+import React61, { useRef as useRef15 } from "react";
 import { useTableCell } from "@react-aria/table";
-import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { Box as Box33, useStateProps as useStateProps15 } from "@marigold/system";
+import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
+import { mergeProps as mergeProps13 } from "@react-aria/utils";
+import { Box as Box36, useStateProps as useStateProps16 } from "@marigold/system";
 var TableCell = ({ cell }) => {
-  const ref = useRef13(null);
+  const ref = useRef15(null);
   const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -2771,15 +3087,15 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps15({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React58.createElement(
-    Box33,
+  const { focusProps, isFocusVisible } = useFocusRing11();
+  const stateProps = useStateProps16({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React61.createElement(
+    Box36,
     {
       as: "td",
       ref,
       css: styles.cell,
-      ...mergeProps11(cellProps, focusProps),
+      ...mergeProps13(cellProps, focusProps),
       ...stateProps
     },
     cell.rendered
@@ -2787,11 +3103,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React59, { useRef as useRef14 } from "react";
+import React62, { useRef as useRef16 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
-import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { Box as Box34, useStateProps as useStateProps16 } from "@marigold/system";
+import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
+import { mergeProps as mergeProps14 } from "@react-aria/utils";
+import { Box as Box37, useStateProps as useStateProps17 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2815,7 +3131,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef14(null);
+  const ref = useRef16(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -2828,10 +3144,10 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = useFocusRing11();
-  const stateProps = useStateProps16({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React59.createElement(
-    Box34,
+  const { focusProps, isFocusVisible } = useFocusRing12();
+  const stateProps = useStateProps17({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React62.createElement(
+    Box37,
     {
       as: "td",
       ref,
@@ -2841,25 +3157,25 @@ var TableCheckboxCell = ({ cell }) => {
         lineHeight: 1
       },
       css: styles.cell,
-      ...mergeProps12(gridCellProps, focusProps),
+      ...mergeProps14(gridCellProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React59.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React62.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import React60, { useRef as useRef15 } from "react";
-import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
+import React63, { useRef as useRef17 } from "react";
+import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
-import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { Box as Box35, useStateProps as useStateProps17 } from "@marigold/system";
+import { mergeProps as mergeProps15 } from "@react-aria/utils";
+import { Box as Box38, useStateProps as useStateProps18 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React60.createElement(
-  Box35,
+}) => /* @__PURE__ */ React63.createElement(
+  Box38,
   {
     as: "span",
     role: "presentation",
@@ -2874,7 +3190,7 @@ var SortIndicator = ({
 );
 var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = useRef15(null);
+  const ref = useRef17(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -2884,24 +3200,24 @@ var TableColumnHeader = ({ column }) => {
     ref
   );
   const { hoverProps, isHovered } = useHover7({});
-  const { focusProps, isFocusVisible } = useFocusRing12();
-  const stateProps = useStateProps17({
+  const { focusProps, isFocusVisible } = useFocusRing13();
+  const stateProps = useStateProps18({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React60.createElement(
-    Box35,
+  return /* @__PURE__ */ React63.createElement(
+    Box38,
     {
       as: "th",
       colSpan: column.colspan,
       ref,
       __baseCSS: { cursor: "default" },
       css: styles.header,
-      ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
+      ...mergeProps15(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
     column.rendered,
-    column.props.allowsSorting && /* @__PURE__ */ React60.createElement(
+    column.props.allowsSorting && /* @__PURE__ */ React63.createElement(
       SortIndicator,
       {
         direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2912,35 +3228,35 @@ var TableColumnHeader = ({ column }) => {
 };
 
 // src/Table/TableHeader.tsx
-import React61 from "react";
+import React64 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React61.createElement("thead", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React64.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React62, { useRef as useRef16 } from "react";
+import React65, { useRef as useRef18 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef16(null);
+  const ref = useRef18(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React62.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ React65.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-import React63, { useRef as useRef17 } from "react";
-import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
+import React66, { useRef as useRef19 } from "react";
+import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useHover as useHover8 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps14 } from "@react-aria/utils";
-import { Box as Box36, useComponentStyles as useComponentStyles28, useStateProps as useStateProps18 } from "@marigold/system";
+import { mergeProps as mergeProps16 } from "@react-aria/utils";
+import { Box as Box39, useComponentStyles as useComponentStyles30, useStateProps as useStateProps19 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
-  const ref = useRef17(null);
+  const ref = useRef19(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const { row: styles } = useComponentStyles28(
+  const { row: styles } = useComponentStyles30(
     "Table",
     { variant: variant || ctx.variant, size: size || ctx.size },
     { parts: ["row"] }
@@ -2954,19 +3270,19 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = useFocusRing13({ within: true });
+  const { focusProps, isFocusVisible } = useFocusRing14({ within: true });
   const { hoverProps, isHovered } = useHover8({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps18({
+  const stateProps = useStateProps19({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React63.createElement(
-    Box36,
+  return /* @__PURE__ */ React66.createElement(
+    Box39,
     {
       as: "tr",
       ref,
@@ -2974,7 +3290,7 @@ var TableRow = ({ children, row }) => {
         cursor: !interactive ? "text" : disabled ? "default" : "pointer"
       },
       css: styles,
-      ...mergeProps14(rowProps, focusProps, hoverProps),
+      ...mergeProps16(rowProps, focusProps, hoverProps),
       ...stateProps
     },
     children
@@ -2982,17 +3298,17 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React64, { useRef as useRef18 } from "react";
-import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
+import React67, { useRef as useRef20 } from "react";
+import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps15 } from "@react-aria/utils";
-import { Box as Box37, useStateProps as useStateProps19 } from "@marigold/system";
+import { mergeProps as mergeProps17 } from "@react-aria/utils";
+import { Box as Box40, useStateProps as useStateProps20 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
-  const ref = useRef18(null);
+  const ref = useRef20(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3003,13 +3319,13 @@ var TableSelectAllCell = ({ column }) => {
   );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
   const { hoverProps, isHovered } = useHover9({});
-  const { focusProps, isFocusVisible } = useFocusRing14();
-  const stateProps = useStateProps19({
+  const { focusProps, isFocusVisible } = useFocusRing15();
+  const stateProps = useStateProps20({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React64.createElement(
-    Box37,
+  return /* @__PURE__ */ React67.createElement(
+    Box40,
     {
       as: "th",
       ref,
@@ -3019,10 +3335,10 @@ var TableSelectAllCell = ({ column }) => {
         lineHeight: 1
       },
       css: styles.header,
-      ...mergeProps15(columnHeaderProps, hoverProps, focusProps),
+      ...mergeProps17(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React64.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React67.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
@@ -3035,7 +3351,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef19(null);
+  const tableRef = useRef21(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3043,14 +3359,14 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const styles = useComponentStyles29(
+  const styles = useComponentStyles31(
     "Table",
     { variant, size },
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ React65.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ React65.createElement(
-    Box38,
+  return /* @__PURE__ */ React68.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ React68.createElement(
+    Box41,
     {
       as: "table",
       ref: tableRef,
@@ -3064,16 +3380,16 @@ var Table = ({
       css: styles.table,
       ...gridProps
     },
-    /* @__PURE__ */ React65.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React65.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
+    /* @__PURE__ */ React68.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React68.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
       (column) => {
         var _a;
-        return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React65.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ React65.createElement(TableColumnHeader, { key: column.key, column });
+        return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React68.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ React68.createElement(TableColumnHeader, { key: column.key, column });
       }
     )))),
-    /* @__PURE__ */ React65.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React65.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
+    /* @__PURE__ */ React68.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React68.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
       (cell) => {
         var _a;
-        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React65.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React65.createElement(TableCell, { key: cell.key, cell });
+        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React68.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React68.createElement(TableCell, { key: cell.key, cell });
       }
     ))))
   ));
@@ -3085,11 +3401,11 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React66 from "react";
+import React69 from "react";
 import {
-  useComponentStyles as useComponentStyles30
+  useComponentStyles as useComponentStyles32
 } from "@marigold/system";
-import { Box as Box39 } from "@marigold/system";
+import { Box as Box42 } from "@marigold/system";
 var Text = ({
   variant,
   size,
@@ -3097,18 +3413,19 @@ var Text = ({
   align,
   color,
   fontSize,
+  fontStyle,
   fontWeight,
   cursor,
   outline,
   children,
   ...props
 }) => {
-  const styles = useComponentStyles30("Text", {
+  const styles = useComponentStyles32("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ React66.createElement(
-    Box39,
+  return /* @__PURE__ */ React69.createElement(
+    Box42,
     {
       as: "p",
       ...props,
@@ -3120,6 +3437,7 @@ var Text = ({
           cursor,
           outline,
           fontSize,
+          fontStyle,
           fontWeight,
           textAlign: align
         }
@@ -3130,15 +3448,15 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import React67, { forwardRef as forwardRef14 } from "react";
+import React70, { forwardRef as forwardRef14 } from "react";
 import { useHover as useHover10 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing16 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
 import {
-  Box as Box40,
-  useComponentStyles as useComponentStyles31,
-  useStateProps as useStateProps20
+  Box as Box43,
+  useComponentStyles as useComponentStyles33,
+  useStateProps as useStateProps21
 } from "@marigold/system";
 var TextArea = forwardRef14(
   ({
@@ -3166,16 +3484,16 @@ var TextArea = forwardRef14(
       textAreaRef
     );
     const { hoverProps, isHovered } = useHover10({});
-    const { focusProps, isFocusVisible } = useFocusRing15();
-    const stateProps = useStateProps20({
+    const { focusProps, isFocusVisible } = useFocusRing16();
+    const stateProps = useStateProps21({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    const styles = useComponentStyles31("TextArea", { variant, size });
-    return /* @__PURE__ */ React67.createElement(
+    const styles = useComponentStyles33("TextArea", { variant, size });
+    return /* @__PURE__ */ React70.createElement(
       FieldBase,
       {
         label,
@@ -3191,8 +3509,8 @@ var TextArea = forwardRef14(
         size,
         width
       },
-      /* @__PURE__ */ React67.createElement(
-        Box40,
+      /* @__PURE__ */ React70.createElement(
+        Box43,
         {
           as: "textarea",
           css: styles,
@@ -3209,12 +3527,12 @@ var TextArea = forwardRef14(
 );
 
 // src/TextField/TextField.tsx
-import React68, { forwardRef as forwardRef15 } from "react";
+import React71, { forwardRef as forwardRef15 } from "react";
 import { useHover as useHover11 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing16 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing17 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef14 } from "@react-aria/utils";
-import { useStateProps as useStateProps21 } from "@marigold/system";
+import { useStateProps as useStateProps22 } from "@marigold/system";
 var TextField = forwardRef15(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
@@ -3230,18 +3548,18 @@ var TextField = forwardRef15(
       inputRef
     );
     const { hoverProps, isHovered } = useHover11({});
-    const { focusProps, isFocused } = useFocusRing16({
+    const { focusProps, isFocused } = useFocusRing17({
       isTextInput: true,
       autoFocus
     });
-    const stateProps = useStateProps21({
+    const stateProps = useStateProps22({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React68.createElement(
+    return /* @__PURE__ */ React71.createElement(
       FieldBase,
       {
         label,
@@ -3257,7 +3575,7 @@ var TextField = forwardRef15(
         size,
         width
       },
-      /* @__PURE__ */ React68.createElement(
+      /* @__PURE__ */ React71.createElement(
         Input,
         {
           ref: inputRef,
@@ -3274,7 +3592,7 @@ var TextField = forwardRef15(
 );
 
 // src/Tiles/Tiles.tsx
-import React69 from "react";
+import React72 from "react";
 import { useTheme as useTheme3 } from "@marigold/system";
 var Tiles = ({
   space = "none",
@@ -3290,8 +3608,8 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React69.createElement(
-    Box,
+  return /* @__PURE__ */ React72.createElement(
+    Box4,
     {
       ...props,
       css: {
@@ -3310,11 +3628,11 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import React71 from "react";
+import React74 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box41,
-  useComponentStyles as useComponentStyles32
+  Box as Box44,
+  useComponentStyles as useComponentStyles34
 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
@@ -3323,7 +3641,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React70, { useRef as useRef20 } from "react";
+import React73, { useRef as useRef22 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -3336,7 +3654,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React70.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React73.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3344,8 +3662,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = useRef20(null);
-  const overlayRef = useRef20(null);
+  const tooltipTriggerRef = useRef22(null);
+  const overlayRef = useRef22(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     props,
@@ -3364,7 +3682,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React70.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React73.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React73.createElement(
     TooltipContext.Provider,
     {
       value: {
@@ -3376,7 +3694,7 @@ var TooltipTrigger = ({
         ...positionProps
       }
     },
-    /* @__PURE__ */ React70.createElement(Overlay, { open: state.isOpen }, tooltip)
+    /* @__PURE__ */ React73.createElement(Overlay, { open: state.isOpen }, tooltip)
   ));
 };
 
@@ -3384,13 +3702,13 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const styles = useComponentStyles32(
+  const styles = useComponentStyles34(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ React71.createElement(
-    Box41,
+  return /* @__PURE__ */ React74.createElement(
+    Box44,
     {
       ...tooltipProps,
       ...rest,
@@ -3398,9 +3716,9 @@ var Tooltip = ({ children, variant, size }) => {
       css: styles.container,
       "data-placement": placement
     },
-    /* @__PURE__ */ React71.createElement("div", null, children),
-    /* @__PURE__ */ React71.createElement(
-      Box41,
+    /* @__PURE__ */ React74.createElement("div", null, children),
+    /* @__PURE__ */ React74.createElement(
+      Box44,
       {
         ...arrowProps,
         __baseCSS: {
@@ -3420,10 +3738,10 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-import { SVG as SVG5 } from "@marigold/system";
-import React72, { forwardRef as forwardRef16 } from "react";
-var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement(
-  SVG5,
+import { SVG as SVG6 } from "@marigold/system";
+import React75, { forwardRef as forwardRef16 } from "react";
+var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React75.createElement(
+  SVG6,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3432,14 +3750,14 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
     ...props,
     ...ref
   },
-  /* @__PURE__ */ React72.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3451,13 +3769,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3469,13 +3787,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3487,13 +3805,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3505,13 +3823,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3523,13 +3841,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3541,13 +3859,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3559,13 +3877,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3577,13 +3895,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3595,13 +3913,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3613,13 +3931,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
       }
     )
   ),
-  /* @__PURE__ */ React72.createElement(
+  /* @__PURE__ */ React75.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__ */ React72.createElement(
+    /* @__PURE__ */ React75.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3633,13 +3951,15 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement
   )
 ));
 export {
+  Accordion,
+  AccordionItem,
   ActionMenu,
   Aside,
   Aspect,
   Autocomplete,
   Badge,
   Body,
-  Box,
+  Box4 as Box,
   Breakout,
   Button,
   Card,