@marigold/components 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @marigold/components
 
+## 0.5.1
+
+### Patch Changes
+
+- [#1795](https://github.com/marigold-ui/marigold/pull/1795) [`a178eafe`](https://github.com/marigold-ui/marigold/commit/a178eafe8c8380ee23b4587d953ee52b231414ff) Thanks [@ti10le](https://github.com/ti10le)! - refa: use interface instead of type
+
+* [#1798](https://github.com/marigold-ui/marigold/pull/1798) [`9939b743`](https://github.com/marigold-ui/marigold/commit/9939b743df4dfe40bfd5dd61a1a4b88641ef9559) Thanks [@sebald](https://github.com/sebald)! - fix(components): Use own `flattenChildren` helper to fix ESM build
+
+* Updated dependencies [[`a178eafe`](https://github.com/marigold-ui/marigold/commit/a178eafe8c8380ee23b4587d953ee52b231414ff)]:
+  - @marigold/system@0.5.1
+  - @marigold/icons@0.4.2
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -82,12 +82,12 @@ interface CardProps extends ComponentProps<'div'> {
 }
 declare const Card: React.FC<CardProps>;
 
-declare type CheckboxIconProps = {
+interface CheckboxIconProps {
     variant?: string;
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
-};
+}
 
 interface CheckboxThemeExtension<Value> {
     checkbox?: {
@@ -146,9 +146,9 @@ declare type LabelBaseProps = {
     color?: ResponsiveStyleValue<string>;
 } & ComponentProps<'label'>;
 declare const LabelBase: React.FC<LabelProps>;
-declare type LabelProps = {
+interface LabelProps extends LabelBaseProps {
     required?: boolean;
-} & LabelBaseProps;
+}
 declare const Label: React.FC<LabelProps>;
 
 interface TextThemeExtension<Value> {
@@ -212,12 +212,12 @@ interface MessageProps extends ComponentProps<'div'> {
 }
 declare const Message: React.FC<MessageProps>;
 
-declare type RadioIconProps = {
+interface RadioIconProps {
     variant?: string;
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
-};
+}
 
 interface RadioThemeExtension<Value> {
     radio?: {
@@ -314,10 +314,10 @@ interface ColumnsProps {
 }
 declare const Columns: React.FC<ColumnsProps>;
 
-declare type ModalDialogProps = {
+interface ModalDialogProps extends OverlayProps, AriaDialogProps {
     variant?: string;
     backdropVariant?: string;
-} & OverlayProps & AriaDialogProps;
+}
 
 interface DialogProps extends ModalDialogProps, ComponentProps<'div'> {
     backdropVariant?: string;

package/dist/index.js

@@ -98,11 +98,28 @@ __export(src_exports, {
 });
 
 // src/ActionGroup/ActionGroup.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // src/Inline/Inline.tsx
-var import_react = __toESM(require("react"));
-var import_react_keyed_flatten_children = __toESM(require("react-keyed-flatten-children"));
+var import_react2 = __toESM(require("react"));
+
+// src/utils/flatten-children.ts
+var import_react = require("react");
+var import_react_is = require("react-is");
+var flattenChildren = (children, depth = 0, keys = []) => import_react.Children.toArray(children).reduce((acc, node) => {
+  if ((0, import_react_is.isFragment)(node)) {
+    acc.push.apply(acc, flattenChildren(node.props.children, depth + 1, keys.concat(node.key)));
+  } else {
+    if ((0, import_react.isValidElement)(node)) {
+      acc.push((0, import_react.cloneElement)(node, {
+        key: keys.concat(String(node.key)).join(".")
+      }));
+    } else if (typeof node === "string" || typeof node === "number") {
+      acc.push(node);
+    }
+  }
+  return acc;
+}, []);
 
 // src/Box.ts
 var import_system = require("@marigold/system");
@@ -123,16 +140,15 @@ var Inline = (_a) => {
     "align",
     "children"
   ]);
-  return /* @__PURE__ */ import_react.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react2.default.createElement(import_system.Box, __spreadValues({
     display: "inline-flex",
     css: { "> * + *": { pl: space } },
     alignItems: ALIGNMENT[align]
-  }, props), import_react.Children.map((0, import_react_keyed_flatten_children.default)(children), (child) => /* @__PURE__ */ import_react.default.createElement(import_system.Box, null, import_react.default.cloneElement(child, {}, child.props.children))));
+  }, props), import_react2.Children.map(flattenChildren(children), (child) => /* @__PURE__ */ import_react2.default.createElement(import_system.Box, null, import_react2.default.cloneElement(child, {}, child.props.children))));
 };
 
 // src/Stack/Stack.tsx
-var import_react2 = __toESM(require("react"));
-var import_react_keyed_flatten_children2 = __toESM(require("react-keyed-flatten-children"));
+var import_react3 = __toESM(require("react"));
 var ALIGNMENT2 = {
   left: "flex-start",
   center: "center",
@@ -148,12 +164,12 @@ var Stack = (_a) => {
     "align",
     "children"
   ]);
-  return /* @__PURE__ */ import_react2.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     display: "flex",
     flexDirection: "column",
     alignItems: ALIGNMENT2[align],
     css: { "> * + *": { pt: space } }
-  }), import_react2.Children.map((0, import_react_keyed_flatten_children2.default)(children), (child) => /* @__PURE__ */ import_react2.default.createElement(import_system.Box, null, import_react2.default.cloneElement(child, {}, child.props.children))));
+  }), import_react3.Children.map(flattenChildren(children), (child) => /* @__PURE__ */ import_react3.default.createElement(import_system.Box, null, import_react3.default.cloneElement(child, {}, child.props.children))));
 };
 
 // src/ActionGroup/ActionGroup.tsx
