@marigold/components 1.1.1 → 1.2.2

package/dist/index.js

@@ -1,38 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 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;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -159,12 +131,12 @@ var Aspect = ({
 // src/Badge/Badge.tsx
 var import_react3 = __toESM(require("react"));
 var import_system2 = require("@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 = (0, import_system2.useComponentStyles)("Badge", { variant, size });
-  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, {
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Breakout/Breakout.tsx
@@ -180,27 +152,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__ */ import_react4.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
     alignItems,
     justifyContent,
     width: "100%",
     display: verticalAlign || horizontalAlign ? "flex" : "block",
     css: {
       gridColumn: "1 / -1"
-    }
-  }, props), children);
+    },
+    ...props
+  }, children);
 };
 
 // src/Button/Button.tsx
@@ -209,33 +178,30 @@ var import_button = require("@react-aria/button");
 var import_focus = require("@react-aria/focus");
 var import_utils = require("@react-aria/utils");
 var import_system3 = require("@marigold/system");
-var Button = (0, import_react5.forwardRef)((_a, ref) => {
-  var _b = _a, {
-    as = "button",
-    children,
-    variant,
-    size,
-    disabled
-  } = _b, props = __objRest(_b, [
-    "as",
-    "children",
-    "variant",
-    "size",
-    "disabled"
-  ]);
+var Button = (0, import_react5.forwardRef)(({
+  as = "button",
+  children,
+  variant,
+  size,
+  disabled,
+  ...props
+}, ref) => {
   const buttonRef = (0, import_react5.useRef)(null);
   (0, import_react5.useImperativeHandle)(ref, () => buttonRef.current);
-  const { buttonProps, isPressed } = (0, import_button.useButton)(__spreadProps(__spreadValues({}, props), {
+  const { buttonProps, isPressed } = (0, import_button.useButton)({
+    ...props,
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
-  }), buttonRef);
+  }, buttonRef);
   const { isFocusVisible, focusProps } = (0, import_focus.useFocusRing)();
   const styles = (0, import_system3.useComponentStyles)("Button", { variant, size });
   const stateProps = (0, import_system3.useStateProps)({
     active: isPressed,
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, __spreadProps(__spreadValues(__spreadValues({}, (0, import_utils.mergeProps)(buttonProps, focusProps)), stateProps), {
+  return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, {
+    ...(0, import_utils.mergeProps)(buttonProps, focusProps),
+    ...stateProps,
     as,
     ref: buttonRef,
     __baseCSS: {
@@ -245,51 +211,47 @@ var Button = (0, import_react5.forwardRef)((_a, ref) => {
       cursor: disabled ? "not-allowed" : "pointer"
     },
     css: styles
-  }), children);
+  }, children);
 });
 
 // src/Card/Card.tsx
 var import_react6 = __toESM(require("react"));
 var import_system4 = require("@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 = (0, import_system4.useComponentStyles)("Card", { variant, size });
-  return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, {
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Center/Center.tsx
 var import_react7 = __toESM(require("react"));
-var Center = (_a) => {
-  var _b = _a, {
-    maxWidth,
-    space = "none",
-    children
-  } = _b, props = __objRest(_b, [
-    "maxWidth",
-    "space",
-    "children"
-  ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_system.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__ */ import_react7.default.createElement(import_system.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
 var import_react10 = __toESM(require("react"));
 var import_checkbox3 = require("@react-aria/checkbox");
 var import_focus2 = require("@react-aria/focus");
 var import_interactions = require("@react-aria/interactions");
+var import_utils2 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
 var import_system7 = require("@marigold/system");
 
@@ -303,26 +265,21 @@ var import_system6 = require("@marigold/system");
 var import_react8 = __toESM(require("react"));
 var import_icons = require("@marigold/icons");
 var import_system5 = require("@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 = (0, import_system5.useComponentStyles)("Label", { size, variant });
-  return /* @__PURE__ */ import_react8.default.createElement(import_system5.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react8.default.createElement(import_system5.Box, {
+    ...props,
     as,
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles
-  }), children, required && /* @__PURE__ */ import_react8.default.createElement(import_icons.Required, {
+  }, children, required && /* @__PURE__ */ import_react8.default.createElement(import_icons.Required, {
     role: "presentation",
     size: 16,
     fill: "error"
@@ -332,39 +289,34 @@ var Label = (_a) => {
 // src/Checkbox/CheckboxGroup.tsx
 var CheckboxGroupContext = (0, import_react9.createContext)(null);
 var useCheckboxGroupContext = () => (0, import_react9.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 = (0, import_checkbox2.useCheckboxGroupState)(props);
   const { groupProps, labelProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
   const styles = (0, import_system6.useComponentStyles)("CheckboxGroup", { variant, size }, { parts: ["container", "group"] });
-  return /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, __spreadProps(__spreadValues({}, groupProps), {
+  return /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
+    ...groupProps,
     css: styles.container
-  }), props.label && /* @__PURE__ */ import_react9.default.createElement(Label, __spreadValues({
+  }, props.label && /* @__PURE__ */ import_react9.default.createElement(Label, {
     as: "span",
-    required
-  }, labelProps), props.label), /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
+    required,
+    ...labelProps
+  }, props.label), /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
     role: "presentation",
     __baseCSS: {
       display: "flex",
@@ -373,7 +325,7 @@ var CheckboxGroup = (_a) => {
     },
     css: styles.group
   }, /* @__PURE__ */ import_react9.default.createElement(CheckboxGroupContext.Provider, {
-    value: __spreadValues({ variant, size, error }, state)
+    value: { variant, size, error, ...state }
   }, children)));
 };
 
@@ -394,47 +346,35 @@ var IndeterminateMark = () => /* @__PURE__ */ import_react10.default.createEleme
   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__ */ import_react10.default.createElement(import_system7.Box, __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__ */ import_react10.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react10.default.createElement(CheckMark, null) : null);
-};
-var Checkbox = (_a) => {
-  var _b = _a, {
-    size,
-    variant,
-    disabled,
-    checked,
-    defaultChecked,
-    indeterminate,
-    readOnly,
-    required,
-    error
-  } = _b, props = __objRest(_b, [
-    "size",
-    "variant",
-    "disabled",
-    "checked",
-    "defaultChecked",
-    "indeterminate",
-    "readOnly",
-    "required",
-    "error"
-  ]);
-  const ref = import_react10.default.useRef(null);
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+  "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__ */ import_react10.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react10.default.createElement(CheckMark, null) : null);
+var Checkbox = (0, import_react10.forwardRef)(({
+  size,
+  variant,
+  disabled,
+  checked,
+  defaultChecked,
+  indeterminate,
+  readOnly,
+  required,
+  error,
+  ...props
+}, ref) => {
+  const inputRef = (0, import_utils2.useObjectRef)(ref);
   const checkboxProps = {
     isIndeterminate: indeterminate,
     isDisabled: disabled,
@@ -443,16 +383,24 @@ var Checkbox = (_a) => {
     validationState: error ? "invalid" : "valid"
   };
   const groupState = useCheckboxGroupContext();
-  const { inputProps } = groupState ? (0, import_checkbox3.useCheckboxGroupItem)(__spreadProps(__spreadValues(__spreadValues({}, props), checkboxProps), {
+  const { inputProps } = groupState ? (0, import_checkbox3.useCheckboxGroupItem)({
+    ...props,
+    ...checkboxProps,
     value: props.value
-  }), groupState, ref) : (0, import_checkbox3.useCheckbox)(__spreadValues(__spreadValues({
+  }, groupState, inputRef) : (0, import_checkbox3.useCheckbox)({
     isSelected: checked,
-    defaultSelected: defaultChecked
-  }, checkboxProps), props), (0, import_toggle.useToggleState)(__spreadValues({
+    defaultSelected: defaultChecked,
+    ...checkboxProps,
+    ...props
+  }, (0, import_toggle.useToggleState)({
     isSelected: checked,
-    defaultSelected: defaultChecked
-  }, props)), ref);
-  const styles = (0, import_system7.useComponentStyles)("Checkbox", { variant: (groupState == null ? void 0 : groupState.variant) || variant, size: (groupState == null ? void 0 : groupState.size) || size }, { parts: ["container", "label", "checkbox"] });
+    defaultSelected: defaultChecked,
+    ...props
+  }), inputRef);
+  const styles = (0, import_system7.useComponentStyles)("Checkbox", {
+    variant: (groupState == null ? void 0 : groupState.variant) || variant,
+    size: (groupState == null ? void 0 : groupState.size) || size
+  }, { parts: ["container", "label", "checkbox"] });
   const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
   const { isFocusVisible, focusProps } = (0, import_focus2.useFocusRing)();
   const stateProps = (0, import_system7.useStateProps)({
@@ -464,7 +412,7 @@ var Checkbox = (_a) => {
     readOnly,
     indeterminate
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
     as: "label",
     __baseCSS: {
       display: "flex",
@@ -472,10 +420,12 @@ var Checkbox = (_a) => {
       gap: "1ch",
       position: "relative"
     },
-    css: styles.container
-  }, hoverProps), stateProps), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues(__spreadValues({
+    css: styles.container,
+    ...hoverProps,
+    ...stateProps
+  }, /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -485,30 +435,29 @@ var Checkbox = (_a) => {
       zIndex: 1,
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
-    }
-  }, inputProps), focusProps)), /* @__PURE__ */ import_react10.default.createElement(Icon, __spreadValues({
+    },
+    ...inputProps,
+    ...focusProps
+  }), /* @__PURE__ */ import_react10.default.createElement(Icon, {
     checked: inputProps.checked,
     indeterminate,
-    css: styles.checkbox
-  }, stateProps)), props.children && /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues({
-    css: styles.label
-  }, stateProps), props.children));
-};
+    css: styles.checkbox,
+    ...stateProps
+  }), props.children && /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+    css: styles.label,
+    ...stateProps
+  }, props.children));
+});
 
 // src/Columns/Columns.tsx
 var import_react11 = __toESM(require("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 (import_react11.Children.count(children) !== columns.length) {
     throw new Error(`Columns: expected ${columns.length} children, got ${import_react11.Children.count(children)}`);
   }
@@ -519,7 +468,7 @@ var Columns = (_a) => {
       }
     };
   });
-  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
     display: "flex",
     css: Object.assign({
       flexWrap: "wrap",
@@ -527,8 +476,9 @@ var Columns = (_a) => {
       "> *": {
         flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
       }
-    }, ...getColumnWidths)
-  }, props), children);
+    }, ...getColumnWidths),
+    ...props
+  }, children);
 };
 
 // src/Container/Container.tsx
