@marigold/components 4.1.5 → 4.2.0

package/dist/index.js

@@ -69,9 +69,11 @@ __export(src_exports, {
   Text: () => Text,
   TextArea: () => TextArea,
   TextField: () => TextField,
-  ThemeProvider: () => import_system29.ThemeProvider,
+  ThemeProvider: () => import_system31.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => Tooltip,
+  Tray: () => Tray,
+  TrayWrapper: () => TrayWrapper,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   XLoader: () => XLoader,
@@ -79,7 +81,7 @@ __export(src_exports, {
   useAsyncList: () => import_data.useAsyncList,
   useCheckboxGroupContext: () => useCheckboxGroupContext,
   useListData: () => import_data.useListData,
-  useTheme: () => import_system29.useTheme
+  useTheme: () => import_system31.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -316,23 +318,26 @@ var Center = ({
 }, children);
 
 // src/Checkbox/Checkbox.tsx
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_checkbox3 = require("@react-aria/checkbox");
 var import_focus2 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_utils2 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
-var import_system8 = require("@marigold/system");
+var import_system10 = require("@marigold/system");
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_checkbox2 = require("@react-stately/checkbox");
-var import_system7 = require("@marigold/system");
+var import_system9 = require("@marigold/system");
+
+// src/FieldBase/FieldBase.tsx
+var import_react11 = __toESM(require("react"));
+var import_system8 = require("@marigold/system");
 
 // src/Label/Label.tsx
 var import_react9 = __toESM(require("react"));
-var import_icons = require("@marigold/icons");
 var import_system6 = require("@marigold/system");
 var Label = ({
   as = "label",
@@ -347,23 +352,110 @@ var Label = ({
     ...props,
     as,
     "aria-required": required,
+    __baseCSS: { display: "flex" },
     css: styles
-  }, children, required && /* @__PURE__ */ import_react9.default.createElement(import_icons.Required, {
+  }, children, required && /* @__PURE__ */ import_react9.default.createElement(import_system6.SVG, {
+    viewBox: "0 0 24 24",
     role: "presentation",
     size: 16,
     fill: "error"
-  }));
+  }, /* @__PURE__ */ import_react9.default.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
+var import_react10 = __toESM(require("react"));
+var import_system7 = require("@marigold/system");
+var HelpText = ({
+  variant,
+  size,
+  disabled,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  ...props
+}) => {
+  var _a;
+  const hasErrorMessage = errorMessage && error;
+  const styles = (0, import_system7.useComponentStyles)(
+    "HelpText",
+    { variant, size },
+    { parts: ["container", "icon"] }
+  );
+  return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+    ...hasErrorMessage ? errorMessageProps : descriptionProps,
+    ...props,
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+    css: styles.container
+  }, hasErrorMessage ? /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(import_system7.SVG, {
+    viewBox: "0 0 24 24",
+    role: "presentation",
+    size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
+  }, /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.createElement(import_react10.default.Fragment, null, description));
+};
+
+// src/FieldBase/FieldBase.tsx
+var FieldBase = ({
+  children,
+  variant,
+  size,
+  width = "100%",
+  disabled,
+  required,
+  label,
+  labelProps,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  stateProps,
+  ...props
+}) => {
+  const hasHelpText = !!description || errorMessage && error;
+  const style = (0, import_system8.useComponentStyles)("Field", { variant, size });
+  return /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
+    ...props,
+    __baseCSS: {
+      display: "flex",
+      flexDirection: "column",
+      width,
+      position: "relative"
+    },
+    css: style
+  }, label && /* @__PURE__ */ import_react11.default.createElement(Label, {
+    required,
+    variant,
+    size,
+    ...labelProps,
+    ...stateProps
+  }, label), /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
+    __baseCSS: { display: "flex", flexDirection: "column" }
+  }, children, hasHelpText && /* @__PURE__ */ import_react11.default.createElement(HelpText, {
+    ...stateProps,
+    variant,
+    size,
+    disabled,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps
+  })));
 };
 
 // src/Checkbox/CheckboxGroup.tsx
-var CheckboxGroupContext = (0, import_react10.createContext)(
+var CheckboxGroupContext = (0, import_react12.createContext)(
   null
 );
-var useCheckboxGroupContext = () => (0, import_react10.useContext)(CheckboxGroupContext);
+var useCheckboxGroupContext = () => (0, import_react12.useContext)(CheckboxGroupContext);
 var CheckboxGroup = ({
   children,
-  variant,
-  size,
   required,
   disabled,
   readOnly,
@@ -378,50 +470,54 @@ var CheckboxGroup = ({
     ...rest
   };
   const state = (0, import_checkbox2.useCheckboxGroupState)(props);
-  const { groupProps, labelProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
-  const styles = (0, import_system7.useComponentStyles)(
-    "CheckboxGroup",
-    { variant, size },
-    { parts: ["container", "group"] }
-  );
-  return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
-    ...groupProps,
-    css: styles.container
-  }, props.label && /* @__PURE__ */ import_react10.default.createElement(Label, {
-    as: "span",
+  const { groupProps, labelProps, descriptionProps, errorMessageProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
+  const stateProps = (0, import_system9.useStateProps)({
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ import_react12.default.createElement(FieldBase, {
+    label: props.label,
+    labelProps: { as: "span", ...labelProps },
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    disabled,
+    stateProps,
     required,
-    ...labelProps
-  }, props.label), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+    ...groupProps
+  }, /* @__PURE__ */ import_react12.default.createElement(import_system9.Box, {
     role: "presentation",
     __baseCSS: {
       display: "flex",
       flexDirection: "column",
       alignItems: "start"
-    },
-    css: styles.group
-  }, /* @__PURE__ */ import_react10.default.createElement(CheckboxGroupContext.Provider, {
-    value: { variant, size, error, ...state }
+    }
+  }, /* @__PURE__ */ import_react12.default.createElement(CheckboxGroupContext.Provider, {
+    value: { error, ...state }
   }, children)));
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ import_react11.default.createElement("svg", {
+var CheckMark = () => /* @__PURE__ */ import_react13.default.createElement("svg", {
   viewBox: "0 0 12 10"
-}, /* @__PURE__ */ import_react11.default.createElement("path", {
+}, /* @__PURE__ */ import_react13.default.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   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__ */ import_react11.default.createElement("svg", {
+var IndeterminateMark = () => /* @__PURE__ */ import_react13.default.createElement("svg", {
   width: "12",
   height: "3",
   viewBox: "0 0 12 3"
-}, /* @__PURE__ */ import_react11.default.createElement("path", {
+}, /* @__PURE__ */ import_react13.default.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
 }));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react13.default.createElement(import_system10.Box, {
   "aria-hidden": "true",
   __baseCSS: {
     flex: "0 0 16px",
@@ -437,8 +533,8 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import
   },
   css,
   ...props
-}, indeterminate ? /* @__PURE__ */ import_react11.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react11.default.createElement(CheckMark, null) : null);
-var Checkbox = (0, import_react11.forwardRef)(
+}, indeterminate ? /* @__PURE__ */ import_react13.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react13.default.createElement(CheckMark, null) : null);
+var Checkbox = (0, import_react13.forwardRef)(
   ({
     size,
     variant,
@@ -483,17 +579,17 @@ var Checkbox = (0, import_react11.forwardRef)(
       }),
       inputRef
     );
-    const styles = (0, import_system8.useComponentStyles)(
+    const styles = (0, import_system10.useComponentStyles)(
       "Checkbox",
       {
-        variant: (groupState == null ? void 0 : groupState.variant) || variant,
-        size: (groupState == null ? void 0 : groupState.size) || size
+        variant,
+        size
       },
       { parts: ["container", "label", "checkbox"] }
     );
     const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
     const { isFocusVisible, focusProps } = (0, import_focus2.useFocusRing)();
-    const stateProps = (0, import_system8.useStateProps)({
+    const stateProps = (0, import_system10.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -502,7 +598,7 @@ var Checkbox = (0, import_react11.forwardRef)(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
+    return /* @__PURE__ */ import_react13.default.createElement(import_system10.Box, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -513,7 +609,7 @@ var Checkbox = (0, import_react11.forwardRef)(
       css: styles.container,
       ...hoverProps,
       ...stateProps
-    }, /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
+    }, /* @__PURE__ */ import_react13.default.createElement(import_system10.Box, {
       as: "input",
       ref: inputRef,
       css: {
@@ -528,12 +624,12 @@ var Checkbox = (0, import_react11.forwardRef)(
       },
       ...inputProps,
       ...focusProps
-    }), /* @__PURE__ */ import_react11.default.createElement(Icon, {
+    }), /* @__PURE__ */ import_react13.default.createElement(Icon, {
       checked: inputProps.checked,
       indeterminate,
       css: styles.checkbox,
       ...stateProps
-    }), props.children && /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
+    }), props.children && /* @__PURE__ */ import_react13.default.createElement(import_system10.Box, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -541,7 +637,7 @@ var Checkbox = (0, import_react11.forwardRef)(
 );
 
 // src/Columns/Columns.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var Columns = ({
   space = "none",
   columns,
@@ -550,14 +646,14 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (import_react12.Children.count(children) !== columns.length) {
+  if (import_react14.Children.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${import_react12.Children.count(
+      `Columns: expected ${columns.length} children, got ${import_react14.Children.count(
         children
       )}`
     );
   }
-  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
     css: {
       display: "flex",
       flexWrap: "wrap",
@@ -569,15 +665,15 @@ var Columns = ({
       }
     },
     ...props
-  }, import_react12.Children.map(children, (child, idx) => /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  }, import_react14.Children.map(children, (child, idx) => /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
     css: {
       flexGrow: columns[idx]
     }
-  }, (0, import_react12.isValidElement)(child) ? (0, import_react12.cloneElement)(child) : child)));
+  }, (0, import_react14.isValidElement)(child) ? (0, import_react14.cloneElement)(child) : child)));
 };
 
 // src/Container/Container.tsx
-var import_react13 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_tokens2 = require("@marigold/tokens");
 var ALIGN_ITEMS = {
   left: "start",
@@ -608,7 +704,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = import_tokens2.size[contentType][size];
-  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
     display: "grid",
     css: {
       gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
@@ -622,17 +718,17 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-var import_react22 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_button2 = require("@react-aria/button");
 var import_dialog = require("@react-aria/dialog");
-var import_system12 = require("@marigold/system");
+var import_system15 = require("@marigold/system");
 
 // src/Header/Header.tsx
-var import_react14 = __toESM(require("react"));
-var import_system9 = require("@marigold/system");
+var import_react16 = __toESM(require("react"));
+var import_system11 = require("@marigold/system");
 var Header = ({ children, variant, size, ...props }) => {
-  const styles = (0, import_system9.useComponentStyles)("Header", { variant, size });
-  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
+  const styles = (0, import_system11.useComponentStyles)("Header", { variant, size });
+  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, {
     as: "header",
     ...props,
     css: styles
@@ -640,8 +736,8 @@ var Header = ({ children, variant, size, ...props }) => {
 };
 
 // src/Headline/Headline.tsx
-var import_react15 = __toESM(require("react"));
-var import_system10 = require("@marigold/system");
+var import_react17 = __toESM(require("react"));
+var import_system12 = require("@marigold/system");
 var Headline = ({
   children,
   variant,
@@ -651,11 +747,11 @@ var Headline = ({
   level = "1",
   ...props
 }) => {
-  const styles = (0, import_system10.useComponentStyles)("Headline", {
+  const styles = (0, import_system12.useComponentStyles)("Headline", {
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
+  return /* @__PURE__ */ import_react17.default.createElement(import_system12.Box, {
     as: `h${level}`,
     ...props,
     css: [styles, { color, textAlign: align }]
@@ -663,27 +759,27 @@ var Headline = ({
 };
 
 // src/Dialog/Context.ts
-var import_react16 = require("react");
-var DialogContext = (0, import_react16.createContext)({});
-var useDialogContext = () => (0, import_react16.useContext)(DialogContext);
+var import_react18 = require("react");
+var DialogContext = (0, import_react18.createContext)({});
+var useDialogContext = () => (0, import_react18.useContext)(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-var import_react21 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_interactions3 = require("@react-aria/interactions");
-var import_overlays4 = require("@react-stately/overlays");
+var import_overlays5 = require("@react-stately/overlays");
 
 // src/Overlay/Modal.tsx
-var import_react18 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_focus3 = require("@react-aria/focus");
 var import_overlays = require("@react-aria/overlays");
 var import_utils3 = require("@react-aria/utils");
 
 // src/Overlay/Underlay.tsx
-var import_react17 = __toESM(require("react"));
-var import_system11 = require("@marigold/system");
+var import_react19 = __toESM(require("react"));
+var import_system13 = require("@marigold/system");
 var Underlay = ({ size, variant, ...props }) => {
-  const styles = (0, import_system11.useComponentStyles)("Underlay", { size, variant });
-  return /* @__PURE__ */ import_react17.default.createElement(import_system11.Box, {
+  const styles = (0, import_system13.useComponentStyles)("Underlay", { size, variant });
+  return /* @__PURE__ */ import_react19.default.createElement(import_system13.Box, {
     __baseCSS: {
       position: "fixed",
       inset: 0,
@@ -695,7 +791,7 @@ var Underlay = ({ size, variant, ...props }) => {
 };
 
 // src/Overlay/Modal.tsx
-var Modal = (0, import_react18.forwardRef)(
+var Modal = (0, import_react20.forwardRef)(
   ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
     const modalRef = (0, import_utils3.useObjectRef)(ref);
     const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)(
@@ -709,14 +805,14 @@ var Modal = (0, import_react18.forwardRef)(
     );
     (0, import_overlays.usePreventScroll)();
     const { modalProps } = (0, import_overlays.useModal)({});
-    return /* @__PURE__ */ import_react18.default.createElement(import_focus3.FocusScope, {
+    return /* @__PURE__ */ import_react20.default.createElement(import_focus3.FocusScope, {
       contain: true,
       restoreFocus: true,
       autoFocus: true
-    }, /* @__PURE__ */ import_react18.default.createElement(Underlay, {
+    }, /* @__PURE__ */ import_react20.default.createElement(Underlay, {
       ...underlayProps,
       variant: "modal"
-    }), /* @__PURE__ */ import_react18.default.createElement("div", {
+    }), /* @__PURE__ */ import_react20.default.createElement("div", {
       style: {
         display: "flex",
         alignItems: "center",
@@ -728,14 +824,14 @@ var Modal = (0, import_react18.forwardRef)(
       },
       ref: modalRef,
       ...(0, import_utils3.mergeProps)(props, overlayProps, modalProps)
-    }, /* @__PURE__ */ import_react18.default.createElement("div", {
+    }, /* @__PURE__ */ import_react20.default.createElement("div", {
       style: { pointerEvents: "auto" }
     }, children)));
   }
 );
 
 // src/Overlay/Overlay.tsx
-var import_react19 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_react_transition_group = require("react-transition-group");
 var import_overlays2 = require("@react-aria/overlays");
 var duration = 300;
@@ -751,19 +847,19 @@ var transitionStyles = {
   unmounted: { opacity: 0 }
 };
 var Overlay = ({ children, container, open }) => {
-  const nodeRef = (0, import_react19.useRef)(null);
+  const nodeRef = (0, import_react21.useRef)(null);
   let mountOverlay = open;
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ import_react19.default.createElement(import_overlays2.Overlay, {
+  return /* @__PURE__ */ import_react21.default.createElement(import_overlays2.Overlay, {
     portalContainer: container
-  }, /* @__PURE__ */ import_react19.default.createElement(import_react_transition_group.Transition, {
+  }, /* @__PURE__ */ import_react21.default.createElement(import_react_transition_group.Transition, {
     nodeRef,
     timeout: duration,
     in: open,
     appear: true
-  }, (state) => /* @__PURE__ */ import_react19.default.createElement("div", {
+  }, (state) => /* @__PURE__ */ import_react21.default.createElement("div", {
     ref: nodeRef,
     "data-testid": "overlay",
     style: {
@@ -774,24 +870,24 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-var import_react20 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_utils4 = require("@react-aria/utils");
 var import_focus4 = require("@react-aria/focus");
-var Popover = (0, import_react20.forwardRef)(
+var Popover = (0, import_react22.forwardRef)(
   (props, ref) => {
     const popoverRef = (0, import_utils4.useObjectRef)(ref);
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ import_react20.default.createElement(Overlay, {
+    return /* @__PURE__ */ import_react22.default.createElement(Overlay, {
       open: state.isOpen,
       ...otherProps
-    }, /* @__PURE__ */ import_react20.default.createElement(PopoverWrapper, {
+    }, /* @__PURE__ */ import_react22.default.createElement(PopoverWrapper, {
       ref: popoverRef,
       ...props
     }, children));
   }
 );
-var PopoverWrapper = (0, import_react20.forwardRef)(
+var PopoverWrapper = (0, import_react22.forwardRef)(
   ({
     children,
     isNonModal,
@@ -809,11 +905,11 @@ var PopoverWrapper = (0, import_react20.forwardRef)(
       },
       state
     );
-    return /* @__PURE__ */ import_react20.default.createElement(import_focus4.FocusScope, {
+    return /* @__PURE__ */ import_react22.default.createElement(import_focus4.FocusScope, {
       restoreFocus: true
-    }, !isNonModal && /* @__PURE__ */ import_react20.default.createElement(Underlay, {
+    }, !isNonModal && /* @__PURE__ */ import_react22.default.createElement(Underlay, {
       ...underlayProps
-    }), /* @__PURE__ */ import_react20.default.createElement("div", {
+    }), /* @__PURE__ */ import_react22.default.createElement("div", {
       ...popoverProps,
       style: {
         ...popoverProps.style,
@@ -821,33 +917,82 @@ var PopoverWrapper = (0, import_react20.forwardRef)(
       },
       ref,
       role: "presentation"
-    }, !isNonModal && /* @__PURE__ */ import_react20.default.createElement(import_overlays3.DismissButton, {
+    }, !isNonModal && /* @__PURE__ */ import_react22.default.createElement(import_overlays3.DismissButton, {
       onDismiss: state.close
-    }), children, /* @__PURE__ */ import_react20.default.createElement(import_overlays3.DismissButton, {
+    }), children, /* @__PURE__ */ import_react22.default.createElement(import_overlays3.DismissButton, {
       onDismiss: state.close
     })));
   }
 );
 
+// src/Overlay/Tray.tsx
+var import_react23 = __toESM(require("react"));
+var import_system14 = require("@marigold/system");
+var import_focus5 = require("@react-aria/focus");
+var import_overlays4 = require("@react-aria/overlays");
+var import_utils5 = require("@react-aria/utils");
+var import_react24 = require("react");
+var Tray = (0, import_react24.forwardRef)(
+  ({ state, children, ...props }, ref) => {
+    const trayRef = (0, import_utils5.useObjectRef)(ref);
+    return /* @__PURE__ */ import_react23.default.createElement(Overlay, {
+      open: state.isOpen
+    }, /* @__PURE__ */ import_react23.default.createElement(TrayWrapper, {
+      state,
+      ...props,
+      ref: trayRef
+    }, children));
+  }
+);
+var TrayWrapper = (0, import_react24.forwardRef)(
+  ({ children, state, ...props }, ref) => {
+    let { modalProps, underlayProps } = (0, import_overlays4.useModalOverlay)(
+      {
+        ...props,
+        isDismissable: true
+      },
+      state,
+      ref
+    );
+    return /* @__PURE__ */ import_react23.default.createElement(import_focus5.FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true
+    }, /* @__PURE__ */ import_react23.default.createElement(Underlay, {
+      ...underlayProps,
+      variant: "modal"
+    }, /* @__PURE__ */ import_react23.default.createElement(import_system14.Box, {
+      ...modalProps,
+      ref,
+      __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
+      "data-testid": "tray"
+    }, /* @__PURE__ */ import_react23.default.createElement(import_overlays4.DismissButton, {
+      onDismiss: state.close
+    }), children, /* @__PURE__ */ import_react23.default.createElement(import_overlays4.DismissButton, {
+      onDismiss: state.close
+    }))));
+  }
+);
+
 // src/Dialog/DialogTrigger.tsx
 var DialogTrigger = ({
   children,
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = import_react21.default.Children.toArray(children);
-  const dialogTriggerRef = (0, import_react21.useRef)(null);
-  const state = (0, import_overlays4.useOverlayTriggerState)({});
+  const [dialogTrigger, dialog] = import_react25.default.Children.toArray(children);
+  const dialogTriggerRef = (0, import_react25.useRef)(null);
+  const state = (0, import_overlays5.useOverlayTriggerState)({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ import_react21.default.createElement(DialogContext.Provider, {
+  return /* @__PURE__ */ import_react25.default.createElement(DialogContext.Provider, {
     value: ctx
-  }, /* @__PURE__ */ import_react21.default.createElement(import_interactions3.PressResponder, {
+  }, /* @__PURE__ */ import_react25.default.createElement(import_interactions3.PressResponder, {
     ref: dialogTriggerRef,
     isPressed: state.isOpen,
     onPress: state.toggle
-  }, dialogTrigger), /* @__PURE__ */ import_react21.default.createElement(Overlay, {
+  }, dialogTrigger), /* @__PURE__ */ import_react25.default.createElement(Overlay, {
     open: state.isOpen
-  }, /* @__PURE__ */ import_react21.default.createElement(Modal, {
+  }, /* @__PURE__ */ import_react25.default.createElement(Modal, {
     open: state.isOpen,
     onClose: state.close,
     dismissable,
@@ -857,7 +1002,7 @@ var DialogTrigger = ({
 
 // src/Dialog/Dialog.tsx
 var CloseButton = ({ css }) => {
-  const ref = (0, import_react22.useRef)(null);
+  const ref = (0, import_react26.useRef)(null);
   const { close } = useDialogContext();
   const { buttonProps } = (0, import_button2.useButton)(
     {
@@ -865,9 +1010,9 @@ var CloseButton = ({ css }) => {
     },
     ref
   );
-  return /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_system15.Box, {
     css: { display: "flex", justifyContent: "flex-end" }
-  }, /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, {
+  }, /* @__PURE__ */ import_react26.default.createElement(import_system15.Box, {
     as: "button",
     __baseCSS: {
       outline: "none",
@@ -881,19 +1026,19 @@ var CloseButton = ({ css }) => {
     css,
     ref,
     ...buttonProps
-  }, /* @__PURE__ */ import_react22.default.createElement("svg", {
+  }, /* @__PURE__ */ import_react26.default.createElement("svg", {
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, /* @__PURE__ */ import_react22.default.createElement("path", {
+  }, /* @__PURE__ */ import_react26.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
   }))));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = import_react22.default.Children.toArray(children);
+  const childs = import_react26.default.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => import_react22.default.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => import_react26.default.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -901,7 +1046,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = import_react22.default.cloneElement(
+  const titleChild = import_react26.default.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -915,32 +1060,32 @@ var Dialog = ({
   closeButton,
   ...props
 }) => {
-  const ref = (0, import_react22.useRef)(null);
+  const ref = (0, import_react26.useRef)(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
-  const styles = (0, import_system12.useComponentStyles)(
+  const styles = (0, import_system15.useComponentStyles)(
     "Dialog",
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_system15.Box, {
     __baseCSS: { bg: "#fff" },
     css: styles.container,
     ...dialogProps
-  }, closeButton && /* @__PURE__ */ import_react22.default.createElement(CloseButton, {
+  }, closeButton && /* @__PURE__ */ import_react26.default.createElement(CloseButton, {
     css: styles.closeButton
   }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
 
 // src/Divider/Divider.tsx
-var import_react23 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_separator = require("@react-aria/separator");
-var import_system13 = require("@marigold/system");
+var import_system16 = require("@marigold/system");
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = (0, import_separator.useSeparator)(props);
-  const styles = (0, import_system13.useComponentStyles)("Divider", { variant });
-  return /* @__PURE__ */ import_react23.default.createElement(import_system13.Box, {
+  const styles = (0, import_system16.useComponentStyles)("Divider", { variant });
+  return /* @__PURE__ */ import_react27.default.createElement(import_system16.Box, {
     css: styles,
     ...props,
     ...separatorProps
@@ -948,11 +1093,11 @@ var Divider = ({ variant, ...props }) => {
 };
 
 // src/Footer/Footer.tsx
-var import_react24 = __toESM(require("react"));
-var import_system14 = require("@marigold/system");
+var import_react28 = __toESM(require("react"));
+var import_system17 = require("@marigold/system");
 var Footer = ({ children, variant, size, ...props }) => {
-  const styles = (0, import_system14.useComponentStyles)("Footer", { variant, size });
-  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+  const styles = (0, import_system17.useComponentStyles)("Footer", { variant, size });
+  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
     as: "footer",
     ...props,
     css: styles
@@ -960,9 +1105,9 @@ var Footer = ({ children, variant, size, ...props }) => {
 };
 
 // src/Image/Image.tsx
-var import_react25 = __toESM(require("react"));
-var import_system15 = require("@marigold/system");
-var import_system16 = require("@marigold/system");
+var import_react29 = __toESM(require("react"));
+var import_system18 = require("@marigold/system");
+var import_system19 = require("@marigold/system");
 var Image = ({
   variant,
   size,
@@ -970,13 +1115,13 @@ var Image = ({
   position,
   ...props
 }) => {
-  const styles = (0, import_system16.useComponentStyles)("Image", { variant, size });
+  const styles = (0, import_system19.useComponentStyles)("Image", { variant, size });
   const css = {
     ...styles,
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ import_react25.default.createElement(import_system15.Box, {
+  return /* @__PURE__ */ import_react29.default.createElement(import_system18.Box, {
     ...props,
     as: "img",
     __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
@@ -985,7 +1130,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-var import_react26 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1002,7 +1147,7 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ import_react26.default.createElement(import_system.Box, {
+}) => /* @__PURE__ */ import_react30.default.createElement(import_system.Box, {
   css: {
     display: "flex",
     flexWrap: "wrap",
@@ -1014,12 +1159,12 @@ var Inline = ({
 }, children);
 
 // src/Input/Input.tsx
-var import_react27 = __toESM(require("react"));
-var import_system17 = require("@marigold/system");
-var Input = (0, import_react27.forwardRef)(
+var import_react31 = __toESM(require("react"));
+var import_system20 = require("@marigold/system");
+var Input = (0, import_react31.forwardRef)(
   ({ variant, size, type = "text", ...props }, ref) => {
-    const styles = (0, import_system17.useComponentStyles)("Input", { variant, size });
-    return /* @__PURE__ */ import_react27.default.createElement(import_system17.Box, {
+    const styles = (0, import_system20.useComponentStyles)("Input", { variant, size });
+    return /* @__PURE__ */ import_react31.default.createElement(import_system20.Box, {
       ...props,
       ref,
       as: "input",
@@ -1030,11 +1175,11 @@ var Input = (0, import_react27.forwardRef)(
 );
 
 // src/Link/Link.tsx
-var import_react28 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
-var import_system18 = require("@marigold/system");
-var import_utils5 = require("@react-aria/utils");
-var Link = (0, import_react28.forwardRef)(
+var import_system21 = require("@marigold/system");
+var import_utils6 = require("@react-aria/utils");
+var Link = (0, import_react32.forwardRef)(
   ({
     as = "a",
     variant,
@@ -1045,7 +1190,7 @@ var Link = (0, import_react28.forwardRef)(
     onPressStart,
     ...props
   }, ref) => {
-    const linkRef = (0, import_utils5.useObjectRef)(ref);
+    const linkRef = (0, import_utils6.useObjectRef)(ref);
     const { linkProps } = (0, import_link.useLink)(
       {
         ...props,
@@ -1054,8 +1199,8 @@ var Link = (0, import_react28.forwardRef)(
       },
       linkRef
     );
-    const styles = (0, import_system18.useComponentStyles)("Link", { variant, size });
-    return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, " ", /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
+    const styles = (0, import_system21.useComponentStyles)("Link", { variant, size });
+    return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, " ", /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
       as,
       role: "link",
       css: styles,
@@ -1067,20 +1212,20 @@ var Link = (0, import_react28.forwardRef)(
 );
 
 // src/List/List.tsx
-var import_react31 = __toESM(require("react"));
-var import_system20 = require("@marigold/system");
+var import_react35 = __toESM(require("react"));
+var import_system23 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react29 = require("react");
-var ListContext = (0, import_react29.createContext)({});
-var useListContext = () => (0, import_react29.useContext)(ListContext);
+var import_react33 = require("react");
+var ListContext = (0, import_react33.createContext)({});
+var useListContext = () => (0, import_react33.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_react30 = __toESM(require("react"));
-var import_system19 = require("@marigold/system");
+var import_react34 = __toESM(require("react"));
+var import_system22 = require("@marigold/system");
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ import_react30.default.createElement(import_system19.Box, {
+  return /* @__PURE__ */ import_react34.default.createElement(import_system22.Box, {
     ...props,
     as: "li",
     css: styles
@@ -1095,44 +1240,44 @@ var List = ({
   size,
   ...props
 }) => {
-  const styles = (0, import_system20.useComponentStyles)(
+  const styles = (0, import_system23.useComponentStyles)(
     "List",
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ import_react31.default.createElement(import_system20.Box, {
+  return /* @__PURE__ */ import_react35.default.createElement(import_system23.Box, {
     ...props,
     as,
     css: styles[as]
-  }, /* @__PURE__ */ import_react31.default.createElement(ListContext.Provider, {
+  }, /* @__PURE__ */ import_react35.default.createElement(ListContext.Provider, {
     value: { styles: styles.item }
   }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react35 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var import_menu4 = require("@react-aria/menu");
-var import_overlays5 = require("@react-aria/overlays");
 var import_collections = require("@react-stately/collections");
 var import_tree = require("@react-stately/tree");
-var import_system22 = require("@marigold/system");
+var import_system26 = require("@marigold/system");
 
 // src/Menu/Context.ts
-var import_react32 = require("react");
-var MenuContext = (0, import_react32.createContext)({});
-var useMenuContext = () => (0, import_react32.useContext)(MenuContext);
+var import_react36 = require("react");
+var MenuContext = (0, import_react36.createContext)({});
+var useMenuContext = () => (0, import_react36.useContext)(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-var import_react33 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_menu = require("@react-stately/menu");
-var import_menu2 = require("@react-aria/menu");
 var import_interactions4 = require("@react-aria/interactions");
-var import_utils6 = require("@react-aria/utils");
+var import_menu2 = require("@react-aria/menu");
+var import_utils7 = require("@react-aria/utils");
+var import_system24 = require("@marigold/system");
 var MenuTrigger = ({ disabled, children }) => {
-  const [menuTrigger, menu] = import_react33.default.Children.toArray(children);
-  const menuTriggerRef = (0, import_react33.useRef)(null);
-  const menuRef = (0, import_utils6.useObjectRef)();
+  const [menuTrigger, menu] = import_react37.default.Children.toArray(children);
+  const menuTriggerRef = (0, import_react37.useRef)(null);
+  const menuRef = (0, import_utils7.useObjectRef)();
   const state = (0, import_menu.useMenuTriggerState)({});
   const { menuTriggerProps, menuProps } = (0, import_menu2.useMenuTrigger)(
     { trigger: "press", isDisabled: disabled },
@@ -1146,13 +1291,16 @@ var MenuTrigger = ({ disabled, children }) => {
     onClose: state.close,
     autoFocus: state.focusStrategy
   };
-  return /* @__PURE__ */ import_react33.default.createElement(MenuContext.Provider, {
+  const isSmallScreen = (0, import_system24.useResponsiveValue)([true, false, false], 2);
+  return /* @__PURE__ */ import_react37.default.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ import_react33.default.createElement(import_interactions4.PressResponder, {
+  }, /* @__PURE__ */ import_react37.default.createElement(import_interactions4.PressResponder, {
     ...menuTriggerProps,
     ref: menuTriggerRef,
     isPressed: state.isOpen
-  }, menuTrigger), /* @__PURE__ */ import_react33.default.createElement(Popover, {
+  }, menuTrigger), isSmallScreen ? /* @__PURE__ */ import_react37.default.createElement(Tray, {
+    state
+  }, menu) : /* @__PURE__ */ import_react37.default.createElement(Popover, {
     triggerRef: menuTriggerRef,
     scrollRef: menuRef,
     state
@@ -1160,13 +1308,13 @@ var MenuTrigger = ({ disabled, children }) => {
 };
 
 // src/Menu/MenuItem.tsx
-var import_react34 = __toESM(require("react"));
-var import_focus5 = require("@react-aria/focus");
+var import_react38 = __toESM(require("react"));
+var import_focus6 = require("@react-aria/focus");
 var import_menu3 = require("@react-aria/menu");
-var import_utils7 = require("@react-aria/utils");
-var import_system21 = require("@marigold/system");
+var import_utils8 = require("@react-aria/utils");
+var import_system25 = require("@marigold/system");
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = (0, import_react34.useRef)(null);
+  const ref = (0, import_react38.useRef)(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = (0, import_menu3.useMenuItem)(
     {
@@ -1177,11 +1325,11 @@ var MenuItem = ({ item, state, onAction, css }) => {
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = (0, import_focus5.useFocusRing)();
-  const stateProps = (0, import_system21.useStateProps)({
+  const { isFocusVisible, focusProps } = (0, import_focus6.useFocusRing)();
+  const stateProps = (0, import_system25.useStateProps)({
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ import_react34.default.createElement(import_system21.Box, {
+  return /* @__PURE__ */ import_react38.default.createElement(import_system25.Box, {
     as: "li",
     ref,
     __baseCSS: {
@@ -1190,28 +1338,26 @@ var MenuItem = ({ item, state, onAction, css }) => {
       }
     },
     css,
-    ...(0, import_utils7.mergeProps)(menuItemProps, focusProps),
+    ...(0, import_utils8.mergeProps)(menuItemProps, focusProps),
     ...stateProps
   }, item.rendered);
 };
 
 // src/Menu/Menu.tsx
-var import_utils8 = require("@react-aria/utils");
+var import_utils9 = require("@react-aria/utils");
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
-  const ref = (0, import_react35.useRef)(null);
+  const ref = (0, import_react39.useRef)(null);
   const state = (0, import_tree.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu4.useMenu)(ownProps, state, ref);
-  (0, import_utils8.useSyncRef)({ ref: scrollRef }, ref);
-  const styles = (0, import_system22.useComponentStyles)(
+  (0, import_utils9.useSyncRef)({ ref: scrollRef }, ref);
+  const styles = (0, import_system26.useComponentStyles)(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement(import_overlays5.DismissButton, {
-    onDismiss: ownProps.onClose
-  }), /* @__PURE__ */ import_react35.default.createElement(import_system22.Box, {
+  return /* @__PURE__ */ import_react39.default.createElement(import_system26.Box, {
     as: "ul",
     ref,
     __baseCSS: {
@@ -1221,23 +1367,20 @@ var Menu = ({ variant, size, ...props }) => {
     },
     css: styles.container,
     ...menuProps
-  }, [...state.collection].map((item) => /* @__PURE__ */ import_react35.default.createElement(MenuItem, {
+  }, [...state.collection].map((item) => /* @__PURE__ */ import_react39.default.createElement(MenuItem, {
     key: item.key,
     item,
     state,
     onAction: props.onSelect,
     css: styles.item
-  }))), /* @__PURE__ */ import_react35.default.createElement(import_overlays5.DismissButton, {
-    onDismiss: ownProps.onClose
-  }));
+  })));
 };
 Menu.Trigger = MenuTrigger;
 Menu.Item = import_collections.Item;
 
 // src/Message/Message.tsx
-var import_react36 = __toESM(require("react"));
-var import_icons2 = require("@marigold/icons");
-var import_system23 = require("@marigold/system");
+var import_react40 = __toESM(require("react"));
+var import_system27 = require("@marigold/system");
 var Message = ({
   messageTitle,
   variant = "info",
@@ -1245,7 +1388,7 @@ var Message = ({
   children,
   ...props
 }) => {
-  const styles = (0, import_system23.useComponentStyles)(
+  const styles = (0, import_system27.useComponentStyles)(
     "Message",
     {
       variant,
@@ -1253,159 +1396,91 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ import_react36.default.createElement(import_icons2.Info, null);
+  var icon = /* @__PURE__ */ import_react40.default.createElement("svg", {
+    viewBox: "0 0 24 24"
+  }, /* @__PURE__ */ import_react40.default.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__ */ import_react36.default.createElement(import_icons2.Notification, null);
+    icon = /* @__PURE__ */ import_react40.default.createElement("svg", {
+      viewBox: "0 0 24 24"
+    }, /* @__PURE__ */ import_react40.default.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__ */ import_react36.default.createElement(import_icons2.Exclamation, null);
+    icon = /* @__PURE__ */ import_react40.default.createElement("svg", {
+      viewBox: "0 0 24 24"
+    }, /* @__PURE__ */ import_react40.default.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__ */ import_react36.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     css: styles.container,
     ...props
-  }, /* @__PURE__ */ import_react36.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     __baseCSS: { display: "flex", alignItems: "top", gap: 4 }
-  }, /* @__PURE__ */ import_react36.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     role: "presentation",
     __baseCSS: { flex: "0 0 16px" },
     css: styles.icon
-  }, icon), /* @__PURE__ */ import_react36.default.createElement(import_system.Box, {
+  }, icon), /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     css: styles.title
-  }, messageTitle)), /* @__PURE__ */ import_react36.default.createElement(import_system.Box, {
+  }, messageTitle)), /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     css: styles.content
   }, children));
 };
 
 // src/NumberField/NumberField.tsx
-var import_react40 = __toESM(require("react"));
-var import_focus6 = require("@react-aria/focus");
+var import_react42 = __toESM(require("react"));
+var import_focus7 = require("@react-aria/focus");
 var import_interactions6 = require("@react-aria/interactions");
 var import_i18n = require("@react-aria/i18n");
 var import_numberfield = require("@react-aria/numberfield");
-var import_utils10 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
-var import_system27 = require("@marigold/system");
-
-// src/FieldBase/FieldBase.tsx
-var import_react38 = __toESM(require("react"));
-var import_system25 = require("@marigold/system");
-
-// src/HelpText/HelpText.tsx
-var import_react37 = __toESM(require("react"));
-var import_icons3 = require("@marigold/icons");
-var import_system24 = require("@marigold/system");
-var HelpText = ({
-  variant,
-  size,
-  disabled,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  ...props
-}) => {
-  var _a;
-  const hasErrorMessage = errorMessage && error;
-  const styles = (0, import_system24.useComponentStyles)(
-    "HelpText",
-    { variant, size },
-    { parts: ["container", "icon"] }
-  );
-  return /* @__PURE__ */ import_react37.default.createElement(import_system24.Box, {
-    ...hasErrorMessage ? errorMessageProps : descriptionProps,
-    ...props,
-    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
-    css: styles.container
-  }, hasErrorMessage ? /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(import_icons3.Exclamation, {
-    role: "presentation",
-    size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
-  }), errorMessage) : /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, description));
-};
-
-// src/FieldBase/FieldBase.tsx
-var FieldBase = ({
-  children,
-  variant,
-  size,
-  width = "100%",
-  disabled,
-  required,
-  label,
-  labelProps,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  stateProps
-}) => {
-  const hasHelpText = !!description || errorMessage && error;
-  const style = (0, import_system25.useComponentStyles)("Field", { variant, size });
-  return /* @__PURE__ */ import_react38.default.createElement(import_system25.Box, {
-    __baseCSS: { display: "flex", flexDirection: "column", width },
-    css: style
-  }, label && /* @__PURE__ */ import_react38.default.createElement(Label, {
-    required,
-    variant,
-    size,
-    ...labelProps,
-    ...stateProps
-  }, label), /* @__PURE__ */ import_react38.default.createElement(import_system25.Box, {
-    __baseCSS: { display: "flex", flexDirection: "column" }
-  }, children, hasHelpText && /* @__PURE__ */ import_react38.default.createElement(HelpText, {
-    ...stateProps,
-    variant,
-    size,
-    disabled,
-    description,
-    descriptionProps,
-    error,
-    errorMessage,
-    errorMessageProps
-  })));
-};
+var import_system29 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react39 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_button3 = require("@react-aria/button");
 var import_interactions5 = require("@react-aria/interactions");
-var import_utils9 = require("@react-aria/utils");
-var import_system26 = require("@marigold/system");
-var Plus = () => /* @__PURE__ */ import_react39.default.createElement(import_system26.Box, {
+var import_utils10 = require("@react-aria/utils");
+var import_system28 = require("@marigold/system");
+var Plus = () => /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ import_react39.default.createElement("path", {
+}, /* @__PURE__ */ import_react41.default.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
 }));
-var Minus = () => /* @__PURE__ */ import_react39.default.createElement(import_system26.Box, {
+var Minus = () => /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ import_react39.default.createElement("path", {
+}, /* @__PURE__ */ import_react41.default.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
 }));
 var StepButton = ({ direction, css, ...props }) => {
-  const ref = (0, import_react39.useRef)(null);
+  const ref = (0, import_react41.useRef)(null);
   const { buttonProps, isPressed } = (0, import_button3.useButton)(
     { ...props, elementType: "div" },
     ref
   );
   const { hoverProps, isHovered } = (0, import_interactions5.useHover)(props);
-  const stateProps = (0, import_system26.useStateProps)({
+  const stateProps = (0, import_system28.useStateProps)({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ import_react39.default.createElement(import_system26.Box, {
+  return /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, {
     __baseCSS: {
       display: "flex",
       alignItems: "center",
@@ -1413,13 +1488,13 @@ var StepButton = ({ direction, css, ...props }) => {
       cursor: props.isDisabled ? "not-allowed" : "pointer"
     },
     css,
-    ...(0, import_utils9.mergeProps)(buttonProps, hoverProps),
+    ...(0, import_utils10.mergeProps)(buttonProps, hoverProps),
     ...stateProps
-  }, /* @__PURE__ */ import_react39.default.createElement(Icon3, null));
+  }, /* @__PURE__ */ import_react41.default.createElement(Icon3, null));
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = (0, import_react40.forwardRef)(
+var NumberField = (0, import_react42.forwardRef)(
   ({
     variant,
     size,
@@ -1440,7 +1515,7 @@ var NumberField = (0, import_react40.forwardRef)(
     };
     const showStepper = !hideStepper;
     const { locale } = (0, import_i18n.useLocale)();
-    const inputRef = (0, import_utils10.useObjectRef)(ref);
+    const inputRef = (0, import_utils11.useObjectRef)(ref);
     const state = (0, import_numberfield2.useNumberFieldState)({ ...props, locale });
     const {
       labelProps,
@@ -1452,24 +1527,24 @@ var NumberField = (0, import_react40.forwardRef)(
       decrementButtonProps
     } = (0, import_numberfield.useNumberField)(props, state, inputRef);
     const { hoverProps, isHovered } = (0, import_interactions6.useHover)({ isDisabled: disabled });
-    const { focusProps, isFocused } = (0, import_focus6.useFocusRing)({
+    const { focusProps, isFocused } = (0, import_focus7.useFocusRing)({
       within: true,
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = (0, import_system27.useComponentStyles)(
+    const styles = (0, import_system29.useComponentStyles)(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
     );
-    const stateProps = (0, import_system27.useStateProps)({
+    const stateProps = (0, import_system29.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ import_react40.default.createElement(FieldBase, {
+    return /* @__PURE__ */ import_react42.default.createElement(FieldBase, {
       label: props.label,
       labelProps,
       required,
@@ -1482,7 +1557,7 @@ var NumberField = (0, import_react40.forwardRef)(
       variant,
       size,
       width
-    }, /* @__PURE__ */ import_react40.default.createElement(import_system27.Box, {
+    }, /* @__PURE__ */ import_react42.default.createElement(import_system29.Box, {
       "data-group": true,
       __baseCSS: {
         display: "flex",
@@ -1493,19 +1568,19 @@ var NumberField = (0, import_react40.forwardRef)(
         }
       },
       css: styles.group,
-      ...(0, import_utils10.mergeProps)(groupProps, focusProps, hoverProps),
+      ...(0, import_utils11.mergeProps)(groupProps, focusProps, hoverProps),
       ...stateProps
-    }, showStepper && /* @__PURE__ */ import_react40.default.createElement(StepButton, {
+    }, showStepper && /* @__PURE__ */ import_react42.default.createElement(StepButton, {
       direction: "down",
       css: styles.stepper,
       ...decrementButtonProps
-    }), /* @__PURE__ */ import_react40.default.createElement(Input, {
+    }), /* @__PURE__ */ import_react42.default.createElement(Input, {
       ref: inputRef,
       variant,
       size,
       ...inputProps,
       ...stateProps
-    }), showStepper && /* @__PURE__ */ import_react40.default.createElement(StepButton, {
+    }), showStepper && /* @__PURE__ */ import_react42.default.createElement(StepButton, {
       direction: "up",
       css: styles.stepper,
       ...incrementButtonProps
@@ -1514,13 +1589,13 @@ var NumberField = (0, import_react40.forwardRef)(
 );
 
 // src/Provider/index.ts
-var import_system29 = require("@marigold/system");
+var import_system31 = require("@marigold/system");
 var import_ssr = require("@react-aria/ssr");
 
 // src/Provider/MarigoldProvider.tsx
-var import_react41 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_overlays6 = require("@react-aria/overlays");
-var import_system28 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 function MarigoldProvider({
   children,
   theme,
@@ -1528,47 +1603,45 @@ function MarigoldProvider({
   normalizeDocument = true
 }) {
   var _a;
-  const outer = (0, import_system28.useTheme)();
-  const isTopLevel = outer.theme === import_system28.__defaultTheme;
+  const outer = (0, import_system30.useTheme)();
+  const isTopLevel = outer.theme === import_system30.__defaultTheme;
   if (((_a = outer.theme) == null ? void 0 : _a.root) && !isTopLevel && !selector) {
     throw new Error(
       `[MarigoldProvider] You cannot nest a MarigoldProvider inside another MarigoldProvider without a "selector"! 
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ import_react41.default.createElement(import_system28.ThemeProvider, {
+  return /* @__PURE__ */ import_react43.default.createElement(import_system30.ThemeProvider, {
     theme
-  }, /* @__PURE__ */ import_react41.default.createElement(import_system28.Global, {
+  }, /* @__PURE__ */ import_react43.default.createElement(import_system30.Global, {
     normalizeDocument: isTopLevel && normalizeDocument,
     selector
-  }), isTopLevel ? /* @__PURE__ */ import_react41.default.createElement(import_overlays6.OverlayProvider, null, children) : children);
+  }), isTopLevel ? /* @__PURE__ */ import_react43.default.createElement(import_overlays6.OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-var import_react44 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_interactions7 = require("@react-aria/interactions");
-var import_focus7 = require("@react-aria/focus");
+var import_focus8 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
-var import_utils11 = require("@react-aria/utils");
-var import_system31 = require("@marigold/system");
+var import_utils12 = require("@react-aria/utils");
+var import_system33 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react42 = require("react");
-var RadioGroupContext = (0, import_react42.createContext)(
+var import_react44 = require("react");
+var RadioGroupContext = (0, import_react44.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react42.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react44.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react43 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_radio = require("@react-aria/radio");
 var import_radio2 = require("@react-stately/radio");
-var import_system30 = require("@marigold/system");
+var import_system32 = require("@marigold/system");
 var RadioGroup = ({
   children,
   orientation = "vertical",
-  size,
-  variant,
   width,
   required,
   disabled,
@@ -1584,20 +1657,26 @@ var RadioGroup = ({
     ...rest
   };
   const state = (0, import_radio2.useRadioGroupState)(props);
-  const { radioGroupProps, labelProps } = (0, import_radio.useRadioGroup)(props, state);
-  const styles = (0, import_system30.useComponentStyles)(
-    "RadioGroup",
-    { variant, size },
-    { parts: ["container", "group"] }
-  );
-  return /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, {
-    ...radioGroupProps,
-    css: styles.container
-  }, props.label && /* @__PURE__ */ import_react43.default.createElement(Label, {
-    as: "span",
+  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = (0, import_radio.useRadioGroup)(props, state);
+  const stateProps = (0, import_system32.useStateProps)({
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ import_react45.default.createElement(FieldBase, {
+    width,
+    label: props.label,
+    labelProps: { as: "span", ...labelProps },
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    disabled,
+    stateProps,
     required,
-    ...labelProps
-  }, props.label), /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, {
+    ...radioGroupProps
+  }, /* @__PURE__ */ import_react45.default.createElement(import_system32.Box, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1605,23 +1684,22 @@ var RadioGroup = ({
       flexDirection: orientation === "vertical" ? "column" : "row",
       alignItems: "start",
       gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
-    },
-    css: styles.group
-  }, /* @__PURE__ */ import_react43.default.createElement(RadioGroupContext.Provider, {
-    value: { variant, size, width, error, ...state }
+    }
+  }, /* @__PURE__ */ import_react45.default.createElement(RadioGroupContext.Provider, {
+    value: { width, error, state }
   }, children)));
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ import_react44.default.createElement("svg", {
+var Dot = () => /* @__PURE__ */ import_react46.default.createElement("svg", {
   viewBox: "0 0 6 6"
-}, /* @__PURE__ */ import_react44.default.createElement("circle", {
+}, /* @__PURE__ */ import_react46.default.createElement("circle", {
   fill: "currentColor",
   cx: "3",
   cy: "3",
   r: "3"
 }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, {
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react46.default.createElement(import_system33.Box, {
   "aria-hidden": "true",
   __baseCSS: {
     width: 16,
@@ -1636,30 +1714,30 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react44.defau
   },
   css,
   ...props
-}, checked ? /* @__PURE__ */ import_react44.default.createElement(Dot, null) : null);
-var Radio = (0, import_react44.forwardRef)(
+}, checked ? /* @__PURE__ */ import_react46.default.createElement(Dot, null) : null);
+var Radio = (0, import_react46.forwardRef)(
   ({ width, disabled, ...props }, ref) => {
     const {
       variant,
       size,
       error,
       width: groupWidth,
-      ...state
+      state
     } = useRadioGroupContext();
-    const inputRef = (0, import_utils11.useObjectRef)(ref);
+    const inputRef = (0, import_utils12.useObjectRef)(ref);
     const { inputProps } = (0, import_radio3.useRadio)(
       { isDisabled: disabled, ...props },
       state,
       inputRef
     );
-    const styles = (0, import_system31.useComponentStyles)(
+    const styles = (0, import_system33.useComponentStyles)(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
-    const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
-    const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
-    const stateProps = (0, import_system31.useStateProps)({
+    const { hoverProps, isHovered } = (0, import_interactions7.useHover)({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = (0, import_focus8.useFocusRing)();
+    const stateProps = (0, import_system33.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1667,7 +1745,7 @@ var Radio = (0, import_react44.forwardRef)(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, {
+    return /* @__PURE__ */ import_react46.default.createElement(import_system33.Box, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -1677,9 +1755,8 @@ var Radio = (0, import_react44.forwardRef)(
         width: width || groupWidth || "100%"
       },
       css: styles.container,
-      ...hoverProps,
-      ...stateProps
-    }, /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, {
+      ...(0, import_utils12.mergeProps)(hoverProps, stateProps)
+    }, /* @__PURE__ */ import_react46.default.createElement(import_system33.Box, {
       as: "input",
       ref: inputRef,
       css: {
@@ -1692,13 +1769,12 @@ var Radio = (0, import_react44.forwardRef)(
         opacity: 1e-4,
         cursor: inputProps.disabled ? "not-allowed" : "pointer"
       },
-      ...inputProps,
-      ...focusProps
-    }), /* @__PURE__ */ import_react44.default.createElement(Icon2, {
+      ...(0, import_utils12.mergeProps)(inputProps, focusProps)
+    }), /* @__PURE__ */ import_react46.default.createElement(Icon2, {
       checked: inputProps.checked,
       css: styles.radio,
       ...stateProps
-    }), /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, {
+    }), /* @__PURE__ */ import_react46.default.createElement(import_system33.Box, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -1707,38 +1783,38 @@ var Radio = (0, import_react44.forwardRef)(
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_button4 = require("@react-aria/button");
-var import_focus8 = require("@react-aria/focus");
+var import_focus9 = require("@react-aria/focus");
 var import_i18n2 = require("@react-aria/i18n");
 var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
 var import_collections2 = require("@react-stately/collections");
-var import_utils13 = require("@react-aria/utils");
-var import_system35 = require("@marigold/system");
+var import_utils14 = require("@react-aria/utils");
+var import_system37 = require("@marigold/system");
 
 // src/ListBox/ListBox.tsx
-var import_react48 = __toESM(require("react"));
-var import_utils12 = require("@react-aria/utils");
-var import_system34 = require("@marigold/system");
+var import_react50 = __toESM(require("react"));
+var import_utils13 = require("@react-aria/utils");
+var import_system36 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
 // src/ListBox/Context.ts
-var import_react45 = require("react");
-var ListBoxContext = (0, import_react45.createContext)({});
-var useListBoxContext = () => (0, import_react45.useContext)(ListBoxContext);
+var import_react47 = require("react");
+var ListBoxContext = (0, import_react47.createContext)({});
+var useListBoxContext = () => (0, import_react47.useContext)(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-var import_react47 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_listbox2 = require("@react-aria/listbox");
-var import_system33 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 
 // src/ListBox/ListBoxOption.tsx
-var import_react46 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
-var import_system32 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 var ListBoxOption = ({ item, state }) => {
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react48.useRef)(null);
   const { optionProps, isSelected, isDisabled, isFocused } = (0, import_listbox.useOption)(
     {
       key: item.key
@@ -1747,12 +1823,12 @@ var ListBoxOption = ({ item, state }) => {
     ref
   );
   const { styles } = useListBoxContext();
-  const stateProps = (0, import_system32.useStateProps)({
+  const stateProps = (0, import_system34.useStateProps)({
     selected: isSelected,
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, {
+  return /* @__PURE__ */ import_react48.default.createElement(import_system34.Box, {
     as: "li",
     ref,
     css: styles.option,
@@ -1768,19 +1844,19 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ import_react47.default.createElement(import_system33.Box, {
+  return /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
     as: "li",
     css: styles.section,
     ...itemProps
-  }, section.rendered && /* @__PURE__ */ import_react47.default.createElement(import_system33.Box, {
+  }, section.rendered && /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
     css: styles.sectionTitle,
     ...headingProps
-  }, section.rendered), /* @__PURE__ */ import_react47.default.createElement(import_system33.Box, {
+  }, section.rendered), /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list,
     ...groupProps
-  }, [...section.childNodes].map((node) => /* @__PURE__ */ import_react47.default.createElement(ListBoxOption, {
+  }, [...section.childNodes].map((node) => /* @__PURE__ */ import_react49.default.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
@@ -1788,31 +1864,31 @@ var ListBoxSection = ({ section, state }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = (0, import_react48.forwardRef)(
+var ListBox = (0, import_react50.forwardRef)(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = (0, import_utils12.useObjectRef)(ref);
+    const innerRef = (0, import_utils13.useObjectRef)(ref);
     const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
-    const styles = (0, import_system34.useComponentStyles)(
+    const styles = (0, import_system36.useComponentStyles)(
       "ListBox",
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
     );
-    return /* @__PURE__ */ import_react48.default.createElement(ListBoxContext.Provider, {
+    return /* @__PURE__ */ import_react50.default.createElement(ListBoxContext.Provider, {
       value: { styles }
-    }, /* @__PURE__ */ import_react48.default.createElement(import_system34.Box, {
+    }, /* @__PURE__ */ import_react50.default.createElement(import_system36.Box, {
       css: styles.container
-    }, /* @__PURE__ */ import_react48.default.createElement(import_system34.Box, {
+    }, /* @__PURE__ */ import_react50.default.createElement(import_system36.Box, {
       as: "ul",
       ref: innerRef,
       __baseCSS: { listStyle: "none", p: 0 },
       css: styles.list,
       ...listBoxProps
     }, [...state.collection].map(
-      (item) => item.type === "section" ? /* @__PURE__ */ import_react48.default.createElement(ListBoxSection, {
+      (item) => item.type === "section" ? /* @__PURE__ */ import_react50.default.createElement(ListBoxSection, {
         key: item.key,
         section: item,
         state
-      }) : /* @__PURE__ */ import_react48.default.createElement(ListBoxOption, {
+      }) : /* @__PURE__ */ import_react50.default.createElement(ListBoxOption, {
         key: item.key,
         item,
         state
@@ -1832,19 +1908,19 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
+var Chevron = ({ css }) => /* @__PURE__ */ import_react51.default.createElement(import_system37.Box, {
   as: "svg",
   __baseCSS: { width: 16, height: 16, fill: "none" },
   css,
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   strokeWidth: 2
-}, /* @__PURE__ */ import_react49.default.createElement("path", {
+}, /* @__PURE__ */ import_react51.default.createElement("path", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   d: "M19 9l-7 7-7-7"
 }));
-var Select = (0, import_react49.forwardRef)(
+var Select = (0, import_react51.forwardRef)(
   ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
     const formatMessage = (0, import_i18n2.useLocalizedStringFormatter)(messages);
     const props = {
@@ -1856,8 +1932,9 @@ var Select = (0, import_react49.forwardRef)(
       ...rest
     };
     const state = (0, import_select2.useSelectState)(props);
-    const buttonRef = (0, import_utils13.useObjectRef)(ref);
-    const listboxRef = (0, import_react49.useRef)(null);
+    const buttonRef = (0, import_utils14.useObjectRef)(ref);
+    const listboxRef = (0, import_react51.useRef)(null);
+    const isSmallScreen = (0, import_system37.useResponsiveValue)([true, false, false], 2);
     const {
       labelProps,
       triggerProps,
@@ -1870,19 +1947,19 @@ var Select = (0, import_react49.forwardRef)(
       { isDisabled: disabled, ...triggerProps },
       buttonRef
     );
-    const { focusProps, isFocusVisible } = (0, import_focus8.useFocusRing)();
-    const styles = (0, import_system35.useComponentStyles)(
+    const { focusProps, isFocusVisible } = (0, import_focus9.useFocusRing)();
+    const styles = (0, import_system37.useComponentStyles)(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
     );
-    const stateProps = (0, import_system35.useStateProps)({
+    const stateProps = (0, import_system37.useStateProps)({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ import_react49.default.createElement(FieldBase, {
+    return /* @__PURE__ */ import_react51.default.createElement(FieldBase, {
       variant,
       size,
       width,
@@ -1896,13 +1973,13 @@ var Select = (0, import_react49.forwardRef)(
       stateProps,
       disabled,
       required
-    }, /* @__PURE__ */ import_react49.default.createElement(import_select.HiddenSelect, {
+    }, /* @__PURE__ */ import_react51.default.createElement(import_select.HiddenSelect, {
       state,
       triggerRef: buttonRef,
       label: props.label,
       name: props.name,
       isDisabled: disabled
-    }), /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
+    }), /* @__PURE__ */ import_react51.default.createElement(import_system37.Box, {
       as: "button",
       __baseCSS: {
         display: "flex",
@@ -1913,21 +1990,29 @@ var Select = (0, import_react49.forwardRef)(
       },
       css: styles.button,
       ref: buttonRef,
-      ...(0, import_utils13.mergeProps)(buttonProps, focusProps),
+      ...(0, import_utils14.mergeProps)(buttonProps, focusProps),
       ...stateProps
-    }, /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
+    }, /* @__PURE__ */ import_react51.default.createElement(import_system37.Box, {
       css: {
         overflow: "hidden",
         whiteSpace: "nowrap"
       },
       ...valueProps
-    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react49.default.createElement(Chevron, {
+    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react51.default.createElement(Chevron, {
       css: styles.icon
-    })), /* @__PURE__ */ import_react49.default.createElement(Popover, {
+    })), isSmallScreen ? /* @__PURE__ */ import_react51.default.createElement(Tray, {
+      state
+    }, /* @__PURE__ */ import_react51.default.createElement(ListBox, {
+      ref: listboxRef,
+      state,
+      variant,
+      size,
+      ...menuProps
+    })) : /* @__PURE__ */ import_react51.default.createElement(Popover, {
       state,
       triggerRef: buttonRef,
       scrollRef: listboxRef
-    }, /* @__PURE__ */ import_react49.default.createElement(ListBox, {
+    }, /* @__PURE__ */ import_react51.default.createElement(ListBox, {
       ref: listboxRef,
       state,
       variant,
@@ -1940,30 +2025,30 @@ Select.Option = import_collections2.Item;
 Select.Section = import_collections2.Section;
 
 // src/Slider/Slider.tsx
-var import_react51 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_slider2 = require("@react-aria/slider");
 var import_slider3 = require("@react-stately/slider");
 var import_i18n3 = require("@react-aria/i18n");
-var import_utils15 = require("@react-aria/utils");
-var import_system37 = require("@marigold/system");
+var import_utils16 = require("@react-aria/utils");
+var import_system39 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
-var import_utils14 = require("@react-aria/utils");
-var import_system36 = require("@marigold/system");
+var import_utils15 = require("@react-aria/utils");
+var import_system38 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/Slider/Thumb.tsx
-var import_focus9 = require("@react-aria/focus");
+var import_focus10 = require("@react-aria/focus");
 var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = import_react50.default.useRef(null);
-  const { isFocusVisible, focusProps, isFocused } = (0, import_focus9.useFocusRing)();
+  const inputRef = import_react52.default.useRef(null);
+  const { isFocusVisible, focusProps, isFocused } = (0, import_focus10.useFocusRing)();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = (0, import_system36.useStateProps)({
+  const stateProps = (0, import_system38.useStateProps)({
     focus: focused,
     disabled
   });
@@ -1976,27 +2061,27 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     },
     state
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react52.default.createElement(import_system.Box, {
     __baseCSS: { top: "50%" },
     css: styles,
     ...thumbProps,
     ...stateProps
-  }, /* @__PURE__ */ import_react50.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react52.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react52.default.createElement(import_system.Box, {
     as: "input",
     type: "range",
     ref: inputRef,
-    ...(0, import_utils14.mergeProps)(inputProps, focusProps)
+    ...(0, import_utils15.mergeProps)(inputProps, focusProps)
   })));
 };
 
 // src/Slider/Slider.tsx
-var Slider = (0, import_react51.forwardRef)(
+var Slider = (0, import_react53.forwardRef)(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
-    const trackRef = (0, import_utils15.useObjectRef)(ref);
+    const trackRef = (0, import_utils16.useObjectRef)(ref);
     const numberFormatter = (0, import_i18n3.useNumberFormatter)(formatOptions);
     const state = (0, import_slider3.useSliderState)({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)(
@@ -2007,12 +2092,12 @@ var Slider = (0, import_react51.forwardRef)(
       state,
       trackRef
     );
-    const styles = (0, import_system37.useComponentStyles)(
+    const styles = (0, import_system39.useComponentStyles)(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
+    return /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
       __baseCSS: {
         display: "flex",
         flexDirection: "column",
@@ -2020,18 +2105,18 @@ var Slider = (0, import_react51.forwardRef)(
         width
       },
       ...groupProps
-    }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
+    }, /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
       __baseCSS: { display: "flex", alignSelf: "stretch" }
-    }, props.children && /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
+    }, props.children && /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
       as: "label",
       __baseCSS: styles.label,
       ...labelProps
-    }, props.children), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
+    }, props.children), /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
       as: "output",
       ...outputProps,
       __baseCSS: { flex: "1 0 auto", textAlign: "end" },
       css: styles.output
-    }, state.getThumbValueLabel(0))), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
+    }, state.getThumbValueLabel(0))), /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
       ...trackProps,
       ref: trackRef,
       __baseCSS: {
@@ -2039,13 +2124,13 @@ var Slider = (0, import_react51.forwardRef)(
         width: "100%",
         cursor: props.disabled ? "not-allowed" : "pointer"
       }
-    }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
+    }, /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
       __baseCSS: {
         top: "50%",
         transform: "translateY(-50%)"
       },
       css: styles.track
-    }), /* @__PURE__ */ import_react51.default.createElement(Thumb, {
+    }), /* @__PURE__ */ import_react53.default.createElement(Thumb, {
       state,
       trackRef,
       disabled: props.disabled,
@@ -2055,16 +2140,16 @@ var Slider = (0, import_react51.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_react52 = __toESM(require("react"));
-var import_system38 = require("@marigold/system");
-var Split = (props) => /* @__PURE__ */ import_react52.default.createElement(import_system38.Box, {
+var import_react54 = __toESM(require("react"));
+var import_system40 = require("@marigold/system");
+var Split = (props) => /* @__PURE__ */ import_react54.default.createElement(import_system40.Box, {
   ...props,
   role: "separator",
   css: { flexGrow: 1 }
 });
 
 // src/Stack/Stack.tsx
-var import_react53 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2084,7 +2169,7 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
+}) => /* @__PURE__ */ import_react55.default.createElement(import_system.Box, {
   css: {
     display: "flex",
     flexDirection: "column",
@@ -2098,13 +2183,13 @@ var Stack = ({
 }, children);
 
 // src/Switch/Switch.tsx
-var import_react54 = __toESM(require("react"));
-var import_focus10 = require("@react-aria/focus");
+var import_react56 = __toESM(require("react"));
+var import_focus11 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
-var import_utils16 = require("@react-aria/utils");
+var import_utils17 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system39 = require("@marigold/system");
-var Switch = (0, import_react54.forwardRef)(
+var import_system41 = require("@marigold/system");
+var Switch = (0, import_react56.forwardRef)(
   ({
     variant,
     size,
@@ -2115,7 +2200,7 @@ var Switch = (0, import_react54.forwardRef)(
     defaultChecked,
     ...rest
   }, ref) => {
-    const inputRef = (0, import_utils16.useObjectRef)(ref);
+    const inputRef = (0, import_utils17.useObjectRef)(ref);
     const props = {
       isSelected: checked,
       isDisabled: disabled,
@@ -2125,19 +2210,19 @@ var Switch = (0, import_react54.forwardRef)(
     };
     const state = (0, import_toggle2.useToggleState)(props);
     const { inputProps } = (0, import_switch.useSwitch)(props, state, inputRef);
-    const { isFocusVisible, focusProps } = (0, import_focus10.useFocusRing)();
-    const stateProps = (0, import_system39.useStateProps)({
+    const { isFocusVisible, focusProps } = (0, import_focus11.useFocusRing)();
+    const stateProps = (0, import_system41.useStateProps)({
       checked: state.isSelected,
       disabled,
       readOnly,
       focus: isFocusVisible
     });
-    const styles = (0, import_system39.useComponentStyles)(
+    const styles = (0, import_system41.useComponentStyles)(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ import_react54.default.createElement(import_system.Box, {
+    return /* @__PURE__ */ import_react56.default.createElement(import_system.Box, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -2148,7 +2233,7 @@ var Switch = (0, import_react54.forwardRef)(
         width
       },
       css: styles.container
-    }, /* @__PURE__ */ import_react54.default.createElement(import_system.Box, {
+    }, /* @__PURE__ */ import_react56.default.createElement(import_system.Box, {
       as: "input",
       ref: inputRef,
       css: {
@@ -2163,9 +2248,9 @@ var Switch = (0, import_react54.forwardRef)(
       },
       ...inputProps,
       ...focusProps
-    }), props.children && /* @__PURE__ */ import_react54.default.createElement(import_system.Box, {
+    }), props.children && /* @__PURE__ */ import_react56.default.createElement(import_system.Box, {
       css: styles.label
-    }, props.children), /* @__PURE__ */ import_react54.default.createElement(import_system.Box, {
+    }, props.children), /* @__PURE__ */ import_react56.default.createElement(import_system.Box, {
       __baseCSS: {
         position: "relative",
         width: 48,
@@ -2176,7 +2261,7 @@ var Switch = (0, import_react54.forwardRef)(
       },
       css: styles.track,
       ...stateProps
-    }, /* @__PURE__ */ import_react54.default.createElement(import_system.Box, {
+    }, /* @__PURE__ */ import_react56.default.createElement(import_system.Box, {
       __baseCSS: {
         display: "block",
         position: "absolute",
@@ -2200,34 +2285,34 @@ var Switch = (0, import_react54.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react64 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system45 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react55 = require("react");
-var TableContext = (0, import_react55.createContext)({});
-var useTableContext = () => (0, import_react55.useContext)(TableContext);
+var import_react57 = require("react");
+var TableContext = (0, import_react57.createContext)({});
+var useTableContext = () => (0, import_react57.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
-var import_react56 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_table = require("@react-aria/table");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ import_react56.default.createElement("tbody", {
+  return /* @__PURE__ */ import_react58.default.createElement("tbody", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableCell.tsx
-var import_react57 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
-var import_focus11 = require("@react-aria/focus");
-var import_utils17 = require("@react-aria/utils");
-var import_system40 = require("@marigold/system");
+var import_focus12 = require("@react-aria/focus");
+var import_utils18 = require("@react-aria/utils");
+var import_system42 = require("@marigold/system");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react57.useRef)(null);
+  const ref = (0, import_react59.useRef)(null);
   const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -2242,23 +2327,23 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
-  const stateProps = (0, import_system40.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react57.default.createElement(import_system40.Box, {
+  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
+  const stateProps = (0, import_system42.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react59.default.createElement(import_system42.Box, {
     as: "td",
     ref,
     css: styles.cell,
-    ...(0, import_utils17.mergeProps)(cellProps, focusProps),
+    ...(0, import_utils18.mergeProps)(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react58 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
-var import_focus12 = require("@react-aria/focus");
-var import_utils18 = require("@react-aria/utils");
-var import_system41 = require("@marigold/system");
+var import_focus13 = require("@react-aria/focus");
+var import_utils19 = require("@react-aria/utils");
+var import_system43 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2282,7 +2367,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react58.useRef)(null);
+  const ref = (0, import_react60.useRef)(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -2295,9 +2380,9 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
-  const stateProps = (0, import_system41.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react58.default.createElement(import_system41.Box, {
+  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const stateProps = (0, import_system43.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react60.default.createElement(import_system43.Box, {
     as: "td",
     ref,
     __baseCSS: {
@@ -2306,24 +2391,24 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell,
-    ...(0, import_utils18.mergeProps)(gridCellProps, focusProps),
+    ...(0, import_utils19.mergeProps)(gridCellProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ import_react58.default.createElement(Checkbox, {
+  }, /* @__PURE__ */ import_react60.default.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react59 = __toESM(require("react"));
-var import_focus13 = require("@react-aria/focus");
+var import_react61 = __toESM(require("react"));
+var import_focus14 = require("@react-aria/focus");
 var import_interactions8 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils20 = require("@react-aria/utils");
-var import_system42 = require("@marigold/system");
+var import_utils21 = require("@react-aria/utils");
+var import_system44 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ import_react59.default.createElement(import_system42.Box, {
+}) => /* @__PURE__ */ import_react61.default.createElement(import_system44.Box, {
   as: "span",
   role: "presentation",
   "aria-hidden": "true",
@@ -2335,7 +2420,7 @@ var SortIndicator = ({
 }, direction === "ascending" ? "\u25B2" : "\u25BC");
 var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = (0, import_react59.useRef)(null);
+  const ref = (0, import_react61.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -2345,58 +2430,64 @@ var TableColumnHeader = ({ column }) => {
     ref
   );
   const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
-  const stateProps = (0, import_system42.useStateProps)({
+  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
+  const stateProps = (0, import_system44.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react59.default.createElement(import_system42.Box, {
+  return /* @__PURE__ */ import_react61.default.createElement(import_system44.Box, {
     as: "th",
     colSpan: column.colspan,
     ref,
     __baseCSS: { cursor: "default" },
     css: styles.header,
-    ...(0, import_utils20.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...(0, import_utils21.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react59.default.createElement(SortIndicator, {
+  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react61.default.createElement(SortIndicator, {
     direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
     visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
   }));
 };
 
 // src/Table/TableHeader.tsx
-var import_react60 = __toESM(require("react"));
+var import_react62 = __toESM(require("react"));
 var import_table5 = require("@react-aria/table");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ import_react60.default.createElement("thead", {
+  return /* @__PURE__ */ import_react62.default.createElement("thead", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react61 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 var import_table6 = require("@react-aria/table");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react61.useRef)(null);
+  const ref = (0, import_react63.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react61.default.createElement("tr", {
+  return /* @__PURE__ */ import_react63.default.createElement("tr", {
     ...rowProps,
     ref
   }, children);
 };
 
 // src/Table/TableRow.tsx
-var import_react62 = __toESM(require("react"));
-var import_focus14 = require("@react-aria/focus");
+var import_react64 = __toESM(require("react"));
+var import_focus15 = require("@react-aria/focus");
 var import_interactions9 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils21 = require("@react-aria/utils");
-var import_system43 = require("@marigold/system");
+var import_utils22 = require("@react-aria/utils");
+var import_system45 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react62.useRef)(null);
-  const { interactive, state, styles } = useTableContext();
+  const ref = (0, import_react64.useRef)(null);
+  const { interactive, state, ...ctx } = useTableContext();
+  const { variant, size } = row.props;
+  const { row: styles } = (0, import_system45.useComponentStyles)(
+    "Table",
+    { variant: variant || ctx.variant, size: size || ctx.size },
+    { parts: ["row"] }
+  );
   const { rowProps, isPressed } = (0, import_table7.useTableRow)(
     {
       node: row
@@ -2406,38 +2497,38 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
+  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)({ within: true });
   const { hoverProps, isHovered } = (0, import_interactions9.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system43.useStateProps)({
+  const stateProps = (0, import_system45.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ import_react62.default.createElement(import_system43.Box, {
+  return /* @__PURE__ */ import_react64.default.createElement(import_system45.Box, {
     as: "tr",
     ref,
     __baseCSS: {
       cursor: !interactive ? "text" : disabled ? "default" : "pointer"
     },
-    css: styles.row,
-    ...(0, import_utils21.mergeProps)(rowProps, focusProps, hoverProps),
+    css: styles,
+    ...(0, import_utils22.mergeProps)(rowProps, focusProps, hoverProps),
     ...stateProps
   }, children);
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react63 = __toESM(require("react"));
-var import_focus15 = require("@react-aria/focus");
+var import_react65 = __toESM(require("react"));
+var import_focus16 = require("@react-aria/focus");
 var import_interactions10 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils22 = require("@react-aria/utils");
-var import_system44 = require("@marigold/system");
+var import_utils23 = require("@react-aria/utils");
+var import_system46 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react65.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -2448,12 +2539,12 @@ var TableSelectAllCell = ({ column }) => {
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)();
-  const stateProps = (0, import_system44.useStateProps)({
+  const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
+  const stateProps = (0, import_system46.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react63.default.createElement(import_system44.Box, {
+  return /* @__PURE__ */ import_react65.default.createElement(import_system46.Box, {
     as: "th",
     ref,
     __baseCSS: {
@@ -2462,9 +2553,9 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header,
-    ...(0, import_utils22.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...(0, import_utils23.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ import_react63.default.createElement(Checkbox, {
+  }, /* @__PURE__ */ import_react65.default.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
@@ -2478,22 +2569,22 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react64.useRef)(null);
+  const tableRef = (0, import_react66.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
     showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const styles = (0, import_system45.useComponentStyles)(
+  const styles = (0, import_system47.useComponentStyles)(
     "Table",
     { variant, size },
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ import_react64.default.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ import_react66.default.createElement(TableContext.Provider, {
     value: { state, interactive, styles }
-  }, /* @__PURE__ */ import_react64.default.createElement(import_system45.Box, {
+  }, /* @__PURE__ */ import_react66.default.createElement(import_system47.Box, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
@@ -2505,30 +2596,30 @@ var Table = ({
     },
     css: styles.table,
     ...gridProps
-  }, /* @__PURE__ */ import_react64.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react64.default.createElement(TableHeaderRow, {
+  }, /* @__PURE__ */ import_react66.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react66.default.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map(
     (column) => {
       var _a;
-      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react64.default.createElement(TableSelectAllCell, {
+      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react66.default.createElement(TableSelectAllCell, {
         key: column.key,
         column
-      }) : /* @__PURE__ */ import_react64.default.createElement(TableColumnHeader, {
+      }) : /* @__PURE__ */ import_react66.default.createElement(TableColumnHeader, {
         key: column.key,
         column
       });
     }
-  )))), /* @__PURE__ */ import_react64.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react64.default.createElement(TableRow, {
+  )))), /* @__PURE__ */ import_react66.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react66.default.createElement(TableRow, {
     key: row.key,
     row
   }, [...row.childNodes].map(
     (cell) => {
       var _a;
-      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react64.default.createElement(TableCheckboxCell, {
+      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react66.default.createElement(TableCheckboxCell, {
         key: cell.key,
         cell
-      }) : /* @__PURE__ */ import_react64.default.createElement(TableCell, {
+      }) : /* @__PURE__ */ import_react66.default.createElement(TableCell, {
         key: cell.key,
         cell
       });
@@ -2542,9 +2633,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react65 = __toESM(require("react"));
-var import_system46 = require("@marigold/system");
-var import_system47 = require("@marigold/system");
+var import_react67 = __toESM(require("react"));
+var import_system48 = require("@marigold/system");
+var import_system49 = require("@marigold/system");
 var Text = ({
   variant,
   size,
@@ -2557,11 +2648,11 @@ var Text = ({
   children,
   ...props
 }) => {
-  const styles = (0, import_system46.useComponentStyles)("Text", {
+  const styles = (0, import_system48.useComponentStyles)("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ import_react65.default.createElement(import_system47.Box, {
+  return /* @__PURE__ */ import_react67.default.createElement(import_system49.Box, {
     as: "p",
     ...props,
     css: [
@@ -2572,13 +2663,13 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react66 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_interactions11 = require("@react-aria/interactions");
-var import_focus16 = require("@react-aria/focus");
+var import_focus17 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
-var import_utils24 = require("@react-aria/utils");
-var import_system48 = require("@marigold/system");
-var TextArea = (0, import_react66.forwardRef)(
+var import_utils25 = require("@react-aria/utils");
+var import_system50 = require("@marigold/system");
+var TextArea = (0, import_react68.forwardRef)(
   ({
     variant,
     size,
@@ -2591,7 +2682,7 @@ var TextArea = (0, import_react66.forwardRef)(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = (0, import_utils24.useObjectRef)(ref);
+    const textAreaRef = (0, import_utils25.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
       {
         inputElementType: "textarea",
@@ -2604,16 +2695,16 @@ var TextArea = (0, import_react66.forwardRef)(
       textAreaRef
     );
     const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
-    const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-    const stateProps = (0, import_system48.useStateProps)({
+    const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)();
+    const stateProps = (0, import_system50.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    const styles = (0, import_system48.useComponentStyles)("TextArea", { variant, size });
-    return /* @__PURE__ */ import_react66.default.createElement(FieldBase, {
+    const styles = (0, import_system50.useComponentStyles)("TextArea", { variant, size });
+    return /* @__PURE__ */ import_react68.default.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2626,7 +2717,7 @@ var TextArea = (0, import_react66.forwardRef)(
       variant,
       size,
       width
-    }, /* @__PURE__ */ import_react66.default.createElement(import_system48.Box, {
+    }, /* @__PURE__ */ import_react68.default.createElement(import_system50.Box, {
       as: "textarea",
       css: styles,
       ref: textAreaRef,
@@ -2640,16 +2731,16 @@ var TextArea = (0, import_react66.forwardRef)(
 );
 
 // src/TextField/TextField.tsx
-var import_react67 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 var import_interactions12 = require("@react-aria/interactions");
-var import_focus17 = require("@react-aria/focus");
+var import_focus18 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
-var import_utils25 = require("@react-aria/utils");
-var import_system49 = require("@marigold/system");
-var TextField = (0, import_react67.forwardRef)(
+var import_utils26 = require("@react-aria/utils");
+var import_system51 = require("@marigold/system");
+var TextField = (0, import_react69.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = (0, import_utils25.useObjectRef)(ref);
+    const inputRef = (0, import_utils26.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(
       {
         isDisabled: disabled,
@@ -2661,18 +2752,18 @@ var TextField = (0, import_react67.forwardRef)(
       inputRef
     );
     const { hoverProps, isHovered } = (0, import_interactions12.useHover)({});
-    const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)({
+    const { focusProps, isFocusVisible } = (0, import_focus18.useFocusRing)({
       isTextInput: true,
       autoFocus
     });
-    const stateProps = (0, import_system49.useStateProps)({
+    const stateProps = (0, import_system51.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ import_react67.default.createElement(FieldBase, {
+    return /* @__PURE__ */ import_react69.default.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2685,7 +2776,7 @@ var TextField = (0, import_react67.forwardRef)(
       variant,
       size,
       width
-    }, /* @__PURE__ */ import_react67.default.createElement(Input, {
+    }, /* @__PURE__ */ import_react69.default.createElement(Input, {
       ref: inputRef,
       variant,
       size,
@@ -2698,8 +2789,8 @@ var TextField = (0, import_react67.forwardRef)(
 );
 
 // src/Tiles/Tiles.tsx
-var import_react68 = __toESM(require("react"));
-var import_system50 = require("@marigold/system");
+var import_react70 = __toESM(require("react"));
+var import_system52 = require("@marigold/system");
 var Tiles = ({
   space = "none",
   stretch = false,
@@ -2708,13 +2799,13 @@ var Tiles = ({
   children,
   ...props
 }) => {
-  const { css } = (0, import_system50.useTheme)();
+  const { css } = (0, import_system52.useTheme)();
   const { width } = css({ width: tilesWidth });
   let column = `min(${typeof width === "number" ? `${width}px` : width}, 100%)`;
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ import_react68.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react70.default.createElement(import_system.Box, {
     ...props,
     css: {
       display: "grid",
@@ -2726,18 +2817,18 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react71 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system51 = require("@marigold/system");
+var import_system53 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
-var import_react69 = require("react");
-var TooltipContext = (0, import_react69.createContext)({});
-var useTooltipContext = () => (0, import_react69.useContext)(TooltipContext);
+var import_react71 = require("react");
+var TooltipContext = (0, import_react71.createContext)({});
+var useTooltipContext = () => (0, import_react71.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react70 = __toESM(require("react"));
-var import_focus18 = require("@react-aria/focus");
+var import_react72 = __toESM(require("react"));
+var import_focus19 = require("@react-aria/focus");
 var import_overlays7 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
@@ -2749,7 +2840,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = import_react70.default.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = import_react72.default.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -2757,8 +2848,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = (0, import_react70.useRef)(null);
-  const overlayRef = (0, import_react70.useRef)(null);
+  const tooltipTriggerRef = (0, import_react72.useRef)(null);
+  const overlayRef = (0, import_react72.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(
     props,
@@ -2777,10 +2868,10 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ import_react70.default.createElement(import_focus18.FocusableProvider, {
+  return /* @__PURE__ */ import_react72.default.createElement(import_focus19.FocusableProvider, {
     ref: tooltipTriggerRef,
     ...triggerProps
-  }, tooltipTrigger, /* @__PURE__ */ import_react70.default.createElement(TooltipContext.Provider, {
+  }, tooltipTrigger, /* @__PURE__ */ import_react72.default.createElement(TooltipContext.Provider, {
     value: {
       state,
       overlayRef,
@@ -2789,7 +2880,7 @@ var TooltipTrigger = ({
       ...tooltipProps,
       ...positionProps
     }
-  }, /* @__PURE__ */ import_react70.default.createElement(Overlay, {
+  }, /* @__PURE__ */ import_react72.default.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2798,18 +2889,18 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const styles = (0, import_system51.useComponentStyles)(
+  const styles = (0, import_system53.useComponentStyles)(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ import_react71.default.createElement(import_system51.Box, {
+  return /* @__PURE__ */ import_react73.default.createElement(import_system53.Box, {
     ...tooltipProps,
     ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }, /* @__PURE__ */ import_react71.default.createElement("div", null, children), /* @__PURE__ */ import_react71.default.createElement(import_system51.Box, {
+  }, /* @__PURE__ */ import_react73.default.createElement("div", null, children), /* @__PURE__ */ import_react73.default.createElement(import_system53.Box, {
     ...arrowProps,
     __baseCSS: {
       position: "absolute",
@@ -2826,122 +2917,122 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-var import_system52 = require("@marigold/system");
-var import_react72 = __toESM(require("react"));
-var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ import_react72.default.createElement(import_system52.SVG, {
+var import_system54 = require("@marigold/system");
+var import_react74 = __toESM(require("react"));
+var XLoader = (0, import_react74.forwardRef)((props, ref) => /* @__PURE__ */ import_react74.default.createElement(import_system54.SVG, {
   id: "XLoader",
   xmlns: "http://www.w3.org/2000/svg",
   size: 150,
   viewBox: "0 0 150 150",
   ...props,
   ...ref
-}, /* @__PURE__ */ import_react72.default.createElement("path", {
+}, /* @__PURE__ */ import_react74.default.createElement("path", {
   id: "XMLID_1_",
   d: "M35.3 27h26.5l54 74.1H88.7z"
-}), /* @__PURE__ */ import_react72.default.createElement("path", {
+}), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "1.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.9s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.8s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.7s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.6s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.5s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.4s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.3s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.2s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.1s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react72.default.createElement("path", {
+})), /* @__PURE__ */ import_react74.default.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__ */ import_react72.default.createElement("animate", {
+}, /* @__PURE__ */ import_react74.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
@@ -2997,6 +3088,8 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
   ThemeProvider,
   Tiles,
   Tooltip,
+  Tray,
+  TrayWrapper,
   Underlay,
   VisuallyHidden,
   XLoader,