@@ -167,15 +183,15 @@ var ActionGroup = (_a) => {
     "verticalAlignment",
     "children"
   ]);
-  return verticalAlignment ? /* @__PURE__ */ import_react3.default.createElement(Stack, __spreadValues({
+  return verticalAlignment ? /* @__PURE__ */ import_react4.default.createElement(Stack, __spreadValues({
     space
-  }, props), children) : /* @__PURE__ */ import_react3.default.createElement(Inline, __spreadValues({
+  }, props), children) : /* @__PURE__ */ import_react4.default.createElement(Inline, __spreadValues({
     space
   }, props), children);
 };
 
 // src/Alert/Alert.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_icons = require("@marigold/icons");
 var ICON_MAP = {
   success: import_icons.Check,
@@ -191,28 +207,28 @@ var Alert = (_a) => {
     "children"
   ]);
   const Icon = ICON_MAP[variant];
-  return /* @__PURE__ */ import_react4.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react5.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     display: "flex",
     variant: `alert.${variant}`
-  }), /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
+  }), /* @__PURE__ */ import_react5.default.createElement(import_system.Box, {
     display: "inline-block",
     alignItems: "center",
     width: "32px",
     height: "32px",
     bg: variant
-  }, /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react5.default.createElement(import_system.Box, {
     as: Icon,
     size: 12,
     color: "#fff",
     bg: variant,
     m: 10
-  })), /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
+  })), /* @__PURE__ */ import_react5.default.createElement(import_system.Box, {
     mx: "16px"
   }, children));
 };
 
 // src/Badge/Badge.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var Badge = (_a) => {
   var _b = _a, {
     variant = "",
@@ -225,16 +241,16 @@ var Badge = (_a) => {
     "borderColor",
     "children"
   ]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react6.default.createElement(import_system.Box, __spreadValues({
     css: { bg: bgColor, borderColor },
     variant: `badge.${variant}`
   }, props), children);
 };
 
 // src/Button/Button.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_button = require("@react-aria/button");