@@ -539,20 +489,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 = import_tokens2.size[contentType][size];
   let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
   let gridColumn = 1;
@@ -564,7 +508,7 @@ var Container = (_a) => {
     gridTemplateColumns = `1fr 1fr ${maxWidth}`;
     gridColumn = 3;
   }
-  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
     display: "grid",
     css: {
       gridTemplateColumns,
@@ -572,29 +516,26 @@ var Container = (_a) => {
       "> *": {
         gridColumn
       }
-    }
-  }, props), children);
+    },
+    ...props
+  }, children);
 };
 
 // src/Content/Content.tsx
 var import_react13 = __toESM(require("react"));
 var import_system8 = require("@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 = (0, import_system8.useComponentStyles)("Content", { variant, size });
-  return /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, __spreadProps(__spreadValues({
-    as: "section"
-  }, props), {
+  return /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, {
+    as: "section",
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Dialog/Dialog.tsx
@@ -606,40 +547,34 @@ var import_system12 = require("@marigold/system");
 // src/Header/Header.tsx
 var import_react14 = __toESM(require("react"));
 var import_system9 = require("@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 = (0, import_system9.useComponentStyles)("Header", { variant, size });
-  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "header"
-  }, props), {
+  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
+    as: "header",
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Headline/Headline.tsx
 var import_react15 = __toESM(require("react"));
 var import_system10 = require("@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 = (0, import_system10.useComponentStyles)("Headline", {
     variant,
     size: size ?? `level-${level}`
   });
-  return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, __spreadProps(__spreadValues({
-    as: `h${level}`
-  }, props), {
+  return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
+    as: `h${level}`,
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Dialog/Context.ts
@@ -656,28 +591,27 @@ var import_overlays4 = require("@react-stately/overlays");
 var import_react18 = __toESM(require("react"));
 var import_focus3 = require("@react-aria/focus");
 var import_overlays = require("@react-aria/overlays");
-var import_utils2 = require("@react-aria/utils");
+var import_utils3 = require("@react-aria/utils");
 
 // src/Overlay/Underlay.tsx
 var import_react17 = __toESM(require("react"));
 var import_system11 = require("@marigold/system");
-var Underlay = (_a) => {
-  var _b = _a, { size, variant } = _b, props = __objRest(_b, ["size", "variant"]);
+var Underlay = ({ size, variant, ...props }) => {
   const styles = (0, import_system11.useComponentStyles)("Underlay", { size, variant });
-  return /* @__PURE__ */ import_react17.default.createElement(import_system11.Box, __spreadValues({
+  return /* @__PURE__ */ import_react17.default.createElement(import_system11.Box, {
     __baseCSS: {
       position: "fixed",
       inset: 0,
       zIndex: 1
     },
-    css: styles
-  }, props));
+    css: styles,
+    ...props
+  });
 };
 
 // src/Overlay/Modal.tsx
-var Modal = (0, import_react18.forwardRef)((_a, ref) => {
-  var _b = _a, { children, open, dismissable, keyboardDismissable, onClose } = _b, props = __objRest(_b, ["children", "open", "dismissable", "keyboardDismissable", "onClose"]);
-  const modalRef = (0, import_utils2.useObjectRef)(ref);
+var Modal = (0, import_react18.forwardRef)(({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
+  const modalRef = (0, import_utils3.useObjectRef)(ref);
   const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)({
     isOpen: open,
     onClose,
@@ -690,7 +624,9 @@ var Modal = (0, import_react18.forwardRef)((_a, ref) => {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ import_react18.default.createElement(Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react18.default.createElement("div", __spreadValues({
+  }, /* @__PURE__ */ import_react18.default.createElement(Underlay, {
+    ...underlayProps
+  }), /* @__PURE__ */ import_react18.default.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
@@ -700,8 +636,9 @@ var Modal = (0, import_react18.forwardRef)((_a, ref) => {
       zIndex: 2,
       pointerEvents: "none"
     },
-    ref: modalRef
-  }, (0, import_utils2.mergeProps)(props, overlayProps, modalProps)), /* @__PURE__ */ import_react18.default.createElement("div", {
+    ref: modalRef,
+    ...(0, import_utils3.mergeProps)(props, overlayProps, modalProps)
+  }, /* @__PURE__ */ import_react18.default.createElement("div", {
     style: { pointerEvents: "auto" }
   }, children)));
 });
@@ -709,60 +646,53 @@ var Modal = (0, import_react18.forwardRef)((_a, ref) => {
 // src/Overlay/Overlay.tsx
 var import_react19 = __toESM(require("react"));
 var import_overlays2 = require("@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__ */ import_react19.default.createElement(import_overlays2.OverlayContainer, {
     portalContainer: container
-  }, /* @__PURE__ */ import_react19.default.createElement(import_system.Box, __spreadValues({}, props), children));
+  }, /* @__PURE__ */ import_react19.default.createElement(import_system.Box, {
+    ...props
+  }, children));
 };
 
 // src/Overlay/Popover.tsx
 var import_react20 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
-var import_utils3 = require("@react-aria/utils");
-var Popover = (0, import_react20.forwardRef)((_a, ref) => {
-  var _b = _a, {
-    children,
-    open,
-    dismissable,
-    keyboardDismissDisabled,
-    shouldCloseOnBlur,
-    minWidth = 0
-  } = _b, props = __objRest(_b, [
-    "children",
-    "open",
-    "dismissable",
-    "keyboardDismissDisabled",
-    "shouldCloseOnBlur",
-    "minWidth"
-  ]);
+var import_utils4 = require("@react-aria/utils");
+var Popover = (0, import_react20.forwardRef)(({
+  children,
+  open,
+  dismissable,
+  keyboardDismissDisabled,
+  shouldCloseOnBlur,
+  minWidth = 0,
+  ...props
+}, ref) => {
   const fallbackRef = (0, import_react20.useRef)(null);
   const popoverRef = ref || fallbackRef;
-  const { overlayProps } = (0, import_overlays3.useOverlay)(__spreadValues({
+  const { overlayProps } = (0, import_overlays3.useOverlay)({
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissDisabled,
-    shouldCloseOnBlur
-  }, props), popoverRef);
+    shouldCloseOnBlur,
+    ...props
+  }, popoverRef);
   const { modalProps } = (0, import_overlays3.useModal)({});
   const style = { minWidth };
   return /* @__PURE__ */ import_react20.default.createElement(Overlay, {
     open
-  }, /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react20.default.createElement(import_system.Box, {
     ref: popoverRef,
-    role: "presentation"
-  }, (0, import_utils3.mergeProps)(props, overlayProps, modalProps, style)), children));
+    role: "presentation",
+    ...(0, import_utils4.mergeProps)(props, overlayProps, modalProps, style)
+  }, children));
 });
 
 // src/Dialog/DialogTrigger.tsx
@@ -800,7 +730,7 @@ var CloseButton = ({ css }) => {
   }, ref);
   return /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, {
     css: { display: "flex", justifyContent: "flex-end" }
-  }, /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, {
     as: "button",
     __baseCSS: {
       outline: "none",
@@ -812,8 +742,9 @@ var CloseButton = ({ css }) => {
       p: 0
     },
     css,
-    ref
-  }, buttonProps), /* @__PURE__ */ import_react22.default.createElement("svg", {
+    ref,
+    ...buttonProps
+  }, /* @__PURE__ */ import_react22.default.createElement("svg", {
     viewBox: "0 0 20 20",
     fill: "currentColor"
   }, /* @__PURE__ */ import_react22.default.createElement("path", {
@@ -833,26 +764,22 @@ var addTitleProps = (children, 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 = (0, import_react22.useRef)(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
   const styles = (0, import_system12.useComponentStyles)("Dialog", { variant, size }, { parts: ["container", "closeButton"] });
-  return /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, __spreadValues({
+  return /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, {
     __baseCSS: { bg: "#fff" },
-    css: styles.container
-  }, dialogProps), closeButton && /* @__PURE__ */ import_react22.default.createElement(CloseButton, {
+    css: styles.container,
+    ...dialogProps
+  }, closeButton && /* @__PURE__ */ import_react22.default.createElement(CloseButton, {
     css: styles.closeButton
   }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
@@ -862,38 +789,38 @@ Dialog.Trigger = DialogTrigger;
 var import_react23 = __toESM(require("react"));
 var import_separator = require("@react-aria/separator");
 var import_system13 = require("@marigold/system");
-var Divider = (_a) => {
-  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
+var Divider = ({ variant, ...props }) => {
   const { separatorProps } = (0, import_separator.useSeparator)(props);
   const styles = (0, import_system13.useComponentStyles)("Divider", { variant });
-  return /* @__PURE__ */ import_react23.default.createElement(import_system13.Box, __spreadValues(__spreadValues({
-    css: styles
-  }, props), separatorProps));
+  return /* @__PURE__ */ import_react23.default.createElement(import_system13.Box, {
+    css: styles,
+    ...props,
+    ...separatorProps
+  });
 };
 
 // src/Footer/Footer.tsx
 var import_react24 = __toESM(require("react"));
 var import_system14 = require("@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 = (0, import_system14.useComponentStyles)("Footer", { variant, size });
-  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "footer"
-  }, props), {
+  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+    as: "footer",
+    ...props,
     css: styles
-  }), children);
+  }, children);
 };
 
 // src/Image/Image.tsx
 var import_react25 = __toESM(require("react"));
 var import_system15 = require("@marigold/system");
-var Image = (_a) => {
-  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
+var Image = ({ variant, ...props }) => {
   const styles = (0, import_system15.useComponentStyles)("Image", { variant });
-  return /* @__PURE__ */ import_react25.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react25.default.createElement(import_system.Box, {
+    ...props,
     as: "img",
     css: styles
-  }));
+  });
 };
 
 // src/Inline/Inline.tsx
@@ -908,72 +835,63 @@ 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__ */ import_react26.default.createElement(import_system.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__ */ import_react26.default.createElement(import_system.Box, {
+  css: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space,
+    alignItems: ALIGNMENT_Y[alignY],
+    justifyContent: ALIGNMENT_X[alignX]
+  },
+  ...props
+}, children);
 
 // src/Input/Input.tsx
 var import_react27 = __toESM(require("react"));
 var import_system16 = require("@marigold/system");
-var Input = (0, import_react27.forwardRef)((_a, ref) => {
-  var _b = _a, { variant, size, type = "text" } = _b, props = __objRest(_b, ["variant", "size", "type"]);
+var Input = (0, import_react27.forwardRef)(({ variant, size, type = "text", ...props }, ref) => {
   const styles = (0, import_system16.useComponentStyles)("Input", { variant, size });
-  return /* @__PURE__ */ import_react27.default.createElement(import_system16.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react27.default.createElement(import_system16.Box, {
+    ...props,
     ref,
     as: "input",
     type,
     css: styles
-  }));
+  });
 });
 
 // src/Link/Link.tsx
 var import_react28 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
 var import_system17 = require("@marigold/system");
-var Link = (_a) => {
-  var _b = _a, {
-    as = "a",
-    variant,
-    size,
-    children,
-    disabled
-  } = _b, props = __objRest(_b, [
-    "as",
-    "variant",
-    "size",
-    "children",
-    "disabled"
-  ]);
+var Link = ({
+  as = "a",
+  variant,
+  size,
+  children,
+  disabled,
+  ...props
+}) => {
   const ref = (0, import_react28.useRef)(null);
-  const { linkProps } = (0, import_link.useLink)(__spreadProps(__spreadValues({}, props), {
+  const { linkProps } = (0, import_link.useLink)({
+    ...props,
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
-  }), ref);
+  }, ref);
   const styles = (0, import_system17.useComponentStyles)("Link", { variant, size });
-  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
     as,
     css: styles,
-    ref
-  }, props), linkProps), children);
+    ref,
+    ...props,
+    ...linkProps
+  }, children);
 };
 
 // src/Menu/Menu.tsx
@@ -1007,31 +925,34 @@ var MenuTrigger = ({ disabled, children }) => {
     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__ */ import_react30.default.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ import_react30.default.createElement(import_interactions3.PressResponder, __spreadProps(__spreadValues({}, menuTriggerProps), {
+  }, /* @__PURE__ */ import_react30.default.createElement(import_interactions3.PressResponder, {
+    ...menuTriggerProps,
     ref: menuTriggerRef,
     isPressed: state.isOpen
-  }), menuTrigger), /* @__PURE__ */ import_react30.default.createElement(Popover, __spreadValues({
+  }, menuTrigger), /* @__PURE__ */ import_react30.default.createElement(Popover, {
     open: state.isOpen,
     onClose: state.close,
     dismissable: true,
     shouldCloseOnBlur: true,
-    ref: overlayRef
-  }, positionProps), menu));
+    ref: overlayRef,
+    ...positionProps
+  }, menu));
 };
 
 // src/Menu/MenuItem.tsx
 var import_react31 = __toESM(require("react"));
 var import_focus4 = require("@react-aria/focus");
 var import_menu3 = require("@react-aria/menu");
-var import_utils4 = require("@react-aria/utils");
+var import_utils5 = require("@react-aria/utils");
 var import_system18 = require("@marigold/system");
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = (0, import_react31.useRef)(null);
@@ -1045,7 +966,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
   const stateProps = (0, import_system18.useStateProps)({
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ import_react31.default.createElement(import_system18.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react31.default.createElement(import_system18.Box, {
     as: "li",
     ref,
     __baseCSS: {
@@ -1053,24 +974,25 @@ var MenuItem = ({ item, state, onAction, css }) => {
         outline: 0
       }
     },
-    css
-  }, (0, import_utils4.mergeProps)(menuItemProps, focusProps)), stateProps), item.rendered);
+    css,
+    ...(0, import_utils5.mergeProps)(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);
+var Menu = ({ variant, size, ...props }) => {
+  const { triggerWidth, ...menuContext } = useMenuContext();
+  const ownProps = { ...props, ...menuContext };
   const ref = (0, import_react32.useRef)(null);
-  const state = (0, import_tree.useTreeState)(__spreadProps(__spreadValues({}, ownProps), { selectionMode: "none" }));
+  const state = (0, import_tree.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu4.useMenu)(ownProps, state, ref);
   const styles = (0, import_system19.useComponentStyles)("Menu", { variant, size }, { parts: ["container", "item"] });
   return /* @__PURE__ */ import_react32.default.createElement(import_focus5.FocusScope, {
     restoreFocus: true
   }, /* @__PURE__ */ import_react32.default.createElement("div", null, /* @__PURE__ */ import_react32.default.createElement(import_overlays6.DismissButton, {
     onDismiss: ownProps.onClose
-  }), /* @__PURE__ */ import_react32.default.createElement(import_system19.Box, __spreadValues({
+  }), /* @__PURE__ */ import_react32.default.createElement(import_system19.Box, {
     as: "ul",
     ref,
     style: { width: triggerWidth },
@@ -1079,8 +1001,9 @@ var Menu = (_a) => {
       p: 0,
       overflowWrap: "break-word"
     },
-    css: styles.container
-  }, menuProps), [...state.collection].map((item) => /* @__PURE__ */ import_react32.default.createElement(MenuItem, {
+    css: styles.container,
+    ...menuProps
+  }, [...state.collection].map((item) => /* @__PURE__ */ import_react32.default.createElement(MenuItem, {
     key: item.key,
     item,
     state,
@@ -1097,18 +1020,13 @@ Menu.Item = import_collections.Item;
 var import_react33 = __toESM(require("react"));
 var import_icons2 = require("@marigold/icons");
 var import_system20 = require("@marigold/system");
-var Message = (_a) => {
-  var _b = _a, {
-    messageTitle,
-    variant = "info",
-    size,
-    children
-  } = _b, props = __objRest(_b, [
-    "messageTitle",
-    "variant",
-    "size",
-    "children"
-  ]);
+var Message = ({
+  messageTitle,
+  variant = "info",
+  size,
+  children,
+  ...props
+}) => {
   const styles = (0, import_system20.useComponentStyles)("Message", {
     variant,
     size
@@ -1120,9 +1038,10 @@ var Message = (_a) => {
   if (variant === "error") {
     icon = /* @__PURE__ */ import_react33.default.createElement(import_icons2.Exclamation, null);
   }
-  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadValues({
-    css: styles.container
-  }, props), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    css: styles.container,
+    ...props
+  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 }
   }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
     role: "presentation",
@@ -1140,7 +1059,7 @@ var import_focus6 = require("@react-aria/focus");
 var import_interactions5 = require("@react-aria/interactions");
 var import_i18n = require("@react-aria/i18n");
 var import_numberfield = require("@react-aria/numberfield");
-var import_utils6 = require("@react-aria/utils");
+var import_utils7 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
 var import_system24 = require("@marigold/system");
 
@@ -1152,35 +1071,28 @@ var import_system22 = require("@marigold/system");
 var import_react34 = __toESM(require("react"));
 var import_icons3 = require("@marigold/icons");
 var import_system21 = require("@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 = (0, import_system21.useComponentStyles)("HelpText", { variant, size }, { parts: ["container", "icon"] });
-  return /* @__PURE__ */ import_react34.default.createElement(import_system21.Box, __spreadProps(__spreadValues(__spreadValues({}, hasErrorMessage ? errorMessageProps : descriptionProps), props), {
+  return /* @__PURE__ */ import_react34.default.createElement(import_system21.Box, {
+    ...hasErrorMessage ? errorMessageProps : descriptionProps,
+    ...props,
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles.container
-  }), hasErrorMessage ? /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_icons3.Exclamation, {
+  }, hasErrorMessage ? /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_icons3.Exclamation, {
     role: "presentation",
-    size: ((_a2 = styles == null ? void 0 : styles.icon) == null ? void 0 : _a2.size) || 16
+    size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
   }), errorMessage) : /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, description));
 };
 
@@ -1204,11 +1116,14 @@ var FieldBase = ({
   const hasHelpText = !!description || errorMessage && error;
   return /* @__PURE__ */ import_react35.default.createElement(import_system22.Box, {
     css: { display: "flex", flexDirection: "column", width }
-  }, label && /* @__PURE__ */ import_react35.default.createElement(Label, __spreadValues(__spreadValues({
+  }, label && /* @__PURE__ */ import_react35.default.createElement(Label, {
     required,
     variant,
-    size
-  }, labelProps), stateProps), label), children, hasHelpText && /* @__PURE__ */ import_react35.default.createElement(HelpText, __spreadProps(__spreadValues({}, stateProps), {
+    size,
+    ...labelProps,
+    ...stateProps
+  }, label), children, hasHelpText && /* @__PURE__ */ import_react35.default.createElement(HelpText, {
+    ...stateProps,
     variant,
     size,
     disabled,
@@ -1217,14 +1132,14 @@ var FieldBase = ({
     error,
     errorMessage,
     errorMessageProps
-  })));
+  }));
 };
 
 // src/NumberField/StepButton.tsx
 var import_react36 = __toESM(require("react"));
 var import_button3 = require("@react-aria/button");
 var import_interactions4 = require("@react-aria/interactions");
-var import_utils5 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_system23 = require("@marigold/system");
 var Plus = () => /* @__PURE__ */ import_react36.default.createElement(import_system23.Box, {
   as: "svg",
@@ -1246,10 +1161,9 @@ var Minus = () => /* @__PURE__ */ import_react36.default.createElement(import_sy
   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"]);
+var StepButton = ({ direction, css, ...props }) => {
   const ref = (0, import_react36.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_button3.useButton)(__spreadProps(__spreadValues({}, props), { elementType: "div" }), ref);
+  const { buttonProps, isPressed } = (0, import_button3.useButton)({ ...props, elementType: "div" }, ref);
   const { hoverProps, isHovered } = (0, import_interactions4.useHover)(props);
   const stateProps = (0, import_system23.useStateProps)({
     active: isPressed,
@@ -1257,48 +1171,42 @@ var StepButton = (_a) => {
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ import_react36.default.createElement(import_system23.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react36.default.createElement(import_system23.Box, {
     __baseCSS: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       cursor: props.isDisabled ? "not-allowed" : "pointer"
     },
-    css
-  }, (0, import_utils5.mergeProps)(buttonProps, hoverProps)), stateProps), /* @__PURE__ */ import_react36.default.createElement(Icon3, null));
+    css,
+    ...(0, import_utils6.mergeProps)(buttonProps, hoverProps),
+    ...stateProps
+  }, /* @__PURE__ */ import_react36.default.createElement(Icon3, null));
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
-  var _b = _a, {
-    variant,
-    size,
-    width,
-    disabled,
-    required,
-    readOnly,
-    error,
-    hideStepper
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "disabled",
-    "required",
-    "readOnly",
-    "error",
-    "hideStepper"
-  ]);
-  const props = __spreadValues({
+var NumberField = (0, import_react37.forwardRef)(({
+  variant,
+  size,
+  width,
+  disabled,
+  required,
+  readOnly,
+  error,
+  hideStepper,
+  ...rest
+}, ref) => {
+  const props = {
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, rest);
+    validationState: error ? "invalid" : "valid",
+    ...rest
+  };
   const showStepper = !hideStepper;
   const { locale } = (0, import_i18n.useLocale)();
-  const inputRef = (0, import_utils6.useObjectRef)(ref);
-  const state = (0, import_numberfield2.useNumberFieldState)(__spreadProps(__spreadValues({}, props), { locale }));
+  const inputRef = (0, import_utils7.useObjectRef)(ref);
+  const state = (0, import_numberfield2.useNumberFieldState)({ ...props, locale });
   const {
     labelProps,
     groupProps,
@@ -1335,7 +1243,7 @@ var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ import_react37.default.createElement(import_system24.Box, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react37.default.createElement(import_system24.Box, {
     "data-group": true,
     __baseCSS: {
       display: "flex",
@@ -1344,18 +1252,24 @@ var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
         flexGrow: 1
       }
     },
-    css: styles.group
-  }, (0, import_utils6.mergeProps)(groupProps, focusProps, hoverProps)), stateProps), showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, __spreadValues({
+    css: styles.group,
+    ...(0, import_utils7.mergeProps)(groupProps, focusProps, hoverProps),
+    ...stateProps
+  }, showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, {
     direction: "down",
-    css: styles.stepper
-  }, decrementButtonProps)), /* @__PURE__ */ import_react37.default.createElement(Input, __spreadValues(__spreadValues({
+    css: styles.stepper,
+    ...decrementButtonProps
+  }), /* @__PURE__ */ import_react37.default.createElement(Input, {
     ref: inputRef,
     variant,
-    size
-  }, inputProps), stateProps)), showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, __spreadValues({
+    size,
+    ...inputProps,
+    ...stateProps
+  }), showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, {
     direction: "up",
-    css: styles.stepper
-  }, incrementButtonProps))));
+    css: styles.stepper,
+    ...incrementButtonProps
+  })));
 });
 
 // src/Provider/index.ts
@@ -1367,14 +1281,24 @@ var import_react38 = __toESM(require("react"));
 var import_overlays7 = require("@react-aria/overlays");
 var import_system25 = require("@marigold/system");
 function MarigoldProvider({
+  children,
   theme,
-  children
+  selector,
+  normalizeDocument = true
 }) {
+  var _a;
   const outer = (0, import_system25.useTheme)();
   const isTopLevel = outer.theme === import_system25.__defaultTheme;
+  if (((_a = outer.theme) == null ? void 0 : _a.root) && !isTopLevel && !selector) {
+    throw new Error(`[MarigoldProvider] You cannot nest a MarigoldProvider inside another MarigoldProvider without a "selector"! 
+      Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`);
+  }
   return /* @__PURE__ */ import_react38.default.createElement(import_system25.ThemeProvider, {
     theme
-  }, isTopLevel ? /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(import_system25.Global, null), /* @__PURE__ */ import_react38.default.createElement(import_overlays7.OverlayProvider, null, children)) : children);
+  }, /* @__PURE__ */ import_react38.default.createElement(import_system25.Global, {
+    normalizeDocument: isTopLevel && normalizeDocument,
+    selector
+  }), isTopLevel ? /* @__PURE__ */ import_react38.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
@@ -1382,6 +1306,7 @@ var import_react41 = __toESM(require("react"));
 var import_interactions6 = require("@react-aria/interactions");
 var import_focus7 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
+var import_utils8 = require("@react-aria/utils");
 var import_system28 = require("@marigold/system");
 
 // src/Radio/Context.ts
@@ -1394,43 +1319,36 @@ var import_react40 = __toESM(require("react"));
 var import_radio = require("@react-aria/radio");
 var import_radio2 = require("@react-stately/radio");
 var import_system27 = require("@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 = (0, import_radio2.useRadioGroupState)(props);
   const { radioGroupProps, labelProps } = (0, import_radio.useRadioGroup)(props, state);
   const styles = (0, import_system27.useComponentStyles)("RadioGroup", { variant, size }, { parts: ["container", "group"] });
-  return /* @__PURE__ */ import_react40.default.createElement(import_system27.Box, __spreadProps(__spreadValues({}, radioGroupProps), {
+  return /* @__PURE__ */ import_react40.default.createElement(import_system27.Box, {
+    ...radioGroupProps,
     css: styles.container
-  }), props.label && /* @__PURE__ */ import_react40.default.createElement(Label, __spreadValues({
+  }, props.label && /* @__PURE__ */ import_react40.default.createElement(Label, {
     as: "span",
-    required
-  }, labelProps), props.label), /* @__PURE__ */ import_react40.default.createElement(import_system27.Box, {
+    required,
+    ...labelProps
+  }, props.label), /* @__PURE__ */ import_react40.default.createElement(import_system27.Box, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1441,7 +1359,7 @@ var RadioGroup = (_a) => {
     },
     css: styles.group
   }, /* @__PURE__ */ import_react40.default.createElement(RadioGroupContext.Provider, {
-    value: __spreadValues({ variant, size, width, error }, state)
+    value: { variant, size, width, error, ...state }
   }, children)));
 };
 
@@ -1454,39 +1372,32 @@ var Dot = () => /* @__PURE__ */ import_react41.default.createElement("svg", {
   cy: "3",
   r: "3"
 }));
-var Icon2 = (_a) => {
-  var _b = _a, { checked, css } = _b, props = __objRest(_b, ["checked", "css"]);
-  return /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __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__ */ import_react41.default.createElement(Dot, null) : null);
-};
-var Radio = (_a) => {
-  var _b = _a, { width, disabled } = _b, props = __objRest(_b, ["width", "disabled"]);
-  const _a2 = useRadioGroupContext(), {
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, {
+  "aria-hidden": "true",
+  __baseCSS: {
+    width: 16,
+    height: 16,
+    bg: "#fff",
+    border: "1px solid #000",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    p: 4
+  },
+  css,
+  ...props
+}, checked ? /* @__PURE__ */ import_react41.default.createElement(Dot, null) : null);
+var Radio = (0, import_react41.forwardRef)(({ width, disabled, ...props }, ref) => {
+  const {
     variant,
     size,
     error,
-    width: groupWidth
-  } = _a2, state = __objRest(_a2, [
-    "variant",
-    "size",
-    "error",
-    "width"
-  ]);
-  const ref = (0, import_react41.useRef)(null);
-  const { inputProps } = (0, import_radio3.useRadio)(__spreadValues({ isDisabled: disabled }, props), state, ref);
+    width: groupWidth,
+    ...state
+  } = useRadioGroupContext();
+  const inputRef = (0, import_utils8.useObjectRef)(ref);
+  const { inputProps } = (0, import_radio3.useRadio)({ isDisabled: disabled, ...props }, state, inputRef);
   const styles = (0, import_system28.useComponentStyles)("Radio", { variant: variant || props.variant, size: size || props.size }, { parts: ["container", "label", "radio"] });
   const { hoverProps, isHovered } = (0, import_interactions6.useHover)({});
   const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
@@ -1498,7 +1409,7 @@ var Radio = (_a) => {
     readOnly: props.readOnly,
     error
   });
-  return /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, {
     as: "label",
     __baseCSS: {
       display: "flex",
@@ -1507,10 +1418,12 @@ var Radio = (_a) => {
       position: "relative",
       width: width || groupWidth || "100%"
     },
-    css: styles.container
-  }, hoverProps), stateProps), /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
+    css: styles.container,
+    ...hoverProps,
+    ...stateProps
+  }, /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, {
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -1520,14 +1433,18 @@ var Radio = (_a) => {
       zIndex: 1,
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
-    }
-  }, inputProps), focusProps)), /* @__PURE__ */ import_react41.default.createElement(Icon2, __spreadValues({
+    },
+    ...inputProps,
+    ...focusProps
+  }), /* @__PURE__ */ import_react41.default.createElement(Icon2, {
     checked: inputProps.checked,
-    css: styles.radio
-  }, stateProps)), /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues({
-    css: styles.label
-  }, stateProps), props.children));
-};
+    css: styles.radio,
+    ...stateProps
+  }), /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, {
+    css: styles.label,
+    ...stateProps
+  }, props.children));
+});
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
@@ -1539,12 +1456,12 @@ var import_overlays8 = require("@react-aria/overlays");
 var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
 var import_collections2 = require("@react-stately/collections");
