@marigold/components 4.2.2 → 5.1.0

package/dist/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -26,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ActionMenu: () => ActionMenu,
   Aside: () => Aside,
   Aspect: () => Aspect,
   Badge: () => Badge,
@@ -72,7 +77,7 @@ __export(src_exports, {
   Text: () => Text,
   TextArea: () => TextArea,
   TextField: () => TextField,
-  ThemeProvider: () => import_system31.ThemeProvider,
+  ThemeProvider: () => import_system32.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => Tooltip,
   Tray: () => Tray,
@@ -85,7 +90,7 @@ __export(src_exports, {
   useCheckboxGroupContext: () => useCheckboxGroupContext,
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
-  useTheme: () => import_system31.useTheme
+  useTheme: () => import_system32.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -116,23 +121,27 @@ var Aside = ({
   wrap = "50%"
 }) => {
   const [aside, content] = SIDE_MAP[side];
-  return /* @__PURE__ */ import_react.default.createElement(import_system.Box, {
-    css: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: space,
-      alignItems: stretch ? void 0 : "flex-start",
-      [`> ${aside}`]: {
-        flexBasis: sideWidth,
-        flexGrow: 1
-      },
-      [`> ${content}`]: {
-        flexBasis: 0,
-        flexGrow: 999,
-        minInlineSize: wrap
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_system.Box,
+    {
+      css: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: space,
+        alignItems: stretch ? void 0 : "flex-start",
+        [`> ${aside}`]: {
+          flexBasis: sideWidth,
+          flexGrow: 1
+        },
+        [`> ${content}`]: {
+          flexBasis: 0,
+          flexGrow: 999,
+          minInlineSize: wrap
+        }
       }
-    }
-  }, children);
+    },
+    children
+  );
 };
 
 // src/Aspect/Aspect.tsx
@@ -142,23 +151,24 @@ var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ import_react2.default.createElement(import_system.Box, {
-  css: {
-    aspectRatio: import_tokens.aspect[ratio],
-    overflow: "hidden",
-    maxWidth
-  }
-}, children);
+}) => /* @__PURE__ */ import_react2.default.createElement(
+  import_system.Box,
+  {
+    css: {
+      aspectRatio: import_tokens.aspect[ratio],
+      overflow: "hidden",
+      maxWidth
+    }
+  },
+  children
+);
 
 // src/Badge/Badge.tsx
 var import_react3 = __toESM(require("react"));
 var import_system2 = require("@marigold/system");
 var Badge = ({ variant, size, children, ...props }) => {
   const styles = (0, import_system2.useComponentStyles)("Badge", { variant, size });
-  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, {
-    ...props,
-    css: styles
-  }, children);
+  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, { ...props, css: styles }, children);
 };
 
 // src/Breakout/Breakout.tsx
@@ -183,17 +193,21 @@ var Breakout = ({
 }) => {
   const alignItems = useAlignment(alignY);
   const justifyContent = useAlignment(alignX);
-  return /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
-    alignItems,
-    justifyContent,
-    width: "100%",
-    height,
-    display: alignY || alignX ? "flex" : "block",
-    __baseCSS: {
-      gridColumn: "1 / -1 !important"
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_system.Box,
+    {
+      css: {
+        alignItems,
+        justifyContent,
+        height,
+        width: "100%",
+        display: alignY || alignX ? "flex" : "block",
+        gridColumn: "1 / -1 !important"
+      },
+      ...props
     },
-    ...props
-  }, children);
+    children
+  );
 };
 
 // src/Body/Body.tsx
@@ -201,11 +215,7 @@ var import_react5 = __toESM(require("react"));
 var import_system3 = require("@marigold/system");
 var Body = ({ children, variant, size, ...props }) => {
   const styles = (0, import_system3.useComponentStyles)("Body", { variant, size });
-  return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, {
-    as: "section",
-    ...props,
-    css: styles
-  }, children);
+  return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, { as: "section", ...props, css: styles }, children);
 };
 
 // src/Button/Button.tsx
@@ -238,6 +248,10 @@ var Button = (0, import_react6.forwardRef)(
     });
     const { buttonProps, isPressed } = (0, import_button.useButton)(
       {
+        /**
+         * `react-aria` only expected `Element` but we casted
+         * it to a `HTMLButtonElement` internally.
+         */
         ...props,
         onClick,
         onPress,
@@ -256,24 +270,28 @@ var Button = (0, import_react6.forwardRef)(
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, {
-      ...(0, import_utils.mergeProps)(buttonProps, focusProps, hoverProps, props),
-      ...stateProps,
-      as,
-      ref: buttonRef,
-      __baseCSS: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "0.5ch",
-        cursor: disabled ? "not-allowed" : "pointer",
-        width: fullWidth ? "100%" : void 0,
-        "&:focus": {
-          outline: 0
-        }
+    return /* @__PURE__ */ import_react6.default.createElement(
+      import_system4.Box,
+      {
+        ...(0, import_utils.mergeProps)(buttonProps, focusProps, hoverProps, props),
+        ...stateProps,
+        as,
+        ref: buttonRef,
+        __baseCSS: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.5ch",
+          cursor: disabled ? "not-allowed" : "pointer",
+          width: fullWidth ? "100%" : void 0,
+          "&:focus": {
+            outline: 0
+          }
+        },
+        css: styles
       },
-      css: styles
-    }, children);
+      children
+    );
   }
 );
 
@@ -294,10 +312,7 @@ var Card = ({
   ...props
 }) => {
   const styles = (0, import_system5.useComponentStyles)("Card", { variant, size });
-  return /* @__PURE__ */ import_react7.default.createElement(import_system5.Box, {
-    ...props,
-    css: [styles, { p, px, py, pt, pb, pl, pr }]
-  }, children);
+  return /* @__PURE__ */ import_react7.default.createElement(import_system5.Box, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
 };
 
 // src/Center/Center.tsx
@@ -307,19 +322,23 @@ var Center = ({
   space = "none",
   children,
   ...props
-}) => /* @__PURE__ */ import_react8.default.createElement(import_system.Box, {
-  css: {
-    boxSizing: "content-box",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    marginInline: "auto",
-    maxInlineSize: maxWidth,
-    gap: space
+}) => /* @__PURE__ */ import_react8.default.createElement(
+  import_system.Box,
+  {
+    css: {
+      boxSizing: "content-box",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      marginInline: "auto",
+      maxInlineSize: maxWidth,
+      gap: space
+    },
+    ...props
   },
-  ...props
-}, children);
+  children
+);
 
 // src/Checkbox/Checkbox.tsx
 var import_react15 = __toESM(require("react"));
@@ -353,23 +372,21 @@ var Label = ({
   ...props
 }) => {
   const styles = (0, import_system6.useComponentStyles)("Label", { size, variant });
-  return /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
-    ...props,
-    as,
-    "aria-required": required,
-    __baseCSS: {
-      display: "flex",
-      width: labelWidth
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_system6.Box,
+    {
+      ...props,
+      as,
+      "aria-required": required,
+      __baseCSS: {
+        display: "flex",
+        width: labelWidth
+      },
+      css: styles
     },
-    css: styles
-  }, 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"
-  })));
+    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
@@ -393,18 +410,24 @@ var 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));
+  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/FieldGroup.tsx
@@ -413,9 +436,7 @@ var import_react12 = require("react");
 var FieldGroupContext = (0, import_react12.createContext)({});
 var useFieldGroupContext = () => (0, import_react12.useContext)(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ import_react11.default.createElement(FieldGroupContext.Provider, {
-    value: { labelWidth }
-  }, children);
+  return /* @__PURE__ */ import_react11.default.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
 };
 
 // src/FieldBase/FieldBase.tsx
@@ -439,35 +460,45 @@ var FieldBase = ({
   const hasHelpText = !!description || errorMessage && error;
   const style = (0, import_system8.useComponentStyles)("Field", { variant, size });
   const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, {
-    ...props,
-    __baseCSS: {
-      display: "flex",
-      flexDirection: "column",
-      width,
-      position: "relative"
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_system8.Box,
+    {
+      ...props,
+      __baseCSS: {
+        display: "flex",
+        flexDirection: "column",
+        width,
+        position: "relative"
+      },
+      css: style
     },
-    css: style
-  }, label && /* @__PURE__ */ import_react13.default.createElement(Label, {
-    required,
-    variant,
-    size,
-    labelWidth,
-    ...labelProps,
-    ...stateProps
-  }, label), /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, {
-    __baseCSS: { display: "flex", flexDirection: "column" }
-  }, children, hasHelpText && /* @__PURE__ */ import_react13.default.createElement(HelpText, {
-    ...stateProps,
-    variant,
-    size,
-    disabled,
-    description,
-    descriptionProps,
-    error,
-    errorMessage,
-    errorMessageProps
-  })));
+    label && /* @__PURE__ */ import_react13.default.createElement(
+      Label,
+      {
+        required,
+        variant,
+        size,
+        labelWidth,
+        ...labelProps,
+        ...stateProps
+      },
+      label
+    ),
+    /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, { __baseCSS: { display: "flex", flexDirection: "column" } }, children, hasHelpText && /* @__PURE__ */ import_react13.default.createElement(
+      HelpText,
+      {
+        ...stateProps,
+        variant,
+        size,
+        disabled,
+        description,
+        descriptionProps,
+        error,
+        errorMessage,
+        errorMessageProps
+      }
+    ))
+  );
 };
 
 // src/Checkbox/CheckboxGroup.tsx
@@ -497,64 +528,74 @@ var CheckboxGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react14.default.createElement(FieldBase, {
-    label: props.label,
-    labelProps: { as: "span", ...labelProps },
-    description: props.description,
-    descriptionProps,
-    error,
-    errorMessage: props.errorMessage,
-    errorMessageProps,
-    disabled,
-    stateProps,
-    required,
-    ...groupProps
-  }, /* @__PURE__ */ import_react14.default.createElement(import_system9.Box, {
-    role: "presentation",
-    __baseCSS: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "start"
-    }
-  }, /* @__PURE__ */ import_react14.default.createElement(CheckboxGroupContext.Provider, {
-    value: { error, ...state }
-  }, children)));
+  return /* @__PURE__ */ import_react14.default.createElement(
+    FieldBase,
+    {
+      label: props.label,
+      labelProps: { as: "span", ...labelProps },
+      description: props.description,
+      descriptionProps,
+      error,
+      errorMessage: props.errorMessage,
+      errorMessageProps,
+      disabled,
+      stateProps,
+      required,
+      ...groupProps
+    },
+    /* @__PURE__ */ import_react14.default.createElement(
+      import_system9.Box,
+      {
+        role: "presentation",
+        __baseCSS: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "start"
+        }
+      },
+      /* @__PURE__ */ import_react14.default.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
+    )
+  );
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ import_react15.default.createElement("svg", {
-  viewBox: "0 0 12 10"
-}, /* @__PURE__ */ import_react15.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_react15.default.createElement("svg", {
-  width: "12",
-  height: "3",
-  viewBox: "0 0 12 3"
-}, /* @__PURE__ */ import_react15.default.createElement("path", {
-  fill: "currentColor",
-  stroke: "none",
-  d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
-}));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
-  "aria-hidden": "true",
-  __baseCSS: {
-    flex: "0 0 16px",
-    width: 16,
-    height: 16,
-    bg: "#fff",
-    border: "1px solid #000",
-    borderRadius: 3,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    p: 1
+var CheckMark = () => /* @__PURE__ */ import_react15.default.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ import_react15.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_react15.default.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ import_react15.default.createElement(
+  "path",
+  {
+    fill: "currentColor",
+    stroke: "none",
+    d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
+  }
+));
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react15.default.createElement(
+  import_system10.Box,
+  {
+    "aria-hidden": "true",
+    __baseCSS: {
+      flex: "0 0 16px",
+      width: 16,
+      height: 16,
+      bg: "#fff",
+      border: "1px solid #000",
+      borderRadius: 3,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: 1
+    },
+    css,
+    ...props
   },
-  css,
-  ...props
-}, indeterminate ? /* @__PURE__ */ import_react15.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react15.default.createElement(CheckMark, null) : null);
+  indeterminate ? /* @__PURE__ */ import_react15.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react15.default.createElement(CheckMark, null) : null
+);
 var Checkbox = (0, import_react15.forwardRef)(
   ({
     size,
@@ -581,6 +622,10 @@ var Checkbox = (0, import_react15.forwardRef)(
       {
         ...props,
         ...checkboxProps,
+        /**
+         * value is optional for standalone checkboxes, but required when
+         * used inside a group.
+         */
         value: props.value
       },
       groupState,
@@ -619,41 +664,50 @@ var Checkbox = (0, import_react15.forwardRef)(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
-      as: "label",
-      __baseCSS: {
-        display: "flex",
-        alignItems: "center",
-        gap: "1ch",
-        position: "relative"
-      },
-      css: styles.container,
-      ...hoverProps,
-      ...stateProps
-    }, /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
-      as: "input",
-      ref: inputRef,
-      css: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        top: 0,
-        left: 0,
-        zIndex: 1,
-        opacity: 1e-4,
-        cursor: inputProps.disabled ? "not-allowed" : "pointer"
+    return /* @__PURE__ */ import_react15.default.createElement(
+      import_system10.Box,
+      {
+        as: "label",
+        __baseCSS: {
+          display: "flex",
+          alignItems: "center",
+          gap: "1ch",
+          position: "relative"
+        },
+        css: styles.container,
+        ...hoverProps,
+        ...stateProps
       },
-      ...inputProps,
-      ...focusProps
-    }), /* @__PURE__ */ import_react15.default.createElement(Icon, {
-      checked: inputProps.checked,
-      indeterminate,
-      css: styles.checkbox,
-      ...stateProps
-    }), props.children && /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
-      css: styles.label,
-      ...stateProps
-    }, props.children));
+      /* @__PURE__ */ import_react15.default.createElement(
+        import_system10.Box,
+        {
+          as: "input",
+          ref: inputRef,
+          css: {
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: 0,
+            left: 0,
+            zIndex: 1,
+            opacity: 1e-4,
+            cursor: inputProps.disabled ? "not-allowed" : "pointer"
+          },
+          ...inputProps,
+          ...focusProps
+        }
+      ),
+      /* @__PURE__ */ import_react15.default.createElement(
+        Icon,
+        {
+          checked: inputProps.checked,
+          indeterminate,
+          css: styles.checkbox,
+          ...stateProps
+        }
+      ),
+      props.children && /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, { css: styles.label, ...stateProps }, props.children)
+    );
   }
 );
 