-var Button = (0, import_react6.forwardRef)((_a, ref) => {
+var Button = (0, import_react7.forwardRef)((_a, ref) => {
   var _b = _a, {
     as = "button",
     variant = "primary",
@@ -256,7 +272,7 @@ var Button = (0, import_react6.forwardRef)((_a, ref) => {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
   }), ref);
-  return /* @__PURE__ */ import_react6.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({}, buttonProps), props), {
+  return /* @__PURE__ */ import_react7.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({}, buttonProps), props), {
     as,
     display: "inline-flex",
     alignItems: "center",
@@ -268,7 +284,7 @@ var Button = (0, import_react6.forwardRef)((_a, ref) => {
 });
 
 // src/Card/Card.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var Card = (_a) => {
   var _b = _a, {
     variant = "",
@@ -283,11 +299,11 @@ var Card = (_a) => {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react8.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     variant: `card.${variant}`,
     maxWidth: width,
     className
-  }), title && /* @__PURE__ */ import_react7.default.createElement(import_system.Box, {
+  }), title && /* @__PURE__ */ import_react8.default.createElement(import_system.Box, {
     as: "h2",
     variant: "text.h2",
     pb: "small"
@@ -295,24 +311,24 @@ var Card = (_a) => {
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_focus = require("@react-aria/focus");
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_checkbox = require("@react-aria/checkbox");
 
 // ../../node_modules/@react-stately/utils/dist/module.js
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useControlledState(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, import_react8.useState)(value || defaultValue);
-  let ref = (0, import_react8.useRef)(value !== void 0);
+  let [stateValue, setStateValue] = (0, import_react9.useState)(value || defaultValue);
+  let ref = (0, import_react9.useRef)(value !== void 0);
   let wasControlled = ref.current;
   let isControlled = value !== void 0;
-  let stateRef = (0, import_react8.useRef)(stateValue);
+  let stateRef = (0, import_react9.useRef)(stateValue);
   if (wasControlled !== isControlled) {
     console.warn("WARN: A component changed from " + (wasControlled ? "controlled" : "uncontrolled") + " to " + (isControlled ? "controlled" : "uncontrolled") + ".");
   }
   ref.current = isControlled;
-  let setValue = (0, import_react8.useCallback)(function(value2) {
+  let setValue = (0, import_react9.useCallback)(function(value2) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
@@ -398,7 +414,7 @@ function useToggleState(props) {
 var import_icons3 = require("@marigold/icons");
 
 // src/Checkbox/CheckboxIcon.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_system2 = require("@marigold/system");
 var CheckboxIcon = ({
   variant = "",
@@ -412,13 +428,13 @@ var CheckboxIcon = ({
     checked,
     error
   };
-  return /* @__PURE__ */ import_react9.default.createElement(import_system2.SVG, {
+  return /* @__PURE__ */ import_react10.default.createElement(import_system2.SVG, {
     width: "16",
     height: "32",
     viewBox: "0 0 16 32",
     fill: "none",
     "aria-hidden": "true"
-  }, /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react10.default.createElement(import_system.Box, {
     as: "rect",
     x: "0.5",
     y: "8.5",
@@ -426,7 +442,7 @@ var CheckboxIcon = ({
     height: "15px",
     rx: "1.5",
     variant: (0, import_system2.conditional)(`checkbox.${variant}`, conditionalStates)
-  }), checked && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+  }), checked && /* @__PURE__ */ import_react10.default.createElement(import_system.Box, {
     __baseCSS: { fill: "gray00" },
     as: "path",
     fillRule: "evenodd",
@@ -436,7 +452,7 @@ var CheckboxIcon = ({
 };
 
 // src/Label/Label.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_icons2 = require("@marigold/icons");
 var LabelBase = (_a) => {
   var _b = _a, {
@@ -450,7 +466,7 @@ var LabelBase = (_a) => {
     "color",
     "children"
   ]);
-  return /* @__PURE__ */ import_react10.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as: "label",
     __baseCSS: { color },
     variant: `label.${variant}`
@@ -464,19 +480,19 @@ var Label = (_a) => {
     "required",
     "children"
   ]);
-  return required ? /* @__PURE__ */ import_react10.default.createElement(import_system.Box, {
+  return required ? /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react10.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react11.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
     as: import_icons2.Required,
     size: 16,
     css: { color: "error" }
-  })) : /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children);
+  })) : /* @__PURE__ */ import_react11.default.createElement(LabelBase, __spreadValues({}, props), children);
 };
 
 // src/ValidationMessage/ValidationMessage.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var ValidationMessage = (_a) => {
   var _b = _a, {
     variant = "error",
@@ -487,7 +503,7 @@ var ValidationMessage = (_a) => {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadValues({
     as: "span",
     display: "flex",
     alignItems: "center",
@@ -500,15 +516,15 @@ var ValidationMessage = (_a) => {
 var CheckboxInput = (_a) => {
   var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
   const state = useToggleState(props);
-  const ref = import_react12.default.useRef(null);
+  const ref = import_react13.default.useRef(null);
   const { inputProps } = (0, import_checkbox.useCheckbox)(props, state, ref);
   const { focusProps } = (0, import_focus.useFocusRing)();
   const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ import_react12.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react12.default.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+  }, /* @__PURE__ */ import_react13.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react13.default.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     ref
-  }), restProps))), /* @__PURE__ */ import_react12.default.createElement(CheckboxIcon, {
+  }), restProps))), /* @__PURE__ */ import_react13.default.createElement(CheckboxIcon, {
     checked: props.checked,
     variant: props.variant,
     disabled: props.disabled,
@@ -525,7 +541,7 @@ var Checkbox = (_a) => {
     "labelVariant",
     "errorMessage"
   ]);
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(import_system.Box, {
     as: Label,
     __baseCSS: {
       ":hover": { cursor: props.disabled ? "not-allowed" : "pointer" }
@@ -534,16 +550,16 @@ var Checkbox = (_a) => {
     required,
     variant: `label.${labelVariant}`,
     color: props.disabled ? "disabled" : "text"
-  }, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react13.default.createElement(import_system.Box, __spreadValues({
     as: CheckboxInput,
     error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react12.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react12.default.createElement(import_icons3.Exclamation, {
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react13.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react13.default.createElement(import_icons3.Exclamation, {
     size: 16
   }), errorMessage));
 };
 
 // src/Column/Column.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var transform = (width) => {
   if (Array.isArray(width)) {
     return width.map((v) => `${v / 12 * 100}%`);
@@ -558,14 +574,13 @@ var Column = (_a) => {
     "width",
     "children"
   ]);
-  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     width: transform(width)
   }), children);
 };
 
 // src/Columns/Columns.tsx
-var import_react14 = __toESM(require("react"));
-var import_react_keyed_flatten_children3 = __toESM(require("react-keyed-flatten-children"));
+var import_react15 = __toESM(require("react"));
 var import_system3 = require("@marigold/system");
 var useAlignment = (direction) => {
   switch (direction) {
@@ -597,34 +612,34 @@ var Columns = (_a) => {
   const { css } = (0, import_system3.useTheme)();
   const spaceObject = css({ space });
   const spaceValue = Object.values(spaceObject)[0];
-  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
     p: space,
     display: "flex",
     className
-  }, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadValues({
     width: `calc(100% + ${spaceValue}px)`,
     m: `${-spaceValue / 2}px`,
     display: "flex",
     flexWrap: "wrap",
     alignItems,
     justifyContent
-  }, props), import_react14.Children.map((0, import_react_keyed_flatten_children3.default)(children), (child) => {
-    return import_react14.default.cloneElement(child, {}, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
+  }, props), import_react15.Children.map(flattenChildren(children), (child) => {
+    return import_react15.default.cloneElement(child, {}, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
       css: { p: `${spaceValue / 2}px` }
     }, child.props.children));
   })));
 };
 
 // src/Dialog/Dialog.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_overlays2 = require("@react-stately/overlays");
 var import_overlays3 = require("@react-aria/overlays");
 var import_button2 = require("@react-aria/button");
 var import_icons4 = require("@marigold/icons");
 
 // src/Text/Text.tsx
-var import_react15 = __toESM(require("react"));
-var Text = (0, import_react15.forwardRef)((_a, ref) => {
+var import_react16 = __toESM(require("react"));
+var Text = (0, import_react16.forwardRef)((_a, ref) => {
   var _b = _a, {
     as = "span",
     variant = "body",
@@ -646,7 +661,7 @@ var Text = (0, import_react15.forwardRef)((_a, ref) => {
     "outline",
     "userSelect"
   ]);
-  return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as,
     variant: `text.${variant}`,
     css: {
@@ -662,7 +677,7 @@ var Text = (0, import_react15.forwardRef)((_a, ref) => {
 });
 
 // src/Dialog/ModalDialog.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_overlays = require("@react-aria/overlays");
 var import_dialog = require("@react-aria/dialog");
 var import_focus2 = require("@react-aria/focus");
@@ -677,12 +692,12 @@ var ModalDialog = (_a) => {
     "children"
   ]);
   const _a2 = props, { isDismissable, isOpen, onClose } = _a2, restProps = __objRest(_a2, ["isDismissable", "isOpen", "onClose"]);
-  const ref = import_react16.default.useRef();
+  const ref = import_react17.default.useRef();
   const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)({ isDismissable, isOpen, onClose }, ref);
   (0, import_overlays.usePreventScroll)();
   const { modalProps } = (0, import_overlays.useModal)();
   const { dialogProps } = (0, import_dialog.useDialog)(props, ref);
-  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react17.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       display: "grid",
       placeItems: "center",
@@ -694,11 +709,11 @@ var ModalDialog = (_a) => {
       right: 0
     },
     variant: `dialog.${backdropVariant}`
-  }, underlayProps), /* @__PURE__ */ import_react16.default.createElement(import_focus2.FocusScope, {
+  }, underlayProps), /* @__PURE__ */ import_react17.default.createElement(import_focus2.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
+  }, /* @__PURE__ */ import_react17.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
     ref,
     variant: variant ? `dialog.${variant}` : `dialog`
   }), restProps), children)));
@@ -723,17 +738,17 @@ var Dialog = (_a) => {
     "title",
     "variant"
   ]);
-  const closeButtonRef = import_react17.default.useRef();
+  const closeButtonRef = import_react18.default.useRef();
   const { buttonProps: closeButtonProps } = (0, import_button2.useButton)({
     onPress: () => close()
   }, closeButtonRef);
-  return /* @__PURE__ */ import_react17.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react17.default.createElement(ModalDialog, __spreadValues({
+  return /* @__PURE__ */ import_react18.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react18.default.createElement(ModalDialog, __spreadValues({
     variant,
     backdropVariant,
     isOpen,
     onClose: close,
     isDismissable: true
-  }, props), /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+  }, props), /* @__PURE__ */ import_react18.default.createElement(import_system.Box, {
     __baseCSS: {
       display: "flex",
       justifyContent: "space-between",
@@ -742,12 +757,12 @@ var Dialog = (_a) => {
       pb: "large"
     },
     className
-  }, /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react18.default.createElement(import_system.Box, {
     pt: "medium"
-  }, title && /* @__PURE__ */ import_react17.default.createElement(Text, {
+  }, title && /* @__PURE__ */ import_react18.default.createElement(Text, {
     as: "h4",
     variant: "headline4"
-  }, title), children), /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+  }, title), children), /* @__PURE__ */ import_react18.default.createElement(import_system.Box, {
     __baseCSS: {
       display: "flex",
       justifyContent: "flex-end",
@@ -755,7 +770,7 @@ var Dialog = (_a) => {
       paddingTop: "xsmall",
       paddingX: "xsmall"
     }
-  }, /* @__PURE__ */ import_react17.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }, /* @__PURE__ */ import_react18.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: Button,
     __baseCSS: {
       color: "text",
@@ -773,13 +788,13 @@ var Dialog = (_a) => {
     }
   }, closeButtonProps), {
     ref: closeButtonRef
-  }), /* @__PURE__ */ import_react17.default.createElement(import_icons4.Close, {
+  }), /* @__PURE__ */ import_react18.default.createElement(import_icons4.Close, {
     size: 16
   }))))));
 };
 var useDialogButtonProps = () => {
   const state = (0, import_overlays2.useOverlayTriggerState)({});
-  const openButtonRef = import_react17.default.useRef();
+  const openButtonRef = import_react18.default.useRef();
   const { buttonProps: openButtonProps } = (0, import_button2.useButton)({
     onPress: () => state.open()
   }, openButtonRef);
@@ -791,19 +806,19 @@ var useDialogButtonProps = () => {
 };
 
 // src/Divider/Divider.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_separator = require("@react-aria/separator");
 var Divider = (_a) => {
   var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
   const { separatorProps } = (0, import_separator.useSeparator)(props);
-  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react19.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     __baseCSS: { width: "100%", height: "1px", m: "none", bg: "text" },
     variant: `divider.${variant}`
   }, props), separatorProps));
 };
 
 // src/Field/Field.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var import_textfield = require("@react-aria/textfield");
 var import_icons5 = require("@marigold/icons");
 var Field = (_a) => {
@@ -824,20 +839,20 @@ var Field = (_a) => {
     "error",
     "errorMessage"
   ]);