-var import_utils8 = require("@react-aria/utils");
+var import_utils10 = require("@react-aria/utils");
 var import_system32 = require("@marigold/system");
 
 // src/ListBox/ListBox.tsx
 var import_react45 = __toESM(require("react"));
-var import_utils7 = require("@react-aria/utils");
+var import_utils9 = require("@react-aria/utils");
 var import_system31 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
@@ -1573,11 +1490,13 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ import_react43.default.createElement(import_system29.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react43.default.createElement(import_system29.Box, {
     as: "li",
     ref,
-    css: styles.option
-  }, optionProps), stateProps), item.rendered);
+    css: styles.option,
+    ...optionProps,
+    ...stateProps
+  }, item.rendered);
 };
 
 // src/ListBox/ListBoxSection.tsx
@@ -1587,16 +1506,19 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, __spreadValues({
+  return /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, {
     as: "li",
-    css: styles.section
-  }, itemProps), section.rendered && /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, __spreadValues({
-    css: styles.sectionTitle
-  }, headingProps), section.rendered), /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, __spreadValues({
+    css: styles.section,
+    ...itemProps
+  }, section.rendered && /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, {
+    css: styles.sectionTitle,
+    ...headingProps
+  }, section.rendered), /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, {
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
-    css: styles.list
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react44.default.createElement(ListBoxOption, {
+    css: styles.list,
+    ...groupProps
+  }, [...section.childNodes].map((node) => /* @__PURE__ */ import_react44.default.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
@@ -1604,21 +1526,21 @@ var ListBoxSection = ({ section, state }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = (0, import_react45.forwardRef)((_a, ref) => {
-  var _b = _a, { state, variant, size } = _b, props = __objRest(_b, ["state", "variant", "size"]);
-  const innerRef = (0, import_utils7.useObjectRef)(ref);
+var ListBox = (0, import_react45.forwardRef)(({ state, variant, size, ...props }, ref) => {
+  const innerRef = (0, import_utils9.useObjectRef)(ref);
   const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
   const styles = (0, import_system31.useComponentStyles)("ListBox", { variant, size }, { parts: ["container", "list", "option", "section", "sectionTitle"] });
   return /* @__PURE__ */ import_react45.default.createElement(ListBoxContext.Provider, {
     value: { styles }
   }, /* @__PURE__ */ import_react45.default.createElement(import_system31.Box, {
     css: styles.container
-  }, /* @__PURE__ */ import_react45.default.createElement(import_system31.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react45.default.createElement(import_system31.Box, {
     as: "ul",
     ref: innerRef,
     __baseCSS: { listStyle: "none", p: 0 },
-    css: styles.list
-  }, listBoxProps), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react45.default.createElement(ListBoxSection, {
+    css: styles.list,
+    ...listBoxProps
+  }, [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react45.default.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
@@ -1653,34 +1575,18 @@ var Chevron = ({ css }) => /* @__PURE__ */ import_react46.default.createElement(
   strokeLinejoin: "round",
   d: "M19 9l-7 7-7-7"
 }));
-var Select = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width,
-    open,
-    disabled,
-    required,
-    error
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "open",
-    "disabled",
-    "required",
-    "error"
-  ]);
+var Select = (0, import_react46.forwardRef)(({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
   const formatMessage = (0, import_i18n2.useMessageFormatter)(messages);
-  const props = __spreadValues({
+  const buttonRef = (0, import_utils10.useObjectRef)(ref);
+  const props = {
     isOpen: open,
     isDisabled: disabled,
     isRequired: required,
     validationState: error ? "invalid" : "valid",
-    placeholder: rest.placeholder || formatMessage("placeholder")
-  }, rest);
+    placeholder: rest.placeholder || formatMessage("placeholder"),
+    ...rest
+  };
   const state = (0, import_select2.useSelectState)(props);
-  const buttonRef = (0, import_react46.useRef)(null);
   const {
     labelProps,
     triggerProps,
@@ -1689,7 +1595,7 @@ var Select = (_a) => {
     descriptionProps,
     errorMessageProps
   } = (0, import_select.useSelect)(props, state, buttonRef);
-  const { buttonProps } = (0, import_button4.useButton)(__spreadValues({ isDisabled: disabled }, triggerProps), buttonRef);
+  const { buttonProps } = (0, import_button4.useButton)({ isDisabled: disabled, ...triggerProps }, buttonRef);
   const { focusProps, isFocusVisible } = (0, import_focus8.useFocusRing)();
   const overlayRef = (0, import_react46.useRef)(null);
   const { overlayProps: positionProps } = (0, import_overlays8.useOverlayPosition)({
@@ -1710,7 +1616,7 @@ var Select = (_a) => {
     size,
     width,
     label: props.label,
-    labelProps: __spreadValues({ as: "span" }, labelProps),
+    labelProps: { as: "span", ...labelProps },
     description: props.description,
     descriptionProps,
     error,
@@ -1725,7 +1631,7 @@ var Select = (_a) => {
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, __spreadValues(__spreadValues({
+  }), /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, {
     as: "button",
     __baseCSS: {
       display: "flex",
@@ -1735,33 +1641,38 @@ var Select = (_a) => {
       width: "100%"
     },
     css: styles.button,
-    ref: buttonRef
-  }, (0, import_utils8.mergeProps)(buttonProps, focusProps)), stateProps), /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, __spreadValues({
+    ref: buttonRef,
+    ...(0, import_utils10.mergeProps)(buttonProps, focusProps),
+    ...stateProps
+  }, /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, {
     css: {
       overflow: "hidden",
       whiteSpace: "nowrap"
-    }
-  }, valueProps), state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react46.default.createElement(Chevron, {
+    },
+    ...valueProps
+  }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react46.default.createElement(Chevron, {
     css: styles.icon
-  })), /* @__PURE__ */ import_react46.default.createElement(Popover, __spreadValues({
+  })), /* @__PURE__ */ import_react46.default.createElement(Popover, {
     open: state.isOpen,
     onClose: state.close,
     dismissable: true,
     shouldCloseOnBlur: true,
     minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
-    ref: overlayRef
-  }, positionProps), /* @__PURE__ */ import_react46.default.createElement(import_focus8.FocusScope, {
+    ref: overlayRef,
+    ...positionProps
+  }, /* @__PURE__ */ import_react46.default.createElement(import_focus8.FocusScope, {
     restoreFocus: true
   }, /* @__PURE__ */ import_react46.default.createElement(import_overlays8.DismissButton, {
     onDismiss: state.close
-  }), /* @__PURE__ */ import_react46.default.createElement(ListBox, __spreadValues({
+  }), /* @__PURE__ */ import_react46.default.createElement(ListBox, {
     state,
     variant,
-    size
-  }, menuProps)), /* @__PURE__ */ import_react46.default.createElement(import_overlays8.DismissButton, {
+    size,
+    ...menuProps
+  }), /* @__PURE__ */ import_react46.default.createElement(import_overlays8.DismissButton, {
     onDismiss: state.close
   }))));
-};
+});
 Select.Option = import_collections2.Item;
 Select.Section = import_collections2.Section;
 
@@ -1770,12 +1681,13 @@ var import_react48 = __toESM(require("react"));
 var import_slider2 = require("@react-aria/slider");
 var import_slider3 = require("@react-stately/slider");
 var import_i18n3 = require("@react-aria/i18n");
+var import_utils12 = require("@react-aria/utils");
 var import_system34 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
 var import_react47 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
-var import_utils9 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_system33 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
@@ -1783,8 +1695,7 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/Slider/Thumb.tsx
 var import_focus9 = require("@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 = import_react47.default.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = (0, import_focus9.useFocusRing)();
@@ -1809,52 +1720,50 @@ var Thumb = (_a) => {
       transform: "translateX(-50%)",
       left: `${state.getThumbPercent(0) * 100}%`
     }
-  }, /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({}, thumbProps), {
-    __baseCSS: styles
-  }), stateProps), /* @__PURE__ */ import_react47.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react47.default.createElement(import_system.Box, {
+    ...thumbProps,
+    __baseCSS: styles,
+    ...stateProps
+  }, /* @__PURE__ */ import_react47.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react47.default.createElement(import_system.Box, {
     as: "input",
     type: "range",
-    ref: inputRef
-  }, (0, import_utils9.mergeProps)(inputProps, focusProps))))));
+    ref: inputRef,
+    ...(0, import_utils11.mergeProps)(inputProps, focusProps)
+  }))));
 };
 
 // src/Slider/Slider.tsx
-var Slider = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width = "100%"
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "width"
-  ]);
+var Slider = (0, import_react48.forwardRef)(({ variant, size, width = "100%", ...props }, ref) => {
   const { formatOptions } = props;
-  const trackRef = (0, import_react48.useRef)(null);
+  const trackRef = (0, import_utils12.useObjectRef)(ref);
   const numberFormatter = (0, import_i18n3.useNumberFormatter)(formatOptions);
-  const state = (0, import_slider3.useSliderState)(__spreadProps(__spreadValues({}, props), { numberFormatter }));
-  const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)(__spreadValues({
-    label: props.children
-  }, props), state, trackRef);
+  const state = (0, import_slider3.useSliderState)({ ...props, numberFormatter });
+  const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)({
+    label: props.children,
+    ...props
+  }, state, trackRef);
   const styles = (0, import_system34.useComponentStyles)("Slider", { variant, size }, { parts: ["track", "thumb", "label", "output"] });
