@marigold/components 1.0.0-beta.0 → 1.0.0

package/dist/index.mjs

@@ -344,7 +344,6 @@ var IndeterminateMark = () => /* @__PURE__ */ React10.createElement("svg", {
 }));
 var Icon = (_a) => {
   var _b = _a, { css, checked, indeterminate } = _b, props = __objRest(_b, ["css", "checked", "indeterminate"]);
-  const icon = indeterminate ? /* @__PURE__ */ React10.createElement(IndeterminateMark, null) : /* @__PURE__ */ React10.createElement(CheckMark, null);
   return /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
     "aria-hidden": "true",
     __baseCSS: {
@@ -359,7 +358,7 @@ var Icon = (_a) => {
       p: 1
     },
     css
-  }, props), checked ? icon : null);
+  }, props), indeterminate ? /* @__PURE__ */ React10.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React10.createElement(CheckMark, null) : null);
 };
 var Checkbox = (_a) => {
   var _b = _a, {
@@ -439,7 +438,7 @@ var Checkbox = (_a) => {
     checked: inputProps.checked,
     indeterminate,
     css: styles.checkbox
-  }, stateProps)), /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
+  }, stateProps)), props.children && /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
 };
@@ -821,12 +820,12 @@ Dialog.Trigger = DialogTrigger;
 // src/Divider/Divider.tsx
 import React22 from "react";
 import { useSeparator } from "@react-aria/separator";