-  const ref = (0, import_react19.useRef)(null);
+  const ref = (0, import_react20.useRef)(null);
   const { labelProps, inputProps, errorMessageProps } = (0, import_textfield.useTextField)(props, ref);
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(Label, __spreadValues({
+  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(Label, __spreadValues({
     variant: labelVariant,
     htmlFor,
     required
-  }, labelProps), props.label), /* @__PURE__ */ import_react19.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
+  }, labelProps), props.label), /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
     as: "input",
     type,
     id: htmlFor,
     variant: `input.${variant}`
   }, inputProps), {
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ import_react19.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react19.default.createElement(import_icons5.Exclamation, {
+  }), props)), error && errorMessage && /* @__PURE__ */ import_react20.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react20.default.createElement(import_icons5.Exclamation, {
     size: 16
   }), errorMessage));
 };
@@ -846,21 +861,21 @@ var Field = (_a) => {
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
 
 // src/Image/Image.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var Image = (_a) => {
   var _b = _a, {
     variant = "fullWidth"
   } = _b, props = __objRest(_b, [
     "variant"
   ]);
-  return /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react21.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as: "img",
     variant: `image.${variant}`
   }));
 };
 
 // src/Link/Link.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
 var Link = (_a) => {
   var _b = _a, {
@@ -874,12 +889,12 @@ var Link = (_a) => {
     "children",
     "disabled"
   ]);
-  const ref = (0, import_react21.useRef)();
+  const ref = (0, import_react22.useRef)();
   const { linkProps } = (0, import_link.useLink)(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
   }), ref);