-  return /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
     __baseCSS: {
       display: "flex",
       flexDirection: "column",
       touchAction: "none",
       width
-    }
-  }, groupProps), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
+    },
+    ...groupProps
+  }, /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
     __baseCSS: { display: "flex", alignSelf: "stretch" }
-  }, props.children && /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadValues({
+  }, props.children && /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
     as: "label",
-    __baseCSS: styles.label
-  }, labelProps), props.children), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "output"
-  }, outputProps), {
+    __baseCSS: styles.label,
+    ...labelProps
+  }, props.children), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
+    as: "output",
+    ...outputProps,
     __baseCSS: { flex: "1 0 auto", textAlign: "end" },
     css: styles.output
-  }), state.getThumbValueLabel(0))), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, trackProps), {
+  }, state.getThumbValueLabel(0))), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
+    ...trackProps,
     ref: trackRef,
     __baseCSS: {
       position: "relative",
@@ -1862,7 +1771,7 @@ var Slider = (_a) => {
       width: "100%",
       cursor: props.disabled ? "not-allowed" : "pointer"
     }
-  }), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
     __baseCSS: styles.track
   }), /* @__PURE__ */ import_react48.default.createElement(Thumb, {
     state,
@@ -1870,15 +1779,16 @@ var Slider = (_a) => {
     disabled: props.disabled,
     styles: styles.thumb
   })));