-import { useComponentStyles as useComponentStyles12 } from "@marigold/system";
+import { Box as Box11, useComponentStyles as useComponentStyles12 } from "@marigold/system";
 var Divider = (_a) => {
   var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
   const { separatorProps } = useSeparator(props);
   const styles = useComponentStyles12("Divider", { variant });
-  return /* @__PURE__ */ React22.createElement(Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React22.createElement(Box11, __spreadValues(__spreadValues({
     css: styles
   }, props), separatorProps));
 };
@@ -860,7 +859,12 @@ var Image = (_a) => {
 
 // src/Inline/Inline.tsx
 import React25 from "react";
-var ALIGNMENT2 = {
+var ALIGNMENT_X = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var ALIGNMENT_Y = {
   top: "flex-start",
   center: "center",
   bottom: "flex-end"
@@ -868,27 +872,33 @@ var ALIGNMENT2 = {
 var Inline = (_a) => {
   var _b = _a, {
     space = "none",
-    align = "center",
+    alignX = "left",
+    alignY = "center",
     children
   } = _b, props = __objRest(_b, [
     "space",
-    "align",
+    "alignX",
+    "alignY",
     "children"
   ]);
   return /* @__PURE__ */ React25.createElement(Box, __spreadValues({
-    __baseCSS: { gap: space, flexWrap: "wrap" },
-    display: "inline-flex",
-    alignItems: ALIGNMENT2[align]
+    css: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: space,
+      alignItems: ALIGNMENT_Y[alignY],
+      justifyContent: ALIGNMENT_X[alignX]
+    }
   }, props), children);
 };
 
 // src/Input/Input.tsx
 import React26, { forwardRef as forwardRef4 } from "react";
-import { Box as Box11, useComponentStyles as useComponentStyles15 } from "@marigold/system";
+import { Box as Box12, useComponentStyles as useComponentStyles15 } from "@marigold/system";
 var Input = forwardRef4((_a, ref) => {
   var _b = _a, { variant, size, type = "text" } = _b, props = __objRest(_b, ["variant", "size", "type"]);
   const styles = useComponentStyles15("Input", { variant, size });
-  return /* @__PURE__ */ React26.createElement(Box11, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React26.createElement(Box12, __spreadProps(__spreadValues({}, props), {
     ref,
     as: "input",
     type,
@@ -935,7 +945,7 @@ import { DismissButton } from "@react-aria/overlays";
 import { Item } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
 import {
-  Box as Box13,
+  Box as Box14,
   useComponentStyles as useComponentStyles17
 } from "@marigold/system";
 
@@ -986,7 +996,7 @@ import React29, { useRef as useRef7 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { Box as Box12, useStateProps as useStateProps3 } from "@marigold/system";
+import { Box as Box13, useStateProps as useStateProps3 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = useRef7(null);
   const { onClose } = useMenuContext();
@@ -999,7 +1009,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
   const stateProps = useStateProps3({
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ React29.createElement(Box12, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React29.createElement(Box13, __spreadValues(__spreadValues({
     as: "li",
     ref,
     __baseCSS: {
@@ -1024,7 +1034,7 @@ var Menu = (_a) => {
     restoreFocus: true
   }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement(DismissButton, {
     onDismiss: ownProps.onClose
-  }), /* @__PURE__ */ React30.createElement(Box13, __spreadValues({
+  }), /* @__PURE__ */ React30.createElement(Box14, __spreadValues({
     as: "ul",
     ref,
     style: { width: triggerWidth },
@@ -1097,20 +1107,20 @@ import { useNumberField } from "@react-aria/numberfield";
 import { mergeProps as mergeProps6, useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
-  Box as Box17,
+  Box as Box18,
   useComponentStyles as useComponentStyles20,
   useStateProps as useStateProps5
 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
 import React33 from "react";
-import { Box as Box15 } from "@marigold/system";
+import { Box as Box16 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
 import React32 from "react";
 import { Exclamation as Exclamation2 } from "@marigold/icons";
 import {
-  Box as Box14,
+  Box as Box15,
   useComponentStyles as useComponentStyles19
 } from "@marigold/system";
 var HelpText = (_a) => {
@@ -1136,7 +1146,7 @@ var HelpText = (_a) => {
   var _a2;
   const hasErrorMessage = errorMessage && error;
   const styles = useComponentStyles19("HelpText", { variant, size }, { parts: ["container", "icon"] });
-  return /* @__PURE__ */ React32.createElement(Box14, __spreadProps(__spreadValues(__spreadValues({}, hasErrorMessage ? errorMessageProps : descriptionProps), props), {
+  return /* @__PURE__ */ React32.createElement(Box15, __spreadProps(__spreadValues(__spreadValues({}, hasErrorMessage ? errorMessageProps : descriptionProps), props), {
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles.container
   }), hasErrorMessage ? /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Exclamation2, {
@@ -1147,9 +1157,10 @@ var HelpText = (_a) => {
 
 // src/FieldBase/FieldBase.tsx
 var FieldBase = ({
+  children,
   variant,
   size,
-  children,
+  width = "100%",
   disabled,
   required,
   label,
@@ -1162,8 +1173,8 @@ var FieldBase = ({
   stateProps
 }) => {
   const hasHelpText = !!description || errorMessage && error;
-  return /* @__PURE__ */ React33.createElement(Box15, {
-    css: { display: "flex", flexDirection: "column", width: "100%" }
+  return /* @__PURE__ */ React33.createElement(Box16, {
+    css: { display: "flex", flexDirection: "column", width }
   }, label && /* @__PURE__ */ React33.createElement(Label, __spreadValues(__spreadValues({
     required,
     variant,
@@ -1185,8 +1196,8 @@ import React34, { useRef as useRef9 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { Box as Box16, useStateProps as useStateProps4 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React34.createElement(Box16, {
+import { Box as Box17, useStateProps as useStateProps4 } from "@marigold/system";
+var Plus = () => /* @__PURE__ */ React34.createElement(Box17, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
@@ -1196,7 +1207,7 @@ var Plus = () => /* @__PURE__ */ React34.createElement(Box16, {
   clipRule: "evenodd",
   d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
 }));
-var Minus = () => /* @__PURE__ */ React34.createElement(Box16, {
+var Minus = () => /* @__PURE__ */ React34.createElement(Box17, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
@@ -1217,7 +1228,7 @@ var StepButton = (_a) => {
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React34.createElement(Box16, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React34.createElement(Box17, __spreadValues(__spreadValues({
     __baseCSS: {
       display: "flex",
       alignItems: "center",
@@ -1231,20 +1242,22 @@ var StepButton = (_a) => {
 // src/NumberField/NumberField.tsx
 var NumberField = forwardRef5((_a, ref) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     disabled,
     required,
     readOnly,
     error,
-    variant,
-    size,
     hideStepper
   } = _b, rest = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "disabled",
     "required",
     "readOnly",
     "error",
-    "variant",
-    "size",
     "hideStepper"
   ]);
   const props = __spreadValues({
@@ -1291,8 +1304,9 @@ var NumberField = forwardRef5((_a, ref) => {
     errorMessageProps,
     stateProps,
     variant,
-    size
-  }, /* @__PURE__ */ React35.createElement(Box17, __spreadValues(__spreadValues({
+    size,
+    width
+  }, /* @__PURE__ */ React35.createElement(Box18, __spreadValues(__spreadValues({
     "data-group": true,
     __baseCSS: {
       display: "flex",
@@ -1341,29 +1355,35 @@ function MarigoldProvider({
 
 // src/Radio/Radio.tsx
 import React38, { useRef as useRef10 } from "react";
+import { useHover as useHover4 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
 import {
-  Box as Box19,
+  Box as Box20,
   useComponentStyles as useComponentStyles22,
   useStateProps as useStateProps6
 } from "@marigold/system";
 
+// src/Radio/Context.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var RadioGroupContext = createContext4(null);
+var useRadioGroupContext = () => useContext4(RadioGroupContext);
+
 // src/Radio/RadioGroup.tsx
-import React37, { useContext as useContext4 } from "react";
+import React37 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import {
-  Box as Box18,
+  Box as Box19,
   useComponentStyles as useComponentStyles21
 } from "@marigold/system";
-var RadioGroupContext = React37.createContext(null);
-var useRadioGroupContext = () => useContext4(RadioGroupContext);
 var RadioGroup = (_a) => {
   var _b = _a, {
     children,
     orientation = "vertical",
     size,
     variant,
+    width,
     required,
     disabled,
     readOnly,
@@ -1373,6 +1393,7 @@ var RadioGroup = (_a) => {
     "orientation",
     "size",
     "variant",
+    "width",
     "required",
     "disabled",
     "readOnly",
@@ -1387,12 +1408,12 @@ var RadioGroup = (_a) => {
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps } = useRadioGroup(props, state);
   const styles = useComponentStyles21("RadioGroup", { variant, size }, { parts: ["container", "group"] });
-  return /* @__PURE__ */ React37.createElement(Box18, __spreadProps(__spreadValues({}, radioGroupProps), {
+  return /* @__PURE__ */ React37.createElement(Box19, __spreadProps(__spreadValues({}, radioGroupProps), {
     css: styles.container
   }), props.label && /* @__PURE__ */ React37.createElement(Label, __spreadValues({
     as: "span",
     required
-  }, labelProps), props.label), /* @__PURE__ */ React37.createElement(Box18, {
+  }, labelProps), props.label), /* @__PURE__ */ React37.createElement(Box19, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1403,13 +1424,11 @@ var RadioGroup = (_a) => {
     },
     css: styles.group
   }, /* @__PURE__ */ React37.createElement(RadioGroupContext.Provider, {
-    value: __spreadValues({ variant, size, error }, state)
+    value: __spreadValues({ variant, size, width, error }, state)
   }, children)));
 };
 
 // src/Radio/Radio.tsx
-import { useHover as useHover4 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 var Dot = () => /* @__PURE__ */ React38.createElement("svg", {
   viewBox: "0 0 6 6"
 }, /* @__PURE__ */ React38.createElement("circle", {
@@ -1420,7 +1439,7 @@ var Dot = () => /* @__PURE__ */ React38.createElement("svg", {
 }));
 var Icon2 = (_a) => {
   var _b = _a, { checked, css } = _b, props = __objRest(_b, ["checked", "css"]);
-  return /* @__PURE__ */ React38.createElement(Box19, __spreadValues({
+  return /* @__PURE__ */ React38.createElement(Box20, __spreadValues({
     "aria-hidden": "true",
     __baseCSS: {
       width: 16,
@@ -1437,8 +1456,18 @@ var Icon2 = (_a) => {
   }, props), checked ? /* @__PURE__ */ React38.createElement(Dot, null) : null);
 };
 var Radio = (_a) => {
-  var _b = _a, { disabled } = _b, props = __objRest(_b, ["disabled"]);
-  const _a2 = useRadioGroupContext(), { variant, size, error } = _a2, state = __objRest(_a2, ["variant", "size", "error"]);
+  var _b = _a, { width, disabled } = _b, props = __objRest(_b, ["width", "disabled"]);
+  const _a2 = useRadioGroupContext(), {
+    variant,
+    size,
+    error,
+    width: groupWidth
+  } = _a2, state = __objRest(_a2, [
+    "variant",
+    "size",
+    "error",
+    "width"
+  ]);
   const ref = useRef10(null);
   const { inputProps } = useRadio(__spreadValues({ isDisabled: disabled }, props), state, ref);
   const styles = useComponentStyles22("Radio", { variant: variant || props.variant, size: size || props.size }, { parts: ["container", "label", "radio"] });
@@ -1452,16 +1481,17 @@ var Radio = (_a) => {
     readOnly: props.readOnly,
     error
   });
-  return /* @__PURE__ */ React38.createElement(Box19, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React38.createElement(Box20, __spreadValues(__spreadValues({
     as: "label",
     __baseCSS: {
       display: "flex",
       alignItems: "center",
       gap: "1ch",
-      position: "relative"
+      position: "relative",
+      width: width || groupWidth || "100%"
     },
     css: styles.container
-  }, hoverProps), stateProps), /* @__PURE__ */ React38.createElement(Box19, __spreadValues(__spreadValues({
+  }, hoverProps), stateProps), /* @__PURE__ */ React38.createElement(Box20, __spreadValues(__spreadValues({
     as: "input",
     ref,
     css: {
@@ -1477,7 +1507,7 @@ var Radio = (_a) => {
   }, inputProps), focusProps)), /* @__PURE__ */ React38.createElement(Icon2, __spreadValues({
     checked: inputProps.checked,
     css: styles.radio
-  }, stateProps)), /* @__PURE__ */ React38.createElement(Box19, __spreadValues({
+  }, stateProps)), /* @__PURE__ */ React38.createElement(Box20, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
 };
@@ -1494,7 +1524,7 @@ import { useSelectState } from "@react-stately/select";
 import { Item as Item2, Section } from "@react-stately/collections";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  Box as Box23,
+  Box as Box24,
   useComponentStyles as useComponentStyles24,
   useStateProps as useStateProps8
 } from "@marigold/system";
@@ -1503,25 +1533,25 @@ import {
 import React41, { forwardRef as forwardRef6 } from "react";
 import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import {
-  Box as Box22,
+  Box as Box23,
   useComponentStyles as useComponentStyles23
 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
 
 // src/ListBox/Context.ts
-import { createContext as createContext4, useContext as useContext5 } from "react";
-var ListBoxContext = createContext4({});
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var ListBoxContext = createContext5({});
 var useListBoxContext = () => useContext5(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
 import React40 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
-import { Box as Box21 } from "@marigold/system";
+import { Box as Box22 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
 import React39, { useRef as useRef11 } from "react";
 import { useOption } from "@react-aria/listbox";
-import { Box as Box20, useStateProps as useStateProps7 } from "@marigold/system";
+import { Box as Box21, useStateProps as useStateProps7 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
   const ref = useRef11(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption({
@@ -1533,7 +1563,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React39.createElement(Box20, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React39.createElement(Box21, __spreadValues(__spreadValues({
     as: "li",
     ref,
     css: styles.option
@@ -1547,12 +1577,12 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React40.createElement(Box21, __spreadValues({
+  return /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
     as: "li",
     css: styles.section
-  }, itemProps), section.rendered && /* @__PURE__ */ React40.createElement(Box21, __spreadValues({
+  }, itemProps), section.rendered && /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
     css: styles.sectionTitle
-  }, headingProps), section.rendered), /* @__PURE__ */ React40.createElement(Box21, __spreadValues({
+  }, headingProps), section.rendered), /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list
@@ -1571,9 +1601,9 @@ var ListBox = forwardRef6((_a, ref) => {
   const styles = useComponentStyles23("ListBox", { variant, size }, { parts: ["container", "list", "option", "section", "sectionTitle"] });
   return /* @__PURE__ */ React41.createElement(ListBoxContext.Provider, {
     value: { styles }
-  }, /* @__PURE__ */ React41.createElement(Box22, {
+  }, /* @__PURE__ */ React41.createElement(Box23, {
     css: styles.container
-  }, /* @__PURE__ */ React41.createElement(Box22, __spreadValues({
+  }, /* @__PURE__ */ React41.createElement(Box23, __spreadValues({
     as: "ul",
     ref: innerRef,
     __baseCSS: { listStyle: "none", p: 0 },
@@ -1600,7 +1630,7 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React42.createElement(Box23, {
+var Chevron = ({ css }) => /* @__PURE__ */ React42.createElement(Box24, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   css,
@@ -1615,21 +1645,21 @@ var Chevron = ({ css }) => /* @__PURE__ */ React42.createElement(Box23, {
 }));
 var Select = (_a) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     open,
     disabled,
     required,
-    error,
-    variant,
-    size,
-    css
+    error
   } = _b, rest = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "open",
     "disabled",
     "required",
-    "error",
-    "variant",
-    "size",
-    "css"
+    "error"
   ]);
   const formatMessage = useMessageFormatter(messages);
   const props = __spreadValues({
@@ -1668,6 +1698,7 @@ var Select = (_a) => {
   return /* @__PURE__ */ React42.createElement(FieldBase, {
     variant,
     size,
+    width,
     label: props.label,
     labelProps: __spreadValues({ as: "span" }, labelProps),
     description: props.description,
@@ -1684,7 +1715,7 @@ var Select = (_a) => {
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ React42.createElement(Box23, __spreadValues(__spreadValues({
+  }), /* @__PURE__ */ React42.createElement(Box24, __spreadValues(__spreadValues({
     as: "button",
     __baseCSS: {
       display: "flex",
@@ -1695,7 +1726,7 @@ var Select = (_a) => {
     },
     css: styles.button,
     ref: buttonRef
-  }, mergeProps7(buttonProps, focusProps)), stateProps), /* @__PURE__ */ React42.createElement(Box23, __spreadValues({
+  }, mergeProps7(buttonProps, focusProps)), stateProps), /* @__PURE__ */ React42.createElement(Box24, __spreadValues({
     css: {
       overflow: "hidden",
       whiteSpace: "nowrap"
@@ -1779,7 +1810,15 @@ var Thumb = (_a) => {
 
 // src/Slider/Slider.tsx
 var Slider = (_a) => {
-  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
+  var _b = _a, {
+    variant,
+    size,
+    width = "100%"
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "width"
+  ]);
   const { formatOptions } = props;
   const trackRef = useRef13(null);
   const numberFormatter = useNumberFormatter(formatOptions);
@@ -1792,7 +1831,8 @@ var Slider = (_a) => {
     __baseCSS: {
       display: "flex",
       flexDirection: "column",
-      touchAction: "none"
+      touchAction: "none",
+      width
     }
   }, groupProps), /* @__PURE__ */ React44.createElement(Box, {
     __baseCSS: { display: "flex", alignSelf: "stretch" }
@@ -1824,28 +1864,41 @@ var Slider = (_a) => {
 
 // src/Stack/Stack.tsx
 import React45 from "react";
-var ALIGNMENT3 = {
+var ALIGNMENT_X2 = {
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
+var ALIGNMENT_Y2 = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
 var Stack = (_a) => {
   var _b = _a, {
+    children,
     space = "none",
-    align = "left",
-    children
+    alignX = "left",
+    alignY = "top",
+    stretch = false
   } = _b, props = __objRest(_b, [
+    "children",
     "space",
-    "align",
-    "children"
+    "alignX",
+    "alignY",
+    "stretch"
   ]);
-  return /* @__PURE__ */ React45.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: ALIGNMENT3[align],
-    p: "0",
-    css: { gap: space }
-  }), children);
+  return /* @__PURE__ */ React45.createElement(Box, __spreadValues({
+    css: {
+      display: "flex",
+      flexDirection: "column",
+      p: 0,
+      gap: space,
+      alignItems: ALIGNMENT_X2[alignX],
+      justifyContent: ALIGNMENT_Y2[alignY],
+      blockSize: stretch ? "100%" : "auto"
+    }
+  }, props), children);
 };
 
 // src/Switch/Switch.tsx
@@ -1861,6 +1914,7 @@ var Switch = (_a) => {
   var _b = _a, {
     variant,
     size,
+    width = "100%",
     checked,
     disabled,
     readOnly,
@@ -1868,6 +1922,7 @@ var Switch = (_a) => {
   } = _b, rest = __objRest(_b, [
     "variant",
     "size",
+    "width",
     "checked",
     "disabled",
     "readOnly",
@@ -1897,7 +1952,8 @@ var Switch = (_a) => {
       alignItems: "center",
       justifyContent: "space-between",
       gap: "1ch",
-      position: "relative"
+      position: "relative",
+      width
     },
     css: styles.container
   }, /* @__PURE__ */ React46.createElement(Box, __spreadValues(__spreadValues({
@@ -1946,249 +2002,338 @@ var Switch = (_a) => {
 };
 
 // src/Table/Table.tsx
-import React53, { useRef as useRef19 } from "react";
+import React55, { useRef as useRef21 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
   Column,
   Row,
-  TableBody,
-  TableHeader,
+  TableBody as Body,
+  TableHeader as Header2,
   useTableState
 } from "@react-stately/table";
-import { useComponentStyles as useComponentStyles28 } from "@marigold/system";
+import {
+  Box as Box30,
+  useComponentStyles as useComponentStyles27
+} from "@marigold/system";
+
+// src/Table/Context.tsx
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var TableContext = createContext6({});
+var useTableContext = () => useContext6(TableContext);
+
+// src/Table/TableBody.tsx
+import React47 from "react";
+import { useTableRowGroup } from "@react-aria/table";
+var TableBody = ({ children }) => {
+  const { rowGroupProps } = useTableRowGroup();
+  return /* @__PURE__ */ React47.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+};
 
 // src/Table/TableCell.tsx
-import React47, { useRef as useRef15 } from "react";
-import { useCheckbox as useCheckbox2 } from "@react-aria/checkbox";
+import React48, { useRef as useRef15 } from "react";
+import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
-import { useTableCell, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { useToggleState as useToggleState3 } from "@react-stately/toggle";
-import { useStateProps as useStateProps11 } from "@marigold/system";
-var TableCell = ({
-  item: cell,
-  state,
-  isSelectionCell,
-  css
-}) => {
-  const cellRef = useRef15(null);
-  const { gridCellProps } = useTableCell({ node: cell }, state, cellRef);
-  const { checkboxProps } = useTableSelectionCheckbox({ key: cell.parentKey }, state);
-  const inputRef = useRef15(null);
-  const { inputProps } = useCheckbox2(checkboxProps, useToggleState3(checkboxProps), inputRef);
+import { Box as Box25, useStateProps as useStateProps11 } from "@marigold/system";
+var TableCell = ({ cell }) => {
+  const ref = useRef15(null);
+  const { state, styles } = useTableContext();
+  const disabled = state.disabledKeys.has(cell.parentKey);
+  const { gridCellProps } = useTableCell({
+    node: cell
+  }, state, ref);
   const { focusProps, isFocusVisible } = useFocusRing9();
-  const stateProps = useStateProps11({ focus: isFocusVisible });
-  return /* @__PURE__ */ React47.createElement(Box, __spreadValues(__spreadValues({
+  const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React48.createElement(Box25, __spreadValues(__spreadValues({
     as: "td",
-    ref: cellRef,
-    __baseCSS: {
-      textAlign: isSelectionCell ? "center" : "left"
-    },
-    css
-  }, mergeProps9(gridCellProps, focusProps)), stateProps), isSelectionCell ? /* @__PURE__ */ React47.createElement("input", __spreadValues({}, inputProps)) : /* @__PURE__ */ React47.createElement(React47.Fragment, null, cell.rendered));
+    ref,
+    css: styles.cell
+  }, mergeProps9(gridCellProps, focusProps)), stateProps), cell.rendered);
 };
 
-// src/Table/TableColumnHeader.tsx
+// src/Table/TableCheckboxCell.tsx
 import React49, { useRef as useRef16 } from "react";
-import { useCheckbox as useCheckbox3 } from "@react-aria/checkbox";
+import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import {
-  useTableSelectAllCheckbox,
-  useTableColumnHeader
-} from "@react-aria/table";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { useToggleState as useToggleState4 } from "@react-stately/toggle";
-import { useStateProps as useStateProps12 } from "@marigold/system";
-
-// src/Text/Text.tsx
-import React48 from "react";
-import {
-  useComponentStyles as useComponentStyles27
-} from "@marigold/system";
-import { Box as Box24 } from "@marigold/system";
-var Text = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    align,
-    color,
-    fontSize,
-    cursor,
-    outline,
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "align",
-    "color",
-    "fontSize",
-    "cursor",
-    "outline",
-    "children"
+import { Box as Box26, useStateProps as useStateProps12 } from "@marigold/system";
+
+// src/Table/utils.ts
+var mapCheckboxProps = (_a) => {
+  var {
+    checkboxProps: _b
+  } = _a, _c = _b, {
+    isIndeterminate,
+    isSelected,
+    isDisabled,
+    defaultSelected
+  } = _c, rest = __objRest(_c, [
+    "isIndeterminate",
+    "isSelected",
+    "isDisabled",
+    "defaultSelected"
   ]);
-  const styles = useComponentStyles27("Text", {
-    variant,
-    size
-  });
-  return /* @__PURE__ */ React48.createElement(Box24, __spreadProps(__spreadValues({
-    as: "p"
-  }, props), {
-    css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
-  }), children);
+  const checkboxProps = __spreadValues({
+    disabled: isDisabled,
+    checked: isSelected,
+    defaultChecked: defaultSelected,
+    indeterminate: isIndeterminate
+  }, rest);
+  return { checkboxProps };
 };
 
-// src/Table/TableColumnHeader.tsx
-var TableColumnHeader = ({
-  item: column,
-  state,
-  isSelectionColumn,
-  css
-}) => {
+// src/Table/TableCheckboxCell.tsx
+var TableCheckboxCell = ({ cell }) => {
   const ref = useRef16(null);
-  const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref);
-  const { checkboxProps } = useTableSelectAllCheckbox(state);
-  const inputRef = useRef16(null);
-  const { inputProps } = useCheckbox3(checkboxProps, useToggleState4(checkboxProps), inputRef);
+  const { state, styles } = useTableContext();
+  const disabled = state.disabledKeys.has(cell.parentKey);
+  const { gridCellProps } = useTableCell2({
+    node: cell
+  }, state, ref);
+  const { checkboxProps } = mapCheckboxProps(useTableSelectionCheckbox({ key: cell.parentKey }, state));
   const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps12({ focus: isFocusVisible });
-  return /* @__PURE__ */ React49.createElement(Box, __spreadValues(__spreadValues({
+  const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React49.createElement(Box26, __spreadValues(__spreadValues({
+    as: "td",
+    ref,
+    __baseCSS: {
+      textAlign: "center",
+      verticalAlign: "middle",
+      lineHeight: 1
+    },
+    css: styles.cell
+  }, mergeProps10(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ React49.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+};
+
+// src/Table/TableColumnHeader.tsx
+import React50, { useRef as useRef17 } from "react";
+import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
+import { useHover as useHover5 } from "@react-aria/interactions";
+import { useTableColumnHeader } from "@react-aria/table";
+import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { Box as Box27, useStateProps as useStateProps13 } from "@marigold/system";
+var TableColumnHeader = ({ column }) => {
+  const ref = useRef17(null);
+  const { state, styles } = useTableContext();
+  const { columnHeaderProps } = useTableColumnHeader({
+    node: column
+  }, state, ref);
+  const { hoverProps, isHovered } = useHover5({});
+  const { focusProps, isFocusVisible } = useFocusRing11();
+  const stateProps = useStateProps13({
+    hover: isHovered,
+    focusVisible: isFocusVisible
+  });
+  return /* @__PURE__ */ React50.createElement(Box27, __spreadValues(__spreadValues({
     as: "th",
+    colSpan: column.colspan,
     ref,
-    __baseCSS: { textAlign: isSelectionColumn ? "center" : "left" },
-    css
-  }, mergeProps10(columnHeaderProps, focusProps)), stateProps), isSelectionColumn ? /* @__PURE__ */ React49.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
-    ref: inputRef
-  })) : /* @__PURE__ */ React49.createElement(Text, {
-    size: "xxsmall"
-  }, column.rendered));
+    css: styles.header
+  }, mergeProps11(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered);
+};
+
+// src/Table/TableHeader.tsx
+import React51 from "react";
+import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
+var TableHeader = ({ children }) => {
+  const { rowGroupProps } = useTableRowGroup2();
+  return /* @__PURE__ */ React51.createElement("thead", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React50, { useRef as useRef17 } from "react";
+import React52, { useRef as useRef18 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-var TableHeaderRow = ({
-  item,
-  state,
-  children
-}) => {
-  const ref = useRef17(null);
+var TableHeaderRow = ({ item, children }) => {
+  const { state } = useTableContext();
+  const ref = useRef18(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React50.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ React52.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
     ref
   }), children);
 };
 
 // src/Table/TableRow.tsx
-import React51, { useRef as useRef18 } from "react";
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
+import React53, { useRef as useRef19 } from "react";
+import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
+import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { useStateProps as useStateProps13 } from "@marigold/system";
-var TableRow = ({ item, state, children, css }) => {
-  const ref = useRef18(null);
-  const isSelected = state.selectionManager.isSelected(item.key);
-  const { rowProps } = useTableRow({
-    node: item
+import { mergeProps as mergeProps12 } from "@react-aria/utils";
+import { Box as Box28, useStateProps as useStateProps14 } from "@marigold/system";
+var TableRow = ({ children, row }) => {
+  const ref = useRef19(null);
+  const { state, styles } = useTableContext();
+  const { rowProps, isPressed } = useTableRow({
+    node: row
   }, state, ref);
-  const { focusProps, isFocusVisible } = useFocusRing11();
-  const stateProps = useStateProps13({
-    focus: isFocusVisible,
-    checked: isSelected
+  const disabled = state.disabledKeys.has(row.key);
+  const selected = state.selectionManager.isSelected(row.key);
+  const { focusProps, isFocusVisible } = useFocusRing12({ within: true });
+  const { hoverProps, isHovered } = useHover6({ isDisabled: disabled });
+  const stateProps = useStateProps14({
+    disabled,
+    selected,
+    hover: isHovered,
+    focusVisible: isFocusVisible,
+    active: isPressed
   });
-  return /* @__PURE__ */ React51.createElement(Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React53.createElement(Box28, __spreadValues(__spreadValues({
     as: "tr",
     ref,
-    css
-  }, mergeProps11(rowProps, focusProps)), stateProps), children);
+    css: styles.row
+  }, mergeProps12(rowProps, focusProps, hoverProps)), stateProps), children);
 };
 
-// src/Table/TableRowGroup.tsx
-import React52 from "react";
-import { useTableRowGroup } from "@react-aria/table";
-var TableRowGroup = ({
-  as: Element,
-  children
-}) => {
-  const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React52.createElement(Element, __spreadValues({}, rowGroupProps), children);
+// src/Table/TableSelectAllCell.tsx
+import React54, { useRef as useRef20 } from "react";
+import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
+import { useHover as useHover7 } from "@react-aria/interactions";
+import {
+  useTableColumnHeader as useTableColumnHeader2,
+  useTableSelectAllCheckbox
+} from "@react-aria/table";
+import { mergeProps as mergeProps13 } from "@react-aria/utils";
+import { Box as Box29, useStateProps as useStateProps15 } from "@marigold/system";
+var TableSelectAllCell = ({ column }) => {
+  const ref = useRef20(null);
+  const { state, styles } = useTableContext();
+  const { columnHeaderProps } = useTableColumnHeader2({
+    node: column
+  }, state, ref);
+  const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
+  const { hoverProps, isHovered } = useHover7({});
+  const { focusProps, isFocusVisible } = useFocusRing13();
+  const stateProps = useStateProps15({
+    hover: isHovered,
+    focusVisible: isFocusVisible
+  });
+  return /* @__PURE__ */ React54.createElement(Box29, __spreadValues(__spreadValues({
+    as: "th",
+    ref,
+    __baseCSS: {
+      textAlign: "center",
+      verticalAlign: "middle",
+      lineHeight: 1
+    },
+    css: styles.header
+  }, mergeProps13(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ React54.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/Table.tsx
 var Table = (_a) => {
   var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
-  const showSelectionCheckboxes = props.selectionMode === "multiple" && props.selectionBehavior !== "replace";
+  const tableRef = useRef21(null);
   const state = useTableState(__spreadProps(__spreadValues({}, props), {
-    showSelectionCheckboxes
+    showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
   }));
-  const ref = useRef19(null);
-  const { gridProps } = useTable(props, state, ref);
-  const styles = useComponentStyles28("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
-  return /* @__PURE__ */ React53.createElement(Box, __spreadValues({
+  const { gridProps } = useTable(props, state, tableRef);
+  const styles = useComponentStyles27("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  const { collection } = state;
+  return /* @__PURE__ */ React55.createElement(TableContext.Provider, {
+    value: { state, styles }
+  }, /* @__PURE__ */ React55.createElement(Box30, __spreadValues({
     as: "table",
-    ref,
-    __baseCSS: styles.table
-  }, gridProps), /* @__PURE__ */ React53.createElement(TableRowGroup, {
-    as: "thead"
-  }, state.collection.headerRows.map((headerRow) => /* @__PURE__ */ React53.createElement(TableHeaderRow, {
+    ref: tableRef,
+    css: styles.table
+  }, gridProps), /* @__PURE__ */ React55.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React55.createElement(TableHeaderRow, {
     key: headerRow.key,
-    item: headerRow,
-    state
-  }, [...headerRow.childNodes].map((column) => /* @__PURE__ */ React53.createElement(TableColumnHeader, {
-    key: column.key,
-    item: column,
-    state,
-    isSelectionColumn: column.props.isSelectionCell,
-    css: styles.header
-  }))))), /* @__PURE__ */ React53.createElement(TableRowGroup, {
-    as: "tbody"
-  }, [...state.collection.body.childNodes].map((row) => /* @__PURE__ */ React53.createElement(TableRow, {
-    css: styles.row,
+    item: headerRow
+  }, [...headerRow.childNodes].map((column) => {
+    var _a2;
+    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React55.createElement(TableSelectAllCell, {
+      key: column.key,
+      column
+    }) : /* @__PURE__ */ React55.createElement(TableColumnHeader, {
+      key: column.key,
+      column
+    });
+  })))), /* @__PURE__ */ React55.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React55.createElement(TableRow, {
     key: row.key,
-    item: row,
-    state
-  }, [...row.childNodes].map((cell) => /* @__PURE__ */ React53.createElement(TableCell, {
-    key: cell.key,
-    item: cell,
-    state,
-    isSelectionCell: cell.props.isSelectionCell,
-    css: styles.cell
+    row
+  }, [...row.childNodes].map((cell) => {
+    var _a2;
+    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React55.createElement(TableCheckboxCell, {
+      key: cell.key,
+      cell
+    }) : /* @__PURE__ */ React55.createElement(TableCell, {
+      key: cell.key,
+      cell
+    });
   }))))));
 };
-Table.Body = TableBody;
+Table.Body = Body;
 Table.Cell = Cell;
 Table.Column = Column;
-Table.Header = TableHeader;
+Table.Header = Header2;
 Table.Row = Row;
 
+// src/Text/Text.tsx
+import React56 from "react";
+import {
+  useComponentStyles as useComponentStyles28
+} from "@marigold/system";
+import { Box as Box31 } from "@marigold/system";
+var Text = (_a) => {
+  var _b = _a, {
+    variant,
+    size,
+    align,
+    color,
+    fontSize,
+    cursor,
+    outline,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "align",
+    "color",
+    "fontSize",
+    "cursor",
+    "outline",
+    "children"
+  ]);
+  const styles = useComponentStyles28("Text", {
+    variant,
+    size
+  });
+  return /* @__PURE__ */ React56.createElement(Box31, __spreadProps(__spreadValues({
+    as: "p"
+  }, props), {
+    css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
+  }), children);
+};
+
 // src/TextArea/TextArea.tsx
-import React54, { useRef as useRef20 } from "react";
+import React57, { useRef as useRef22 } from "react";
 import { useTextField } from "@react-aria/textfield";
 import {
-  Box as Box25,
+  Box as Box32,
   useComponentStyles as useComponentStyles29,
-  useStateProps as useStateProps14
+  useStateProps as useStateProps16
 } from "@marigold/system";
-import { useHover as useHover5 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
+import { useHover as useHover8 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 var TextArea = (_a) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     disabled,
     required,
     readOnly,
-    error,
-    variant,
-    size
+    error
   } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "disabled",
     "required",
     "readOnly",
-    "error",
-    "variant",
-    "size"
+    "error"
   ]);
   const { label, description, errorMessage } = props;
-  const ref = useRef20(null);
+  const ref = useRef22(null);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(__spreadValues({
     inputElementType: "textarea",
     isDisabled: disabled,
@@ -2196,9 +2341,9 @@ var TextArea = (_a) => {
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
   }, props), ref);
-  const { hoverProps, isHovered } = useHover5({});
-  const { focusProps, isFocusVisible } = useFocusRing12();
-  const stateProps = useStateProps14({
+  const { hoverProps, isHovered } = useHover8({});
+  const { focusProps, isFocusVisible } = useFocusRing14();
+  const stateProps = useStateProps16({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
@@ -2206,7 +2351,7 @@ var TextArea = (_a) => {
     error
   });
   const styles = useComponentStyles29("TextArea", { variant, size });
-  return /* @__PURE__ */ React54.createElement(FieldBase, {
+  return /* @__PURE__ */ React57.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2217,8 +2362,9 @@ var TextArea = (_a) => {
     errorMessageProps,
     stateProps,
     variant,
-    size
-  }, /* @__PURE__ */ React54.createElement(Box25, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    size,
+    width
+  }, /* @__PURE__ */ React57.createElement(Box32, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
     css: styles,
     ref
@@ -2226,48 +2372,50 @@ var TextArea = (_a) => {
 };
 
 // src/TextField/TextField.tsx
-import React55, { useRef as useRef21 } from "react";
-import { useHover as useHover6 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
+import React58, { useRef as useRef23 } from "react";
+import { useHover as useHover9 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { useStateProps as useStateProps15 } from "@marigold/system";
+import { useStateProps as useStateProps17 } from "@marigold/system";
 var TextField = (_a) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     disabled,
     required,
     readOnly,
-    error,
-    variant,
-    size
+    error
   } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "disabled",
     "required",
     "readOnly",
-    "error",
-    "variant",
-    "size"
+    "error"
   ]);
   const { label, description, errorMessage, autoFocus } = props;
-  const ref = useRef21(null);
+  const ref = useRef23(null);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(__spreadValues({
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
   }, props), ref);
-  const { hoverProps, isHovered } = useHover6({});
-  const { focusProps, isFocusVisible } = useFocusRing13({
+  const { hoverProps, isHovered } = useHover9({});
+  const { focusProps, isFocusVisible } = useFocusRing15({
     isTextInput: true,
     autoFocus
   });
-  const stateProps = useStateProps15({
+  const stateProps = useStateProps17({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ React55.createElement(FieldBase, {
+  return /* @__PURE__ */ React58.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2278,8 +2426,9 @@ var TextField = (_a) => {
     errorMessageProps,
     stateProps,
     variant,
-    size
-  }, /* @__PURE__ */ React55.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    size,
+    width
+  }, /* @__PURE__ */ React58.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     ref,
     variant,
     size
@@ -2287,10 +2436,10 @@ var TextField = (_a) => {
 };
 
 // src/Tiles/Tiles.tsx
-import React56 from "react";
-var Tiles = React56.forwardRef(function Tiles2(_a, ref) {
+import React59 from "react";
+var Tiles = React59.forwardRef(function Tiles2(_a, ref) {
   var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ React56.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React59.createElement(Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -2301,52 +2450,98 @@ var Tiles = React56.forwardRef(function Tiles2(_a, ref) {
 });
 
 // src/Tooltip/Tooltip.tsx
-import React58, { useContext as useContext6 } from "react";
+import React61 from "react";
 import { useTooltip } from "@react-aria/tooltip";
-import { mergeProps as mergeProps12 } from "@react-aria/utils";
+import {
+  Box as Box33,
+  useComponentStyles as useComponentStyles30
+} from "@marigold/system";
+
+// src/Tooltip/Context.ts
+import { createContext as createContext7, useContext as useContext7 } from "react";
+var TooltipContext = createContext7({});
+var useTooltipContext = () => useContext7(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React57, { useRef as useRef22 } from "react";
+import React60, { useRef as useRef24 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
+import { useOverlayPosition as useOverlayPosition3 } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
-import {
-  useTooltipTriggerState
-} from "@react-stately/tooltip";
-var TooltipContext = React57.createContext({});
+import { useTooltipTriggerState } from "@react-stately/tooltip";
 var TooltipTrigger = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [trigger, tooltip] = React57.Children.toArray(children);
+  var _b = _a, {
+    disabled,
+    open,
+    delay = 1e3,
+    placement = "top",
+    children
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "open",
+    "delay",
+    "placement",
+    "children"
+  ]);
+  const [tooltipTrigger, tooltip] = React60.Children.toArray(children);
+  const props = __spreadProps(__spreadValues({}, rest), {
+    isDisabled: disabled,
+    isOpen: open,
+    delay,
+    placement
+  });
+  const tooltipTriggerRef = useRef24(null);
+  const overlayRef = useRef24(null);
   const state = useTooltipTriggerState(props);
-  const tooltipTriggerRef = useRef22();
-  const { triggerProps, tooltipProps } = useTooltipTrigger({}, state, tooltipTriggerRef);
-  return /* @__PURE__ */ React57.createElement(FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
+  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, tooltipTriggerRef);
+  const {
+    overlayProps: positionProps,
+    placement: overlayPlacement,
+    arrowProps
+  } = useOverlayPosition3({
+    placement: props.placement,
+    targetRef: tooltipTriggerRef,
+    offset: props.offset,
+    crossOffset: props.crossOffset,
+    isOpen: state.isOpen,
+    overlayRef
+  });
+  return /* @__PURE__ */ React60.createElement(FocusableProvider, __spreadValues({
     ref: tooltipTriggerRef
-  }), trigger, state.isOpen && /* @__PURE__ */ React57.createElement(TooltipContext.Provider, {
-    value: __spreadValues({
-      state
-    }, tooltipProps)
-  }, tooltip));
+  }, triggerProps), tooltipTrigger, /* @__PURE__ */ React60.createElement(TooltipContext.Provider, {
+    value: __spreadValues(__spreadValues({
+      state,
+      overlayRef,
+      arrowProps,
+      placement: overlayPlacement
+    }, tooltipProps), positionProps)
+  }, /* @__PURE__ */ React60.createElement(Overlay, {
+    open: state.isOpen
+  }, tooltip)));
 };
 
 // src/Tooltip/Tooltip.tsx
-var Tooltip = (_a) => {
-  var _b = _a, {
-    variant = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "children"
-  ]);
-  const _a2 = useContext6(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
-  const mergedProps = mergeProps12(props, tooltipProviderProps);
-  const { tooltipProps } = useTooltip(mergedProps, state);
-  return /* @__PURE__ */ React58.createElement(Box, __spreadValues({
-    position: "relative"
-  }, tooltipProps), /* @__PURE__ */ React58.createElement(Box, __spreadValues({
-    position: "absolute",
-    variant: `tooltip.${variant}`
-  }, mergedProps), children));
+var Tooltip = ({ children, variant, size }) => {
+  const _a = useTooltipContext(), { arrowProps, state, overlayRef, placement } = _a, rest = __objRest(_a, ["arrowProps", "state", "overlayRef", "placement"]);
+  const { tooltipProps } = useTooltip({}, state);
+  const styles = useComponentStyles30("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
+  return /* @__PURE__ */ React61.createElement(Box33, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+    ref: overlayRef,
+    css: styles.container,
+    "data-placement": placement
+  }), /* @__PURE__ */ React61.createElement("div", null, children), /* @__PURE__ */ React61.createElement(Box33, __spreadProps(__spreadValues({}, arrowProps), {
+    __baseCSS: {
+      position: "absolute",
+      height: 0,
+      width: 0,
+      borderStyle: "solid",
+      borderLeftColor: "transparent",
+      borderRightColor: "transparent",
+      borderBottomColor: "transparent"
+    },
+    css: styles.arrow
+  })));
 };
+Tooltip.Trigger = TooltipTrigger;
 export {
   Aside,
   Aspect,
@@ -2391,8 +2586,6 @@ export {
   ThemeProvider2 as ThemeProvider,
   Tiles,
   Tooltip,
-  TooltipContext,
-  TooltipTrigger,
   Underlay,
   VisuallyHidden,
   useCheckboxGroupContext,