-  return /* @__PURE__ */ import_react21.default.createElement(Text, __spreadProps(__spreadValues(__spreadValues({}, props), linkProps), {
+  return /* @__PURE__ */ import_react22.default.createElement(Text, __spreadProps(__spreadValues(__spreadValues({}, props), linkProps), {
     as,
     variant,
     ref
@@ -887,7 +902,7 @@ var Link = (_a) => {
 };
 
 // src/Menu/Menu.tsx
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var Menu = (_a) => {
   var _b = _a, {
     variant = "default",
@@ -902,12 +917,12 @@ var Menu = (_a) => {
     "show",
     "children"
   ]);
-  return /* @__PURE__ */ import_react22.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react23.default.createElement(import_system.Box, __spreadValues({
     variant: `menu.${variant}`
-  }, props), /* @__PURE__ */ import_react22.default.createElement(Button, {
+  }, props), /* @__PURE__ */ import_react23.default.createElement(Button, {
     onClick,
     variant: "menu"
-  }, label), show ? /* @__PURE__ */ import_react22.default.createElement(import_system.Box, {
+  }, label), show ? /* @__PURE__ */ import_react23.default.createElement(import_system.Box, {
     display: "block",
     position: "absolute",
     minWidth: "120px",
@@ -916,7 +931,7 @@ var Menu = (_a) => {
 };
 
 // src/MenuItem/MenuItem.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var MenuItem = (_a) => {
   var _b = _a, {
     variant = "default",
@@ -925,15 +940,15 @@ var MenuItem = (_a) => {
     "variant",
     "children"
   ]);
-  return /* @__PURE__ */ import_react23.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
     variant: `menuItem.${variant}`
-  }, /* @__PURE__ */ import_react23.default.createElement(Link, __spreadValues({
+  }, /* @__PURE__ */ import_react24.default.createElement(Link, __spreadValues({
     variant: "menuItemLink"
   }, props), children));
 };
 
 // src/Message/Message.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_icons6 = require("@marigold/icons");
 var Message = (_a) => {
   var _b = _a, {
@@ -947,25 +962,25 @@ var Message = (_a) => {
     "className",
     "children"
   ]);
-  var icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Info, null);
+  var icon = /* @__PURE__ */ import_react25.default.createElement(import_icons6.Info, null);
   if (variant === "warning") {
-    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Notification, null);
+    icon = /* @__PURE__ */ import_react25.default.createElement(import_icons6.Notification, null);
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons6.Exclamation, null);
+    icon = /* @__PURE__ */ import_react25.default.createElement(import_icons6.Exclamation, null);
   }
-  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react25.default.createElement(import_system.Box, __spreadValues({
     display: "inline-block",
     variant: `message.${variant}`,
     className
-  }, props), /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+  }, props), /* @__PURE__ */ import_react25.default.createElement(import_system.Box, {
     display: "flex",
     alignItems: "center",
     variant: "message.title"
-  }, icon, /* @__PURE__ */ import_react24.default.createElement(Text, {
+  }, icon, /* @__PURE__ */ import_react25.default.createElement(Text, {
     as: "h4",
     variant: "headline4"
-  }, messageTitle)), /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+  }, messageTitle)), /* @__PURE__ */ import_react25.default.createElement(import_system.Box, {
     css: { color: "black" }
   }, children));
 };
@@ -975,7 +990,7 @@ var import_system5 = require("@marigold/system");
 var import_ssr = require("@react-aria/ssr");
 
 // src/Provider/MarigoldProvider.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_overlays4 = require("@react-aria/overlays");
 var import_system4 = require("@marigold/system");
 function MarigoldProvider({
@@ -984,19 +999,19 @@ function MarigoldProvider({
 }) {
   const outer = (0, import_system4.useTheme)();
   const isTopLevel = outer.theme === import_system4.__defaultTheme;
-  return /* @__PURE__ */ import_react25.default.createElement(import_system4.ThemeProvider, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_system4.ThemeProvider, {
     theme
-  }, isTopLevel ? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(import_system4.Global, null), /* @__PURE__ */ import_react25.default.createElement(import_overlays4.OverlayProvider, null, children)) : children);
+  }, isTopLevel ? /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_system4.Global, null), /* @__PURE__ */ import_react26.default.createElement(import_overlays4.OverlayProvider, null, children)) : children);
 }
 
 // src/Radio/Radio.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_icons7 = require("@marigold/icons");
 var import_focus3 = require("@react-aria/focus");
 var import_visually_hidden3 = require("@react-aria/visually-hidden");
 
 // src/Radio/RadioIcon.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_system6 = require("@marigold/system");
 var RadioIcon = ({
   variant = "",
@@ -1010,19 +1025,19 @@ var RadioIcon = ({
     checked,
     error
   };
-  return /* @__PURE__ */ import_react26.default.createElement(import_system6.SVG, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_system6.SVG, {
     width: "16",
     height: "32",
     viewBox: "0 0 16 32",
     fill: "none",
     "aria-hidden": "true"
-  }, /* @__PURE__ */ import_react26.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
     variant: (0, import_system6.conditional)(`radio.${variant}`, conditionalStates),
     as: "circle",
     cx: "8",
     cy: "16",
     r: "7.5"
-  }), checked && /* @__PURE__ */ import_react26.default.createElement("circle", {
+  }), checked && /* @__PURE__ */ import_react27.default.createElement("circle", {
     fill: "white",
     cx: "8",
     cy: "16",
@@ -1035,12 +1050,12 @@ var RadioInput = (_a) => {
   var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
   const { focusProps } = (0, import_focus3.useFocusRing)();
   const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ import_react27.default.createElement(import_visually_hidden3.VisuallyHidden, null, /* @__PURE__ */ import_react27.default.createElement("input", __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react28.default.createElement(import_visually_hidden3.VisuallyHidden, null, /* @__PURE__ */ import_react28.default.createElement("input", __spreadValues(__spreadValues({
     type: "radio",
     disabled: props.disabled
-  }, focusProps), restProps))), /* @__PURE__ */ import_react27.default.createElement(RadioIcon, {
+  }, focusProps), restProps))), /* @__PURE__ */ import_react28.default.createElement(RadioIcon, {
     variant: props.variant,
     disabled: props.disabled,
     checked: props.checked,
@@ -1057,25 +1072,25 @@ var Radio = (_a) => {
     "labelVariant",
     "errorMessage"
   ]);
-  return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
     as: Label,
     htmlFor: props.id,
     required,
     variant: `label.${labelVariant}`,
     css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
-  }, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadValues({
     as: RadioInput,
     error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react27.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react27.default.createElement(import_icons7.Exclamation, {
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react28.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react28.default.createElement(import_icons7.Exclamation, {
     size: 16
   }), errorMessage));
 };
 
 // src/Slider/Slider.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var Slider = (_a) => {
   var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
-  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadValues({
     as: "input",
     type: "range",
     css: { verticalAlign: "middle" },
@@ -1084,10 +1099,10 @@ var Slider = (_a) => {
 };
 
 // src/Select/Select.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_select = require("@react-stately/select");
 var import_button3 = require("@react-aria/button");
-var import_utils3 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_focus5 = require("@react-aria/focus");
 var import_select2 = require("@react-aria/select");
 var import_overlays6 = require("@react-stately/overlays");
@@ -1095,26 +1110,26 @@ var import_overlays7 = require("@react-aria/overlays");
 var import_icons8 = require("@marigold/icons");
 
 // src/Select/ListBox.tsx
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_listbox3 = require("@react-aria/listbox");
 
 // src/Select/Option.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
 var Option = ({ item, state }) => {
-  const ref = (0, import_react29.useRef)(null);
-  const [disabled, setDisabled] = (0, import_react29.useState)(false);
+  const ref = (0, import_react30.useRef)(null);
+  const [disabled, setDisabled] = (0, import_react30.useState)(false);
   const { optionProps, isSelected } = (0, import_listbox.useOption)({
     key: item.key
   }, state, ref);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     for (const key of state.disabledKeys.values()) {
       if (key === item.key) {
         setDisabled(true);
       }
     }
   }, [state.disabledKeys, item.key]);
-  return /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "li"
   }, optionProps), {
     ref,
@@ -1123,26 +1138,26 @@ var Option = ({ item, state }) => {
 };
 
 // src/Select/ListBoxSection.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_listbox2 = require("@react-aria/listbox");
 var ListBoxSection = ({ section, state }) => {
   const { itemProps, headingProps, groupProps } = (0, import_listbox2.useListBoxSection)({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react31.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "li"
   }, itemProps), {
     css: {
       cursor: "not-allowed"
     }
-  }), section.rendered && /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), section.rendered && /* @__PURE__ */ import_react31.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "span"
   }, headingProps), {
     variant: "select.section"
-  }), section.rendered), /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadValues({
+  }), section.rendered), /* @__PURE__ */ import_react31.default.createElement(import_system.Box, __spreadValues({
     as: "ul"
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react30.default.createElement(Option, {
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react31.default.createElement(Option, {
     key: node.key,
     item: node,
     state
@@ -1151,10 +1166,10 @@ var ListBoxSection = ({ section, state }) => {
 
 // src/Select/ListBox.tsx
 var ListBox = (props) => {
-  const ref = (0, import_react31.useRef)(null);
+  const ref = (0, import_react32.useRef)(null);
   const { state, error } = props;
   const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, ref);
-  return /* @__PURE__ */ import_react31.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "ul",
     p: "none",
     css: {
@@ -1163,11 +1178,11 @@ var ListBox = (props) => {
   }, listBoxProps), {
     variant: error ? "select.listbox.error" : "select.listbox",
     ref
-  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react31.default.createElement(ListBoxSection, {
+  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react32.default.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
-  }) : /* @__PURE__ */ import_react31.default.createElement(Option, {
+  }) : /* @__PURE__ */ import_react32.default.createElement(Option, {
     key: item.key,
     item,
     state
@@ -1175,11 +1190,11 @@ var ListBox = (props) => {
 };
 
 // src/Select/Popover.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_focus4 = require("@react-aria/focus");
 var import_overlays5 = require("@react-aria/overlays");
-var import_utils2 = require("@react-aria/utils");
-var Popover = (0, import_react32.forwardRef)((_a, ref) => {
+var import_utils5 = require("@react-aria/utils");
+var Popover = (0, import_react33.forwardRef)((_a, ref) => {
   var _b = _a, { children, className, isOpen, onClose } = _b, otherProps = __objRest(_b, ["children", "className", "isOpen", "onClose"]);
   const { overlayProps } = (0, import_overlays5.useOverlay)({
     isOpen,
@@ -1188,12 +1203,12 @@ var Popover = (0, import_react32.forwardRef)((_a, ref) => {
     isDismissable: true
   }, ref);
   const { modalProps } = (0, import_overlays5.useModal)();
-  return /* @__PURE__ */ import_react32.default.createElement(import_overlays5.OverlayContainer, null, /* @__PURE__ */ import_react32.default.createElement(import_focus4.FocusScope, {
+  return /* @__PURE__ */ import_react33.default.createElement(import_overlays5.OverlayContainer, null, /* @__PURE__ */ import_react33.default.createElement(import_focus4.FocusScope, {
     restoreFocus: true
-  }, /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils2.mergeProps)(overlayProps, otherProps, modalProps)), {
+  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils5.mergeProps)(overlayProps, otherProps, modalProps)), {
     className,
     ref
-  }), children, /* @__PURE__ */ import_react32.default.createElement(import_overlays5.DismissButton, {
+  }), children, /* @__PURE__ */ import_react33.default.createElement(import_overlays5.DismissButton, {
     onDismiss: onClose
   }))));
 });
@@ -1221,8 +1236,8 @@ var Select = (_a) => {
   ]);
   const state = (0, import_select.useSelectState)(props);
   const overlayTriggerState = (0, import_overlays6.useOverlayTriggerState)({});
-  const triggerRef = (0, import_react33.useRef)();
-  const overlayRef = (0, import_react33.useRef)();
+  const triggerRef = (0, import_react34.useRef)();
+  const overlayRef = (0, import_react34.useRef)();
   const { overlayProps } = (0, import_overlays7.useOverlayTrigger)({ type: "listbox" }, overlayTriggerState, triggerRef);
   const { overlayProps: positionProps } = (0, import_overlays7.useOverlayPosition)({
     targetRef: triggerRef,
@@ -1235,47 +1250,47 @@ var Select = (_a) => {
   const { labelProps, triggerProps, valueProps, menuProps } = (0, import_select2.useSelect)(props, state, triggerRef);
   const { buttonProps } = (0, import_button3.useButton)(triggerProps, triggerRef);
   const { focusProps } = (0, import_focus5.useFocusRing)();
-  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
     position: "relative",
     display: "inline-block",
     width: width && width
-  }, props.label && /* @__PURE__ */ import_react33.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react33.default.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+  }, props.label && /* @__PURE__ */ import_react34.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react34.default.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
     htmlFor: labelProps.id,
     variant: labelVariant
-  }), required ? /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }), required ? /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, props.label, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }, props.label, /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
     as: import_icons8.Required,
     size: 16,
     css: { color: "error" }
-  })) : props.label)), /* @__PURE__ */ import_react33.default.createElement(import_select2.HiddenSelect, {
+  })) : props.label)), /* @__PURE__ */ import_react34.default.createElement(import_select2.HiddenSelect, {
     state,
     triggerRef,
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "button"
-  }, (0, import_utils3.mergeProps)(buttonProps, focusProps)), {
+  }, (0, import_utils6.mergeProps)(buttonProps, focusProps)), {
     ref: triggerRef,
     variant: error && state.isOpen && !disabled ? "button.select.errorOpened" : error ? "button.select.error" : state.isOpen && !disabled ? "button.select.open" : "button.select",
     disabled,
     className
-  }), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "span"
   }, valueProps), {
     variant: disabled ? "select.disabled" : "select"
-  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
     as: import_icons8.ArrowUp,
     size: 16,
     css: { fill: "text" }
-  }) : /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }) : /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
     as: import_icons8.ArrowDown,
     size: 16,
     css: { fill: disabled ? "disabled" : "text" }