-};
+});
 
 // src/Split/Split.tsx
 var import_react49 = __toESM(require("react"));
 var import_system35 = require("@marigold/system");
-var Split = (props) => /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, __spreadProps(__spreadValues({}, props), {
+var Split = (props) => /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
+  ...props,
   role: "separator",
   css: { flexGrow: 1 }
-}));
+});
 
 // src/Stack/Stack.tsx
 var import_react50 = __toESM(require("react"));
@@ -1892,66 +1802,53 @@ 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__ */ import_react50.default.createElement(import_system.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__ */ import_react50.default.createElement(import_system.Box, {
+  css: {
+    display: "flex",
+    flexDirection: "column",
+    p: 0,
+    gap: space,
+    alignItems: ALIGNMENT_X2[alignX],
+    justifyContent: ALIGNMENT_Y2[alignY],
+    blockSize: stretch ? "100%" : "auto"
+  },
+  ...props
+}, children);
 
 // src/Switch/Switch.tsx
 var import_react51 = __toESM(require("react"));
 var import_focus10 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
+var import_utils13 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
 var import_system36 = require("@marigold/system");
-var Switch = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width = "100%",
-    checked,
-    disabled,
-    readOnly,
-    defaultChecked
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "checked",
-    "disabled",
-    "readOnly",
-    "defaultChecked"
-  ]);
-  const ref = (0, import_react51.useRef)(null);
-  const props = __spreadValues({
+var Switch = (0, import_react51.forwardRef)(({
+  variant,
+  size,
+  width = "100%",
+  checked,
+  disabled,
+  readOnly,
+  defaultChecked,
+  ...rest
+}, ref) => {
+  const inputRef = (0, import_utils13.useObjectRef)(ref);
+  const props = {
     isSelected: checked,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    defaultSelected: defaultChecked
-  }, rest);
+    defaultSelected: defaultChecked,
+    ...rest
+  };
   const state = (0, import_toggle2.useToggleState)(props);
-  const { inputProps } = (0, import_switch.useSwitch)(props, state, ref);
+  const { inputProps } = (0, import_switch.useSwitch)(props, state, inputRef);
   const { isFocusVisible, focusProps } = (0, import_focus10.useFocusRing)();
   const stateProps = (0, import_system36.useStateProps)({
     checked: state.isSelected,
@@ -1971,9 +1868,9 @@ var Switch = (_a) => {
       width
     },
     css: styles.container
-  }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -1983,10 +1880,12 @@ var Switch = (_a) => {
       zIndex: 1,
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
-    }
-  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
+    },
+    ...inputProps,
+    ...focusProps
+  }), props.children && /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     css: styles.label
-  }, props.children), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
+  }, props.children), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     __baseCSS: {
       position: "relative",
       width: 48,
@@ -1994,8 +1893,9 @@ var Switch = (_a) => {
       bg: "#dee2e6",
       borderRadius: 20
     },
-    css: styles.track
-  }, stateProps), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
+    css: styles.track,
+    ...stateProps
+  }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     __baseCSS: {
       display: "block",
       position: "absolute",
@@ -2012,9 +1912,10 @@ var Switch = (_a) => {
         transform: "translateX(calc(47px - 100%))"
       }
     },
