@marigold/components 1.2.0 → 1.3.0

package/dist/index.mjs

@@ -1,35 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
 // src/Aside/Aside.tsx
 import React from "react";
 
@@ -87,12 +55,12 @@ var Aspect = ({
 // src/Badge/Badge.tsx
 import React3 from "react";
 import { useComponentStyles } from "@marigold/system";
-var Badge = (_a) => {
-  var _b = _a, { variant, size, children } = _b, props = __objRest(_b, ["variant", "size", "children"]);
+var Badge = ({ variant, size, children, ...props }) => {
   const styles = useComponentStyles("Badge", { variant, size });
-  return /* @__PURE__ */ React3.createElement(Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React3.createElement(Box, {
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Breakout/Breakout.tsx
@@ -108,27 +76,24 @@ var useAlignment = (direction) => {
   }
   return "flex-start";
 };
-var Breakout = (_a) => {
-  var _b = _a, {
-    horizontalAlign,
-    verticalAlign,
-    children
-  } = _b, props = __objRest(_b, [
-    "horizontalAlign",
-    "verticalAlign",
-    "children"
-  ]);
+var Breakout = ({
+  horizontalAlign,
+  verticalAlign,
+  children,
+  ...props
+}) => {
   const alignItems = useAlignment(horizontalAlign);
   const justifyContent = useAlignment(verticalAlign);
-  return /* @__PURE__ */ React4.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React4.createElement(Box, {
     alignItems,
     justifyContent,
     width: "100%",
     display: verticalAlign || horizontalAlign ? "flex" : "block",
     css: {
       gridColumn: "1 / -1"
-    }
-  }, props), children);
+    },
+    ...props
+  }, children);
 };
 
 // src/Button/Button.tsx
@@ -145,44 +110,46 @@ import {
   useComponentStyles as useComponentStyles2,
   useStateProps
 } from "@marigold/system";
-var Button = forwardRef((_a, ref) => {
-  var _b = _a, {
+var Button = forwardRef(
+  ({
     as = "button",
     children,
     variant,
     size,
-    disabled
-  } = _b, props = __objRest(_b, [
-    "as",
-    "children",
-    "variant",
-    "size",
-    "disabled"
-  ]);
-  const buttonRef = useRef(null);
-  useImperativeHandle(ref, () => buttonRef.current);
-  const { buttonProps, isPressed } = useButton(__spreadProps(__spreadValues({}, props), {
-    elementType: typeof as === "string" ? as : "span",
-    isDisabled: disabled
-  }), buttonRef);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = useComponentStyles2("Button", { variant, size });
-  const stateProps = useStateProps({
-    active: isPressed,
-    focus: isFocusVisible
-  });
-  return /* @__PURE__ */ React5.createElement(Box2, __spreadProps(__spreadValues(__spreadValues({}, mergeProps(buttonProps, focusProps)), stateProps), {
-    as,
-    ref: buttonRef,
-    __baseCSS: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "0.5ch",
-      cursor: disabled ? "not-allowed" : "pointer"
-    },
-    css: styles
-  }), children);
-});
+    disabled,
+    ...props
+  }, ref) => {
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current);
+    const { buttonProps, isPressed } = useButton(
+      {
+        ...props,
+        elementType: typeof as === "string" ? as : "span",
+        isDisabled: disabled
+      },
+      buttonRef
+    );
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const styles = useComponentStyles2("Button", { variant, size });
+    const stateProps = useStateProps({
+      active: isPressed,
+      focus: isFocusVisible
+    });
+    return /* @__PURE__ */ React5.createElement(Box2, {
+      ...mergeProps(buttonProps, focusProps),
+      ...stateProps,
+      as,
+      ref: buttonRef,
+      __baseCSS: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.5ch",
+        cursor: disabled ? "not-allowed" : "pointer"
+      },
+      css: styles
+    }, children);
+  }
+);
 
 // src/Card/Card.tsx
 import React6 from "react";
@@ -190,39 +157,34 @@ import {
   Box as Box3,
   useComponentStyles as useComponentStyles3
 } from "@marigold/system";