-  })), state.isOpen && !disabled && /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({
+  })), state.isOpen && !disabled && /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({
     as: Popover
   }, overlayProps), positionProps), {
     css: {
@@ -1284,23 +1299,23 @@ var Select = (_a) => {
     ref: overlayRef,
     isOpen: state.isOpen,
     onClose: state.close
-  }), /* @__PURE__ */ import_react33.default.createElement(ListBox, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react34.default.createElement(ListBox, __spreadProps(__spreadValues({
     error
   }, menuProps), {
     state
-  }))), error && errorMessage && /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }))), error && errorMessage && /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
     as: import_icons8.Exclamation,
     size: 16,
     css: { color: "error" }
-  }), /* @__PURE__ */ import_react33.default.createElement(ValidationMessage, null, errorMessage)));
+  }), /* @__PURE__ */ import_react34.default.createElement(ValidationMessage, null, errorMessage)));
 };
 
 // src/Textarea/Textarea.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_textfield2 = require("@react-aria/textfield");
 var import_icons9 = require("@marigold/icons");
 var Textarea = (_a) => {
@@ -1319,14 +1334,14 @@ var Textarea = (_a) => {
     "required",
     "children"
   ]);
-  const ref = (0, import_react34.useRef)(null);
+  const ref = (0, import_react35.useRef)(null);
   const { labelProps, inputProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadProps(__spreadValues({}, props), {
     inputElementType: "textarea"
   }), ref);