-    css: styles.thumb
-  }, stateProps))));
-};
+    css: styles.thumb,
+    ...stateProps
+  })));
+});
 
 // src/Table/Table.tsx
 var import_react61 = __toESM(require("react"));
@@ -2032,14 +1933,16 @@ var import_react53 = __toESM(require("react"));
 var import_table = require("@react-aria/table");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ import_react53.default.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ import_react53.default.createElement("tbody", {
+    ...rowGroupProps
+  }, children);
 };
 
 // src/Table/TableCell.tsx
 var import_react54 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
 var import_focus11 = require("@react-aria/focus");
-var import_utils10 = require("@react-aria/utils");
+var import_utils14 = require("@react-aria/utils");
 var import_system37 = require("@marigold/system");
 var TableCell = ({ cell }) => {
   const ref = (0, import_react54.useRef)(null);
@@ -2050,41 +1953,39 @@ var TableCell = ({ cell }) => {
   }, state, ref);
   const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
   const stateProps = (0, import_system37.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react54.default.createElement(import_system37.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react54.default.createElement(import_system37.Box, {
     as: "td",
     ref,
-    css: styles.cell
-  }, (0, import_utils10.mergeProps)(gridCellProps, focusProps)), stateProps), cell.rendered);
+    css: styles.cell,
+    ...(0, import_utils14.mergeProps)(gridCellProps, focusProps),
+    ...stateProps
+  }, cell.rendered);
 };
 
 // src/Table/TableCheckboxCell.tsx
 var import_react55 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var import_focus12 = require("@react-aria/focus");