-var Card = (_a) => {
-  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+var Card = ({ children, variant, size, ...props }) => {
   const styles = useComponentStyles3("Card", { variant, size });
-  return /* @__PURE__ */ React6.createElement(Box3, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React6.createElement(Box3, {
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Center/Center.tsx
 import React7 from "react";
-var Center = (_a) => {
-  var _b = _a, {
-    maxWidth,
-    space = "none",
-    children
-  } = _b, props = __objRest(_b, [
-    "maxWidth",
-    "space",
-    "children"
-  ]);
-  return /* @__PURE__ */ React7.createElement(Box, __spreadValues({
-    css: {
-      boxSizing: "content-box",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      marginInline: "auto",
-      maxInlineSize: maxWidth,
-      gap: space
-    }
-  }, props), children);
-};
+var Center = ({
+  maxWidth,
+  space = "none",
+  children,
+  ...props
+}) => /* @__PURE__ */ React7.createElement(Box, {
+  css: {
+    boxSizing: "content-box",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    marginInline: "auto",
+    maxInlineSize: maxWidth,
+    gap: space
+  },
+  ...props
+}, children);
 
 // src/Checkbox/Checkbox.tsx
 import React10, { forwardRef as forwardRef2 } from "react";
@@ -252,26 +214,21 @@ import {
 import React8 from "react";
 import { Required } from "@marigold/icons";
 import { Box as Box4, useComponentStyles as useComponentStyles4 } from "@marigold/system";
-var Label = (_a) => {
-  var _b = _a, {
-    as = "label",
-    required,
-    children,
-    variant,
-    size
-  } = _b, props = __objRest(_b, [
-    "as",
-    "required",
-    "children",
-    "variant",
-    "size"
-  ]);
+var Label = ({
+  as = "label",
+  required,
+  children,
+  variant,
+  size,
+  ...props
+}) => {
   const styles = useComponentStyles4("Label", { size, variant });
-  return /* @__PURE__ */ React8.createElement(Box4, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React8.createElement(Box4, {
+    ...props,
     as,
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles
-  }), children, required && /* @__PURE__ */ React8.createElement(Required, {
+  }, children, required && /* @__PURE__ */ React8.createElement(Required, {
     role: "presentation",
     size: 16,
     fill: "error"
@@ -279,41 +236,42 @@ var Label = (_a) => {
 };
 
 // src/Checkbox/CheckboxGroup.tsx
-var CheckboxGroupContext = createContext(null);
+var CheckboxGroupContext = createContext(
+  null
+);
 var useCheckboxGroupContext = () => useContext(CheckboxGroupContext);
-var CheckboxGroup = (_a) => {
-  var _b = _a, {
-    children,
-    variant,
-    size,
-    required,
-    disabled,
-    readOnly,
-    error
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "required",
-    "disabled",
-    "readOnly",
-    "error"
-  ]);
-  const props = __spreadValues({
+var CheckboxGroup = ({
+  children,
+  variant,
+  size,
+  required,
+  disabled,
+  readOnly,
+  error,
+  ...rest
+}) => {
+  const props = {
     isRequired: required,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, rest);
+    validationState: error ? "invalid" : "valid",
+    ...rest
+  };
   const state = useCheckboxGroupState(props);
   const { groupProps, labelProps } = useCheckboxGroup(props, state);
-  const styles = useComponentStyles5("CheckboxGroup", { variant, size }, { parts: ["container", "group"] });
-  return /* @__PURE__ */ React9.createElement(Box5, __spreadProps(__spreadValues({}, groupProps), {
+  const styles = useComponentStyles5(
+    "CheckboxGroup",
+    { variant, size },
+    { parts: ["container", "group"] }
+  );
+  return /* @__PURE__ */ React9.createElement(Box5, {
+    ...groupProps,
     css: styles.container
-  }), props.label && /* @__PURE__ */ React9.createElement(Label, __spreadValues({
+  }, props.label && /* @__PURE__ */ React9.createElement(Label, {
     as: "span",
-    required
-  }, labelProps), props.label), /* @__PURE__ */ React9.createElement(Box5, {
+    required,
+    ...labelProps
+  }, props.label), /* @__PURE__ */ React9.createElement(Box5, {
     role: "presentation",
     __baseCSS: {
       display: "flex",
@@ -322,7 +280,7 @@ var CheckboxGroup = (_a) => {
     },
     css: styles.group
   }, /* @__PURE__ */ React9.createElement(CheckboxGroupContext.Provider, {
-    value: __spreadValues({ variant, size, error }, state)
+    value: { variant, size, error, ...state }
   }, children)));
 };
 
@@ -343,26 +301,24 @@ var IndeterminateMark = () => /* @__PURE__ */ React10.createElement("svg", {
   stroke: "none",
   d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
 }));
-var Icon = (_a) => {
-  var _b = _a, { css, checked, indeterminate } = _b, props = __objRest(_b, ["css", "checked", "indeterminate"]);
-  return /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
-    "aria-hidden": "true",
-    __baseCSS: {
-      width: 16,
-      height: 16,
-      bg: "#fff",
-      border: "1px solid #000",
-      borderRadius: 3,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      p: 1
-    },
-    css
-  }, props), indeterminate ? /* @__PURE__ */ React10.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React10.createElement(CheckMark, null) : null);
-};
-var Checkbox = forwardRef2((_a, ref) => {
-  var _b = _a, {
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React10.createElement(Box6, {
+  "aria-hidden": "true",
+  __baseCSS: {
+    width: 16,
+    height: 16,
+    bg: "#fff",
+    border: "1px solid #000",
+    borderRadius: 3,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    p: 1
+  },
+  css,
+  ...props
+}, indeterminate ? /* @__PURE__ */ React10.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React10.createElement(CheckMark, null) : null);
+var Checkbox = forwardRef2(
+  ({
     size,
     variant,
     disabled,
@@ -371,98 +327,112 @@ var Checkbox = forwardRef2((_a, ref) => {
     indeterminate,
     readOnly,
     required,
-    error
-  } = _b, props = __objRest(_b, [
-    "size",
-    "variant",
-    "disabled",
-    "checked",
-    "defaultChecked",
-    "indeterminate",
-    "readOnly",
-    "required",
-    "error"
-  ]);
-  const inputRef = useObjectRef(ref);
-  const checkboxProps = {
-    isIndeterminate: indeterminate,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isRequired: required,
-    validationState: error ? "invalid" : "valid"
-  };
-  const groupState = useCheckboxGroupContext();
-  const { inputProps } = groupState ? useCheckboxGroupItem(__spreadProps(__spreadValues(__spreadValues({}, props), checkboxProps), {
-    value: props.value
-  }), groupState, inputRef) : useCheckbox(__spreadValues(__spreadValues({
-    isSelected: checked,
-    defaultSelected: defaultChecked
-  }, checkboxProps), props), useToggleState(__spreadValues({
-    isSelected: checked,
-    defaultSelected: defaultChecked
-  }, props)), inputRef);
-  const styles = useComponentStyles6("Checkbox", {
-    variant: (groupState == null ? void 0 : groupState.variant) || variant,
-    size: (groupState == null ? void 0 : groupState.size) || size
-  }, { parts: ["container", "label", "checkbox"] });
-  const { hoverProps, isHovered } = useHover({});
-  const { isFocusVisible, focusProps } = useFocusRing2();
-  const stateProps = useStateProps2({
-    hover: isHovered,
-    focus: isFocusVisible,
-    checked: inputProps.checked,
-    disabled: inputProps.disabled,
-    error: (groupState == null ? void 0 : groupState.error) || error,
-    readOnly,
-    indeterminate
-  });
-  return /* @__PURE__ */ React10.createElement(Box6, __spreadValues(__spreadValues({
-    as: "label",
-    __baseCSS: {
-      display: "flex",
-      alignItems: "center",
-      gap: "1ch",
-      position: "relative"
-    },
-    css: styles.container
-  }, hoverProps), stateProps), /* @__PURE__ */ React10.createElement(Box6, __spreadValues(__spreadValues({
-    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__ */ React10.createElement(Icon, __spreadValues({
-    checked: inputProps.checked,
-    indeterminate,
-    css: styles.checkbox
-  }, stateProps)), props.children && /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
-    css: styles.label
-  }, stateProps), props.children));
-});
+    error,
+    ...props
+  }, ref) => {
+    const inputRef = useObjectRef(ref);
+    const checkboxProps = {
+      isIndeterminate: indeterminate,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isRequired: required,
+      validationState: error ? "invalid" : "valid"
+    };
+    const groupState = useCheckboxGroupContext();
+    const { inputProps } = groupState ? useCheckboxGroupItem(
+      {
+        ...props,
+        ...checkboxProps,
+        value: props.value
+      },
+      groupState,
+      inputRef
+    ) : useCheckbox(
+      {
+        isSelected: checked,
+        defaultSelected: defaultChecked,
+        ...checkboxProps,
+        ...props
+      },
+      useToggleState({
+        isSelected: checked,
+        defaultSelected: defaultChecked,
+        ...props
+      }),
+      inputRef
+    );
+    const styles = useComponentStyles6(
+      "Checkbox",
+      {
+        variant: (groupState == null ? void 0 : groupState.variant) || variant,
+        size: (groupState == null ? void 0 : groupState.size) || size
+      },
+      { parts: ["container", "label", "checkbox"] }
+    );
+    const { hoverProps, isHovered } = useHover({});
+    const { isFocusVisible, focusProps } = useFocusRing2();
+    const stateProps = useStateProps2({
+      hover: isHovered,
+      focus: isFocusVisible,
+      checked: inputProps.checked,
+      disabled: inputProps.disabled,
+      error: (groupState == null ? void 0 : groupState.error) || error,
+      readOnly,
+      indeterminate
+    });
+    return /* @__PURE__ */ React10.createElement(Box6, {
+      as: "label",
+      __baseCSS: {
+        display: "flex",
+        alignItems: "center",
+        gap: "1ch",
+        position: "relative"
+      },
+      css: styles.container,
+      ...hoverProps,
+      ...stateProps
+    }, /* @__PURE__ */ React10.createElement(Box6, {
+      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__ */ React10.createElement(Icon, {
+      checked: inputProps.checked,
+      indeterminate,
+      css: styles.checkbox,
+      ...stateProps
+    }), props.children && /* @__PURE__ */ React10.createElement(Box6, {
+      css: styles.label,
+      ...stateProps
+    }, props.children));
+  }
+);
 
 // src/Columns/Columns.tsx
 import React11, { Children } from "react";
-var Columns = (_a) => {
-  var _b = _a, {
-    space = "none",
-    columns,
-    collapseAt = "40em",
-    children
-  } = _b, props = __objRest(_b, [
-    "space",
-    "columns",
-    "collapseAt",
-    "children"
-  ]);
+var Columns = ({
+  space = "none",
+  columns,
+  collapseAt = "40em",
+  children,
+  ...props
+}) => {
   if (Children.count(children) !== columns.length) {
-    throw new Error(`Columns: expected ${columns.length} children, got ${Children.count(children)}`);
+    throw new Error(
+      `Columns: expected ${columns.length} children, got ${Children.count(
+        children
+      )}`
+    );
   }
   const getColumnWidths = columns.map((column, index) => {
     return {
@@ -471,16 +441,20 @@ var Columns = (_a) => {
       }
     };
   });
-  return /* @__PURE__ */ React11.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React11.createElement(Box, {
     display: "flex",
-    css: Object.assign({
-      flexWrap: "wrap",
-      gap: space,
-      "> *": {
-        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
-      }
-    }, ...getColumnWidths)
-  }, props), children);
+    css: Object.assign(
+      {
+        flexWrap: "wrap",
+        gap: space,
+        "> *": {
+          flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
+        }
+      },
+      ...getColumnWidths
+    ),
+    ...props
+  }, children);
 };
 
 // src/Container/Container.tsx
@@ -491,20 +465,14 @@ var ALIGNMENT = {
   center: "center",
   right: "flex-end"
 };
-var Container = (_a) => {
-  var _b = _a, {
-    contentType = "content",
-    size = "medium",
-    align = "left",
-    alignContainer = "left",
-    children
-  } = _b, props = __objRest(_b, [
-    "contentType",
-    "size",
-    "align",
-    "alignContainer",
-    "children"
-  ]);
+var Container = ({
+  contentType = "content",
+  size = "medium",
+  align = "left",
+  alignContainer = "left",
+  children,
+  ...props
+}) => {
   const maxWidth = tokenSize[contentType][size];
   let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
   let gridColumn = 1;
@@ -516,7 +484,7 @@ var Container = (_a) => {
     gridTemplateColumns = `1fr 1fr ${maxWidth}`;
     gridColumn = 3;
   }
-  return /* @__PURE__ */ React12.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React12.createElement(Box, {
     display: "grid",
     css: {
       gridTemplateColumns,
@@ -524,8 +492,9 @@ var Container = (_a) => {
       "> *": {
         gridColumn
       }
-    }
-  }, props), children);
+    },
+    ...props
+  }, children);
 };
 
 // src/Content/Content.tsx
@@ -534,22 +503,18 @@ import {
   Box as Box7,
   useComponentStyles as useComponentStyles7
 } from "@marigold/system";
-var Content = (_a) => {
-  var _b = _a, {
-    children,
-    variant,
-    size
-  } = _b, props = __objRest(_b, [
-    "children",
-    "variant",
-    "size"
-  ]);
+var Content = ({
+  children,
+  variant,
+  size,
+  ...props
+}) => {
   const styles = useComponentStyles7("Content", { variant, size });
-  return /* @__PURE__ */ React13.createElement(Box7, __spreadProps(__spreadValues({
-    as: "section"
-  }, props), {
+  return /* @__PURE__ */ React13.createElement(Box7, {
+    as: "section",
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Dialog/Dialog.tsx
@@ -566,14 +531,13 @@ import React14 from "react";
 import {
   useComponentStyles as useComponentStyles8
 } from "@marigold/system";
-var Header = (_a) => {
-  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+var Header = ({ children, variant, size, ...props }) => {
   const styles = useComponentStyles8("Header", { variant, size });
-  return /* @__PURE__ */ React14.createElement(Box, __spreadProps(__spreadValues({
-    as: "header"
-  }, props), {
+  return /* @__PURE__ */ React14.createElement(Box, {
+    as: "header",
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Headline/Headline.tsx
@@ -582,27 +546,22 @@ import {
   Box as Box8,
   useComponentStyles as useComponentStyles9
 } from "@marigold/system";
-var Headline = (_a) => {
-  var _b = _a, {
-    children,
-    variant,
-    size,
-    level = "1"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "level"
-  ]);
+var Headline = ({
+  children,
+  variant,
+  size,
+  level = "1",
+  ...props
+}) => {
   const styles = useComponentStyles9("Headline", {
     variant,
     size: size ?? `level-${level}`
   });
-  return /* @__PURE__ */ React15.createElement(Box8, __spreadProps(__spreadValues({
-    as: `h${level}`
-  }, props), {
+  return /* @__PURE__ */ React15.createElement(Box8, {
+    as: `h${level}`,
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Dialog/Context.ts
@@ -624,109 +583,114 @@ import { mergeProps as mergeProps2, useObjectRef as useObjectRef2 } from "@react
 // src/Overlay/Underlay.tsx
 import React16 from "react";
 import { Box as Box9, useComponentStyles as useComponentStyles10 } from "@marigold/system";
-var Underlay = (_a) => {
-  var _b = _a, { size, variant } = _b, props = __objRest(_b, ["size", "variant"]);
+var Underlay = ({ size, variant, ...props }) => {
   const styles = useComponentStyles10("Underlay", { size, variant });
-  return /* @__PURE__ */ React16.createElement(Box9, __spreadValues({
+  return /* @__PURE__ */ React16.createElement(Box9, {
     __baseCSS: {
       position: "fixed",
       inset: 0,
       zIndex: 1
     },
-    css: styles
-  }, props));
+    css: styles,
+    ...props
+  });
 };
 
 // src/Overlay/Modal.tsx
-var Modal = forwardRef3((_a, ref) => {
-  var _b = _a, { children, open, dismissable, keyboardDismissable, onClose } = _b, props = __objRest(_b, ["children", "open", "dismissable", "keyboardDismissable", "onClose"]);
-  const modalRef = useObjectRef2(ref);
-  const { overlayProps, underlayProps } = useOverlay({
-    isOpen: open,
-    onClose,
-    isDismissable: dismissable,
-    isKeyboardDismissDisabled: !keyboardDismissable
-  }, modalRef);
-  usePreventScroll();
-  const { modalProps } = useModal({});
-  return /* @__PURE__ */ React17.createElement(FocusScope, {
-    contain: true,
-    restoreFocus: true,
-    autoFocus: true
-  }, /* @__PURE__ */ React17.createElement(Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ React17.createElement("div", __spreadValues({
-    style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      position: "fixed",
-      inset: 0,
-      zIndex: 2,
-      pointerEvents: "none"
-    },
-    ref: modalRef
-  }, mergeProps2(props, overlayProps, modalProps)), /* @__PURE__ */ React17.createElement("div", {
-    style: { pointerEvents: "auto" }
-  }, children)));
-});
+var Modal = forwardRef3(
+  ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
+    const modalRef = useObjectRef2(ref);
+    const { overlayProps, underlayProps } = useOverlay(
+      {
+        isOpen: open,
+        onClose,
+        isDismissable: dismissable,
+        isKeyboardDismissDisabled: !keyboardDismissable
+      },
+      modalRef
+    );
+    usePreventScroll();
+    const { modalProps } = useModal({});
+    return /* @__PURE__ */ React17.createElement(FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true
+    }, /* @__PURE__ */ React17.createElement(Underlay, {
+      ...underlayProps
+    }), /* @__PURE__ */ React17.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "fixed",
+        inset: 0,
+        zIndex: 2,
+        pointerEvents: "none"
+      },
+      ref: modalRef,
+      ...mergeProps2(props, overlayProps, modalProps)
+    }, /* @__PURE__ */ React17.createElement("div", {
+      style: { pointerEvents: "auto" }
+    }, children)));
+  }
+);
 
 // src/Overlay/Overlay.tsx
 import React18 from "react";
 import { OverlayContainer } from "@react-aria/overlays";
-var Overlay = (_a) => {
-  var _b = _a, {
-    children,
-    open = false,
-    container
-  } = _b, props = __objRest(_b, [
-    "children",
-    "open",
-    "container"
-  ]);
+var Overlay = ({
+  children,
+  open = false,
+  container,
+  ...props
+}) => {
   if (!open) {
     return null;
   }
   return /* @__PURE__ */ React18.createElement(OverlayContainer, {
     portalContainer: container
-  }, /* @__PURE__ */ React18.createElement(Box, __spreadValues({}, props), children));
+  }, /* @__PURE__ */ React18.createElement(Box, {
+    ...props
+  }, children));
 };
 
 // src/Overlay/Popover.tsx
 import React19, { forwardRef as forwardRef4, useRef as useRef2 } from "react";
 import { useModal as useModal2, useOverlay as useOverlay2 } from "@react-aria/overlays";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-var Popover = forwardRef4((_a, ref) => {
-  var _b = _a, {
+var Popover = forwardRef4(
+  ({
     children,
     open,
     dismissable,
     keyboardDismissDisabled,
     shouldCloseOnBlur,
-    minWidth = 0
-  } = _b, props = __objRest(_b, [
-    "children",
-    "open",
-    "dismissable",
-    "keyboardDismissDisabled",
-    "shouldCloseOnBlur",
-    "minWidth"
-  ]);
-  const fallbackRef = useRef2(null);
-  const popoverRef = ref || fallbackRef;
-  const { overlayProps } = useOverlay2(__spreadValues({
-    isOpen: open,
-    isDismissable: dismissable,
-    isKeyboardDismissDisabled: keyboardDismissDisabled,
-    shouldCloseOnBlur
-  }, props), popoverRef);
-  const { modalProps } = useModal2({});
-  const style = { minWidth };
-  return /* @__PURE__ */ React19.createElement(Overlay, {
-    open
-  }, /* @__PURE__ */ React19.createElement(Box, __spreadValues({
-    ref: popoverRef,
-    role: "presentation"
-  }, mergeProps3(props, overlayProps, modalProps, style)), children));
-});
+    minWidth = 0,
+    ...props
+  }, ref) => {
+    const fallbackRef = useRef2(null);
+    const popoverRef = ref || fallbackRef;
+    const { overlayProps } = useOverlay2(
+      {
+        isOpen: open,
+        isDismissable: dismissable,
+        isKeyboardDismissDisabled: keyboardDismissDisabled,
+        shouldCloseOnBlur,
+        ...props
+      },
+      popoverRef
+    );
+    const { modalProps } = useModal2({});
+    const style = { minWidth };
+    return /* @__PURE__ */ React19.createElement(Overlay, {
+      open
+    }, /* @__PURE__ */ React19.createElement(Box, {
+      ref: popoverRef,
+      role: "presentation",
+      ...mergeProps3(props, overlayProps, modalProps, style)
+    }, children));
+  }
+);
 
 // src/Dialog/DialogTrigger.tsx
 var DialogTrigger = ({
@@ -758,12 +722,15 @@ var DialogTrigger = ({
 var CloseButton = ({ css }) => {
   const ref = useRef4(null);
   const { close } = useDialogContext();
-  const { buttonProps } = useButton2({
-    onPress: () => close == null ? void 0 : close()
-  }, ref);
+  const { buttonProps } = useButton2(
+    {
+      onPress: () => close == null ? void 0 : close()
+    },
+    ref
+  );
   return /* @__PURE__ */ React21.createElement(Box10, {
     css: { display: "flex", justifyContent: "flex-end" }
-  }, /* @__PURE__ */ React21.createElement(Box10, __spreadValues({
+  }, /* @__PURE__ */ React21.createElement(Box10, {
     as: "button",
     __baseCSS: {
       outline: "none",
@@ -775,8 +742,9 @@ var CloseButton = ({ css }) => {
       p: 0
     },
     css,
-    ref
-  }, buttonProps), /* @__PURE__ */ React21.createElement("svg", {
+    ref,
+    ...buttonProps
+  }, /* @__PURE__ */ React21.createElement("svg", {
     viewBox: "0 0 20 20",
     fill: "currentColor"
   }, /* @__PURE__ */ React21.createElement("path", {
@@ -787,35 +755,42 @@ var CloseButton = ({ css }) => {
 };
 var addTitleProps = (children, titleProps) => {
   const childs = React21.Children.toArray(children);
-  const titleIndex = childs.findIndex((child) => React21.isValidElement(child) && (child.type === Header || child.type === Headline));
+  const titleIndex = childs.findIndex(
+    (child) => React21.isValidElement(child) && (child.type === Header || child.type === Headline)
+  );
   if (titleIndex < 0) {
-    console.warn("No child in <Dialog> found that can act as title for accessibility. Please add a <Header> or <Headline> as direct child.");
+    console.warn(
+      "No child in <Dialog> found that can act as title for accessibility. Please add a <Header> or <Headline> as direct child."
+    );
     return children;
   }
-  const titleChild = React21.cloneElement(childs[titleIndex], titleProps);
+  const titleChild = React21.cloneElement(
+    childs[titleIndex],
+    titleProps
+  );
   childs.splice(titleIndex, 1, titleChild);
   return childs;
 };
-var Dialog = (_a) => {
-  var _b = _a, {
-    children,
-    variant,
-    size,
-    closeButton
-  } = _b, props = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "closeButton"
-  ]);
+var Dialog = ({
+  children,
+  variant,
+  size,
+  closeButton,
+  ...props
+}) => {
   const ref = useRef4(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const styles = useComponentStyles11("Dialog", { variant, size }, { parts: ["container", "closeButton"] });
-  return /* @__PURE__ */ React21.createElement(Box10, __spreadValues({
+  const styles = useComponentStyles11(
+    "Dialog",
+    { variant, size },
+    { parts: ["container", "closeButton"] }
+  );
+  return /* @__PURE__ */ React21.createElement(Box10, {
     __baseCSS: { bg: "#fff" },
-    css: styles.container
-  }, dialogProps), closeButton && /* @__PURE__ */ React21.createElement(CloseButton, {
+    css: styles.container,
+    ...dialogProps
+  }, closeButton && /* @__PURE__ */ React21.createElement(CloseButton, {
     css: styles.closeButton
   }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
@@ -825,13 +800,14 @@ Dialog.Trigger = DialogTrigger;
 import React22 from "react";
 import { useSeparator } from "@react-aria/separator";
 import { Box as Box11, useComponentStyles as useComponentStyles12 } from "@marigold/system";
-var Divider = (_a) => {
-  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
+var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
   const styles = useComponentStyles12("Divider", { variant });
-  return /* @__PURE__ */ React22.createElement(Box11, __spreadValues(__spreadValues({
-    css: styles
-  }, props), separatorProps));
+  return /* @__PURE__ */ React22.createElement(Box11, {
+    css: styles,
+    ...props,
+    ...separatorProps
+  });
 };
 
 // src/Footer/Footer.tsx
@@ -839,26 +815,25 @@ import React23 from "react";
 import {
   useComponentStyles as useComponentStyles13
 } from "@marigold/system";
-var Footer = (_a) => {
-  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+var Footer = ({ children, variant, size, ...props }) => {
   const styles = useComponentStyles13("Footer", { variant, size });
-  return /* @__PURE__ */ React23.createElement(Box, __spreadProps(__spreadValues({
-    as: "footer"
-  }, props), {
+  return /* @__PURE__ */ React23.createElement(Box, {
+    as: "footer",
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Image/Image.tsx
 import React24 from "react";
 import { useComponentStyles as useComponentStyles14 } from "@marigold/system";
-var Image = (_a) => {
-  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
+var Image = ({ variant, ...props }) => {
   const styles = useComponentStyles14("Image", { variant });
-  return /* @__PURE__ */ React24.createElement(Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React24.createElement(Box, {
+    ...props,
     as: "img",
     css: styles
-  }));
+  });
 };
 
 // src/Inline/Inline.tsx
@@ -873,147 +848,206 @@ var ALIGNMENT_Y = {
   center: "center",
   bottom: "flex-end"
 };
-var Inline = (_a) => {
-  var _b = _a, {
-    space = "none",
-    alignX = "left",
-    alignY = "center",
-    children
-  } = _b, props = __objRest(_b, [
-    "space",
-    "alignX",
-    "alignY",
-    "children"
-  ]);
-  return /* @__PURE__ */ React25.createElement(Box, __spreadValues({
-    css: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: space,
-      alignItems: ALIGNMENT_Y[alignY],
-      justifyContent: ALIGNMENT_X[alignX]
-    }
-  }, props), children);
-};
+var Inline = ({
+  space = "none",
+  alignX = "left",
+  alignY = "center",
+  children,
+  ...props
+}) => /* @__PURE__ */ React25.createElement(Box, {
+  css: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space,
+    alignItems: ALIGNMENT_Y[alignY],
+    justifyContent: ALIGNMENT_X[alignX]
+  },
+  ...props
+}, children);
 
 // src/Input/Input.tsx
 import React26, { forwardRef as forwardRef5 } from "react";
 import { Box as Box12, useComponentStyles as useComponentStyles15 } from "@marigold/system";
-var Input = forwardRef5((_a, ref) => {
-  var _b = _a, { variant, size, type = "text" } = _b, props = __objRest(_b, ["variant", "size", "type"]);
-  const styles = useComponentStyles15("Input", { variant, size });
-  return /* @__PURE__ */ React26.createElement(Box12, __spreadProps(__spreadValues({}, props), {
-    ref,
-    as: "input",
-    type,
-    css: styles
-  }));
-});
+var Input = forwardRef5(
+  ({ variant, size, type = "text", ...props }, ref) => {
+    const styles = useComponentStyles15("Input", { variant, size });
+    return /* @__PURE__ */ React26.createElement(Box12, {
+      ...props,
+      ref,
+      as: "input",
+      type,
+      css: styles
+    });
+  }
+);
 
 // src/Link/Link.tsx
-import React27, { useRef as useRef5 } from "react";
+import React27, { forwardRef as forwardRef6 } from "react";
 import { useLink } from "@react-aria/link";
 import { useComponentStyles as useComponentStyles16 } from "@marigold/system";
-var Link = (_a) => {
-  var _b = _a, {
+import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
+var Link = forwardRef6(
+  ({
     as = "a",
     variant,
     size,
     children,
-    disabled
-  } = _b, props = __objRest(_b, [
-    "as",
-    "variant",
-    "size",
-    "children",
-    "disabled"
-  ]);
-  const ref = useRef5(null);
-  const { linkProps } = useLink(__spreadProps(__spreadValues({}, props), {
-    elementType: typeof as === "string" ? as : "span",
-    isDisabled: disabled
-  }), ref);
-  const styles = useComponentStyles16("Link", { variant, size });
-  return /* @__PURE__ */ React27.createElement(Box, __spreadValues(__spreadValues({
+    disabled,
+    onPress,
+    onPressStart,
+    ...props
+  }, ref) => {
+    const linkRef = useObjectRef3(ref);
+    const { linkProps } = useLink(
+      {
+        ...props,
+        elementType: typeof as === "string" ? as : "span",
+        isDisabled: disabled
+      },
+      linkRef
+    );
+    const styles = useComponentStyles16("Link", { variant, size });
+    return /* @__PURE__ */ React27.createElement(Box, {
+      as,
+      css: styles,
+      ref: linkRef,
+      ...props,
+      ...linkProps
+    }, children);
+  }
+);
+
+// src/List/List.tsx
+import React29 from "react";
+import {
+  Box as Box14,
+  useComponentStyles as useComponentStyles17
+} from "@marigold/system";
+
+// src/List/Context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var ListContext = createContext3({});
+var useListContext = () => useContext3(ListContext);
+
+// src/List/ListItem.tsx
+import React28 from "react";
+import { Box as Box13 } from "@marigold/system";
+var ListItem = ({ children, ...props }) => {
+  const { styles } = useListContext();
+  return /* @__PURE__ */ React28.createElement(Box13, {
+    ...props,
+    as: "li",
+    css: styles
+  }, children);
+};
+
+// src/List/List.tsx
+var List = ({
+  as = "ul",
+  children,
+  variant,
+  size,
+  ...props
+}) => {
+  const styles = useComponentStyles17(
+    "List",
+    { variant, size },
+    { parts: ["ul", "ol", "item"] }
+  );
+  return /* @__PURE__ */ React29.createElement(Box14, {
+    ...props,
     as,
-    css: styles,
-    ref
-  }, props), linkProps), children);
+    css: styles[as]
+  }, /* @__PURE__ */ React29.createElement(ListContext.Provider, {
+    value: { styles: styles.item }
+  }, children));
 };
+List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React30, { useRef as useRef8 } from "react";
+import React32, { useRef as useRef7 } from "react";
 import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import { useMenu } from "@react-aria/menu";
 import { DismissButton } from "@react-aria/overlays";
 import { Item } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
 import {
-  Box as Box14,
-  useComponentStyles as useComponentStyles17
+  Box as Box16,
+  useComponentStyles as useComponentStyles18
 } from "@marigold/system";
 
 // src/Menu/Context.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var MenuContext = createContext3({});
-var useMenuContext = () => useContext3(MenuContext);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var MenuContext = createContext4({});
+var useMenuContext = () => useContext4(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React28, { useRef as useRef6 } from "react";
+import React30, { useRef as useRef5 } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useMenuTrigger } from "@react-aria/menu";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { PressResponder as PressResponder2 } from "@react-aria/interactions";
 var MenuTrigger = ({ disabled, children }) => {
-  const [menuTrigger, menu] = React28.Children.toArray(children);
-  const menuTriggerRef = useRef6(null);
-  const overlayRef = useRef6(null);
+  const [menuTrigger, menu] = React30.Children.toArray(children);
+  const menuTriggerRef = useRef5(null);
+  const overlayRef = useRef5(null);
   const state = useMenuTriggerState({});
-  const { menuTriggerProps, menuProps } = useMenuTrigger({ trigger: "press", isDisabled: disabled }, state, menuTriggerRef);
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    { trigger: "press", isDisabled: disabled },
+    state,
+    menuTriggerRef
+  );
   const { overlayProps: positionProps } = useOverlayPosition({
     targetRef: menuTriggerRef,
     overlayRef,
     isOpen: state.isOpen
   });
-  const menuContext = __spreadProps(__spreadValues({}, menuProps), {
+  const menuContext = {
+    ...menuProps,
     open: state.isOpen,
     onClose: state.close,
     autoFocus: state.focusStrategy,
     triggerWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0
-  });
-  return /* @__PURE__ */ React28.createElement(MenuContext.Provider, {
+  };
+  return /* @__PURE__ */ React30.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ React28.createElement(PressResponder2, __spreadProps(__spreadValues({}, menuTriggerProps), {
+  }, /* @__PURE__ */ React30.createElement(PressResponder2, {
+    ...menuTriggerProps,
     ref: menuTriggerRef,
     isPressed: state.isOpen
-  }), menuTrigger), /* @__PURE__ */ React28.createElement(Popover, __spreadValues({
+  }, menuTrigger), /* @__PURE__ */ React30.createElement(Popover, {
     open: state.isOpen,
     onClose: state.close,
     dismissable: true,
     shouldCloseOnBlur: true,
-    ref: overlayRef
-  }, positionProps), menu));
+    ref: overlayRef,
+    ...positionProps
+  }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-import React29, { useRef as useRef7 } from "react";
+import React31, { useRef as useRef6 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { Box as Box13, useStateProps as useStateProps3 } from "@marigold/system";
+import { Box as Box15, useStateProps as useStateProps3 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   const { onClose } = useMenuContext();
-  const { menuItemProps } = useMenuItem({
-    key: item.key,
-    onAction,
-    onClose
-  }, state, ref);
+  const { menuItemProps } = useMenuItem(
+    {
+      key: item.key,
+      onAction,
+      onClose
+    },
+    state,
+    ref
+  );
   const { isFocusVisible, focusProps } = useFocusRing3();
   const stateProps = useStateProps3({
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ React29.createElement(Box13, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React31.createElement(Box15, {
     as: "li",
     ref,
     __baseCSS: {
@@ -1021,24 +1055,29 @@ var MenuItem = ({ item, state, onAction, css }) => {
         outline: 0
       }
     },
-    css
-  }, mergeProps4(menuItemProps, focusProps)), stateProps), item.rendered);
+    css,
+    ...mergeProps4(menuItemProps, focusProps),
+    ...stateProps
+  }, item.rendered);
 };
 
 // src/Menu/Menu.tsx
-var Menu = (_a) => {
-  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
-  const _a2 = useMenuContext(), { triggerWidth } = _a2, menuContext = __objRest(_a2, ["triggerWidth"]);
-  const ownProps = __spreadValues(__spreadValues({}, props), menuContext);
-  const ref = useRef8(null);
-  const state = useTreeState(__spreadProps(__spreadValues({}, ownProps), { selectionMode: "none" }));
+var Menu = ({ variant, size, ...props }) => {
+  const { triggerWidth, ...menuContext } = useMenuContext();
+  const ownProps = { ...props, ...menuContext };
+  const ref = useRef7(null);
+  const state = useTreeState({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
-  const styles = useComponentStyles17("Menu", { variant, size }, { parts: ["container", "item"] });
-  return /* @__PURE__ */ React30.createElement(FocusScope2, {
+  const styles = useComponentStyles18(
+    "Menu",
+    { variant, size },
+    { parts: ["container", "item"] }
+  );
+  return /* @__PURE__ */ React32.createElement(FocusScope2, {
     restoreFocus: true
-  }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement(DismissButton, {
+  }, /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement(DismissButton, {
     onDismiss: ownProps.onClose
-  }), /* @__PURE__ */ React30.createElement(Box14, __spreadValues({
+  }), /* @__PURE__ */ React32.createElement(Box16, {
     as: "ul",
     ref,
     style: { width: triggerWidth },
@@ -1047,14 +1086,15 @@ var Menu = (_a) => {
       p: 0,
       overflowWrap: "break-word"
     },
-    css: styles.container
-  }, menuProps), [...state.collection].map((item) => /* @__PURE__ */ React30.createElement(MenuItem, {
+    css: styles.container,
+    ...menuProps
+  }, [...state.collection].map((item) => /* @__PURE__ */ React32.createElement(MenuItem, {
     key: item.key,
     item,
     state,
     onAction: props.onSelect,
     css: styles.item
-  }))), /* @__PURE__ */ React30.createElement(DismissButton, {
+  }))), /* @__PURE__ */ React32.createElement(DismissButton, {
     onDismiss: ownProps.onClose
   })));
 };
@@ -1062,101 +1102,98 @@ Menu.Trigger = MenuTrigger;
 Menu.Item = Item;
 
 // src/Message/Message.tsx
-import React31 from "react";
+import React33 from "react";
 import { Exclamation, Info, Notification } from "@marigold/icons";
-import { useComponentStyles as useComponentStyles18 } from "@marigold/system";
-var Message = (_a) => {
-  var _b = _a, {
-    messageTitle,
-    variant = "info",
-    size,
-    children
-  } = _b, props = __objRest(_b, [
-    "messageTitle",
-    "variant",
-    "size",
-    "children"
-  ]);
-  const styles = useComponentStyles18("Message", {
-    variant,
-    size
-  }, { parts: ["container", "icon", "title", "content"] });
-  var icon = /* @__PURE__ */ React31.createElement(Info, null);
+import { useComponentStyles as useComponentStyles19 } from "@marigold/system";
+var Message = ({
+  messageTitle,
+  variant = "info",
+  size,
+  children,
+  ...props
+}) => {
+  const styles = useComponentStyles19(
+    "Message",
+    {
+      variant,
+      size
+    },
+    { parts: ["container", "icon", "title", "content"] }
+  );
+  var icon = /* @__PURE__ */ React33.createElement(Info, null);
   if (variant === "warning") {
-    icon = /* @__PURE__ */ React31.createElement(Notification, null);
+    icon = /* @__PURE__ */ React33.createElement(Notification, null);
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ React31.createElement(Exclamation, null);
+    icon = /* @__PURE__ */ React33.createElement(Exclamation, null);
   }
-  return /* @__PURE__ */ React31.createElement(Box, __spreadValues({
-    css: styles.container
-  }, props), /* @__PURE__ */ React31.createElement(Box, {
+  return /* @__PURE__ */ React33.createElement(Box, {
+    css: styles.container,
+    ...props
+  }, /* @__PURE__ */ React33.createElement(Box, {
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 }
-  }, /* @__PURE__ */ React31.createElement(Box, {
+  }, /* @__PURE__ */ React33.createElement(Box, {
     role: "presentation",
     css: styles.icon
-  }, icon), /* @__PURE__ */ React31.createElement(Box, {
+  }, icon), /* @__PURE__ */ React33.createElement(Box, {
     css: styles.title
-  }, messageTitle)), /* @__PURE__ */ React31.createElement(Box, {
+  }, messageTitle)), /* @__PURE__ */ React33.createElement(Box, {
     css: styles.content
   }, children));
 };
 
 // src/NumberField/NumberField.tsx
-import React35, { forwardRef as forwardRef6 } from "react";
+import React37, { forwardRef as forwardRef7 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps6, useObjectRef as useObjectRef3 } from "@react-aria/utils";
+import { mergeProps as mergeProps6, useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
-  Box as Box18,
-  useComponentStyles as useComponentStyles20,
+  Box as Box20,
+  useComponentStyles as useComponentStyles21,
   useStateProps as useStateProps5
 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
-import React33 from "react";
-import { Box as Box16 } from "@marigold/system";
+import React35 from "react";
+import { Box as Box18 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
-import React32 from "react";
+import React34 from "react";
 import { Exclamation as Exclamation2 } from "@marigold/icons";
 import {
-  Box as Box15,
-  useComponentStyles as useComponentStyles19
+  Box as Box17,
+  useComponentStyles as useComponentStyles20
 } from "@marigold/system";
-var HelpText = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    disabled,
-    description,
-    descriptionProps,
-    error,
-    errorMessage,
-    errorMessageProps
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "disabled",
-    "description",
-    "descriptionProps",
-    "error",
-    "errorMessage",
-    "errorMessageProps"
-  ]);
-  var _a2;
+var HelpText = ({
+  variant,
+  size,
+  disabled,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  ...props
+}) => {
+  var _a;
   const hasErrorMessage = errorMessage && error;
-  const styles = useComponentStyles19("HelpText", { variant, size }, { parts: ["container", "icon"] });
-  return /* @__PURE__ */ React32.createElement(Box15, __spreadProps(__spreadValues(__spreadValues({}, hasErrorMessage ? errorMessageProps : descriptionProps), props), {
+  const styles = useComponentStyles20(
+    "HelpText",
+    { variant, size },
+    { parts: ["container", "icon"] }
+  );
+  return /* @__PURE__ */ React34.createElement(Box17, {
+    ...hasErrorMessage ? errorMessageProps : descriptionProps,
+    ...props,
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles.container
-  }), hasErrorMessage ? /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Exclamation2, {
+  }, hasErrorMessage ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(Exclamation2, {
     role: "presentation",
-    size: ((_a2 = styles == null ? void 0 : styles.icon) == null ? void 0 : _a2.size) || 16
-  }), errorMessage) : /* @__PURE__ */ React32.createElement(React32.Fragment, null, description));
+    size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
+  }), errorMessage) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, description));
 };
 
 // src/FieldBase/FieldBase.tsx
@@ -1177,13 +1214,16 @@ var FieldBase = ({
   stateProps
 }) => {
   const hasHelpText = !!description || errorMessage && error;
-  return /* @__PURE__ */ React33.createElement(Box16, {
+  return /* @__PURE__ */ React35.createElement(Box18, {
     css: { display: "flex", flexDirection: "column", width }
-  }, label && /* @__PURE__ */ React33.createElement(Label, __spreadValues(__spreadValues({
+  }, label && /* @__PURE__ */ React35.createElement(Label, {
     required,
     variant,
-    size
-  }, labelProps), stateProps), label), children, hasHelpText && /* @__PURE__ */ React33.createElement(HelpText, __spreadProps(__spreadValues({}, stateProps), {
+    size,
+    ...labelProps,
+    ...stateProps
+  }, label), children, hasHelpText && /* @__PURE__ */ React35.createElement(HelpText, {
+    ...stateProps,
     variant,
     size,
     disabled,
@@ -1192,39 +1232,41 @@ var FieldBase = ({
     error,
     errorMessage,
     errorMessageProps
-  })));
+  }));
 };
 
 // src/NumberField/StepButton.tsx
-import React34, { useRef as useRef9 } from "react";
+import React36, { useRef as useRef8 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { Box as Box17, useStateProps as useStateProps4 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React34.createElement(Box17, {
+import { Box as Box19, useStateProps as useStateProps4 } from "@marigold/system";
+var Plus = () => /* @__PURE__ */ React36.createElement(Box19, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React34.createElement("path", {
+}, /* @__PURE__ */ React36.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__ */ React34.createElement(Box17, {
+var Minus = () => /* @__PURE__ */ React36.createElement(Box19, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React34.createElement("path", {
+}, /* @__PURE__ */ React36.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
 }));
-var StepButton = (_a) => {
-  var _b = _a, { direction, css } = _b, props = __objRest(_b, ["direction", "css"]);
-  const ref = useRef9(null);
-  const { buttonProps, isPressed } = useButton3(__spreadProps(__spreadValues({}, props), { elementType: "div" }), ref);
+var StepButton = ({ direction, css, ...props }) => {
+  const ref = useRef8(null);
+  const { buttonProps, isPressed } = useButton3(
+    { ...props, elementType: "div" },
+    ref
+  );
   const { hoverProps, isHovered } = useHover2(props);
   const stateProps = useStateProps4({
     active: isPressed,
@@ -1232,20 +1274,22 @@ var StepButton = (_a) => {
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React34.createElement(Box17, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React36.createElement(Box19, {
     __baseCSS: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       cursor: props.isDisabled ? "not-allowed" : "pointer"
     },
-    css
-  }, mergeProps5(buttonProps, hoverProps)), stateProps), /* @__PURE__ */ React34.createElement(Icon3, null));
+    css,
+    ...mergeProps5(buttonProps, hoverProps),
+    ...stateProps
+  }, /* @__PURE__ */ React36.createElement(Icon3, null));
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = forwardRef6((_a, ref) => {
-  var _b = _a, {
+var NumberField = forwardRef7(
+  ({
     variant,
     size,
     width,
@@ -1253,92 +1297,96 @@ var NumberField = forwardRef6((_a, ref) => {
     required,
     readOnly,
     error,
-    hideStepper
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "disabled",
-    "required",
-    "readOnly",
-    "error",
-    "hideStepper"
-  ]);
-  const props = __spreadValues({
-    isDisabled: disabled,
-    isRequired: required,
-    isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, rest);
-  const showStepper = !hideStepper;
-  const { locale } = useLocale();
-  const inputRef = useObjectRef3(ref);
-  const state = useNumberFieldState(__spreadProps(__spreadValues({}, props), { locale }));
-  const {
-    labelProps,
-    groupProps,
-    inputProps,
-    descriptionProps,
-    errorMessageProps,
-    incrementButtonProps,
-    decrementButtonProps
-  } = useNumberField(props, state, inputRef);
-  const { hoverProps, isHovered } = useHover3({ isDisabled: disabled });
-  const { focusProps, isFocused } = useFocusRing4({
-    within: true,
-    isTextInput: true,
-    autoFocus: props.autoFocus
-  });
-  const styles = useComponentStyles20("NumberField", { variant, size }, { parts: ["group", "stepper"] });
-  const stateProps = useStateProps5({
-    hover: isHovered,
-    focus: isFocused,
-    disabled,
-    readOnly,
-    error
-  });
-  return /* @__PURE__ */ React35.createElement(FieldBase, {
-    label: props.label,
-    labelProps,
-    required,
-    description: props.description,
-    descriptionProps,
-    error,
-    errorMessage: props.errorMessage,
-    errorMessageProps,
-    stateProps,
-    variant,
-    size,
-    width
-  }, /* @__PURE__ */ React35.createElement(Box18, __spreadValues(__spreadValues({
-    "data-group": true,
-    __baseCSS: {
-      display: "flex",
-      alignItems: "stretch",
-      "> input": {
-        flexGrow: 1
-      }
-    },
-    css: styles.group
-  }, mergeProps6(groupProps, focusProps, hoverProps)), stateProps), showStepper && /* @__PURE__ */ React35.createElement(StepButton, __spreadValues({
-    direction: "down",
-    css: styles.stepper
-  }, decrementButtonProps)), /* @__PURE__ */ React35.createElement(Input, __spreadValues(__spreadValues({
-    ref: inputRef,
-    variant,
-    size
-  }, inputProps), stateProps)), showStepper && /* @__PURE__ */ React35.createElement(StepButton, __spreadValues({
-    direction: "up",
-    css: styles.stepper
-  }, incrementButtonProps))));
-});
+    hideStepper,
+    ...rest
+  }, ref) => {
+    const props = {
+      isDisabled: disabled,
+      isRequired: required,
+      isReadOnly: readOnly,
+      validationState: error ? "invalid" : "valid",
+      ...rest
+    };
+    const showStepper = !hideStepper;
+    const { locale } = useLocale();
+    const inputRef = useObjectRef4(ref);
+    const state = useNumberFieldState({ ...props, locale });
+    const {
+      labelProps,
+      groupProps,
+      inputProps,
+      descriptionProps,
+      errorMessageProps,
+      incrementButtonProps,
+      decrementButtonProps
+    } = useNumberField(props, state, inputRef);
+    const { hoverProps, isHovered } = useHover3({ isDisabled: disabled });
+    const { focusProps, isFocused } = useFocusRing4({
+      within: true,
+      isTextInput: true,
+      autoFocus: props.autoFocus
+    });
+    const styles = useComponentStyles21(
+      "NumberField",
+      { variant, size },
+      { parts: ["group", "stepper"] }
+    );
+    const stateProps = useStateProps5({
+      hover: isHovered,
+      focus: isFocused,
+      disabled,
+      readOnly,
+      error
+    });
+    return /* @__PURE__ */ React37.createElement(FieldBase, {
+      label: props.label,
+      labelProps,
+      required,
+      description: props.description,
+      descriptionProps,
+      error,
+      errorMessage: props.errorMessage,
+      errorMessageProps,
+      stateProps,
+      variant,
+      size,
+      width
+    }, /* @__PURE__ */ React37.createElement(Box20, {
+      "data-group": true,
+      __baseCSS: {
+        display: "flex",
+        alignItems: "stretch",
+        "> input": {
+          flexGrow: 1
+        }
+      },
+      css: styles.group,
+      ...mergeProps6(groupProps, focusProps, hoverProps),
+      ...stateProps
+    }, showStepper && /* @__PURE__ */ React37.createElement(StepButton, {
+      direction: "down",
+      css: styles.stepper,
+      ...decrementButtonProps
+    }), /* @__PURE__ */ React37.createElement(Input, {
+      ref: inputRef,
+      variant,
+      size,
+      ...inputProps,
+      ...stateProps
+    }), showStepper && /* @__PURE__ */ React37.createElement(StepButton, {
+      direction: "up",
+      css: styles.stepper,
+      ...incrementButtonProps
+    })));
+  }
+);
 
 // src/Provider/index.ts
 import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React36 from "react";
+import React38 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -1356,81 +1404,82 @@ function MarigoldProvider({
   const outer = useTheme();
   const isTopLevel = outer.theme === __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`);
+    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__ */ React36.createElement(ThemeProvider, {
+  return /* @__PURE__ */ React38.createElement(ThemeProvider, {
     theme
-  }, /* @__PURE__ */ React36.createElement(Global, {
+  }, /* @__PURE__ */ React38.createElement(Global, {
     normalizeDocument: isTopLevel && normalizeDocument,
     selector
-  }), isTopLevel ? /* @__PURE__ */ React36.createElement(OverlayProvider, null, children) : children);
+  }), isTopLevel ? /* @__PURE__ */ React38.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React38, {
-  forwardRef as forwardRef7
+import React40, {
+  forwardRef as forwardRef8
 } from "react";
 import { useHover as useHover4 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import {
-  Box as Box20,
-  useComponentStyles as useComponentStyles22,
+  Box as Box22,
+  useComponentStyles as useComponentStyles23,
   useStateProps as useStateProps6
 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var RadioGroupContext = createContext4(null);
-var useRadioGroupContext = () => useContext4(RadioGroupContext);
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var RadioGroupContext = createContext5(
+  null
+);
+var useRadioGroupContext = () => useContext5(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React37 from "react";
+import React39 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import {
-  Box as Box19,
-  useComponentStyles as useComponentStyles21
+  Box as Box21,
+  useComponentStyles as useComponentStyles22
 } from "@marigold/system";
-var RadioGroup = (_a) => {
-  var _b = _a, {
-    children,
-    orientation = "vertical",
-    size,
-    variant,
-    width,
-    required,
-    disabled,
-    readOnly,
-    error
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "orientation",
-    "size",
-    "variant",
-    "width",
-    "required",
-    "disabled",
-    "readOnly",
-    "error"
-  ]);
-  const props = __spreadValues({
+var RadioGroup = ({
+  children,
+  orientation = "vertical",
+  size,
+  variant,
+  width,
+  required,
+  disabled,
+  readOnly,
+  error,
+  ...rest
+}) => {
+  const props = {
     isRequired: required,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, rest);
+    validationState: error ? "invalid" : "valid",
+    ...rest
+  };
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps } = useRadioGroup(props, state);
-  const styles = useComponentStyles21("RadioGroup", { variant, size }, { parts: ["container", "group"] });
-  return /* @__PURE__ */ React37.createElement(Box19, __spreadProps(__spreadValues({}, radioGroupProps), {
+  const styles = useComponentStyles22(
+    "RadioGroup",
+    { variant, size },
+    { parts: ["container", "group"] }
+  );
+  return /* @__PURE__ */ React39.createElement(Box21, {
+    ...radioGroupProps,
     css: styles.container
-  }), props.label && /* @__PURE__ */ React37.createElement(Label, __spreadValues({
+  }, props.label && /* @__PURE__ */ React39.createElement(Label, {
     as: "span",
-    required
-  }, labelProps), props.label), /* @__PURE__ */ React37.createElement(Box19, {
+    required,
+    ...labelProps
+  }, props.label), /* @__PURE__ */ React39.createElement(Box21, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1440,100 +1489,109 @@ var RadioGroup = (_a) => {
       gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
     },
     css: styles.group
-  }, /* @__PURE__ */ React37.createElement(RadioGroupContext.Provider, {
-    value: __spreadValues({ variant, size, width, error }, state)
+  }, /* @__PURE__ */ React39.createElement(RadioGroupContext.Provider, {
+    value: { variant, size, width, error, ...state }
   }, children)));
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React38.createElement("svg", {
+var Dot = () => /* @__PURE__ */ React40.createElement("svg", {
   viewBox: "0 0 6 6"
-}, /* @__PURE__ */ React38.createElement("circle", {
+}, /* @__PURE__ */ React40.createElement("circle", {
   fill: "currentColor",
   cx: "3",
   cy: "3",
   r: "3"
 }));
-var Icon2 = (_a) => {
-  var _b = _a, { checked, css } = _b, props = __objRest(_b, ["checked", "css"]);
-  return /* @__PURE__ */ React38.createElement(Box20, __spreadValues({
-    "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), checked ? /* @__PURE__ */ React38.createElement(Dot, null) : null);
-};
-var Radio = forwardRef7((_a, ref) => {
-  var _b = _a, { width, disabled } = _b, props = __objRest(_b, ["width", "disabled"]);
-  const _a2 = useRadioGroupContext(), {
-    variant,
-    size,
-    error,
-    width: groupWidth
-  } = _a2, state = __objRest(_a2, [
-    "variant",
-    "size",
-    "error",
-    "width"
-  ]);
-  const inputRef = useObjectRef4(ref);
-  const { inputProps } = useRadio(__spreadValues({ isDisabled: disabled }, props), state, inputRef);
-  const styles = useComponentStyles22("Radio", { variant: variant || props.variant, size: size || props.size }, { parts: ["container", "label", "radio"] });
-  const { hoverProps, isHovered } = useHover4({});
-  const { isFocusVisible, focusProps } = useFocusRing5();
-  const stateProps = useStateProps6({
-    hover: isHovered,
-    focus: isFocusVisible,
-    checked: inputProps.checked,
-    disabled: inputProps.disabled,
-    readOnly: props.readOnly,
-    error
-  });
-  return /* @__PURE__ */ React38.createElement(Box20, __spreadValues(__spreadValues({
-    as: "label",
-    __baseCSS: {
-      display: "flex",
-      alignItems: "center",
-      gap: "1ch",
-      position: "relative",
-      width: width || groupWidth || "100%"
-    },
-    css: styles.container
-  }, hoverProps), stateProps), /* @__PURE__ */ React38.createElement(Box20, __spreadValues(__spreadValues({
-    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__ */ React38.createElement(Icon2, __spreadValues({
-    checked: inputProps.checked,
-    css: styles.radio
-  }, stateProps)), /* @__PURE__ */ React38.createElement(Box20, __spreadValues({
-    css: styles.label
-  }, stateProps), props.children));
-});
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React40.createElement(Box22, {
+  "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
+}, checked ? /* @__PURE__ */ React40.createElement(Dot, null) : null);
+var Radio = forwardRef8(
+  ({ width, disabled, ...props }, ref) => {
+    const {
+      variant,
+      size,
+      error,
+      width: groupWidth,
+      ...state
+    } = useRadioGroupContext();
+    const inputRef = useObjectRef5(ref);
+    const { inputProps } = useRadio(
+      { isDisabled: disabled, ...props },
+      state,
+      inputRef
+    );
+    const styles = useComponentStyles23(
+      "Radio",
+      { variant: variant || props.variant, size: size || props.size },
+      { parts: ["container", "label", "radio"] }
+    );
+    const { hoverProps, isHovered } = useHover4({});
+    const { isFocusVisible, focusProps } = useFocusRing5();
+    const stateProps = useStateProps6({
+      hover: isHovered,
+      focus: isFocusVisible,
+      checked: inputProps.checked,
+      disabled: inputProps.disabled,
+      readOnly: props.readOnly,
+      error
+    });
+    return /* @__PURE__ */ React40.createElement(Box22, {
+      as: "label",
+      __baseCSS: {
+        display: "flex",
+        alignItems: "center",
+        gap: "1ch",
+        position: "relative",
+        width: width || groupWidth || "100%"
+      },
+      css: styles.container,
+      ...hoverProps,
+      ...stateProps
+    }, /* @__PURE__ */ React40.createElement(Box22, {
+      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__ */ React40.createElement(Icon2, {
+      checked: inputProps.checked,
+      css: styles.radio,
+      ...stateProps
+    }), /* @__PURE__ */ React40.createElement(Box22, {
+      css: styles.label,
+      ...stateProps
+    }, props.children));
+  }
+);
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React42, {
-  forwardRef as forwardRef9,
-  useRef as useRef11
+import React44, {
+  forwardRef as forwardRef10,
+  useRef as useRef10
 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { FocusScope as FocusScope3, useFocusRing as useFocusRing6 } from "@react-aria/focus";
@@ -1542,52 +1600,58 @@ import { DismissButton as DismissButton2, useOverlayPosition as useOverlayPositi
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSelectState } from "@react-stately/select";
 import { Item as Item2, Section } from "@react-stately/collections";
-import { mergeProps as mergeProps7, useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { mergeProps as mergeProps7, useObjectRef as useObjectRef7 } from "@react-aria/utils";
 import {
-  Box as Box24,
-  useComponentStyles as useComponentStyles24,
+  Box as Box26,
+  useComponentStyles as useComponentStyles25,
   useStateProps as useStateProps8
 } from "@marigold/system";
 
 // src/ListBox/ListBox.tsx
-import React41, { forwardRef as forwardRef8 } from "react";
-import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
+import React43, { forwardRef as forwardRef9 } from "react";
+import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
 import {
-  Box as Box23,
-  useComponentStyles as useComponentStyles23
+  Box as Box25,
+  useComponentStyles as useComponentStyles24
 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
 
 // src/ListBox/Context.ts
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var ListBoxContext = createContext5({});
-var useListBoxContext = () => useContext5(ListBoxContext);
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var ListBoxContext = createContext6({});
+var useListBoxContext = () => useContext6(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-import React40 from "react";
+import React42 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
-import { Box as Box22 } from "@marigold/system";
+import { Box as Box24 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React39, { useRef as useRef10 } from "react";
+import React41, { useRef as useRef9 } from "react";
 import { useOption } from "@react-aria/listbox";
-import { Box as Box21, useStateProps as useStateProps7 } from "@marigold/system";
+import { Box as Box23, useStateProps as useStateProps7 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
-  const ref = useRef10(null);
-  const { optionProps, isSelected, isDisabled, isFocused } = useOption({
-    key: item.key
-  }, state, ref);
+  const ref = useRef9(null);
+  const { optionProps, isSelected, isDisabled, isFocused } = useOption(
+    {
+      key: item.key
+    },
+    state,
+    ref
+  );
   const { styles } = useListBoxContext();
   const stateProps = useStateProps7({
     selected: isSelected,
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React39.createElement(Box21, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React41.createElement(Box23, {
     as: "li",
     ref,
-    css: styles.option
-  }, optionProps), stateProps), item.rendered);
+    css: styles.option,
+    ...optionProps,
+    ...stateProps
+  }, item.rendered);
 };
 
 // src/ListBox/ListBoxSection.tsx
@@ -1597,16 +1661,19 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
+  return /* @__PURE__ */ React42.createElement(Box24, {
     as: "li",
-    css: styles.section
-  }, itemProps), section.rendered && /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
-    css: styles.sectionTitle
-  }, headingProps), section.rendered), /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
+    css: styles.section,
+    ...itemProps
+  }, section.rendered && /* @__PURE__ */ React42.createElement(Box24, {
+    css: styles.sectionTitle,
+    ...headingProps
+  }, section.rendered), /* @__PURE__ */ React42.createElement(Box24, {
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
-    css: styles.list
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ React40.createElement(ListBoxOption, {
+    css: styles.list,
+    ...groupProps
+  }, [...section.childNodes].map((node) => /* @__PURE__ */ React42.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
@@ -1614,30 +1681,38 @@ var ListBoxSection = ({ section, state }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = forwardRef8((_a, ref) => {
-  var _b = _a, { state, variant, size } = _b, props = __objRest(_b, ["state", "variant", "size"]);
-  const innerRef = useObjectRef5(ref);
-  const { listBoxProps } = useListBox(props, state, innerRef);
-  const styles = useComponentStyles23("ListBox", { variant, size }, { parts: ["container", "list", "option", "section", "sectionTitle"] });
-  return /* @__PURE__ */ React41.createElement(ListBoxContext.Provider, {
-    value: { styles }
-  }, /* @__PURE__ */ React41.createElement(Box23, {
-    css: styles.container
-  }, /* @__PURE__ */ React41.createElement(Box23, __spreadValues({
-    as: "ul",
-    ref: innerRef,
-    __baseCSS: { listStyle: "none", p: 0 },
-    css: styles.list
-  }, listBoxProps), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ React41.createElement(ListBoxSection, {
-    key: item.key,
-    section: item,
-    state
-  }) : /* @__PURE__ */ React41.createElement(ListBoxOption, {
-    key: item.key,
-    item,
-    state
-  })))));
-});
+var ListBox = forwardRef9(
+  ({ state, variant, size, ...props }, ref) => {
+    const innerRef = useObjectRef6(ref);
+    const { listBoxProps } = useListBox(props, state, innerRef);
+    const styles = useComponentStyles24(
+      "ListBox",
+      { variant, size },
+      { parts: ["container", "list", "option", "section", "sectionTitle"] }
+    );
+    return /* @__PURE__ */ React43.createElement(ListBoxContext.Provider, {
+      value: { styles }
+    }, /* @__PURE__ */ React43.createElement(Box25, {
+      css: styles.container
+    }, /* @__PURE__ */ React43.createElement(Box25, {
+      as: "ul",
+      ref: innerRef,
+      __baseCSS: { listStyle: "none", p: 0 },
+      css: styles.list,
+      ...listBoxProps
+    }, [...state.collection].map(
+      (item) => item.type === "section" ? /* @__PURE__ */ React43.createElement(ListBoxSection, {
+        key: item.key,
+        section: item,
+        state
+      }) : /* @__PURE__ */ React43.createElement(ListBoxOption, {
+        key: item.key,
+        item,
+        state
+      })
+    ))));
+  }
+);
 
 // src/Select/intl.ts
 var messages = {
@@ -1650,7 +1725,7 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React42.createElement(Box24, {
+var Chevron = ({ css }) => /* @__PURE__ */ React44.createElement(Box26, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   css,
@@ -1658,117 +1733,131 @@ var Chevron = ({ css }) => /* @__PURE__ */ React42.createElement(Box24, {
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   strokeWidth: 2
-}, /* @__PURE__ */ React42.createElement("path", {
+}, /* @__PURE__ */ React44.createElement("path", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   d: "M19 9l-7 7-7-7"
 }));
-var Select = forwardRef9((_a, ref) => {
-  var _b = _a, { variant, size, width, open, disabled, required, error } = _b, rest = __objRest(_b, ["variant", "size", "width", "open", "disabled", "required", "error"]);
-  const formatMessage = useMessageFormatter(messages);
-  const buttonRef = useObjectRef6(ref);
-  const props = __spreadValues({
-    isOpen: open,
-    isDisabled: disabled,
-    isRequired: required,
-    validationState: error ? "invalid" : "valid",
-    placeholder: rest.placeholder || formatMessage("placeholder")
-  }, rest);
-  const state = useSelectState(props);
-  const {
-    labelProps,
-    triggerProps,
-    valueProps,
-    menuProps,
-    descriptionProps,
-    errorMessageProps
-  } = useSelect(props, state, buttonRef);
-  const { buttonProps } = useButton4(__spreadValues({ isDisabled: disabled }, triggerProps), buttonRef);
-  const { focusProps, isFocusVisible } = useFocusRing6();
-  const overlayRef = useRef11(null);
-  const { overlayProps: positionProps } = useOverlayPosition2({
-    targetRef: buttonRef,
-    overlayRef,
-    isOpen: state.isOpen,
-    placement: "bottom left"
-  });
-  const styles = useComponentStyles24("Select", { variant, size }, { parts: ["container", "button", "icon"] });
-  const stateProps = useStateProps8({
-    disabled,
-    error,
-    focusVisible: isFocusVisible,
-    expanded: state.isOpen
-  });
-  return /* @__PURE__ */ React42.createElement(FieldBase, {
-    variant,
-    size,
-    width,
-    label: props.label,
-    labelProps: __spreadValues({ as: "span" }, labelProps),
-    description: props.description,
-    descriptionProps,
-    error,
-    errorMessage: props.errorMessage,
-    errorMessageProps,
-    stateProps,
-    disabled,
-    required
-  }, /* @__PURE__ */ React42.createElement(HiddenSelect, {
-    state,
-    triggerRef: buttonRef,
-    label: props.label,
-    name: props.name,
-    isDisabled: disabled
-  }), /* @__PURE__ */ React42.createElement(Box24, __spreadValues(__spreadValues({
-    as: "button",
-    __baseCSS: {
-      display: "flex",
-      position: "relative",
-      alignItems: "center",
-      justifyContent: "space-between",
-      width: "100%"
-    },
-    css: styles.button,
-    ref: buttonRef
-  }, mergeProps7(buttonProps, focusProps)), stateProps), /* @__PURE__ */ React42.createElement(Box24, __spreadValues({
-    css: {
-      overflow: "hidden",
-      whiteSpace: "nowrap"
-    }
-  }, valueProps), state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React42.createElement(Chevron, {
-    css: styles.icon
-  })), /* @__PURE__ */ React42.createElement(Popover, __spreadValues({
-    open: state.isOpen,
-    onClose: state.close,
-    dismissable: true,
-    shouldCloseOnBlur: true,
-    minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
-    ref: overlayRef
-  }, positionProps), /* @__PURE__ */ React42.createElement(FocusScope3, {
-    restoreFocus: true
-  }, /* @__PURE__ */ React42.createElement(DismissButton2, {
-    onDismiss: state.close
-  }), /* @__PURE__ */ React42.createElement(ListBox, __spreadValues({
-    state,
-    variant,
-    size
-  }, menuProps)), /* @__PURE__ */ React42.createElement(DismissButton2, {
-    onDismiss: state.close
-  }))));
-});
+var Select = forwardRef10(
+  ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
+    const formatMessage = useMessageFormatter(messages);
+    const buttonRef = useObjectRef7(ref);
+    const props = {
+      isOpen: open,
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: error ? "invalid" : "valid",
+      placeholder: rest.placeholder || formatMessage("placeholder"),
+      ...rest
+    };
+    const state = useSelectState(props);
+    const {
+      labelProps,
+      triggerProps,
+      valueProps,
+      menuProps,
+      descriptionProps,
+      errorMessageProps
+    } = useSelect(props, state, buttonRef);
+    const { buttonProps } = useButton4(
+      { isDisabled: disabled, ...triggerProps },
+      buttonRef
+    );
+    const { focusProps, isFocusVisible } = useFocusRing6();
+    const overlayRef = useRef10(null);
+    const { overlayProps: positionProps } = useOverlayPosition2({
+      targetRef: buttonRef,
+      overlayRef,
+      isOpen: state.isOpen,
+      placement: "bottom left"
+    });
+    const styles = useComponentStyles25(
+      "Select",
+      { variant, size },
+      { parts: ["container", "button", "icon"] }
+    );
+    const stateProps = useStateProps8({
+      disabled,
+      error,
+      focusVisible: isFocusVisible,
+      expanded: state.isOpen
+    });
+    return /* @__PURE__ */ React44.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__ */ React44.createElement(HiddenSelect, {
+      state,
+      triggerRef: buttonRef,
+      label: props.label,
+      name: props.name,
+      isDisabled: disabled
+    }), /* @__PURE__ */ React44.createElement(Box26, {
+      as: "button",
+      __baseCSS: {
+        display: "flex",
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%"
+      },
+      css: styles.button,
+      ref: buttonRef,
+      ...mergeProps7(buttonProps, focusProps),
+      ...stateProps
+    }, /* @__PURE__ */ React44.createElement(Box26, {
+      css: {
+        overflow: "hidden",
+        whiteSpace: "nowrap"
+      },
+      ...valueProps
+    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React44.createElement(Chevron, {
+      css: styles.icon
+    })), /* @__PURE__ */ React44.createElement(Popover, {
+      open: state.isOpen,
+      onClose: state.close,
+      dismissable: true,
+      shouldCloseOnBlur: true,
+      minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
+      ref: overlayRef,
+      ...positionProps
+    }, /* @__PURE__ */ React44.createElement(FocusScope3, {
+      restoreFocus: true
+    }, /* @__PURE__ */ React44.createElement(DismissButton2, {
+      onDismiss: state.close
+    }), /* @__PURE__ */ React44.createElement(ListBox, {
+      state,
+      variant,
+      size,
+      ...menuProps
+    }), /* @__PURE__ */ React44.createElement(DismissButton2, {
+      onDismiss: state.close
+    }))));
+  }
+);
 Select.Option = Item2;
 Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React44, { forwardRef as forwardRef10 } from "react";
+import React46, { forwardRef as forwardRef11 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
-import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
-import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
+import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useComponentStyles as useComponentStyles26 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React43, { useEffect } from "react";
+import React45, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
 import { mergeProps as mergeProps8 } from "@react-aria/utils";
 import { useStateProps as useStateProps9 } from "@marigold/system";
@@ -1778,97 +1867,116 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/Slider/Thumb.tsx
 import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
-var Thumb = (_a) => {
-  var _b = _a, { state, trackRef, styles } = _b, props = __objRest(_b, ["state", "trackRef", "styles"]);
+var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = React43.useRef(null);
+  const inputRef = React45.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing7();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
   const stateProps = useStateProps9({
     focus: focused,
     disabled
   });
-  const { thumbProps, inputProps } = useSliderThumb({
-    index: 0,
-    trackRef,
-    inputRef,
-    isDisabled: disabled
-  }, state);
+  const { thumbProps, inputProps } = useSliderThumb(
+    {
+      index: 0,
+      trackRef,
+      inputRef,
+      isDisabled: disabled
+    },
+    state
+  );
   useEffect(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React43.createElement(Box, {
+  return /* @__PURE__ */ React45.createElement(Box, {
     __baseCSS: {
       position: "absolute",
       top: 16,
       transform: "translateX(-50%)",
       left: `${state.getThumbPercent(0) * 100}%`
     }
-  }, /* @__PURE__ */ React43.createElement(Box, __spreadValues(__spreadProps(__spreadValues({}, thumbProps), {
-    __baseCSS: styles
-  }), stateProps), /* @__PURE__ */ React43.createElement(VisuallyHidden, null, /* @__PURE__ */ React43.createElement(Box, __spreadValues({
+  }, /* @__PURE__ */ React45.createElement(Box, {
+    ...thumbProps,
+    __baseCSS: styles,
+    ...stateProps
+  }, /* @__PURE__ */ React45.createElement(VisuallyHidden, null, /* @__PURE__ */ React45.createElement(Box, {
     as: "input",
     type: "range",
-    ref: inputRef
-  }, mergeProps8(inputProps, focusProps))))));
+    ref: inputRef,
+    ...mergeProps8(inputProps, focusProps)
+  }))));
 };
 
 // src/Slider/Slider.tsx
-var Slider = forwardRef10((_a, ref) => {
-  var _b = _a, { variant, size, width = "100%" } = _b, props = __objRest(_b, ["variant", "size", "width"]);
-  const { formatOptions } = props;
-  const trackRef = useObjectRef7(ref);
-  const numberFormatter = useNumberFormatter(formatOptions);
-  const state = useSliderState(__spreadProps(__spreadValues({}, props), { numberFormatter }));
-  const { groupProps, trackProps, labelProps, outputProps } = useSlider(__spreadValues({
-    label: props.children
-  }, props), state, trackRef);
-  const styles = useComponentStyles25("Slider", { variant, size }, { parts: ["track", "thumb", "label", "output"] });
-  return /* @__PURE__ */ React44.createElement(Box, __spreadValues({
-    __baseCSS: {
-      display: "flex",
-      flexDirection: "column",
-      touchAction: "none",
-      width
-    }
-  }, groupProps), /* @__PURE__ */ React44.createElement(Box, {
-    __baseCSS: { display: "flex", alignSelf: "stretch" }
-  }, props.children && /* @__PURE__ */ React44.createElement(Box, __spreadValues({
-    as: "label",
-    __baseCSS: styles.label
-  }, labelProps), props.children), /* @__PURE__ */ React44.createElement(Box, __spreadProps(__spreadValues({
-    as: "output"
-  }, outputProps), {
-    __baseCSS: { flex: "1 0 auto", textAlign: "end" },
-    css: styles.output
-  }), state.getThumbValueLabel(0))), /* @__PURE__ */ React44.createElement(Box, __spreadProps(__spreadValues({}, trackProps), {
-    ref: trackRef,
-    __baseCSS: {
-      position: "relative",
-      height: 32,
-      width: "100%",
-      cursor: props.disabled ? "not-allowed" : "pointer"
-    }
-  }), /* @__PURE__ */ React44.createElement(Box, {
-    __baseCSS: styles.track
-  }), /* @__PURE__ */ React44.createElement(Thumb, {
-    state,
-    trackRef,
-    disabled: props.disabled,
-    styles: styles.thumb
-  })));
-});
+var Slider = forwardRef11(
+  ({ variant, size, width = "100%", ...props }, ref) => {
+    const { formatOptions } = props;
+    const trackRef = useObjectRef8(ref);
+    const numberFormatter = useNumberFormatter(formatOptions);
+    const state = useSliderState({ ...props, numberFormatter });
+    const { groupProps, trackProps, labelProps, outputProps } = useSlider(
+      {
+        label: props.children,
+        ...props
+      },
+      state,
+      trackRef
+    );
+    const styles = useComponentStyles26(
+      "Slider",
+      { variant, size },
+      { parts: ["track", "thumb", "label", "output"] }
+    );
+    return /* @__PURE__ */ React46.createElement(Box, {
+      __baseCSS: {
+        display: "flex",
+        flexDirection: "column",
+        touchAction: "none",
+        width
+      },
+      ...groupProps
+    }, /* @__PURE__ */ React46.createElement(Box, {
+      __baseCSS: { display: "flex", alignSelf: "stretch" }
+    }, props.children && /* @__PURE__ */ React46.createElement(Box, {
+      as: "label",
+      __baseCSS: styles.label,
+      ...labelProps
+    }, props.children), /* @__PURE__ */ React46.createElement(Box, {
+      as: "output",
+      ...outputProps,
+      __baseCSS: { flex: "1 0 auto", textAlign: "end" },
+      css: styles.output
+    }, state.getThumbValueLabel(0))), /* @__PURE__ */ React46.createElement(Box, {
+      ...trackProps,
+      ref: trackRef,
+      __baseCSS: {
+        position: "relative",
+        height: 32,
+        width: "100%",
+        cursor: props.disabled ? "not-allowed" : "pointer"
+      }
+    }, /* @__PURE__ */ React46.createElement(Box, {
+      __baseCSS: styles.track
+    }), /* @__PURE__ */ React46.createElement(Thumb, {
+      state,
+      trackRef,
+      disabled: props.disabled,
+      styles: styles.thumb
+    })));
+  }
+);
 
 // src/Split/Split.tsx
-import React45 from "react";
-import { Box as Box25 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React45.createElement(Box25, __spreadProps(__spreadValues({}, props), {
+import React47 from "react";
+import { Box as Box27 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React47.createElement(Box27, {
+  ...props,
   role: "separator",
   css: { flexGrow: 1 }
-}));
+});
 
 // src/Stack/Stack.tsx
-import React46 from "react";
+import React48 from "react";
 var ALIGNMENT_X2 = {
   left: "flex-start",
   center: "center",
@@ -1879,136 +1987,132 @@ var ALIGNMENT_Y2 = {
   center: "center",
   bottom: "flex-end"
 };
-var Stack = (_a) => {
-  var _b = _a, {
-    children,
-    space = "none",
-    alignX = "left",
-    alignY = "top",
-    stretch = false
-  } = _b, props = __objRest(_b, [
-    "children",
-    "space",
-    "alignX",
-    "alignY",
-    "stretch"
-  ]);
-  return /* @__PURE__ */ React46.createElement(Box, __spreadValues({
-    css: {
-      display: "flex",
-      flexDirection: "column",
-      p: 0,
-      gap: space,
-      alignItems: ALIGNMENT_X2[alignX],
-      justifyContent: ALIGNMENT_Y2[alignY],
-      blockSize: stretch ? "100%" : "auto"
-    }
-  }, props), children);
-};
+var Stack = ({
+  children,
+  space = "none",
+  alignX = "left",
+  alignY = "top",
+  stretch = false,
+  ...props
+}) => /* @__PURE__ */ React48.createElement(Box, {
+  css: {
+    display: "flex",
+    flexDirection: "column",
+    p: 0,
+    gap: space,
+    alignItems: ALIGNMENT_X2[alignX],
+    justifyContent: ALIGNMENT_Y2[alignY],
+    blockSize: stretch ? "100%" : "auto"
+  },
+  ...props
+}, children);
 
 // src/Switch/Switch.tsx
-import React47, { forwardRef as forwardRef11 } from "react";
+import React49, { forwardRef as forwardRef12 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
-import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
-  useComponentStyles as useComponentStyles26,
+  useComponentStyles as useComponentStyles27,
   useStateProps as useStateProps10
 } from "@marigold/system";
-var Switch = forwardRef11((_a, ref) => {
-  var _b = _a, {
+var Switch = forwardRef12(
+  ({
     variant,
     size,
     width = "100%",
     checked,
     disabled,
     readOnly,
-    defaultChecked
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "checked",
-    "disabled",
-    "readOnly",
-    "defaultChecked"
-  ]);
-  const inputRef = useObjectRef8(ref);
-  const props = __spreadValues({
-    isSelected: checked,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    defaultSelected: defaultChecked
-  }, rest);
-  const state = useToggleState2(props);
-  const { inputProps } = useSwitch(props, state, inputRef);
-  const { isFocusVisible, focusProps } = useFocusRing8();
-  const stateProps = useStateProps10({
-    checked: state.isSelected,
-    disabled,
-    readOnly,
-    focus: isFocusVisible
-  });
-  const styles = useComponentStyles26("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
-  return /* @__PURE__ */ React47.createElement(Box, {
-    as: "label",
-    __baseCSS: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      gap: "1ch",
-      position: "relative",
-      width
-    },
-    css: styles.container
-  }, /* @__PURE__ */ React47.createElement(Box, __spreadValues(__spreadValues({
-    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__ */ React47.createElement(Box, {
-    css: styles.label
-  }, props.children), /* @__PURE__ */ React47.createElement(Box, __spreadValues({
-    __baseCSS: {
-      position: "relative",
-      width: 48,
-      height: 24,
-      bg: "#dee2e6",
-      borderRadius: 20
-    },
-    css: styles.track
-  }, stateProps), /* @__PURE__ */ React47.createElement(Box, __spreadValues({
-    __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))));
-});
+    defaultChecked,
+    ...rest
+  }, ref) => {
+    const inputRef = useObjectRef9(ref);
+    const props = {
+      isSelected: checked,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      defaultSelected: defaultChecked,
+      ...rest
+    };
+    const state = useToggleState2(props);
+    const { inputProps } = useSwitch(props, state, inputRef);
+    const { isFocusVisible, focusProps } = useFocusRing8();
+    const stateProps = useStateProps10({
+      checked: state.isSelected,
+      disabled,
+      readOnly,
+      focus: isFocusVisible
+    });
+    const styles = useComponentStyles27(
+      "Switch",
+      { variant, size },
+      { parts: ["container", "label", "track", "thumb"] }
+    );
+    return /* @__PURE__ */ React49.createElement(Box, {
+      as: "label",
+      __baseCSS: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "1ch",
+        position: "relative",
+        width
+      },
+      css: styles.container
+    }, /* @__PURE__ */ React49.createElement(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__ */ React49.createElement(Box, {
+      css: styles.label
+    }, props.children), /* @__PURE__ */ React49.createElement(Box, {
+      __baseCSS: {
+        position: "relative",
+        width: 48,
+        height: 24,
+        bg: "#dee2e6",
+        borderRadius: 20
+      },
+      css: styles.track,
+      ...stateProps
+    }, /* @__PURE__ */ React49.createElement(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
-import React56, { useRef as useRef18 } from "react";
+import React58, { useRef as useRef17 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2019,88 +2123,98 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box31,
-  useComponentStyles as useComponentStyles27
+  Box as Box33,
+  useComponentStyles as useComponentStyles28
 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext6, useContext as useContext6 } from "react";
-var TableContext = createContext6({});
-var useTableContext = () => useContext6(TableContext);
+import { createContext as createContext7, useContext as useContext7 } from "react";
+var TableContext = createContext7({});
+var useTableContext = () => useContext7(TableContext);
 
 // src/Table/TableBody.tsx
-import React48 from "react";
+import React50 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React48.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ React50.createElement("tbody", {
+    ...rowGroupProps
+  }, children);
 };
 
 // src/Table/TableCell.tsx
-import React49, { useRef as useRef12 } from "react";
+import React51, { useRef as useRef11 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { Box as Box26, useStateProps as useStateProps11 } from "@marigold/system";
+import { Box as Box28, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
-  const ref = useRef12(null);
+  const ref = useRef11(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
-  const { gridCellProps } = useTableCell({
-    node: cell
-  }, state, ref);
+  const { gridCellProps } = useTableCell(
+    {
+      node: cell
+    },
+    state,
+    ref
+  );
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React49.createElement(Box26, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(Box28, {
     as: "td",
     ref,
-    css: styles.cell
-  }, mergeProps9(gridCellProps, focusProps)), stateProps), cell.rendered);
+    css: styles.cell,
+    ...mergeProps9(gridCellProps, focusProps),
+    ...stateProps
+  }, cell.rendered);
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React50, { useRef as useRef13 } from "react";
+import React52, { useRef as useRef12 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { Box as Box27, useStateProps as useStateProps12 } from "@marigold/system";
+import { Box as Box29, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
-var mapCheckboxProps = (_a) => {
-  var {
-    checkboxProps: _b
-  } = _a, _c = _b, {
+var mapCheckboxProps = ({
+  checkboxProps: {
     isIndeterminate,
     isSelected,
     isDisabled,
-    defaultSelected
-  } = _c, rest = __objRest(_c, [
-    "isIndeterminate",
-    "isSelected",
-    "isDisabled",
-    "defaultSelected"
-  ]);
-  const checkboxProps = __spreadValues({
+    defaultSelected,
+    ...rest
+  }
+}) => {
+  const checkboxProps = {
     disabled: isDisabled,
     checked: isSelected,
     defaultChecked: defaultSelected,
-    indeterminate: isIndeterminate
-  }, rest);
+    indeterminate: isIndeterminate,
+    ...rest
+  };
   return { checkboxProps };
 };
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef13(null);
+  const ref = useRef12(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
-  const { gridCellProps } = useTableCell2({
-    node: cell
-  }, state, ref);
-  const { checkboxProps } = mapCheckboxProps(useTableSelectionCheckbox({ key: cell.parentKey }, state));
+  const { gridCellProps } = useTableCell2(
+    {
+      node: cell
+    },
+    state,
+    ref
+  );
+  const { checkboxProps } = mapCheckboxProps(
+    useTableSelectionCheckbox({ key: cell.parentKey }, state)
+  );
   const { focusProps, isFocusVisible } = useFocusRing10();
   const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React50.createElement(Box27, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React52.createElement(Box29, {
     as: "td",
     ref,
     __baseCSS: {
@@ -2108,21 +2222,25 @@ var TableCheckboxCell = ({ cell }) => {
       verticalAlign: "middle",
       lineHeight: 1
     },
-    css: styles.cell
-  }, mergeProps10(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ React50.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+    css: styles.cell,
+    ...mergeProps10(gridCellProps, focusProps),
+    ...stateProps
+  }, /* @__PURE__ */ React52.createElement(Checkbox, {
+    ...checkboxProps
+  }));
 };
 
 // src/Table/TableColumnHeader.tsx
-import React51, { useRef as useRef14 } from "react";
+import React53, { useRef as useRef13 } from "react";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { Box as Box28, useStateProps as useStateProps13 } from "@marigold/system";
+import { Box as Box30, useStateProps as useStateProps13 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React51.createElement(Box28, {
+}) => /* @__PURE__ */ React53.createElement(Box30, {
   as: "span",
   role: "presentation",
   "aria-hidden": "true",
@@ -2134,61 +2252,74 @@ var SortIndicator = ({
 }, direction === "ascending" ? "\u25B2" : "\u25BC");
 var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = useRef14(null);
+  const ref = useRef13(null);
   const { state, styles } = useTableContext();
-  const { columnHeaderProps } = useTableColumnHeader({
-    node: column
-  }, state, ref);
+  const { columnHeaderProps } = useTableColumnHeader(
+    {
+      node: column
+    },
+    state,
+    ref
+  );
   const { hoverProps, isHovered } = useHover5({});
   const { focusProps, isFocusVisible } = useFocusRing11();
   const stateProps = useStateProps13({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React51.createElement(Box28, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React53.createElement(Box30, {
     as: "th",
     colSpan: column.colspan,
     ref,
-    css: styles.header
-  }, mergeProps11(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered, column.props.allowsSorting && /* @__PURE__ */ React51.createElement(SortIndicator, {
+    css: styles.header,
+    ...mergeProps11(columnHeaderProps, hoverProps, focusProps),
+    ...stateProps
+  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React53.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
-import React52 from "react";
+import React54 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React52.createElement("thead", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ React54.createElement("thead", {
+    ...rowGroupProps
+  }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React53, { useRef as useRef15 } from "react";
+import React55, { useRef as useRef14 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef15(null);
+  const ref = useRef14(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React53.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ React55.createElement("tr", {
+    ...rowProps,
     ref
-  }), children);
+  }, children);
 };
 
 // src/Table/TableRow.tsx
-import React54, { useRef as useRef16 } from "react";
+import React56, { useRef as useRef15 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { Box as Box29, useStateProps as useStateProps14 } from "@marigold/system";
+import { Box as Box31, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
-  const ref = useRef16(null);
+  const ref = useRef15(null);
   const { state, styles } = useTableContext();
-  const { rowProps, isPressed } = useTableRow({
-    node: row
-  }, state, ref);
+  const { rowProps, isPressed } = useTableRow(
+    {
+      node: row
+    },
+    state,
+    ref
+  );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = useFocusRing12({ within: true });
@@ -2200,15 +2331,17 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React54.createElement(Box29, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React56.createElement(Box31, {
     as: "tr",
     ref,
-    css: styles.row
-  }, mergeProps12(rowProps, focusProps, hoverProps)), stateProps), children);
+    css: styles.row,
+    ...mergeProps12(rowProps, focusProps, hoverProps),
+    ...stateProps
+  }, children);
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React55, { useRef as useRef17 } from "react";
+import React57, { useRef as useRef16 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import {
@@ -2216,13 +2349,17 @@ import {
   useTableSelectAllCheckbox
 } from "@react-aria/table";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { Box as Box30, useStateProps as useStateProps15 } from "@marigold/system";
+import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
-  const ref = useRef17(null);
+  const ref = useRef16(null);
   const { state, styles } = useTableContext();
-  const { columnHeaderProps } = useTableColumnHeader2({
-    node: column
-  }, state, ref);
+  const { columnHeaderProps } = useTableColumnHeader2(
+    {
+      node: column
+    },
+    state,
+    ref
+  );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
   const { hoverProps, isHovered } = useHover7({});
   const { focusProps, isFocusVisible } = useFocusRing13();
@@ -2230,7 +2367,7 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React55.createElement(Box30, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React57.createElement(Box32, {
     as: "th",
     ref,
     __baseCSS: {
@@ -2238,63 +2375,73 @@ var TableSelectAllCell = ({ column }) => {
       verticalAlign: "middle",
       lineHeight: 1
     },
-    css: styles.header
-  }, mergeProps13(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ React55.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+    css: styles.header,
+    ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
+    ...stateProps
+  }, /* @__PURE__ */ React57.createElement(Checkbox, {
+    ...checkboxProps
+  }));
 };
 
 // src/Table/Table.tsx
-var Table = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    stretch
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "stretch"
-  ]);
-  const tableRef = useRef18(null);
-  const state = useTableState(__spreadProps(__spreadValues({}, props), {
+var Table = ({
+  variant,
+  size,
+  stretch,
+  ...props
+}) => {
+  const tableRef = useRef17(null);
+  const state = useTableState({
+    ...props,
     showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
-  }));
+  });
   const { gridProps } = useTable(props, state, tableRef);
-  const styles = useComponentStyles27("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  const styles = useComponentStyles28(
+    "Table",
+    { variant, size },
+    { parts: ["table", "header", "row", "cell"] }
+  );
   const { collection } = state;
-  return /* @__PURE__ */ React56.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ React58.createElement(TableContext.Provider, {
     value: { state, styles }
-  }, /* @__PURE__ */ React56.createElement(Box31, __spreadValues({
+  }, /* @__PURE__ */ React58.createElement(Box33, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
       borderCollapse: "collapse",
       width: stretch ? "100%" : void 0
     },
-    css: styles.table
-  }, gridProps), /* @__PURE__ */ React56.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React56.createElement(TableHeaderRow, {
+    css: styles.table,
+    ...gridProps
+  }, /* @__PURE__ */ React58.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React58.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
-  }, [...headerRow.childNodes].map((column) => {
-    var _a2;
-    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React56.createElement(TableSelectAllCell, {
-      key: column.key,
-      column
-    }) : /* @__PURE__ */ React56.createElement(TableColumnHeader, {
-      key: column.key,
-      column
-    });
-  })))), /* @__PURE__ */ React56.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React56.createElement(TableRow, {
+  }, [...headerRow.childNodes].map(
+    (column) => {
+      var _a;
+      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React58.createElement(TableSelectAllCell, {
+        key: column.key,
+        column
+      }) : /* @__PURE__ */ React58.createElement(TableColumnHeader, {
+        key: column.key,
+        column
+      });
+    }
+  )))), /* @__PURE__ */ React58.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React58.createElement(TableRow, {
     key: row.key,
     row
-  }, [...row.childNodes].map((cell) => {
-    var _a2;
-    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React56.createElement(TableCheckboxCell, {
-      key: cell.key,
-      cell
-    }) : /* @__PURE__ */ React56.createElement(TableCell, {
-      key: cell.key,
-      cell
-    });
-  }))))));
+  }, [...row.childNodes].map(
+    (cell) => {
+      var _a;
+      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React58.createElement(TableCheckboxCell, {
+        key: cell.key,
+        cell
+      }) : /* @__PURE__ */ React58.createElement(TableCell, {
+        key: cell.key,
+        cell
+      });
+    }
+  ))))));
 };
 Table.Body = Body;
 Table.Cell = Cell;
@@ -2303,55 +2450,46 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React57 from "react";
+import React59 from "react";
 import {
-  useComponentStyles as useComponentStyles28
+  useComponentStyles as useComponentStyles29
 } from "@marigold/system";
-import { Box as Box32 } from "@marigold/system";
-var Text = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    align,
-    color,
-    fontSize,
-    cursor,
-    outline,
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "align",
-    "color",
-    "fontSize",
-    "cursor",
-    "outline",
-    "children"
-  ]);
-  const styles = useComponentStyles28("Text", {
+import { Box as Box34 } from "@marigold/system";
+var Text = ({
+  variant,
+  size,
+  align,
+  color,
+  fontSize,
+  cursor,
+  outline,
+  children,
+  ...props
+}) => {
+  const styles = useComponentStyles29("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ React57.createElement(Box32, __spreadProps(__spreadValues({
-    as: "p"
-  }, props), {
-    css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
-  }), children);
+  return /* @__PURE__ */ React59.createElement(Box34, {
+    as: "p",
+    ...props,
+    css: { color, cursor, outline, fontSize, textAlign: align, ...styles }
+  }, children);
 };
 
 // src/TextArea/TextArea.tsx
-import React58, { forwardRef as forwardRef12 } from "react";
+import React60, { forwardRef as forwardRef13 } from "react";
 import { useHover as useHover8 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
-  Box as Box33,
-  useComponentStyles as useComponentStyles29,
+  Box as Box35,
+  useComponentStyles as useComponentStyles30,
   useStateProps as useStateProps16
 } from "@marigold/system";
-var TextArea = forwardRef12((_a, ref) => {
-  var _b = _a, {
+var TextArea = forwardRef13(
+  ({
     variant,
     size,
     width,
@@ -2359,164 +2497,173 @@ var TextArea = forwardRef12((_a, ref) => {
     required,
     readOnly,
     error,
-    rows
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "disabled",
-    "required",
-    "readOnly",
-    "error",
-    "rows"
-  ]);
-  const { label, description, errorMessage } = props;
-  const textAreaRef = useObjectRef9(ref);
-  const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(__spreadValues({
-    inputElementType: "textarea",
-    isDisabled: disabled,
-    isRequired: required,
-    isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, props), textAreaRef);
-  const { hoverProps, isHovered } = useHover8({});
-  const { focusProps, isFocusVisible } = useFocusRing14();
-  const stateProps = useStateProps16({
-    hover: isHovered,
-    focus: isFocusVisible,
-    disabled,
-    readOnly,
-    error
-  });
-  const styles = useComponentStyles29("TextArea", { variant, size });
-  return /* @__PURE__ */ React58.createElement(FieldBase, {
-    label,
-    labelProps,
-    required,
-    description,
-    descriptionProps,
-    error,
-    errorMessage,
-    errorMessageProps,
-    stateProps,
-    variant,
-    size,
-    width
-  }, /* @__PURE__ */ React58.createElement(Box33, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-    as: "textarea",
-    css: styles,
-    ref: textAreaRef,
-    rows
-  }, inputProps), focusProps), hoverProps), stateProps)));
-});
+    rows,
+    ...props
+  }, ref) => {
+    const { label, description, errorMessage } = props;
+    const textAreaRef = useObjectRef10(ref);
+    const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
+      {
+        inputElementType: "textarea",
+        isDisabled: disabled,
+        isRequired: required,
+        isReadOnly: readOnly,
+        validationState: error ? "invalid" : "valid",
+        ...props
+      },
+      textAreaRef
+    );
+    const { hoverProps, isHovered } = useHover8({});
+    const { focusProps, isFocusVisible } = useFocusRing14();
+    const stateProps = useStateProps16({
+      hover: isHovered,
+      focus: isFocusVisible,
+      disabled,
+      readOnly,
+      error
+    });
+    const styles = useComponentStyles30("TextArea", { variant, size });
+    return /* @__PURE__ */ React60.createElement(FieldBase, {
+      label,
+      labelProps,
+      required,
+      description,
+      descriptionProps,
+      error,
+      errorMessage,
+      errorMessageProps,
+      stateProps,
+      variant,
+      size,
+      width
+    }, /* @__PURE__ */ React60.createElement(Box35, {
+      as: "textarea",
+      css: styles,
+      ref: textAreaRef,
+      rows,
+      ...inputProps,
+      ...focusProps,
+      ...hoverProps,
+      ...stateProps
+    }));
+  }
+);
 
 // src/TextField/TextField.tsx
-import React59, { forwardRef as forwardRef13 } from "react";
+import React61, { forwardRef as forwardRef14 } from "react";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import { useStateProps as useStateProps17 } from "@marigold/system";
-var TextField = forwardRef13((_a, ref) => {
-  var _b = _a, { variant, size, width, disabled, required, readOnly, error } = _b, props = __objRest(_b, ["variant", "size", "width", "disabled", "required", "readOnly", "error"]);
-  const { label, description, errorMessage, autoFocus } = props;
-  const inputRef = useObjectRef10(ref);
-  const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(__spreadValues({
-    isDisabled: disabled,
-    isRequired: required,
-    isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, props), inputRef);
-  const { hoverProps, isHovered } = useHover9({});
-  const { focusProps, isFocusVisible } = useFocusRing15({
-    isTextInput: true,
-    autoFocus
-  });
-  const stateProps = useStateProps17({
-    hover: isHovered,
-    focus: isFocusVisible,
-    disabled,
-    readOnly,
-    error
-  });
-  return /* @__PURE__ */ React59.createElement(FieldBase, {
-    label,
-    labelProps,
-    required,
-    description,
-    descriptionProps,
-    error,
-    errorMessage,
-    errorMessageProps,
-    stateProps,
-    variant,
-    size,
-    width
-  }, /* @__PURE__ */ React59.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-    ref: inputRef,
-    variant,
-    size
-  }, inputProps), focusProps), hoverProps), stateProps)));
-});
+var TextField = forwardRef14(
+  ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
+    const { label, description, errorMessage, autoFocus } = props;
+    const inputRef = useObjectRef11(ref);
+    const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
+      {
+        isDisabled: disabled,
+        isRequired: required,
+        isReadOnly: readOnly,
+        validationState: error ? "invalid" : "valid",
+        ...props
+      },
+      inputRef
+    );
+    const { hoverProps, isHovered } = useHover9({});
+    const { focusProps, isFocusVisible } = useFocusRing15({
+      isTextInput: true,
+      autoFocus
+    });
+    const stateProps = useStateProps17({
+      hover: isHovered,
+      focus: isFocusVisible,
+      disabled,
+      readOnly,
+      error
+    });
+    return /* @__PURE__ */ React61.createElement(FieldBase, {
+      label,
+      labelProps,
+      required,
+      description,
+      descriptionProps,
+      error,
+      errorMessage,
+      errorMessageProps,
+      stateProps,
+      variant,
+      size,
+      width
+    }, /* @__PURE__ */ React61.createElement(Input, {
+      ref: inputRef,
+      variant,
+      size,
+      ...inputProps,
+      ...focusProps,
+      ...hoverProps,
+      ...stateProps
+    }));
+  }
+);
 
 // src/Tiles/Tiles.tsx
-import React60 from "react";
-var Tiles = React60.forwardRef((_a, ref) => {
-  var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ React60.createElement(Box, __spreadValues({
+import React62 from "react";
+var Tiles = React62.forwardRef(
+  ({ space = "none", itemMinWidth = "250px", children, ...props }, ref) => /* @__PURE__ */ React62.createElement(Box, {
     ref,
     display: "grid",
     __baseCSS: {
       gap: space,
       gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`
-    }
-  }, props), children);
-});
+    },
+    ...props
+  }, children)
+);
 
 // src/Tooltip/Tooltip.tsx
-import React62 from "react";
+import React64 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box34,
-  useComponentStyles as useComponentStyles30
+  Box as Box36,
+  useComponentStyles as useComponentStyles31
 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
-import { createContext as createContext7, useContext as useContext7 } from "react";
-var TooltipContext = createContext7({});
-var useTooltipContext = () => useContext7(TooltipContext);
+import { createContext as createContext8, useContext as useContext8 } from "react";
+var TooltipContext = createContext8({});
+var useTooltipContext = () => useContext8(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React61, { useRef as useRef19 } from "react";
+import React63, { useRef as useRef18 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition as useOverlayPosition3 } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
-var TooltipTrigger = (_a) => {
-  var _b = _a, {
-    disabled,
-    open,
-    delay = 1e3,
-    placement = "top",
-    children
-  } = _b, rest = __objRest(_b, [
-    "disabled",
-    "open",
-    "delay",
-    "placement",
-    "children"
-  ]);
-  const [tooltipTrigger, tooltip] = React61.Children.toArray(children);
-  const props = __spreadProps(__spreadValues({}, rest), {
+var TooltipTrigger = ({
+  disabled,
+  open,
+  delay = 1e3,
+  placement = "top",
+  children,
+  ...rest
+}) => {
+  const [tooltipTrigger, tooltip] = React63.Children.toArray(children);
+  const props = {
+    ...rest,
     isDisabled: disabled,
     isOpen: open,
     delay,
     placement
-  });
-  const tooltipTriggerRef = useRef19(null);
-  const overlayRef = useRef19(null);
+  };
+  const tooltipTriggerRef = useRef18(null);
+  const overlayRef = useRef18(null);
   const state = useTooltipTriggerState(props);
-  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, tooltipTriggerRef);
+  const { triggerProps, tooltipProps } = useTooltipTrigger(
+    props,
+    state,
+    tooltipTriggerRef
+  );
   const {
     overlayProps: positionProps,
     placement: overlayPlacement,
@@ -2529,30 +2676,40 @@ var TooltipTrigger = (_a) => {
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React61.createElement(FocusableProvider, __spreadValues({
-    ref: tooltipTriggerRef
-  }, triggerProps), tooltipTrigger, /* @__PURE__ */ React61.createElement(TooltipContext.Provider, {
-    value: __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React63.createElement(FocusableProvider, {
+    ref: tooltipTriggerRef,
+    ...triggerProps
+  }, tooltipTrigger, /* @__PURE__ */ React63.createElement(TooltipContext.Provider, {
+    value: {
       state,
       overlayRef,
       arrowProps,
-      placement: overlayPlacement
-    }, tooltipProps), positionProps)
-  }, /* @__PURE__ */ React61.createElement(Overlay, {
+      placement: overlayPlacement,
+      ...tooltipProps,
+      ...positionProps
+    }
+  }, /* @__PURE__ */ React63.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
 
 // src/Tooltip/Tooltip.tsx
 var Tooltip = ({ children, variant, size }) => {
-  const _a = useTooltipContext(), { arrowProps, state, overlayRef, placement } = _a, rest = __objRest(_a, ["arrowProps", "state", "overlayRef", "placement"]);
+  const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const styles = useComponentStyles30("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
-  return /* @__PURE__ */ React62.createElement(Box34, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+  const styles = useComponentStyles31(
+    "Tooltip",
+    { variant, size },
+    { parts: ["container", "arrow"] }
+  );
+  return /* @__PURE__ */ React64.createElement(Box36, {
+    ...tooltipProps,
+    ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }), /* @__PURE__ */ React62.createElement("div", null, children), /* @__PURE__ */ React62.createElement(Box34, __spreadProps(__spreadValues({}, arrowProps), {
+  }, /* @__PURE__ */ React64.createElement("div", null, children), /* @__PURE__ */ React64.createElement(Box36, {
+    ...arrowProps,
     __baseCSS: {
       position: "absolute",
       height: 0,
@@ -2563,7 +2720,7 @@ var Tooltip = ({ children, variant, size }) => {
       borderBottomColor: "transparent"
     },
     css: styles.arrow
-  })));
+  }));
 };
 Tooltip.Trigger = TooltipTrigger;
 export {
@@ -2591,6 +2748,7 @@ export {
   Input,
   Label,
   Link,
+  List,
   MarigoldProvider,
   Menu,
   Message,