-  return /* @__PURE__ */ import_react34.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react34.default.createElement(Label, __spreadValues({
+  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react35.default.createElement(Label, __spreadValues({
     htmlFor,
     required
-  }, labelProps), props.label), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
+  }, labelProps), props.label), /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
     as: "textarea",
     variant: `textarea.${variant}`,
     css: {
@@ -1334,13 +1349,13 @@ var Textarea = (_a) => {
     }
   }, inputProps), {
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ import_react34.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react34.default.createElement(import_icons9.Exclamation, {
+  }), props)), error && errorMessage && /* @__PURE__ */ import_react35.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react35.default.createElement(import_icons9.Exclamation, {
     size: 16
   }), errorMessage));
 };
 
 // src/Input/Input.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var Input = (_a) => {
   var _b = _a, {
     variant = "",
@@ -1349,7 +1364,7 @@ var Input = (_a) => {
     "variant",
     "type"
   ]);
-  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react36.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as: "input",
     type,
     variant: `input.${variant}`
@@ -1357,10 +1372,10 @@ var Input = (_a) => {
 };
 
 // src/Container/Container.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var Container = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react36.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react37.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     width: "100%"
   }), children);
 };

package/dist/index.mjs

@@ -34,8 +34,29 @@ var __objRest = (source, exclude) => {
 import React3 from "react";
 
 // src/Inline/Inline.tsx
-import React, { Children } from "react";
-import flattenChildren from "react-keyed-flatten-children";
+import React, { Children as Children2 } from "react";
+
+// src/utils/flatten-children.ts
+import {
+  Children,
+  isValidElement,
+  cloneElement
+} from "react";
+import { isFragment } from "react-is";
+var flattenChildren = (children, depth = 0, keys = []) => Children.toArray(children).reduce((acc, node) => {
+  if (isFragment(node)) {
+    acc.push.apply(acc, flattenChildren(node.props.children, depth + 1, keys.concat(node.key)));
+  } else {
+    if (isValidElement(node)) {
+      acc.push(cloneElement(node, {
+        key: keys.concat(String(node.key)).join(".")
+      }));
+    } else if (typeof node === "string" || typeof node === "number") {
+      acc.push(node);
+    }
+  }
+  return acc;
+}, []);
 
 // src/Box.ts
 import { Box } from "@marigold/system";
@@ -60,12 +81,11 @@ var Inline = (_a) => {
     display: "inline-flex",
     css: { "> * + *": { pl: space } },
     alignItems: ALIGNMENT[align]
-  }, props), Children.map(flattenChildren(children), (child) => /* @__PURE__ */ React.createElement(Box, null, React.cloneElement(child, {}, child.props.children))));
+  }, props), Children2.map(flattenChildren(children), (child) => /* @__PURE__ */ React.createElement(Box, null, React.cloneElement(child, {}, child.props.children))));
 };
 
 // src/Stack/Stack.tsx