@@ -674,23 +728,36 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, {
-    css: {
-      display: "flex",
-      flexWrap: "wrap",
-      alignItems: "stretch",
-      height: stretch ? "100%" : void 0,
-      gap: space,
-      "> *": {
-        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
-      }
+  return /* @__PURE__ */ import_react16.default.createElement(
+    import_system.Box,
+    {
+      css: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "stretch",
+        height: stretch ? "100%" : void 0,
+        gap: space,
+        "> *": {
+          /**
+           * "Container Query": collapses at given width
+           * (https://heydonworks.com/article/the-flexbox-holy-albatross/)
+           */
+          flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
+        }
+      },
+      ...props
     },
-    ...props
-  }, import_react16.Children.map(children, (child, idx) => /* @__PURE__ */ import_react16.default.createElement(import_system.Box, {
-    css: {
-      flexGrow: columns[idx]
-    }
-  }, (0, import_react16.isValidElement)(child) ? (0, import_react16.cloneElement)(child) : child)));
+    import_react16.Children.map(children, (child, idx) => /* @__PURE__ */ import_react16.default.createElement(
+      import_system.Box,
+      {
+        css: {
+          // Stretch each column to the given value
+          flexGrow: columns[idx]
+        }
+      },
+      (0, import_react16.isValidElement)(child) ? (0, import_react16.cloneElement)(child) : child
+    ))
+  );
 };
 
 // src/Container/Container.tsx
@@ -725,21 +792,25 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = import_tokens2.size[contentType][size];
-  return /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
-    display: "grid",
-    css: {
-      gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
-      placeItems: ALIGN_ITEMS[alignItems],
-      "> *": {
-        gridColumn: ALIGN[align](maxWidth).gridColumn
-      }
+  return /* @__PURE__ */ import_react17.default.createElement(
+    import_system.Box,
+    {
+      css: {
+        display: "grid",
+        gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
+        placeItems: ALIGN_ITEMS[alignItems],
+        "> *": {
+          gridColumn: ALIGN[align](maxWidth).gridColumn
+        }
+      },
+      ...props
     },
-    ...props
-  }, children);
+    children
+  );
 };
 
 // src/Dialog/Dialog.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_button2 = require("@react-aria/button");
 var import_dialog = require("@react-aria/dialog");
 var import_system15 = require("@marigold/system");
@@ -749,11 +820,7 @@ var import_react18 = __toESM(require("react"));
 var import_system11 = require("@marigold/system");
 var Header = ({ children, variant, size, ...props }) => {
   const styles = (0, import_system11.useComponentStyles)("Header", { variant, size });
-  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, {
-    as: "header",
-    ...props,
-    css: styles
-  }, children);
+  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, { as: "header", ...props, css: styles }, children);
 };
 
 // src/Headline/Headline.tsx
@@ -772,11 +839,15 @@ var Headline = ({
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ import_react19.default.createElement(import_system12.Box, {
-    as: `h${level}`,
-    ...props,
-    css: [styles, { color, textAlign: align }]
-  }, children);
+  return /* @__PURE__ */ import_react19.default.createElement(
+    import_system12.Box,
+    {
+      as: `h${level}`,
+      ...props,
+      css: [styles, { color, textAlign: align }]
+    },
+    children
+  );
 };
 
 // src/Dialog/Context.ts
@@ -800,15 +871,18 @@ var import_react21 = __toESM(require("react"));
 var import_system13 = require("@marigold/system");
 var Underlay = ({ size, variant, ...props }) => {
   const styles = (0, import_system13.useComponentStyles)("Underlay", { size, variant });
-  return /* @__PURE__ */ import_react21.default.createElement(import_system13.Box, {
-    __baseCSS: {
-      position: "fixed",
-      inset: 0,
-      zIndex: 1
-    },
-    css: styles,
-    ...props
-  });
+  return /* @__PURE__ */ import_react21.default.createElement(
+    import_system13.Box,
+    {
+      __baseCSS: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1
+      },
+      css: styles,
+      ...props
+    }
+  );
 };
 
 // src/Overlay/Modal.tsx
@@ -826,28 +900,23 @@ var Modal = (0, import_react22.forwardRef)(
     );
     (0, import_overlays.usePreventScroll)();
     const { modalProps } = (0, import_overlays.useModal)({});
-    return /* @__PURE__ */ import_react22.default.createElement(import_focus3.FocusScope, {
-      contain: true,
-      restoreFocus: true,
-      autoFocus: true
-    }, /* @__PURE__ */ import_react22.default.createElement(Underlay, {
-      ...underlayProps,
-      variant: "modal"
-    }), /* @__PURE__ */ import_react22.default.createElement("div", {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        position: "fixed",
-        inset: 0,
-        zIndex: 2,
-        pointerEvents: "none"
+    return /* @__PURE__ */ import_react22.default.createElement(import_focus3.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react22.default.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ import_react22.default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "fixed",
+          inset: 0,
+          zIndex: 2,
+          pointerEvents: "none"
+        },
+        ref: modalRef,
+        ...(0, import_utils3.mergeProps)(props, overlayProps, modalProps)
       },
-      ref: modalRef,
-      ...(0, import_utils3.mergeProps)(props, overlayProps, modalProps)
-    }, /* @__PURE__ */ import_react22.default.createElement("div", {
-      style: { pointerEvents: "auto" }
-    }, children)));
+      /* @__PURE__ */ import_react22.default.createElement("div", { style: { pointerEvents: "auto" } }, children)
+    ));
   }
 );
 
@@ -873,21 +942,18 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ import_react23.default.createElement(import_overlays2.Overlay, {
-    portalContainer: container
-  }, /* @__PURE__ */ import_react23.default.createElement(import_react_transition_group.Transition, {
-    nodeRef,
-    timeout: duration,
-    in: open,
-    appear: true
-  }, (state) => /* @__PURE__ */ import_react23.default.createElement("div", {
-    ref: nodeRef,
-    "data-testid": "overlay",
-    style: {
-      ...defaultStyle,
-      ...transitionStyles[state]
-    }
-  }, children)));
+  return /* @__PURE__ */ import_react23.default.createElement(import_overlays2.Overlay, { portalContainer: container }, /* @__PURE__ */ import_react23.default.createElement(import_react_transition_group.Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ import_react23.default.createElement(
+    "div",
+    {
+      ref: nodeRef,
+      "data-testid": "overlay",
+      style: {
+        ...defaultStyle,
+        ...transitionStyles[state]
+      }
+    },
+    children
+  )));
 };
 
 // src/Overlay/Popover.tsx
@@ -899,13 +965,7 @@ var Popover = (0, import_react24.forwardRef)(
   (props, ref) => {
     const popoverRef = (0, import_utils4.useObjectRef)(ref);
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ import_react24.default.createElement(Overlay, {
-      open: state.isOpen,
-      ...otherProps
-    }, /* @__PURE__ */ import_react24.default.createElement(PopoverWrapper, {
-      ref: popoverRef,
-      ...props
-    }, children));
+    return /* @__PURE__ */ import_react24.default.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ import_react24.default.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
   }
 );
 var PopoverWrapper = (0, import_react24.forwardRef)(
@@ -926,23 +986,21 @@ var PopoverWrapper = (0, import_react24.forwardRef)(
       },
       state
     );
-    return /* @__PURE__ */ import_react24.default.createElement(import_focus4.FocusScope, {
-      restoreFocus: true
-    }, !isNonModal && /* @__PURE__ */ import_react24.default.createElement(Underlay, {
-      ...underlayProps
-    }), /* @__PURE__ */ import_react24.default.createElement("div", {
-      ...popoverProps,
-      style: {
-        ...popoverProps.style,
-        minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+    return /* @__PURE__ */ import_react24.default.createElement(import_focus4.FocusScope, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ import_react24.default.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ import_react24.default.createElement(
+      "div",
+      {
+        ...popoverProps,
+        style: {
+          ...popoverProps.style,
+          minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+        },
+        ref,
+        role: "presentation"
       },
-      ref,
-      role: "presentation"
-    }, !isNonModal && /* @__PURE__ */ import_react24.default.createElement(import_overlays3.DismissButton, {
-      onDismiss: state.close
-    }), children, /* @__PURE__ */ import_react24.default.createElement(import_overlays3.DismissButton, {
-      onDismiss: state.close
-    })));
+      !isNonModal && /* @__PURE__ */ import_react24.default.createElement(import_overlays3.DismissButton, { onDismiss: state.close }),
+      children,
+      /* @__PURE__ */ import_react24.default.createElement(import_overlays3.DismissButton, { onDismiss: state.close })
+    ));
   }
 );
 
@@ -956,13 +1014,7 @@ var import_react26 = require("react");
 var Tray = (0, import_react26.forwardRef)(
   ({ state, children, ...props }, ref) => {
     const trayRef = (0, import_utils5.useObjectRef)(ref);
-    return /* @__PURE__ */ import_react25.default.createElement(Overlay, {
-      open: state.isOpen
-    }, /* @__PURE__ */ import_react25.default.createElement(TrayWrapper, {
-      state,
-      ...props,
-      ref: trayRef
-    }, children));
+    return /* @__PURE__ */ import_react25.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react25.default.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
   }
 );
 var TrayWrapper = (0, import_react26.forwardRef)(
@@ -975,23 +1027,18 @@ var TrayWrapper = (0, import_react26.forwardRef)(
       state,
       ref
     );
-    return /* @__PURE__ */ import_react25.default.createElement(import_focus5.FocusScope, {
-      contain: true,
-      restoreFocus: true,
-      autoFocus: true
-    }, /* @__PURE__ */ import_react25.default.createElement(Underlay, {
-      ...underlayProps,
-      variant: "modal"
-    }, /* @__PURE__ */ import_react25.default.createElement(import_system14.Box, {
-      ...modalProps,
-      ref,
-      __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
-      "data-testid": "tray"
-    }, /* @__PURE__ */ import_react25.default.createElement(import_overlays4.DismissButton, {
-      onDismiss: state.close
-    }), children, /* @__PURE__ */ import_react25.default.createElement(import_overlays4.DismissButton, {
-      onDismiss: state.close
-    }))));
+    return /* @__PURE__ */ import_react25.default.createElement(import_focus5.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react25.default.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ import_react25.default.createElement(
+      import_system14.Box,
+      {
+        ...modalProps,
+        ref,
+        __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
+        "data-testid": "tray"
+      },
+      /* @__PURE__ */ import_react25.default.createElement(import_overlays4.DismissButton, { onDismiss: state.close }),
+      children,
+      /* @__PURE__ */ import_react25.default.createElement(import_overlays4.DismissButton, { onDismiss: state.close })
+    )));
   }
 );
 