-var import_utils11 = require("@react-aria/utils");
+var import_utils15 = require("@react-aria/utils");
 var import_system38 = require("@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 };
 };
 
@@ -2099,7 +2000,7 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps((0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state));
   const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
   const stateProps = (0, import_system38.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react55.default.createElement(import_system38.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react55.default.createElement(import_system38.Box, {
     as: "td",
     ref,
     __baseCSS: {
@@ -2107,8 +2008,12 @@ var TableCheckboxCell = ({ cell }) => {
       verticalAlign: "middle",
       lineHeight: 1
     },
-    css: styles.cell
-  }, (0, import_utils11.mergeProps)(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ import_react55.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+    css: styles.cell,
+    ...(0, import_utils15.mergeProps)(gridCellProps, focusProps),
+    ...stateProps
+  }, /* @__PURE__ */ import_react55.default.createElement(Checkbox, {
+    ...checkboxProps
+  }));
 };
 
 // src/Table/TableColumnHeader.tsx
@@ -2116,7 +2021,7 @@ var import_react56 = __toESM(require("react"));
 var import_focus13 = require("@react-aria/focus");
 var import_interactions7 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils13 = require("@react-aria/utils");
+var import_utils17 = require("@react-aria/utils");
 var import_system39 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
@@ -2144,12 +2049,14 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react56.default.createElement(import_system39.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react56.default.createElement(import_system39.Box, {
     as: "th",
     colSpan: column.colspan,
     ref,
-    css: styles.header
-  }, (0, import_utils13.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react56.default.createElement(SortIndicator, {
+    css: styles.header,
+    ...(0, import_utils17.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...stateProps
+  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react56.default.createElement(SortIndicator, {
     direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
     visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
   }));
@@ -2160,7 +2067,9 @@ var import_react57 = __toESM(require("react"));
 var import_table5 = require("@react-aria/table");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ import_react57.default.createElement("thead", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ import_react57.default.createElement("thead", {
+    ...rowGroupProps
+  }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
@@ -2170,9 +2079,10 @@ var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = (0, import_react58.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react58.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ import_react58.default.createElement("tr", {
+    ...rowProps,
     ref
-  }), children);
+  }, children);
 };
 
 // src/Table/TableRow.tsx
@@ -2180,7 +2090,7 @@ var import_react59 = __toESM(require("react"));
 var import_focus14 = require("@react-aria/focus");
 var import_interactions8 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils14 = require("@react-aria/utils");
+var import_utils18 = require("@react-aria/utils");
 var import_system40 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react59.useRef)(null);
@@ -2199,11 +2109,13 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ import_react59.default.createElement(import_system40.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react59.default.createElement(import_system40.Box, {
     as: "tr",
     ref,
-    css: styles.row
-  }, (0, import_utils14.mergeProps)(rowProps, focusProps, hoverProps)), stateProps), children);
+    css: styles.row,
+    ...(0, import_utils18.mergeProps)(rowProps, focusProps, hoverProps),
+    ...stateProps
+  }, children);
 };
 
 // src/Table/TableSelectAllCell.tsx
@@ -2211,7 +2123,7 @@ var import_react60 = __toESM(require("react"));
 var import_focus15 = require("@react-aria/focus");
 var import_interactions9 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils15 = require("@react-aria/utils");
+var import_utils19 = require("@react-aria/utils");
 var import_system41 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
   const ref = (0, import_react60.useRef)(null);
@@ -2226,7 +2138,7 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react60.default.createElement(import_system41.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react60.default.createElement(import_system41.Box, {
     as: "th",
     ref,
     __baseCSS: {
@@ -2234,44 +2146,46 @@ var TableSelectAllCell = ({ column }) => {
       verticalAlign: "middle",
       lineHeight: 1
     },
-    css: styles.header
-  }, (0, import_utils15.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ import_react60.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+    css: styles.header,
+    ...(0, import_utils19.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...stateProps
+  }, /* @__PURE__ */ import_react60.default.createElement(Checkbox, {
+    ...checkboxProps
+  }));
 };
 
 // src/Table/Table.tsx
-var Table = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    stretch
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "stretch"
-  ]);
+var Table = ({
+  variant,
+  size,
+  stretch,
+  ...props
+}) => {
   const tableRef = (0, import_react61.useRef)(null);
-  const state = (0, import_table10.useTableState)(__spreadProps(__spreadValues({}, props), {
+  const state = (0, import_table10.useTableState)({
+    ...props,
     showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
-  }));
+  });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
   const styles = (0, import_system42.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
   const { collection } = state;
   return /* @__PURE__ */ import_react61.default.createElement(TableContext.Provider, {
     value: { state, styles }
-  }, /* @__PURE__ */ import_react61.default.createElement(import_system42.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react61.default.createElement(import_system42.Box, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
       borderCollapse: "collapse",
       width: stretch ? "100%" : void 0
     },
-    css: styles.table
-  }, gridProps), /* @__PURE__ */ import_react61.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react61.default.createElement(TableHeaderRow, {
+    css: styles.table,
+    ...gridProps
+  }, /* @__PURE__ */ import_react61.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react61.default.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map((column) => {
-    var _a2;
-    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableSelectAllCell, {
+    var _a;
+    return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableSelectAllCell, {
       key: column.key,
       column
     }) : /* @__PURE__ */ import_react61.default.createElement(TableColumnHeader, {
@@ -2282,8 +2196,8 @@ var Table = (_a) => {
     key: row.key,
     row
   }, [...row.childNodes].map((cell) => {
-    var _a2;
-    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableCheckboxCell, {
+    var _a;
+    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableCheckboxCell, {
       key: cell.key,
       cell
     }) : /* @__PURE__ */ import_react61.default.createElement(TableCell, {
@@ -2302,72 +2216,56 @@ Table.Row = import_table10.Row;
 var import_react62 = __toESM(require("react"));
 var import_system43 = require("@marigold/system");
 var import_system44 = require("@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"
-  ]);
+var Text = ({
+  variant,
+  size,
+  align,
+  color,
+  fontSize,
+  cursor,
+  outline,
+  children,
+  ...props
+}) => {
   const styles = (0, import_system43.useComponentStyles)("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ import_react62.default.createElement(import_system44.Box, __spreadProps(__spreadValues({
-    as: "p"
-  }, props), {
-    css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
-  }), children);
+  return /* @__PURE__ */ import_react62.default.createElement(import_system44.Box, {
+    as: "p",
+    ...props,
+    css: { color, cursor, outline, fontSize, textAlign: align, ...styles }
+  }, children);
 };
 
 // src/TextArea/TextArea.tsx
 var import_react63 = __toESM(require("react"));
-var import_textfield = require("@react-aria/textfield");
-var import_system45 = require("@marigold/system");
 var import_interactions10 = require("@react-aria/interactions");
 var import_focus16 = require("@react-aria/focus");
-var TextArea = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width,
-    disabled,
-    required,
-    readOnly,
-    error,
-    rows
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "disabled",
-    "required",
-    "readOnly",
-    "error",
-    "rows"
-  ]);
+var import_textfield = require("@react-aria/textfield");
+var import_utils21 = require("@react-aria/utils");
+var import_system45 = require("@marigold/system");
+var TextArea = (0, import_react63.forwardRef)(({
+  variant,
+  size,
+  width,
+  disabled,
+  required,
+  readOnly,
+  error,
+  rows,
+  ...props
+}, ref) => {
   const { label, description, errorMessage } = props;
-  const ref = (0, import_react63.useRef)(null);
-  const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(__spreadValues({
+  const textAreaRef = (0, import_utils21.useObjectRef)(ref);
+  const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)({
     inputElementType: "textarea",
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, props), ref);
+    validationState: error ? "invalid" : "valid",
+    ...props
+  }, textAreaRef);
   const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
   const stateProps = (0, import_system45.useStateProps)({
@@ -2391,46 +2289,35 @@ var TextArea = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ import_react63.default.createElement(import_system45.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react63.default.createElement(import_system45.Box, {
     as: "textarea",
     css: styles,
-    ref,
-    rows
-  }, inputProps), focusProps), hoverProps), stateProps)));
-};
+    ref: textAreaRef,
+    rows,
+    ...inputProps,
+    ...focusProps,
+    ...hoverProps,
+    ...stateProps
+  }));
+});
 
 // src/TextField/TextField.tsx
 var import_react64 = __toESM(require("react"));
 var import_interactions11 = require("@react-aria/interactions");
 var import_focus17 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