-import React2, { Children as Children2 } from "react";
-import flattenChildren2 from "react-keyed-flatten-children";
+import React2, { Children as Children3 } from "react";
 var ALIGNMENT2 = {
   left: "flex-start",
   center: "center",
@@ -86,7 +106,7 @@ var Stack = (_a) => {
     flexDirection: "column",
     alignItems: ALIGNMENT2[align],
     css: { "> * + *": { pt: space } }
-  }), Children2.map(flattenChildren2(children), (child) => /* @__PURE__ */ React2.createElement(Box, null, React2.cloneElement(child, {}, child.props.children))));
+  }), Children3.map(flattenChildren(children), (child) => /* @__PURE__ */ React2.createElement(Box, null, React2.cloneElement(child, {}, child.props.children))));
 };
 
 // src/ActionGroup/ActionGroup.tsx
@@ -497,8 +517,7 @@ var Column = (_a) => {
 };
 
 // src/Columns/Columns.tsx
-import React13, { Children as Children3 } from "react";
-import flattenChildren3 from "react-keyed-flatten-children";
+import React13, { Children as Children4 } from "react";
 import { useTheme } from "@marigold/system";
 var useAlignment = (direction) => {
   switch (direction) {
@@ -541,7 +560,7 @@ var Columns = (_a) => {
     flexWrap: "wrap",
     alignItems,
     justifyContent
-  }, props), Children3.map(flattenChildren3(children), (child) => {
+  }, props), Children4.map(flattenChildren(children), (child) => {
     return React13.cloneElement(child, {}, /* @__PURE__ */ React13.createElement(Box, {
       css: { p: `${spaceValue / 2}px` }
     }, child.props.children));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,8 +23,8 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "0.4.1",
-    "@marigold/system": "0.5.0",
+    "@marigold/icons": "0.4.2",
+    "@marigold/system": "0.5.1",
     "@marigold/types": "0.4.0",
     "@react-aria/button": "^3.3.3",
     "@react-aria/checkbox": "^3.2.3",
@@ -45,7 +45,7 @@
     "@react-stately/select": "^3.1.3",
     "@react-types/dialog": "^3.3.1",
     "@react-types/shared": "^3.8.0",
-    "react-keyed-flatten-children": "1.3.0"
+    "react-is": "^17.0.2"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.0.0",