@@ -1005,25 +1052,56 @@ var DialogTrigger = ({
   const dialogTriggerRef = (0, import_react27.useRef)(null);
   const state = (0, import_overlays5.useOverlayTriggerState)({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ import_react27.default.createElement(DialogContext.Provider, {
-    value: ctx
-  }, /* @__PURE__ */ import_react27.default.createElement(import_interactions3.PressResponder, {
-    ref: dialogTriggerRef,
-    isPressed: state.isOpen,
-    onPress: state.toggle
-  }, dialogTrigger), /* @__PURE__ */ import_react27.default.createElement(Overlay, {
-    open: state.isOpen
-  }, /* @__PURE__ */ import_react27.default.createElement(Modal, {
-    open: state.isOpen,
-    onClose: state.close,
-    dismissable,
-    keyboardDismissable
-  }, dialog)));
+  return /* @__PURE__ */ import_react27.default.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ import_react27.default.createElement(
+    import_interactions3.PressResponder,
+    {
+      ref: dialogTriggerRef,
+      isPressed: state.isOpen,
+      onPress: state.toggle
+    },
+    dialogTrigger
+  ), /* @__PURE__ */ import_react27.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react27.default.createElement(
+    Modal,
+    {
+      open: state.isOpen,
+      onClose: state.close,
+      dismissable,
+      keyboardDismissable
+    },
+    dialog
+  )));
+};
+
+// src/Dialog/DialogController.tsx
+var import_overlays6 = require("@react-stately/overlays");
+var import_react28 = __toESM(require("react"));
+var DialogController = ({
+  children,
+  dismissable = true,
+  keyboardDismissable = true,
+  open,
+  onOpenChange
+}) => {
+  const state = (0, import_overlays6.useOverlayTriggerState)({
+    isOpen: open,
+    onOpenChange
+  });
+  const ctx = { open: state.isOpen, close: state.close };
+  return /* @__PURE__ */ import_react28.default.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ import_react28.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react28.default.createElement(
+    Modal,
+    {
+      open: state.isOpen,
+      onClose: state.close,
+      dismissable,
+      keyboardDismissable
+    },
+    children
+  )));
 };
 
 // src/Dialog/Dialog.tsx
 var CloseButton = ({ css }) => {
-  const ref = (0, import_react28.useRef)(null);
+  const ref = (0, import_react29.useRef)(null);
   const { close } = useDialogContext();
   const { buttonProps } = (0, import_button2.useButton)(
     {
@@ -1031,35 +1109,37 @@ var CloseButton = ({ css }) => {
     },
     ref
   );
-  return /* @__PURE__ */ import_react28.default.createElement(import_system15.Box, {
-    css: { display: "flex", justifyContent: "flex-end" }
-  }, /* @__PURE__ */ import_react28.default.createElement(import_system15.Box, {
-    as: "button",
-    __baseCSS: {
-      outline: "none",
-      border: "none",
-      cursor: "pointer",
-      height: 16,
-      width: 16,
-      lineHeight: 1,
-      p: 0
+  return /* @__PURE__ */ import_react29.default.createElement(import_system15.Box, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ import_react29.default.createElement(
+    import_system15.Box,
+    {
+      as: "button",
+      __baseCSS: {
+        outline: "none",
+        border: "none",
+        cursor: "pointer",
+        height: 16,
+        width: 16,
+        lineHeight: 1,
+        p: 0
+      },
+      css,
+      ref,
+      ...buttonProps
     },
-    css,
-    ref,
-    ...buttonProps
-  }, /* @__PURE__ */ import_react28.default.createElement("svg", {
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, /* @__PURE__ */ import_react28.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"
-  }))));
+    /* @__PURE__ */ import_react29.default.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react29.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_react28.default.Children.toArray(children);
+  const childs = import_react29.default.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => import_react28.default.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => import_react29.default.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1067,7 +1147,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = import_react28.default.cloneElement(
+  const titleChild = import_react29.default.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1081,7 +1161,7 @@ var Dialog = ({
   closeButton,
   ...props
 }) => {
-  const ref = (0, import_react28.useRef)(null);
+  const ref = (0, import_react29.useRef)(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
   const styles = (0, import_system15.useComponentStyles)(
@@ -1089,44 +1169,31 @@ var Dialog = ({
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ import_react28.default.createElement(import_system15.Box, {
-    __baseCSS: { bg: "#fff" },
-    css: styles.container,
-    ...dialogProps
-  }, closeButton && /* @__PURE__ */ import_react28.default.createElement(CloseButton, {
-    css: styles.closeButton
-  }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  return /* @__PURE__ */ import_react29.default.createElement(import_system15.Box, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ import_react29.default.createElement(CloseButton, { css: styles.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
+Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_separator = require("@react-aria/separator");
 var import_system16 = require("@marigold/system");
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = (0, import_separator.useSeparator)(props);
   const styles = (0, import_system16.useComponentStyles)("Divider", { variant });
-  return /* @__PURE__ */ import_react29.default.createElement(import_system16.Box, {
-    css: styles,
-    ...props,
-    ...separatorProps
-  });
+  return /* @__PURE__ */ import_react30.default.createElement(import_system16.Box, { css: styles, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_system17 = require("@marigold/system");
 var Footer = ({ children, variant, size, ...props }) => {
   const styles = (0, import_system17.useComponentStyles)("Footer", { variant, size });
-  return /* @__PURE__ */ import_react30.default.createElement(import_system.Box, {
-    as: "footer",
-    ...props,
-    css: styles
-  }, children);
+  return /* @__PURE__ */ import_react31.default.createElement(import_system.Box, { as: "footer", ...props, css: styles }, children);
 };
 
 // src/Image/Image.tsx
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_system18 = require("@marigold/system");
 var import_system19 = require("@marigold/system");
 var Image = ({
@@ -1142,16 +1209,19 @@ var Image = ({
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ import_react31.default.createElement(import_system18.Box, {
-    ...props,
-    as: "img",
-    __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
-    css
-  });
+  return /* @__PURE__ */ import_react32.default.createElement(
+    import_system18.Box,
+    {
+      ...props,
+      as: "img",
+      __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
+      css
+    }
+  );
 };
 
 // src/Inline/Inline.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1168,39 +1238,37 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
-  css: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: space,
-    alignItems: ALIGNMENT_Y[alignY],
-    justifyContent: ALIGNMENT_X[alignX]
+}) => /* @__PURE__ */ import_react33.default.createElement(
+  import_system.Box,
+  {
+    css: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: space,
+      alignItems: ALIGNMENT_Y[alignY],
+      justifyContent: ALIGNMENT_X[alignX]
+    },
+    ...props
   },
-  ...props
-}, children);
+  children
+);
 
 // src/Input/Input.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_system20 = require("@marigold/system");
-var Input = (0, import_react33.forwardRef)(
+var Input = (0, import_react34.forwardRef)(
   ({ variant, size, type = "text", ...props }, ref) => {
     const styles = (0, import_system20.useComponentStyles)("Input", { variant, size });
-    return /* @__PURE__ */ import_react33.default.createElement(import_system20.Box, {
-      ...props,
-      ref,
-      as: "input",
-      type,
-      css: styles
-    });
+    return /* @__PURE__ */ import_react34.default.createElement(import_system20.Box, { ...props, ref, as: "input", type, css: styles });
   }
 );
 
 // src/Link/Link.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
 var import_system21 = require("@marigold/system");
 var import_utils6 = require("@react-aria/utils");
-var Link = (0, import_react34.forwardRef)(
+var Link = (0, import_react35.forwardRef)(
   ({
     as = "a",
     variant,
@@ -1221,36 +1289,36 @@ var Link = (0, import_react34.forwardRef)(
       linkRef
     );
     const styles = (0, import_system21.useComponentStyles)("Link", { variant, size });
-    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, " ", /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
-      as,
-      role: "link",
-      css: styles,
-      ref: linkRef,
-      ...props,
-      ...linkProps
-    }, children), " ");
+    return /* @__PURE__ */ import_react35.default.createElement(
+      import_system.Box,
+      {
+        as,
+        role: "link",
+        css: styles,
+        ref: linkRef,
+        ...props,
+        ...linkProps
+      },
+      children
+    );
   }
 );
 
 // src/List/List.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_system23 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react35 = require("react");
-var ListContext = (0, import_react35.createContext)({});
-var useListContext = () => (0, import_react35.useContext)(ListContext);
+var import_react36 = require("react");
+var ListContext = (0, import_react36.createContext)({});
+var useListContext = () => (0, import_react36.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_system22 = require("@marigold/system");
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ import_react36.default.createElement(import_system22.Box, {
-    ...props,
-    as: "li",
-    css: styles
-  }, children);
+  return /* @__PURE__ */ import_react37.default.createElement(import_system22.Box, { ...props, as: "li", css: styles }, children);
 };
 
 // src/List/List.tsx
@@ -1266,40 +1334,42 @@ var List = ({
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ import_react37.default.createElement(import_system23.Box, {
-    ...props,
-    as,
-    css: styles[as]
-  }, /* @__PURE__ */ import_react37.default.createElement(ListContext.Provider, {
-    value: { styles: styles.item }
-  }, children));
+  return /* @__PURE__ */ import_react38.default.createElement(import_system23.Box, { ...props, as, css: styles[as] }, /* @__PURE__ */ import_react38.default.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var import_menu4 = require("@react-aria/menu");
 var import_collections = require("@react-stately/collections");
 var import_tree = require("@react-stately/tree");
 var import_system26 = require("@marigold/system");
 
 // src/Menu/Context.ts
-var import_react38 = require("react");
-var MenuContext = (0, import_react38.createContext)({});
-var useMenuContext = () => (0, import_react38.useContext)(MenuContext);
+var import_react39 = require("react");
+var MenuContext = (0, import_react39.createContext)({});
+var useMenuContext = () => (0, import_react39.useContext)(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_menu = require("@react-stately/menu");
 var import_interactions4 = require("@react-aria/interactions");
 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_react39.default.Children.toArray(children);
-  const menuTriggerRef = (0, import_react39.useRef)(null);
+var MenuTrigger = ({
+  disabled,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [menuTrigger, menu] = import_react40.default.Children.toArray(children);
+  const menuTriggerRef = (0, import_react40.useRef)(null);
   const menuRef = (0, import_utils7.useObjectRef)();
-  const state = (0, import_menu.useMenuTriggerState)({});
+  const state = (0, import_menu.useMenuTriggerState)({
+    isOpen: open,
+    onOpenChange
+  });
   const { menuTriggerProps, menuProps } = (0, import_menu2.useMenuTrigger)(
     { trigger: "press", isDisabled: disabled },
     state,
@@ -1313,29 +1383,25 @@ var MenuTrigger = ({ disabled, children }) => {
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = (0, import_system24.useResponsiveValue)([true, false, false], 2);
-  return /* @__PURE__ */ import_react39.default.createElement(MenuContext.Provider, {
-    value: menuContext
-  }, /* @__PURE__ */ import_react39.default.createElement(import_interactions4.PressResponder, {
-    ...menuTriggerProps,
-    ref: menuTriggerRef,
-    isPressed: state.isOpen
-  }, menuTrigger), isSmallScreen ? /* @__PURE__ */ import_react39.default.createElement(Tray, {
-    state
-  }, menu) : /* @__PURE__ */ import_react39.default.createElement(Popover, {
-    triggerRef: menuTriggerRef,
-    scrollRef: menuRef,
-    state
-  }, menu));
+  return /* @__PURE__ */ import_react40.default.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ import_react40.default.createElement(
+    import_interactions4.PressResponder,
+    {
+      ...menuTriggerProps,
+      ref: menuTriggerRef,
+      isPressed: state.isOpen
+    },
+    menuTrigger
+  ), isSmallScreen ? /* @__PURE__ */ import_react40.default.createElement(Tray, { state }, menu) : /* @__PURE__ */ import_react40.default.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_focus6 = require("@react-aria/focus");
 var import_menu3 = require("@react-aria/menu");
 var import_utils8 = require("@react-aria/utils");
 var import_system25 = require("@marigold/system");
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = (0, import_react40.useRef)(null);
+  const ref = (0, import_react41.useRef)(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = (0, import_menu3.useMenuItem)(
     {
@@ -1351,18 +1417,22 @@ var MenuItem = ({ item, state, onAction, css }) => {
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ import_react40.default.createElement(import_system25.Box, {
-    as: "li",
-    ref,
-    __baseCSS: {
-      "&:focus": {
-        outline: 0
-      }
+  return /* @__PURE__ */ import_react41.default.createElement(
+    import_system25.Box,
+    {
+      as: "li",
+      ref,
+      __baseCSS: {
+        "&:focus": {
+          outline: 0
+        }
+      },
+      css,
+      ...(0, import_utils8.mergeProps)(props, { onPointerDown: onPointerUp }, focusProps),
+      ...stateProps
     },
-    css,
-    ...(0, import_utils8.mergeProps)(props, { onPointerDown: onPointerUp }, focusProps),
-    ...stateProps
-  }, item.rendered);
+    item.rendered
+  );
 };
 
 // src/Menu/Menu.tsx
@@ -1370,7 +1440,7 @@ 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_react41.useRef)(null);
+  const ref = (0, import_react42.useRef)(null);
   const state = (0, import_tree.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu4.useMenu)(ownProps, state, ref);
   (0, import_utils9.useSyncRef)({ ref: scrollRef }, ref);
@@ -1379,30 +1449,44 @@ var Menu = ({ variant, size, ...props }) => {
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ import_react41.default.createElement(import_system26.Box, {
-    as: "ul",
-    ref,
-    __baseCSS: {
-      listStyle: "none",
-      p: 0,
-      overflowWrap: "break-word"
+  return /* @__PURE__ */ import_react42.default.createElement(
+    import_system26.Box,
+    {
+      as: "ul",
+      ref,
+      __baseCSS: {
+        listStyle: "none",
+        p: 0,
+        overflowWrap: "break-word"
+      },
+      css: styles.container,
+      ...menuProps
     },
-    css: styles.container,
-    ...menuProps
-  }, [...state.collection].map((item) => /* @__PURE__ */ import_react41.default.createElement(MenuItem, {
-    key: item.key,
-    item,
-    state,
-    onAction: props.onSelect,
-    css: styles.item
-  })));
+    [...state.collection].map((item) => /* @__PURE__ */ import_react42.default.createElement(
+      MenuItem,
+      {
+        key: item.key,
+        item,
+        state,
+        onAction: props.onAction,
+        css: styles.item
+      }
+    ))
+  );
 };
 Menu.Trigger = MenuTrigger;
 Menu.Item = import_collections.Item;
 
-// src/Message/Message.tsx
-var import_react42 = __toESM(require("react"));
+// src/Menu/ActionMenu.tsx
+var import_react43 = __toESM(require("react"));
 var import_system27 = require("@marigold/system");
+var ActionMenu = (props) => {
+  return /* @__PURE__ */ import_react43.default.createElement(Menu.Trigger, null, /* @__PURE__ */ import_react43.default.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ import_react43.default.createElement(import_system27.SVG, { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react43.default.createElement("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }))), /* @__PURE__ */ import_react43.default.createElement(Menu, { ...props }));
+};
+
+// src/Message/Message.tsx
+var import_react44 = __toESM(require("react"));
+var import_system28 = require("@marigold/system");
 var Message = ({
   messageTitle,
   variant = "info",
@@ -1410,7 +1494,7 @@ var Message = ({
   children,
   ...props
 }) => {
-  const styles = (0, import_system27.useComponentStyles)(
+  const styles = (0, import_system28.useComponentStyles)(
     "Message",
     {
       variant,
@@ -1418,105 +1502,106 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ import_react42.default.createElement("svg", {
-    viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react42.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"
-  }));
+  var icon = /* @__PURE__ */ import_react44.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react44.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_react42.default.createElement("svg", {
-      viewBox: "0 0 24 24"
-    }, /* @__PURE__ */ import_react42.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"
-    }));
+    icon = /* @__PURE__ */ import_react44.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react44.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_react42.default.createElement("svg", {
-      viewBox: "0 0 24 24"
-    }, /* @__PURE__ */ import_react42.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"
-    }));
+    icon = /* @__PURE__ */ import_react44.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react44.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_react42.default.createElement(import_system.Box, {
-    css: styles.container,
-    ...props
-  }, /* @__PURE__ */ import_react42.default.createElement(import_system.Box, {
-    __baseCSS: { display: "flex", alignItems: "top", gap: 4 }
-  }, /* @__PURE__ */ import_react42.default.createElement(import_system.Box, {
-    role: "presentation",
-    __baseCSS: { flex: "0 0 16px" },
-    css: styles.icon
-  }, icon), /* @__PURE__ */ import_react42.default.createElement(import_system.Box, {
-    css: styles.title
-  }, messageTitle)), /* @__PURE__ */ import_react42.default.createElement(import_system.Box, {
-    css: styles.content
-  }, children));
+  return /* @__PURE__ */ import_react44.default.createElement(import_system.Box, { css: styles.container, ...props }, /* @__PURE__ */ import_react44.default.createElement(import_system.Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ import_react44.default.createElement(
+    import_system.Box,
+    {
+      role: "presentation",
+      __baseCSS: { flex: "0 0 16px" },
+      css: styles.icon
+    },
+    icon
+  ), /* @__PURE__ */ import_react44.default.createElement(import_system.Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ import_react44.default.createElement(import_system.Box, { css: styles.content }, children));
 };
 
 // src/NumberField/NumberField.tsx
-var import_react44 = __toESM(require("react"));
+var import_react46 = __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_utils11 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
-var import_system29 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react43 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_button3 = require("@react-aria/button");
 var import_interactions5 = require("@react-aria/interactions");
 var import_utils10 = require("@react-aria/utils");
-var import_system28 = require("@marigold/system");
-var Plus = () => /* @__PURE__ */ import_react43.default.createElement(import_system28.Box, {
-  as: "svg",
-  __baseCSS: { width: 16, height: 16 },
-  viewBox: "0 0 20 20",
-  fill: "currentColor"
-}, /* @__PURE__ */ import_react43.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_react43.default.createElement(import_system28.Box, {
-  as: "svg",
-  __baseCSS: { width: 16, height: 16 },
-  viewBox: "0 0 20 20",
-  fill: "currentColor"
-}, /* @__PURE__ */ import_react43.default.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-}));
+var import_system29 = require("@marigold/system");
+var Plus = () => /* @__PURE__ */ import_react45.default.createElement(
+  import_system29.Box,
+  {
+    as: "svg",
+    __baseCSS: { width: 16, height: 16 },
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  },
+  /* @__PURE__ */ import_react45.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_react45.default.createElement(
+  import_system29.Box,
+  {
+    as: "svg",
+    __baseCSS: { width: 16, height: 16 },
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  },
+  /* @__PURE__ */ import_react45.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_react43.useRef)(null);
+  const ref = (0, import_react45.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_system28.useStateProps)({
+  const stateProps = (0, import_system29.useStateProps)({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ import_react43.default.createElement(import_system28.Box, {
-    __baseCSS: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: props.isDisabled ? "not-allowed" : "pointer"
+  return /* @__PURE__ */ import_react45.default.createElement(
+    import_system29.Box,
+    {
+      __baseCSS: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: props.isDisabled ? "not-allowed" : "pointer"
+      },
+      css,
+      ...(0, import_utils10.mergeProps)(buttonProps, hoverProps),
+      ...stateProps
     },
-    css,
-    ...(0, import_utils10.mergeProps)(buttonProps, hoverProps),
-    ...stateProps
-  }, /* @__PURE__ */ import_react43.default.createElement(Icon3, null));
+    /* @__PURE__ */ import_react45.default.createElement(Icon3, null)
+  );
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = (0, import_react44.forwardRef)(
+var NumberField = (0, import_react46.forwardRef)(
   ({
     variant,
     size,
@@ -1554,70 +1639,90 @@ var NumberField = (0, import_react44.forwardRef)(
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = (0, import_system29.useComponentStyles)(
+    const styles = (0, import_system30.useComponentStyles)(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
     );
-    const stateProps = (0, import_system29.useStateProps)({
+    const stateProps = (0, import_system30.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ import_react44.default.createElement(FieldBase, {
-      label: props.label,
-      labelProps,
-      required,
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      stateProps,
-      variant,
-      size,
-      width
-    }, /* @__PURE__ */ import_react44.default.createElement(import_system29.Box, {
-      "data-group": true,
-      __baseCSS: {
-        display: "flex",
-        alignItems: "stretch",
-        "> input": {
-          flex: 1,
-          minWidth: 0
-        }
+    return /* @__PURE__ */ import_react46.default.createElement(
+      FieldBase,
+      {
+        label: props.label,
+        labelProps,
+        required,
+        description: props.description,
+        descriptionProps,
+        error,
+        errorMessage: props.errorMessage,
+        errorMessageProps,
+        stateProps,
+        variant,
+        size,
+        width
       },
-      css: styles.group,
-      ...(0, import_utils11.mergeProps)(groupProps, focusProps, hoverProps),
-      ...stateProps
-    }, showStepper && /* @__PURE__ */ import_react44.default.createElement(StepButton, {
-      direction: "down",
-      css: styles.stepper,
-      ...decrementButtonProps
-    }), /* @__PURE__ */ import_react44.default.createElement(Input, {
-      ref: inputRef,
-      variant,
-      size,
-      ...inputProps,
-      ...stateProps
-    }), showStepper && /* @__PURE__ */ import_react44.default.createElement(StepButton, {
-      direction: "up",
-      css: styles.stepper,
-      ...incrementButtonProps
-    })));
+      /* @__PURE__ */ import_react46.default.createElement(
+        import_system30.Box,
+        {
+          "data-group": true,
+          __baseCSS: {
+            display: "flex",
+            alignItems: "stretch",
+            "> input": {
+              flex: 1,
+              minWidth: 0
+              // Override browser default
+            }
+          },
+          css: styles.group,
+          ...(0, import_utils11.mergeProps)(groupProps, focusProps, hoverProps),
+          ...stateProps
+        },
+        showStepper && /* @__PURE__ */ import_react46.default.createElement(
+          StepButton,
+          {
+            direction: "down",
+            css: styles.stepper,
+            ...decrementButtonProps
+          }
+        ),
+        /* @__PURE__ */ import_react46.default.createElement(
+          Input,
+          {
+            ref: inputRef,
+            variant,
+            size,
+            ...inputProps,
+            ...stateProps
+          }
+        ),
+        showStepper && /* @__PURE__ */ import_react46.default.createElement(
+          StepButton,
+          {
+            direction: "up",
+            css: styles.stepper,
+            ...incrementButtonProps
+          }
+        )
+      )
+    );
   }
 );
 
 // src/Provider/index.ts
-var import_system31 = require("@marigold/system");
+var import_system32 = require("@marigold/system");
 var import_ssr = require("@react-aria/ssr");
 
 // src/Provider/MarigoldProvider.tsx
-var import_react45 = __toESM(require("react"));
-var import_overlays6 = require("@react-aria/overlays");
-var import_system30 = require("@marigold/system");
+var import_react47 = __toESM(require("react"));
+var import_overlays7 = require("@react-aria/overlays");
+var import_system31 = require("@marigold/system");
 function MarigoldProvider({
   children,
   theme,
@@ -1625,42 +1730,43 @@ function MarigoldProvider({
   normalizeDocument = true
 }) {
   var _a;
-  const outer = (0, import_system30.useTheme)();
-  const isTopLevel = outer.theme === import_system30.__defaultTheme;
+  const outer = (0, import_system31.useTheme)();
+  const isTopLevel = outer.theme === import_system31.__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_react45.default.createElement(import_system30.ThemeProvider, {
-    theme
-  }, /* @__PURE__ */ import_react45.default.createElement(import_system30.Global, {
-    normalizeDocument: isTopLevel && normalizeDocument,
-    selector
-  }), isTopLevel ? /* @__PURE__ */ import_react45.default.createElement(import_overlays6.OverlayProvider, null, children) : children);
+  return /* @__PURE__ */ import_react47.default.createElement(import_system31.ThemeProvider, { theme }, /* @__PURE__ */ import_react47.default.createElement(
+    import_system31.Global,
+    {
+      normalizeDocument: isTopLevel && normalizeDocument,
+      selector
+    }
+  ), isTopLevel ? /* @__PURE__ */ import_react47.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-var import_react48 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_interactions7 = require("@react-aria/interactions");
 var import_focus8 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
 var import_utils12 = require("@react-aria/utils");
-var import_system33 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react46 = require("react");
-var RadioGroupContext = (0, import_react46.createContext)(
+var import_react48 = require("react");
+var RadioGroupContext = (0, import_react48.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react46.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react48.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react47 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var import_radio = require("@react-aria/radio");
 var import_radio2 = require("@react-stately/radio");
-var import_system32 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 var RadioGroup = ({
   children,
   orientation = "vertical",
@@ -1680,64 +1786,67 @@ var RadioGroup = ({
   };
   const state = (0, import_radio2.useRadioGroupState)(props);
   const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = (0, import_radio.useRadioGroup)(props, state);
-  const stateProps = (0, import_system32.useStateProps)({
+  const stateProps = (0, import_system33.useStateProps)({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react47.default.createElement(FieldBase, {
-    width,
-    label: props.label,
-    labelProps: { as: "span", ...labelProps },
-    description: props.description,
-    descriptionProps,
-    error,
-    errorMessage: props.errorMessage,
-    errorMessageProps,
-    disabled,
-    stateProps,
-    required,
-    ...radioGroupProps
-  }, /* @__PURE__ */ import_react47.default.createElement(import_system32.Box, {
-    role: "presentation",
-    "data-orientation": orientation,
-    __baseCSS: {
-      display: "flex",
-      flexDirection: orientation === "vertical" ? "column" : "row",
-      alignItems: "start",
-      gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
-    }
-  }, /* @__PURE__ */ import_react47.default.createElement(RadioGroupContext.Provider, {
-    value: { width, error, state }
-  }, children)));
+  return /* @__PURE__ */ import_react49.default.createElement(
+    FieldBase,
+    {
+      width,
+      label: props.label,
+      labelProps: { as: "span", ...labelProps },
+      description: props.description,
+      descriptionProps,
+      error,
+      errorMessage: props.errorMessage,
+      errorMessageProps,
+      disabled,
+      stateProps,
+      required,
+      ...radioGroupProps
+    },
+    /* @__PURE__ */ import_react49.default.createElement(
+      import_system33.Box,
+      {
+        role: "presentation",
+        "data-orientation": orientation,
+        __baseCSS: {
+          display: "flex",
+          flexDirection: orientation === "vertical" ? "column" : "row",
+          alignItems: "start",
+          gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
+        }
+      },
+      /* @__PURE__ */ import_react49.default.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
+    )
+  );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ import_react48.default.createElement("svg", {
-  viewBox: "0 0 6 6"
-}, /* @__PURE__ */ import_react48.default.createElement("circle", {
-  fill: "currentColor",
-  cx: "3",
-  cy: "3",
-  r: "3"
-}));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react48.default.createElement(import_system33.Box, {
-  "aria-hidden": "true",
-  __baseCSS: {
-    width: 16,
-    height: 16,
-    bg: "#fff",
-    border: "1px solid #000",
-    borderRadius: "50%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    p: 4
+var Dot = () => /* @__PURE__ */ import_react50.default.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ import_react50.default.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react50.default.createElement(
+  import_system34.Box,
+  {
+    "aria-hidden": "true",
+    __baseCSS: {
+      width: 16,
+      height: 16,
+      bg: "#fff",
+      border: "1px solid #000",
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: 4
+    },
+    css,
+    ...props
   },
-  css,
-  ...props
-}, checked ? /* @__PURE__ */ import_react48.default.createElement(Dot, null) : null);
-var Radio = (0, import_react48.forwardRef)(
+  checked ? /* @__PURE__ */ import_react50.default.createElement(Dot, null) : null
+);
+var Radio = (0, import_react50.forwardRef)(
   ({ width, disabled, ...props }, ref) => {
     const {
       variant,
@@ -1752,14 +1861,14 @@ var Radio = (0, import_react48.forwardRef)(
       state,
       inputRef
     );
-    const styles = (0, import_system33.useComponentStyles)(
+    const styles = (0, import_system34.useComponentStyles)(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
     const { hoverProps, isHovered } = (0, import_interactions7.useHover)({ isDisabled: disabled });
     const { isFocusVisible, focusProps } = (0, import_focus8.useFocusRing)();
-    const stateProps = (0, import_system33.useStateProps)({
+    const stateProps = (0, import_system34.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1767,45 +1876,47 @@ var Radio = (0, import_react48.forwardRef)(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ import_react48.default.createElement(import_system33.Box, {
-      as: "label",
-      __baseCSS: {
-        display: "flex",
-        alignItems: "center",
-        gap: "1ch",
-        position: "relative",
-        width: width || groupWidth || "100%"
-      },
-      css: styles.container,
-      ...(0, import_utils12.mergeProps)(hoverProps, stateProps)
-    }, /* @__PURE__ */ import_react48.default.createElement(import_system33.Box, {
-      as: "input",
-      ref: inputRef,
-      css: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        top: 0,
-        left: 0,
-        zIndex: 1,
-        opacity: 1e-4,
-        cursor: inputProps.disabled ? "not-allowed" : "pointer"
+    return /* @__PURE__ */ import_react50.default.createElement(
+      import_system34.Box,
+      {
+        as: "label",
+        __baseCSS: {
+          display: "flex",
+          alignItems: "center",
+          gap: "1ch",
+          position: "relative",
+          width: width || groupWidth || "100%"
+        },
+        css: styles.container,
+        ...(0, import_utils12.mergeProps)(hoverProps, stateProps)
       },
-      ...(0, import_utils12.mergeProps)(inputProps, focusProps)
-    }), /* @__PURE__ */ import_react48.default.createElement(Icon2, {
-      checked: inputProps.checked,
-      css: styles.radio,
-      ...stateProps
-    }), /* @__PURE__ */ import_react48.default.createElement(import_system33.Box, {
-      css: styles.label,
-      ...stateProps
-    }, props.children));
+      /* @__PURE__ */ import_react50.default.createElement(
+        import_system34.Box,
+        {
+          as: "input",
+          ref: inputRef,
+          css: {
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: 0,
+            left: 0,
+            zIndex: 1,
+            opacity: 1e-4,
+            cursor: inputProps.disabled ? "not-allowed" : "pointer"
+          },
+          ...(0, import_utils12.mergeProps)(inputProps, focusProps)
+        }
+      ),
+      /* @__PURE__ */ import_react50.default.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
+      /* @__PURE__ */ import_react50.default.createElement(import_system34.Box, { css: styles.label, ...stateProps }, props.children)
+    );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-var import_react53 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_button4 = require("@react-aria/button");
 var import_focus9 = require("@react-aria/focus");
 var import_i18n2 = require("@react-aria/i18n");
@@ -1813,31 +1924,31 @@ var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
 var import_collections2 = require("@react-stately/collections");
 var import_utils15 = require("@react-aria/utils");
-var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 
 // src/ListBox/ListBox.tsx
-var import_react52 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_utils14 = require("@react-aria/utils");
-var import_system36 = require("@marigold/system");
+var import_system37 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
 // src/ListBox/Context.ts
-var import_react49 = require("react");
-var ListBoxContext = (0, import_react49.createContext)({});
-var useListBoxContext = () => (0, import_react49.useContext)(ListBoxContext);
+var import_react51 = require("react");
+var ListBoxContext = (0, import_react51.createContext)({});
+var useListBoxContext = () => (0, import_react51.useContext)(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-var import_react51 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_listbox2 = require("@react-aria/listbox");
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 
 // src/ListBox/ListBoxOption.tsx
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
 var import_utils13 = require("@react-aria/utils");
-var import_system34 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var ListBoxOption = ({ item, state }) => {
-  const ref = (0, import_react50.useRef)(null);
+  const ref = (0, import_react52.useRef)(null);
   const { optionProps, isSelected, isDisabled, isFocused } = (0, import_listbox.useOption)(
     {
       key: item.key
@@ -1847,17 +1958,21 @@ var ListBoxOption = ({ item, state }) => {
   );
   const { onPointerUp, ...props } = optionProps;
   const { styles } = useListBoxContext();
-  const stateProps = (0, import_system34.useStateProps)({
+  const stateProps = (0, import_system35.useStateProps)({
     selected: isSelected,
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ import_react50.default.createElement(import_system34.Box, {
-    as: "li",
-    ref,
-    css: styles.option,
-    ...(0, import_utils13.mergeProps)(props, { onPointerDown: onPointerUp }, { ...stateProps })
-  }, item.rendered);
+  return /* @__PURE__ */ import_react52.default.createElement(
+    import_system35.Box,
+    {
+      as: "li",
+      ref,
+      css: styles.option,
+      ...(0, import_utils13.mergeProps)(props, { onPointerDown: onPointerUp }, { ...stateProps })
+    },
+    item.rendered
+  );
 };
 
 // src/ListBox/ListBoxSection.tsx
@@ -1867,56 +1982,41 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ import_react51.default.createElement(import_system35.Box, {
-    as: "li",
-    css: styles.section,
-    ...itemProps
-  }, section.rendered && /* @__PURE__ */ import_react51.default.createElement(import_system35.Box, {
-    css: styles.sectionTitle,
-    ...headingProps
-  }, section.rendered), /* @__PURE__ */ import_react51.default.createElement(import_system35.Box, {
-    as: "ul",
-    __baseCSS: { listStyle: "none", p: 0 },
-    css: styles.list,
-    ...groupProps
-  }, [...section.childNodes].map((node) => /* @__PURE__ */ import_react51.default.createElement(ListBoxOption, {
-    key: node.key,
-    item: node,
-    state
-  }))));
+  return /* @__PURE__ */ import_react53.default.createElement(import_system36.Box, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ import_react53.default.createElement(import_system36.Box, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ import_react53.default.createElement(
+    import_system36.Box,
+    {
+      as: "ul",
+      __baseCSS: { listStyle: "none", p: 0 },
+      css: styles.list,
+      ...groupProps
+    },
+    [...section.childNodes].map((node) => /* @__PURE__ */ import_react53.default.createElement(ListBoxOption, { key: node.key, item: node, state }))
+  ));
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = (0, import_react52.forwardRef)(
+var ListBox = (0, import_react54.forwardRef)(
   ({ state, variant, size, ...props }, ref) => {
     const innerRef = (0, import_utils14.useObjectRef)(ref);
     const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
-    const styles = (0, import_system36.useComponentStyles)(
+    const styles = (0, import_system37.useComponentStyles)(
       "ListBox",
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
     );
-    return /* @__PURE__ */ import_react52.default.createElement(ListBoxContext.Provider, {
-      value: { styles }
-    }, /* @__PURE__ */ import_react52.default.createElement(import_system36.Box, {
-      css: styles.container
-    }, /* @__PURE__ */ import_react52.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_react52.default.createElement(ListBoxSection, {
-        key: item.key,
-        section: item,
-        state
-      }) : /* @__PURE__ */ import_react52.default.createElement(ListBoxOption, {
-        key: item.key,
-        item,
-        state
-      })
-    ))));
+    return /* @__PURE__ */ import_react54.default.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ import_react54.default.createElement(import_system37.Box, { css: styles.container }, /* @__PURE__ */ import_react54.default.createElement(
+      import_system37.Box,
+      {
+        as: "ul",
+        ref: innerRef,
+        __baseCSS: { listStyle: "none", p: 0 },
+        css: styles.list,
+        ...listBoxProps
+      },
+      [...state.collection].map(
+        (item) => item.type === "section" ? /* @__PURE__ */ import_react54.default.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ import_react54.default.createElement(ListBoxOption, { key: item.key, item, state })
+      )
+    )));
   }
 );
 
@@ -1931,20 +2031,30 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ import_react53.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_react53.default.createElement("path", {
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  d: "M19 9l-7 7-7-7"
-}));
-var Select = (0, import_react53.forwardRef)(
-  ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
+var Chevron = ({ css }) => /* @__PURE__ */ import_react55.default.createElement(
+  import_system38.Box,
+  {
+    as: "svg",
+    __baseCSS: { width: 16, height: 16, fill: "none" },
+    css,
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2
+  },
+  /* @__PURE__ */ import_react55.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+);
+var Select = (0, import_react55.forwardRef)(
+  ({
+    variant,
+    size,
+    width,
+    open,
+    disabled,
+    required,
+    error,
+    onChange,
+    ...rest
+  }, ref) => {
     const formatMessage = (0, import_i18n2.useLocalizedStringFormatter)(messages);
     const props = {
       isOpen: open,
@@ -1952,12 +2062,13 @@ var Select = (0, import_react53.forwardRef)(
       isRequired: required,
       validationState: error ? "invalid" : "valid",
       placeholder: rest.placeholder || formatMessage.format("placeholder"),
+      onSelectionChange: onChange,
       ...rest
     };
     const state = (0, import_select2.useSelectState)(props);
     const buttonRef = (0, import_utils15.useObjectRef)(ref);
-    const listboxRef = (0, import_react53.useRef)(null);
-    const isSmallScreen = (0, import_system37.useResponsiveValue)([true, false, false], 2);
+    const listboxRef = (0, import_react55.useRef)(null);
+    const isSmallScreen = (0, import_system38.useResponsiveValue)([true, false, false], 2);
     const {
       labelProps,
       triggerProps,
@@ -1971,95 +2082,111 @@ var Select = (0, import_react53.forwardRef)(
       buttonRef
     );
     const { focusProps, isFocusVisible } = (0, import_focus9.useFocusRing)();
-    const styles = (0, import_system37.useComponentStyles)(
+    const styles = (0, import_system38.useComponentStyles)(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
     );
-    const stateProps = (0, import_system37.useStateProps)({
+    const stateProps = (0, import_system38.useStateProps)({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ import_react53.default.createElement(FieldBase, {
-      variant,
-      size,
-      width,
-      label: props.label,
-      labelProps: { as: "span", ...labelProps },
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      stateProps,
-      disabled,
-      required
-    }, /* @__PURE__ */ import_react53.default.createElement(import_select.HiddenSelect, {
-      state,
-      triggerRef: buttonRef,
-      label: props.label,
-      name: props.name,
-      isDisabled: disabled
-    }), /* @__PURE__ */ import_react53.default.createElement(import_system37.Box, {
-      as: "button",
-      __baseCSS: {
-        display: "flex",
-        position: "relative",
-        alignItems: "center",
-        justifyContent: "space-between",
-        width: "100%"
-      },
-      css: styles.button,
-      ref: buttonRef,
-      ...(0, import_utils15.mergeProps)(buttonProps, focusProps),
-      ...stateProps
-    }, /* @__PURE__ */ import_react53.default.createElement(import_system37.Box, {
-      css: {
-        overflow: "hidden",
-        whiteSpace: "nowrap"
+    return /* @__PURE__ */ import_react55.default.createElement(
+      FieldBase,
+      {
+        variant,
+        size,
+        width,
+        label: props.label,
+        labelProps: { as: "span", ...labelProps },
+        description: props.description,
+        descriptionProps,
+        error,
+        errorMessage: props.errorMessage,
+        errorMessageProps,
+        stateProps,
+        disabled,
+        required
       },
-      ...valueProps
-    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react53.default.createElement(Chevron, {
-      css: styles.icon
-    })), isSmallScreen ? /* @__PURE__ */ import_react53.default.createElement(Tray, {
-      state
-    }, /* @__PURE__ */ import_react53.default.createElement(ListBox, {
-      ref: listboxRef,
-      state,
-      variant,
-      size,
-      ...menuProps
-    })) : /* @__PURE__ */ import_react53.default.createElement(Popover, {
-      state,
-      triggerRef: buttonRef,
-      scrollRef: listboxRef
-    }, /* @__PURE__ */ import_react53.default.createElement(ListBox, {
-      ref: listboxRef,
-      state,
-      variant,
-      size,
-      ...menuProps
-    })));
+      /* @__PURE__ */ import_react55.default.createElement(
+        import_select.HiddenSelect,
+        {
+          state,
+          triggerRef: buttonRef,
+          label: props.label,
+          name: props.name,
+          isDisabled: disabled
+        }
+      ),
+      /* @__PURE__ */ import_react55.default.createElement(
+        import_system38.Box,
+        {
+          as: "button",
+          __baseCSS: {
+            display: "flex",
+            position: "relative",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%"
+          },
+          css: styles.button,
+          ref: buttonRef,
+          ...(0, import_utils15.mergeProps)(buttonProps, focusProps),
+          ...stateProps
+        },
+        /* @__PURE__ */ import_react55.default.createElement(
+          import_system38.Box,
+          {
+            css: {
+              overflow: "hidden",
+              whiteSpace: "nowrap"
+            },
+            ...valueProps
+          },
+          state.selectedItem ? state.selectedItem.rendered : props.placeholder
+        ),
+        /* @__PURE__ */ import_react55.default.createElement(Chevron, { css: styles.icon })
+      ),
+      isSmallScreen ? /* @__PURE__ */ import_react55.default.createElement(Tray, { state }, /* @__PURE__ */ import_react55.default.createElement(
+        ListBox,
+        {
+          ref: listboxRef,
+          state,
+          variant,
+          size,
+          ...menuProps
+        }
+      )) : /* @__PURE__ */ import_react55.default.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ import_react55.default.createElement(
+        ListBox,
+        {
+          ref: listboxRef,
+          state,
+          variant,
+          size,
+          ...menuProps
+        }
+      ))
+    );
   }
 );
 Select.Option = import_collections2.Item;
 Select.Section = import_collections2.Section;
 
 // src/Slider/Slider.tsx
-var import_react55 = __toESM(require("react"));
+var import_react57 = __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_utils17 = require("@react-aria/utils");
-var import_system39 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
-var import_react54 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
 var import_utils16 = require("@react-aria/utils");
-var import_system38 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
@@ -2068,10 +2195,10 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_focus10 = require("@react-aria/focus");
 var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = import_react54.default.useRef(null);
+  const inputRef = import_react56.default.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = (0, import_focus10.useFocusRing)();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = (0, import_system38.useStateProps)({
+  const stateProps = (0, import_system39.useStateProps)({
     focus: focused,
     disabled
   });
@@ -2084,24 +2211,31 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     },
     state
   );
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ import_react54.default.createElement(import_system.Box, {
-    __baseCSS: { top: "50%" },
-    css: styles,
-    ...thumbProps,
-    ...stateProps
-  }, /* @__PURE__ */ import_react54.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react54.default.createElement(import_system.Box, {
-    as: "input",
-    type: "range",
-    ref: inputRef,
-    ...(0, import_utils16.mergeProps)(inputProps, focusProps)
-  })));
+  return /* @__PURE__ */ import_react56.default.createElement(
+    import_system.Box,
+    {
+      __baseCSS: { top: "50%" },
+      css: styles,
+      ...thumbProps,
+      ...stateProps
+    },
+    /* @__PURE__ */ import_react56.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react56.default.createElement(
+      import_system.Box,
+      {
+        as: "input",
+        type: "range",
+        ref: inputRef,
+        ...(0, import_utils16.mergeProps)(inputProps, focusProps)
+      }
+    ))
+  );
 };
 
 // src/Slider/Slider.tsx
-var Slider = (0, import_react55.forwardRef)(
+var Slider = (0, import_react57.forwardRef)(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
     const trackRef = (0, import_utils17.useObjectRef)(ref);
@@ -2115,64 +2249,74 @@ var Slider = (0, import_react55.forwardRef)(
       state,
       trackRef
     );
-    const styles = (0, import_system39.useComponentStyles)(
+    const styles = (0, import_system40.useComponentStyles)(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ import_react55.default.createElement(import_system.Box, {
-      __baseCSS: {
-        display: "flex",
-        flexDirection: "column",
-        touchAction: "none",
-        width
-      },
-      ...groupProps
-    }, /* @__PURE__ */ import_react55.default.createElement(import_system.Box, {
-      __baseCSS: { display: "flex", alignSelf: "stretch" }
-    }, props.children && /* @__PURE__ */ import_react55.default.createElement(import_system.Box, {
-      as: "label",
-      __baseCSS: styles.label,
-      ...labelProps
-    }, props.children), /* @__PURE__ */ import_react55.default.createElement(import_system.Box, {
-      as: "output",
-      ...outputProps,
-      __baseCSS: { flex: "1 0 auto", textAlign: "end" },
-      css: styles.output
-    }, state.getThumbValueLabel(0))), /* @__PURE__ */ import_react55.default.createElement(import_system.Box, {
-      ...trackProps,
-      ref: trackRef,
-      __baseCSS: {
-        height: 32,
-        width: "100%",
-        cursor: props.disabled ? "not-allowed" : "pointer"
-      }
-    }, /* @__PURE__ */ import_react55.default.createElement(import_system.Box, {
-      __baseCSS: {
-        top: "50%",
-        transform: "translateY(-50%)"
+    return /* @__PURE__ */ import_react57.default.createElement(
+      import_system.Box,
+      {
+        __baseCSS: {
+          display: "flex",
+          flexDirection: "column",
+          touchAction: "none",
+          width
+        },
+        ...groupProps
       },
-      css: styles.track
-    }), /* @__PURE__ */ import_react55.default.createElement(Thumb, {
-      state,
-      trackRef,
-      disabled: props.disabled,
-      styles: styles.thumb
-    })));
+      /* @__PURE__ */ import_react57.default.createElement(import_system.Box, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ import_react57.default.createElement(import_system.Box, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ import_react57.default.createElement(
+        import_system.Box,
+        {
+          as: "output",
+          ...outputProps,
+          __baseCSS: { flex: "1 0 auto", textAlign: "end" },
+          css: styles.output
+        },
+        state.getThumbValueLabel(0)
+      )),
+      /* @__PURE__ */ import_react57.default.createElement(
+        import_system.Box,
+        {
+          ...trackProps,
+          ref: trackRef,
+          __baseCSS: {
+            height: 32,
+            width: "100%",
+            cursor: props.disabled ? "not-allowed" : "pointer"
+          }
+        },
+        /* @__PURE__ */ import_react57.default.createElement(
+          import_system.Box,
+          {
+            __baseCSS: {
+              top: "50%",
+              transform: "translateY(-50%)"
+            },
+            css: styles.track
+          }
+        ),
+        /* @__PURE__ */ import_react57.default.createElement(
+          Thumb,
+          {
+            state,
+            trackRef,
+            disabled: props.disabled,
+            styles: styles.thumb
+          }
+        )
+      )
+    );
   }
 );
 
 // src/Split/Split.tsx
-var import_react56 = __toESM(require("react"));
-var import_system40 = require("@marigold/system");
-var Split = (props) => /* @__PURE__ */ import_react56.default.createElement(import_system40.Box, {
-  ...props,
-  role: "separator",
-  css: { flexGrow: 1 }
-});
+var import_react58 = __toESM(require("react"));
+var import_system41 = require("@marigold/system");
+var Split = (props) => /* @__PURE__ */ import_react58.default.createElement(import_system41.Box, { ...props, role: "separator", css: { flexGrow: 1 } });
 
 // src/Stack/Stack.tsx
-var import_react57 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2192,27 +2336,31 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ import_react57.default.createElement(import_system.Box, {
-  css: {
-    display: "flex",
-    flexDirection: "column",
-    p: 0,
-    gap: space,
-    alignItems: ALIGNMENT_X2[alignX],
-    justifyContent: ALIGNMENT_Y2[alignY],
-    blockSize: stretch ? "100%" : "initial"
+}) => /* @__PURE__ */ import_react59.default.createElement(
+  import_system.Box,
+  {
+    css: {
+      display: "flex",
+      flexDirection: "column",
+      p: 0,
+      gap: space,
+      alignItems: ALIGNMENT_X2[alignX],
+      justifyContent: ALIGNMENT_Y2[alignY],
+      blockSize: stretch ? "100%" : "initial"
+    },
+    ...props
   },
-  ...props
-}, children);
+  children
+);
 
 // src/Switch/Switch.tsx
-var import_react58 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_focus11 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
 var import_utils18 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system41 = require("@marigold/system");
-var Switch = (0, import_react58.forwardRef)(
+var import_system42 = require("@marigold/system");
+var Switch = (0, import_react60.forwardRef)(
   ({
     variant,
     size,
@@ -2234,108 +2382,120 @@ var Switch = (0, import_react58.forwardRef)(
     const state = (0, import_toggle2.useToggleState)(props);
     const { inputProps } = (0, import_switch.useSwitch)(props, state, inputRef);
     const { isFocusVisible, focusProps } = (0, import_focus11.useFocusRing)();
-    const stateProps = (0, import_system41.useStateProps)({
+    const stateProps = (0, import_system42.useStateProps)({
       checked: state.isSelected,
       disabled,
       readOnly,
       focus: isFocusVisible
     });
-    const styles = (0, import_system41.useComponentStyles)(
+    const styles = (0, import_system42.useComponentStyles)(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ import_react58.default.createElement(import_system.Box, {
-      as: "label",
-      __baseCSS: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "1ch",
-        position: "relative",
-        width
-      },
-      css: styles.container
-    }, /* @__PURE__ */ import_react58.default.createElement(import_system.Box, {
-      as: "input",
-      ref: inputRef,
-      css: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        top: 0,
-        left: 0,
-        zIndex: 1,
-        opacity: 1e-4,
-        cursor: inputProps.disabled ? "not-allowed" : "pointer"
-      },
-      ...inputProps,
-      ...focusProps
-    }), props.children && /* @__PURE__ */ import_react58.default.createElement(import_system.Box, {
-      css: styles.label
-    }, props.children), /* @__PURE__ */ import_react58.default.createElement(import_system.Box, {
-      __baseCSS: {
-        position: "relative",
-        width: 48,
-        height: 24,
-        bg: "#dee2e6",
-        borderRadius: 20,
-        flex: "0 0 48px"
+    return /* @__PURE__ */ import_react60.default.createElement(
+      import_system.Box,
+      {
+        as: "label",
+        __baseCSS: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "1ch",
+          position: "relative",
+          width
+        },
+        css: styles.container
       },
-      css: styles.track,
-      ...stateProps
-    }, /* @__PURE__ */ import_react58.default.createElement(import_system.Box, {
-      __baseCSS: {
-        display: "block",
-        position: "absolute",
-        top: 1,
-        left: 0,
-        willChange: "transform",
-        transform: "translateX(1px)",
-        transition: "all 0.1s cubic-bezier(.7, 0, .3, 1)",
-        height: 22,
-        width: 22,
-        borderRadius: 9999,
-        bg: "#fff",
-        "&:checked": {
-          transform: "translateX(calc(47px - 100%))"
+      /* @__PURE__ */ import_react60.default.createElement(
+        import_system.Box,
+        {
+          as: "input",
+          ref: inputRef,
+          css: {
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: 0,
+            left: 0,
+            zIndex: 1,
+            opacity: 1e-4,
+            cursor: inputProps.disabled ? "not-allowed" : "pointer"
+          },
+          ...inputProps,
+          ...focusProps
         }
-      },
-      css: styles.thumb,
-      ...stateProps
-    })));
+      ),
+      props.children && /* @__PURE__ */ import_react60.default.createElement(import_system.Box, { css: styles.label }, props.children),
+      /* @__PURE__ */ import_react60.default.createElement(
+        import_system.Box,
+        {
+          __baseCSS: {
+            position: "relative",
+            width: 48,
+            height: 24,
+            bg: "#dee2e6",
+            borderRadius: 20,
+            flex: "0 0 48px"
+          },
+          css: styles.track,
+          ...stateProps
+        },
+        /* @__PURE__ */ import_react60.default.createElement(
+          import_system.Box,
+          {
+            __baseCSS: {
+              display: "block",
+              position: "absolute",
+              top: 1,
+              left: 0,
+              willChange: "transform",
+              transform: "translateX(1px)",
+              transition: "all 0.1s cubic-bezier(.7, 0, .3, 1)",
+              height: 22,
+              width: 22,
+              borderRadius: 9999,
+              bg: "#fff",
+              "&:checked": {
+                transform: "translateX(calc(47px - 100%))"
+              }
+            },
+            css: styles.thumb,
+            ...stateProps
+          }
+        )
+      )
+    );
   }
 );
 
 // src/Table/Table.tsx
-var import_react68 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system47 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react59 = require("react");
-var TableContext = (0, import_react59.createContext)({});
-var useTableContext = () => (0, import_react59.useContext)(TableContext);
+var import_react61 = require("react");
+var TableContext = (0, import_react61.createContext)({});
+var useTableContext = () => (0, import_react61.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
-var import_react60 = __toESM(require("react"));
+var import_react62 = __toESM(require("react"));
 var import_table = require("@react-aria/table");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ import_react60.default.createElement("tbody", {
-    ...rowGroupProps
-  }, children);
+  return /* @__PURE__ */ import_react62.default.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-var import_react61 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
 var import_focus12 = require("@react-aria/focus");
 var import_utils19 = require("@react-aria/utils");
-var import_system42 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react61.useRef)(null);
+  const ref = (0, import_react63.useRef)(null);
   const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -2346,27 +2506,35 @@ var TableCell = ({ cell }) => {
     ref
   );
   const cellProps = interactive ? gridCellProps : {
+    /**
+     * Override `react-aria` handler so users can select text.
+     * Solution from https://github.com/adobe/react-spectrum/issues/2585
+     */
     ...gridCellProps,
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
-  const stateProps = (0, import_system42.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react61.default.createElement(import_system42.Box, {
-    as: "td",
-    ref,
-    css: styles.cell,
-    ...(0, import_utils19.mergeProps)(cellProps, focusProps),
-    ...stateProps
-  }, cell.rendered);
+  const stateProps = (0, import_system43.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react63.default.createElement(
+    import_system43.Box,
+    {
+      as: "td",
+      ref,
+      css: styles.cell,
+      ...(0, import_utils19.mergeProps)(cellProps, focusProps),
+      ...stateProps
+    },
+    cell.rendered
+  );
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react62 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var import_focus13 = require("@react-aria/focus");
 var import_utils20 = require("@react-aria/utils");
-var import_system43 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2390,7 +2558,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react62.useRef)(null);
+  const ref = (0, import_react64.useRef)(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -2404,46 +2572,52 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
-  const stateProps = (0, import_system43.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react62.default.createElement(import_system43.Box, {
-    as: "td",
-    ref,
-    __baseCSS: {
-      textAlign: "center",
-      verticalAlign: "middle",
-      lineHeight: 1
+  const stateProps = (0, import_system44.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react64.default.createElement(
+    import_system44.Box,
+    {
+      as: "td",
+      ref,
+      __baseCSS: {
+        textAlign: "center",
+        verticalAlign: "middle",
+        lineHeight: 1
+      },
+      css: styles.cell,
+      ...(0, import_utils20.mergeProps)(gridCellProps, focusProps),
+      ...stateProps
     },
-    css: styles.cell,
-    ...(0, import_utils20.mergeProps)(gridCellProps, focusProps),
-    ...stateProps
-  }, /* @__PURE__ */ import_react62.default.createElement(Checkbox, {
-    ...checkboxProps
-  }));
+    /* @__PURE__ */ import_react64.default.createElement(Checkbox, { ...checkboxProps })
+  );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react63 = __toESM(require("react"));
+var import_react65 = __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_utils22 = require("@react-aria/utils");
-var import_system44 = require("@marigold/system");
+var import_system45 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ import_react63.default.createElement(import_system44.Box, {
-  as: "span",
-  role: "presentation",
-  "aria-hidden": "true",
-  css: {
-    color: "currentColor",
-    paddingInlineStart: "0.5ch",
-    visibility: visible ? "visible" : "hidden"
-  }
-}, direction === "ascending" ? "\u25B2" : "\u25BC");
+}) => /* @__PURE__ */ import_react65.default.createElement(
+  import_system45.Box,
+  {
+    as: "span",
+    role: "presentation",
+    "aria-hidden": "true",
+    css: {
+      color: "currentColor",
+      paddingInlineStart: "0.5ch",
+      visibility: visible ? "visible" : "hidden"
+    }
+  },
+  direction === "ascending" ? "\u25B2" : "\u25BC"
+);
 var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react65.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -2454,59 +2628,62 @@ var TableColumnHeader = ({ column }) => {
   );
   const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
-  const stateProps = (0, import_system44.useStateProps)({
+  const stateProps = (0, import_system45.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react63.default.createElement(import_system44.Box, {
-    as: "th",
-    colSpan: column.colspan,
-    ref,
-    __baseCSS: { cursor: "default" },
-    css: styles.header,
-    ...(0, import_utils22.mergeProps)(columnHeaderProps, hoverProps, focusProps),
-    ...stateProps
-  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react63.default.createElement(SortIndicator, {
-    direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
-    visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
-  }));
+  return /* @__PURE__ */ import_react65.default.createElement(
+    import_system45.Box,
+    {
+      as: "th",
+      colSpan: column.colspan,
+      ref,
+      __baseCSS: { cursor: "default" },
+      css: styles.header,
+      ...(0, import_utils22.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      ...stateProps
+    },
+    column.rendered,
+    column.props.allowsSorting && /* @__PURE__ */ import_react65.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_react64 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var import_table5 = require("@react-aria/table");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ import_react64.default.createElement("thead", {
-    ...rowGroupProps
-  }, children);
+  return /* @__PURE__ */ import_react66.default.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react65 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 var import_table6 = require("@react-aria/table");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react65.useRef)(null);
+  const ref = (0, import_react67.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react65.default.createElement("tr", {
-    ...rowProps,
-    ref
-  }, children);
+  return /* @__PURE__ */ import_react67.default.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-var import_react66 = __toESM(require("react"));
+var import_react68 = __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_utils23 = require("@react-aria/utils");
-var import_system45 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react66.useRef)(null);
+  const ref = (0, import_react68.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const { row: styles } = (0, import_system45.useComponentStyles)(
+  const { row: styles } = (0, import_system46.useComponentStyles)(
     "Table",
     { variant: variant || ctx.variant, size: size || ctx.size },
     { parts: ["row"] }
@@ -2524,34 +2701,38 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions9.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system45.useStateProps)({
+  const stateProps = (0, import_system46.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ import_react66.default.createElement(import_system45.Box, {
-    as: "tr",
-    ref,
-    __baseCSS: {
-      cursor: !interactive ? "text" : disabled ? "default" : "pointer"
+  return /* @__PURE__ */ import_react68.default.createElement(
+    import_system46.Box,
+    {
+      as: "tr",
+      ref,
+      __baseCSS: {
+        cursor: !interactive ? "text" : disabled ? "default" : "pointer"
+      },
+      css: styles,
+      ...(0, import_utils23.mergeProps)(rowProps, focusProps, hoverProps),
+      ...stateProps
     },
-    css: styles,
-    ...(0, import_utils23.mergeProps)(rowProps, focusProps, hoverProps),
-    ...stateProps
-  }, children);
+    children
+  );
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react67 = __toESM(require("react"));
+var import_react69 = __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_utils24 = require("@react-aria/utils");
-var import_system46 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
-  const ref = (0, import_react67.useRef)(null);
+  const ref = (0, import_react69.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -2563,24 +2744,26 @@ var TableSelectAllCell = ({ column }) => {
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-  const stateProps = (0, import_system46.useStateProps)({
+  const stateProps = (0, import_system47.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react67.default.createElement(import_system46.Box, {
-    as: "th",
-    ref,
-    __baseCSS: {
-      textAlign: "center",
-      verticalAlign: "middle",
-      lineHeight: 1
+  return /* @__PURE__ */ import_react69.default.createElement(
+    import_system47.Box,
+    {
+      as: "th",
+      ref,
+      __baseCSS: {
+        textAlign: "center",
+        verticalAlign: "middle",
+        lineHeight: 1
+      },
+      css: styles.header,
+      ...(0, import_utils24.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      ...stateProps
     },
-    css: styles.header,
-    ...(0, import_utils24.mergeProps)(columnHeaderProps, hoverProps, focusProps),
-    ...stateProps
-  }, /* @__PURE__ */ import_react67.default.createElement(Checkbox, {
-    ...checkboxProps
-  }));
+    /* @__PURE__ */ import_react69.default.createElement(Checkbox, { ...checkboxProps })
+  );
 };
 
 // src/Table/Table.tsx
@@ -2592,62 +2775,48 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react68.useRef)(null);
+  const tableRef = (0, import_react70.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
-    showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
+    showSelectionCheckboxes: selectionMode === "multiple" && // TODO: It this necessary?
+    props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const styles = (0, import_system47.useComponentStyles)(
+  const styles = (0, import_system48.useComponentStyles)(
     "Table",
     { variant, size },
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ import_react68.default.createElement(TableContext.Provider, {
-    value: { state, interactive, styles }
-  }, /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, {
-    as: "table",
-    ref: tableRef,
-    __baseCSS: {
-      display: stretch ? "table" : "block",
-      width: stretch ? "100%" : void 0,
-      borderCollapse: "collapse",
-      overflow: "auto",
-      whiteSpace: "nowrap"
+  return /* @__PURE__ */ import_react70.default.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ import_react70.default.createElement(
+    import_system48.Box,
+    {
+      as: "table",
+      ref: tableRef,
+      __baseCSS: {
+        display: stretch ? "table" : "block",
+        width: stretch ? "100%" : void 0,
+        borderCollapse: "collapse",
+        overflow: "auto",
+        whiteSpace: "nowrap"
+      },
+      css: styles.table,
+      ...gridProps
     },
-    css: styles.table,
-    ...gridProps
-  }, /* @__PURE__ */ import_react68.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react68.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_react68.default.createElement(TableSelectAllCell, {
-        key: column.key,
-        column
-      }) : /* @__PURE__ */ import_react68.default.createElement(TableColumnHeader, {
-        key: column.key,
-        column
-      });
-    }
-  )))), /* @__PURE__ */ import_react68.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react68.default.createElement(TableRow, {
-    key: row.key,
-    row
-  }, [...row.childNodes].map(
-    (cell) => {
-      var _a;
-      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react68.default.createElement(TableCheckboxCell, {
-        key: cell.key,
-        cell
-      }) : /* @__PURE__ */ import_react68.default.createElement(TableCell, {
-        key: cell.key,
-        cell
-      });
-    }
-  ))))));
+    /* @__PURE__ */ import_react70.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react70.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_react70.default.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ import_react70.default.createElement(TableColumnHeader, { key: column.key, column });
+      }
+    )))),
+    /* @__PURE__ */ import_react70.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react70.default.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
+      (cell) => {
+        var _a;
+        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react70.default.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ import_react70.default.createElement(TableCell, { key: cell.key, cell });
+      }
+    ))))
+  ));
 };
 Table.Body = import_table10.TableBody;
 Table.Cell = import_table10.Cell;
@@ -2656,12 +2825,13 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react69 = __toESM(require("react"));
-var import_system48 = require("@marigold/system");
+var import_react71 = __toESM(require("react"));
 var import_system49 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 var Text = ({
   variant,
   size,
+  display,
   align,
   color,
   fontSize,
@@ -2671,28 +2841,40 @@ var Text = ({
   children,
   ...props
 }) => {
-  const styles = (0, import_system48.useComponentStyles)("Text", {
+  const styles = (0, import_system49.useComponentStyles)("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ import_react69.default.createElement(import_system49.Box, {
-    as: "p",
-    ...props,
-    css: [
-      styles,
-      { color, cursor, outline, fontSize, fontWeight, textAlign: align }
-    ]
-  }, children);
+  return /* @__PURE__ */ import_react71.default.createElement(
+    import_system50.Box,
+    {
+      as: "p",
+      ...props,
+      css: [
+        styles,
+        {
+          display,
+          color,
+          cursor,
+          outline,
+          fontSize,
+          fontWeight,
+          textAlign: align
+        }
+      ]
+    },
+    children
+  );
 };
 
 // src/TextArea/TextArea.tsx
-var import_react70 = __toESM(require("react"));
+var import_react72 = __toESM(require("react"));
 var import_interactions11 = require("@react-aria/interactions");
 var import_focus17 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
 var import_utils26 = require("@react-aria/utils");
-var import_system50 = require("@marigold/system");
-var TextArea = (0, import_react70.forwardRef)(
+var import_system51 = require("@marigold/system");
+var TextArea = (0, import_react72.forwardRef)(
   ({
     variant,
     size,
@@ -2719,48 +2901,55 @@ var TextArea = (0, import_react70.forwardRef)(
     );
     const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
     const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)();
-    const stateProps = (0, import_system50.useStateProps)({
+    const stateProps = (0, import_system51.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    const styles = (0, import_system50.useComponentStyles)("TextArea", { variant, size });
-    return /* @__PURE__ */ import_react70.default.createElement(FieldBase, {
-      label,
-      labelProps,
-      required,
-      description,
-      descriptionProps,
-      error,
-      errorMessage,
-      errorMessageProps,
-      stateProps,
-      variant,
-      size,
-      width
-    }, /* @__PURE__ */ import_react70.default.createElement(import_system50.Box, {
-      as: "textarea",
-      css: styles,
-      ref: textAreaRef,
-      rows,
-      ...inputProps,
-      ...focusProps,
-      ...hoverProps,
-      ...stateProps
-    }));
+    const styles = (0, import_system51.useComponentStyles)("TextArea", { variant, size });
+    return /* @__PURE__ */ import_react72.default.createElement(
+      FieldBase,
+      {
+        label,
+        labelProps,
+        required,
+        description,
+        descriptionProps,
+        error,
+        errorMessage,
+        errorMessageProps,
+        stateProps,
+        variant,
+        size,
+        width
+      },
+      /* @__PURE__ */ import_react72.default.createElement(
+        import_system51.Box,
+        {
+          as: "textarea",
+          css: styles,
+          ref: textAreaRef,
+          rows,
+          ...inputProps,
+          ...focusProps,
+          ...hoverProps,
+          ...stateProps
+        }
+      )
+    );
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react71 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 var import_interactions12 = require("@react-aria/interactions");
 var import_focus18 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
 var import_utils27 = require("@react-aria/utils");
-var import_system51 = require("@marigold/system");
-var TextField = (0, import_react71.forwardRef)(
+var import_system52 = require("@marigold/system");
+var TextField = (0, import_react73.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
     const inputRef = (0, import_utils27.useObjectRef)(ref);
@@ -2779,41 +2968,48 @@ var TextField = (0, import_react71.forwardRef)(
       isTextInput: true,
       autoFocus
     });
-    const stateProps = (0, import_system51.useStateProps)({
+    const stateProps = (0, import_system52.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ import_react71.default.createElement(FieldBase, {
-      label,
-      labelProps,
-      required,
-      description,
-      descriptionProps,
-      error,
-      errorMessage,
-      errorMessageProps,
-      stateProps,
-      variant,
-      size,
-      width
-    }, /* @__PURE__ */ import_react71.default.createElement(Input, {
-      ref: inputRef,
-      variant,
-      size,
-      ...inputProps,
-      ...focusProps,
-      ...hoverProps,
-      ...stateProps
-    }));
+    return /* @__PURE__ */ import_react73.default.createElement(
+      FieldBase,
+      {
+        label,
+        labelProps,
+        required,
+        description,
+        descriptionProps,
+        error,
+        errorMessage,
+        errorMessageProps,
+        stateProps,
+        variant,
+        size,
+        width
+      },
+      /* @__PURE__ */ import_react73.default.createElement(
+        Input,
+        {
+          ref: inputRef,
+          variant,
+          size,
+          ...inputProps,
+          ...focusProps,
+          ...hoverProps,
+          ...stateProps
+        }
+      )
+    );
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_react72 = __toESM(require("react"));
-var import_system52 = require("@marigold/system");
+var import_react74 = __toESM(require("react"));
+var import_system53 = require("@marigold/system");
 var Tiles = ({
   space = "none",
   stretch = false,
@@ -2822,37 +3018,45 @@ var Tiles = ({
   children,
   ...props
 }) => {
-  const { css } = (0, import_system52.useTheme)();
+  const { css } = (0, import_system53.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_react72.default.createElement(import_system.Box, {
-    ...props,
-    css: {
-      display: "grid",
-      gap: space,
-      gridTemplateColumns: `repeat(auto-fit, ${column})`,
-      gridAutoRows: equalHeight ? "1fr" : void 0
-    }
-  }, children);
+  return /* @__PURE__ */ import_react74.default.createElement(
+    import_system.Box,
+    {
+      ...props,
+      css: {
+        display: "grid",
+        gap: space,
+        gridTemplateColumns: `repeat(auto-fit, ${column})`,
+        /**
+         * Make height of all tiles in each row
+         * match the heighest tile.
+         */
+        gridAutoRows: equalHeight ? "1fr" : void 0
+      }
+    },
+    children
+  );
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react75 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system53 = require("@marigold/system");
+var import_system54 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
-var import_react73 = require("react");
-var TooltipContext = (0, import_react73.createContext)({});
-var useTooltipContext = () => (0, import_react73.useContext)(TooltipContext);
+var import_react75 = require("react");
+var TooltipContext = (0, import_react75.createContext)({});
+var useTooltipContext = () => (0, import_react75.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react74 = __toESM(require("react"));
+var import_react76 = __toESM(require("react"));
 var import_focus19 = require("@react-aria/focus");
-var import_overlays7 = require("@react-aria/overlays");
+var import_overlays8 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
 var TooltipTrigger = ({
@@ -2863,7 +3067,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = import_react74.default.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = import_react76.default.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -2871,8 +3075,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = (0, import_react74.useRef)(null);
-  const overlayRef = (0, import_react74.useRef)(null);
+  const tooltipTriggerRef = (0, import_react76.useRef)(null);
+  const overlayRef = (0, import_react76.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(
     props,
@@ -2883,7 +3087,7 @@ var TooltipTrigger = ({
     overlayProps: positionProps,
     placement: overlayPlacement,
     arrowProps
-  } = (0, import_overlays7.useOverlayPosition)({
+  } = (0, import_overlays8.useOverlayPosition)({
     placement: props.placement,
     targetRef: tooltipTriggerRef,
     offset: props.offset,
@@ -2891,180 +3095,277 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ import_react74.default.createElement(import_focus19.FocusableProvider, {
-    ref: tooltipTriggerRef,
-    ...triggerProps
-  }, tooltipTrigger, /* @__PURE__ */ import_react74.default.createElement(TooltipContext.Provider, {
-    value: {
-      state,
-      overlayRef,
-      arrowProps,
-      placement: overlayPlacement,
-      ...tooltipProps,
-      ...positionProps
-    }
-  }, /* @__PURE__ */ import_react74.default.createElement(Overlay, {
-    open: state.isOpen
-  }, tooltip)));
+  return /* @__PURE__ */ import_react76.default.createElement(import_focus19.FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ import_react76.default.createElement(
+    TooltipContext.Provider,
+    {
+      value: {
+        state,
+        overlayRef,
+        arrowProps,
+        placement: overlayPlacement,
+        ...tooltipProps,
+        ...positionProps
+      }
+    },
+    /* @__PURE__ */ import_react76.default.createElement(Overlay, { open: state.isOpen }, tooltip)
+  ));
 };
 
 // src/Tooltip/Tooltip.tsx
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const styles = (0, import_system53.useComponentStyles)(
+  const styles = (0, import_system54.useComponentStyles)(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ import_react75.default.createElement(import_system53.Box, {
-    ...tooltipProps,
-    ...rest,
-    ref: overlayRef,
-    css: styles.container,
-    "data-placement": placement
-  }, /* @__PURE__ */ import_react75.default.createElement("div", null, children), /* @__PURE__ */ import_react75.default.createElement(import_system53.Box, {
-    ...arrowProps,
-    __baseCSS: {
-      position: "absolute",
-      height: 0,
-      width: 0,
-      borderStyle: "solid",
-      borderLeftColor: "transparent",
-      borderRightColor: "transparent",
-      borderBottomColor: "transparent"
+  return /* @__PURE__ */ import_react77.default.createElement(
+    import_system54.Box,
+    {
+      ...tooltipProps,
+      ...rest,
+      ref: overlayRef,
+      css: styles.container,
+      "data-placement": placement
     },
-    css: styles.arrow
-  }));
+    /* @__PURE__ */ import_react77.default.createElement("div", null, children),
+    /* @__PURE__ */ import_react77.default.createElement(
+      import_system54.Box,
+      {
+        ...arrowProps,
+        __baseCSS: {
+          position: "absolute",
+          height: 0,
+          width: 0,
+          borderStyle: "solid",
+          borderLeftColor: "transparent",
+          borderRightColor: "transparent",
+          borderBottomColor: "transparent"
+        },
+        css: styles.arrow
+      }
+    )
+  );
 };
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-var import_system54 = require("@marigold/system");
-var import_react76 = __toESM(require("react"));
-var XLoader = (0, import_react76.forwardRef)((props, ref) => /* @__PURE__ */ import_react76.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_react76.default.createElement("path", {
-  id: "XMLID_1_",
-  d: "M35.3 27h26.5l54 74.1H88.7z"
-}), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "1.0s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.9s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.8s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.7s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.6s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.5s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.4s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.3s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.2s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.1s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-})), /* @__PURE__ */ import_react76.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_react76.default.createElement("animate", {
-  attributeName: "opacity",
-  attributeType: "XML",
-  values: "1; .01; 1; 1; 1;",
-  begin: "0.0s",
-  dur: "2.5s",
-  repeatCount: "indefinite"
-}))));
+var import_system55 = require("@marigold/system");
+var import_react78 = __toESM(require("react"));
+var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ import_react78.default.createElement(
+  import_system55.SVG,
+  {
+    id: "XLoader",
+    xmlns: "http://www.w3.org/2000/svg",
+    size: 150,
+    viewBox: "0 0 150 150",
+    ...props,
+    ...ref
+  },
+  /* @__PURE__ */ import_react78.default.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "1.0s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.9s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.8s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.7s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.6s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.5s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.4s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.3s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.2s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.1s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  ),
+  /* @__PURE__ */ import_react78.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_react78.default.createElement(
+      "animate",
+      {
+        attributeName: "opacity",
+        attributeType: "XML",
+        values: "1; .01; 1; 1; 1;",
+        begin: "0.0s",
+        dur: "2.5s",
+        repeatCount: "indefinite"
+      }
+    )
+  )
+));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionMenu,
   Aside,
   Aspect,
   Badge,