+var import_utils22 = require("@react-aria/utils");
 var import_system46 = require("@marigold/system");
-var TextField = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width,
-    disabled,
-    required,
-    readOnly,
-    error
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "disabled",
-    "required",
-    "readOnly",
-    "error"
-  ]);
+var TextField = (0, import_react64.forwardRef)(({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
   const { label, description, errorMessage, autoFocus } = props;
-  const ref = (0, import_react64.useRef)(null);
-  const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadValues({
+  const inputRef = (0, import_utils22.useObjectRef)(ref);
+  const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)({
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  }, props), ref);
+    validationState: error ? "invalid" : "valid",
+    ...props
+  }, inputRef);
   const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)({
     isTextInput: true,
@@ -2456,26 +2343,28 @@ var TextField = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ import_react64.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-    ref,
+  }, /* @__PURE__ */ import_react64.default.createElement(Input, {
+    ref: inputRef,
     variant,
-    size
-  }, inputProps), focusProps), hoverProps), stateProps)));
-};
+    size,
+    ...inputProps,
+    ...focusProps,
+    ...hoverProps,
+    ...stateProps
+  }));
+});
 
 // src/Tiles/Tiles.tsx
 var import_react65 = __toESM(require("react"));
-var Tiles = import_react65.default.forwardRef((_a, ref) => {
-  var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ import_react65.default.createElement(import_system.Box, __spreadValues({
-    ref,
-    display: "grid",
-    __baseCSS: {
-      gap: space,
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`
-    }
-  }, props), children);
-});
+var Tiles = import_react65.default.forwardRef(({ space = "none", itemMinWidth = "250px", children, ...props }, ref) => /* @__PURE__ */ import_react65.default.createElement(import_system.Box, {
+  ref,
+  display: "grid",
+  __baseCSS: {
+    gap: space,
+    gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`
+  },
+  ...props
+}, children));
 
 // src/Tooltip/Tooltip.tsx
 var import_react68 = __toESM(require("react"));
@@ -2493,27 +2382,22 @@ var import_focus18 = require("@react-aria/focus");
 var import_overlays9 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@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"
-  ]);
+var TooltipTrigger = ({
+  disabled,
+  open,
+  delay = 1e3,
+  placement = "top",
+  children,
+  ...rest
+}) => {
   const [tooltipTrigger, tooltip] = import_react67.default.Children.toArray(children);
-  const props = __spreadProps(__spreadValues({}, rest), {
+  const props = {
+    ...rest,
     isDisabled: disabled,
     isOpen: open,
     delay,
     placement
-  });
+  };
   const tooltipTriggerRef = (0, import_react67.useRef)(null);
   const overlayRef = (0, import_react67.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
@@ -2530,15 +2414,18 @@ var TooltipTrigger = (_a) => {
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ import_react67.default.createElement(import_focus18.FocusableProvider, __spreadValues({
-    ref: tooltipTriggerRef
-  }, triggerProps), tooltipTrigger, /* @__PURE__ */ import_react67.default.createElement(TooltipContext.Provider, {
-    value: __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react67.default.createElement(import_focus18.FocusableProvider, {
+    ref: tooltipTriggerRef,
+    ...triggerProps
+  }, tooltipTrigger, /* @__PURE__ */ import_react67.default.createElement(TooltipContext.Provider, {
+    value: {
       state,
       overlayRef,
       arrowProps,
-      placement: overlayPlacement
-    }, tooltipProps), positionProps)
+      placement: overlayPlacement,
+      ...tooltipProps,
+      ...positionProps
+    }
   }, /* @__PURE__ */ import_react67.default.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
@@ -2546,14 +2433,17 @@ var TooltipTrigger = (_a) => {
 
 // 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 } = (0, import_tooltip3.useTooltip)({}, state);
   const styles = (0, import_system47.useComponentStyles)("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
-  return /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+  return /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, {
+    ...tooltipProps,
+    ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }), /* @__PURE__ */ import_react68.default.createElement("div", null, children), /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, __spreadProps(__spreadValues({}, arrowProps), {
+  }, /* @__PURE__ */ import_react68.default.createElement("div", null, children), /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, {
+    ...arrowProps,
     __baseCSS: {
       position: "absolute",
       height: 0,
@@ -2564,7 +2454,7 @@ var Tooltip = ({ children, variant, size }) => {
       borderBottomColor: "transparent"
     },
     css: styles.arrow
-  })));
+  }));
 };
 Tooltip.Trigger = TooltipTrigger;
 // Annotate the CommonJS export names for ESM import in node: