@marigold/components 0.8.0 → 1.0.0

package/dist/index.mjs

@@ -30,84 +30,13 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/ActionGroup/ActionGroup.tsx
-import React3 from "react";
-
-// src/Inline/Inline.tsx
+// src/Aside/Aside.tsx
 import React from "react";
 
 // src/Box.ts
 import { Box } from "@marigold/system";
 
-// src/Inline/Inline.tsx
-var ALIGNMENT = {
-  top: "flex-start",
-  center: "center",
-  bottom: "flex-end"
-};
-var Inline = (_a) => {
-  var _b = _a, {
-    space = "none",
-    align = "center",
-    children
-  } = _b, props = __objRest(_b, [
-    "space",
-    "align",
-    "children"
-  ]);
-  return /* @__PURE__ */ React.createElement(Box, __spreadValues({
-    __baseCSS: { gap: space, flexWrap: "wrap" },
-    display: "inline-flex",
-    alignItems: ALIGNMENT[align]
-  }, props), children);
-};
-
-// src/Stack/Stack.tsx
-import React2 from "react";
-var ALIGNMENT2 = {
-  left: "flex-start",
-  center: "center",
-  right: "flex-end"
-};
-var Stack = (_a) => {
-  var _b = _a, {
-    space = "none",
-    align = "left",
-    children
-  } = _b, props = __objRest(_b, [
-    "space",
-    "align",
-    "children"
-  ]);
-  return /* @__PURE__ */ React2.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: ALIGNMENT2[align],
-    p: "0",
-    css: { gap: space }
-  }), children);
-};
-
-// src/ActionGroup/ActionGroup.tsx
-var ActionGroup = (_a) => {
-  var _b = _a, {
-    space = "none",
-    verticalAlignment = false,
-    children
-  } = _b, props = __objRest(_b, [
-    "space",
-    "verticalAlignment",
-    "children"
-  ]);
-  return verticalAlignment ? /* @__PURE__ */ React3.createElement(Stack, __spreadValues({
-    space
-  }, props), children) : /* @__PURE__ */ React3.createElement(Inline, __spreadValues({
-    space
-  }, props), children);
-};
-
 // src/Aside/Aside.tsx
-import React4 from "react";
 var SIDE_MAP = {
   left: [":not(style):first-of-type", ":last-child"],
   right: [":last-child", ":not(style):first-of-type"]
@@ -121,7 +50,7 @@ var Aside = ({
   wrap = "50%"
 }) => {
   const [aside, content] = SIDE_MAP[side];
-  return /* @__PURE__ */ React4.createElement(Box, {
+  return /* @__PURE__ */ React.createElement(Box, {
     css: {
       display: "flex",
       flexWrap: "wrap",
@@ -141,90 +70,33 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-import React5 from "react";
+import React2 from "react";
 import { aspect } from "@marigold/tokens";
-var Aspect = React5.forwardRef(function AspectRatio(_a, ref) {
-  var _b = _a, { ratio = "square", maxWidth = "100%", children } = _b, props = __objRest(_b, ["ratio", "maxWidth", "children"]);
-  return /* @__PURE__ */ React5.createElement(Box, {
-    ref,
-    __baseCSS: {
-      position: "relative",
-      overflow: "hidden",
-      maxWidth
-    }
-  }, /* @__PURE__ */ React5.createElement(Box, {
-    __baseCSS: {
-      aspectRatio: aspect[ratio]
-    }
-  }), /* @__PURE__ */ React5.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    __baseCSS: {
-      position: "absolute",
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    }
-  }), children));
-});
+var Aspect = ({
+  ratio = "square",
+  maxWidth,
+  children
+}) => /* @__PURE__ */ React2.createElement(Box, {
+  css: {
+    aspectRatio: aspect[ratio],
+    overflow: "hidden",
+    maxWidth
+  }
+}, children);
 
 // src/Badge/Badge.tsx
-import React6 from "react";
+import React3 from "react";
+import { useComponentStyles } from "@marigold/system";
 var Badge = (_a) => {
-  var _b = _a, {
-    variant = "",
-    bgColor = "transparent",
-    borderColor = "transparent",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "bgColor",
-    "borderColor",
-    "children"
-  ]);
-  return /* @__PURE__ */ React6.createElement(Box, __spreadValues({
-    css: { bg: bgColor, borderColor },
-    variant: `badge.${variant}`
-  }, props), children);
-};
-
-// src/Button/Button.tsx
-import React7, { forwardRef } from "react";
-import { useButton } from "@react-aria/button";
-var Button = forwardRef((_a, ref) => {
-  var _b = _a, {
-    as = "button",
-    variant = "primary",
-    size = "large",
-    space = "none",
-    disabled,
-    children,
-    className
-  } = _b, props = __objRest(_b, [
-    "as",
-    "variant",
-    "size",
-    "space",
-    "disabled",
-    "children",
-    "className"
-  ]);
-  const { buttonProps } = useButton(__spreadProps(__spreadValues({}, props), {
-    elementType: typeof as === "string" ? as : "span",
-    isDisabled: disabled
-  }), ref);
-  return /* @__PURE__ */ React7.createElement(Box, __spreadProps(__spreadValues(__spreadValues({}, buttonProps), props), {
-    as,
-    display: "inline-flex",
-    alignItems: "center",
-    variant: [`button.${variant}`, `button.${size}`],
-    className,
-    ref,
-    css: { columnGap: space }
+  var _b = _a, { variant, size, children } = _b, props = __objRest(_b, ["variant", "size", "children"]);
+  const styles = useComponentStyles("Badge", { variant, size });
+  return /* @__PURE__ */ React3.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    css: styles
   }), children);
-});
+};
 
 // src/Breakout/Breakout.tsx
-import React8 from "react";
+import React4 from "react";
 var useAlignment = (direction) => {
   switch (direction) {
     case "right":
@@ -248,7 +120,7 @@ var Breakout = (_a) => {
   ]);
   const alignItems = useAlignment(horizontalAlign);
   const justifyContent = useAlignment(verticalAlign);
-  return /* @__PURE__ */ React8.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React4.createElement(Box, __spreadValues({
     alignItems,
     justifyContent,
     width: "100%",
@@ -259,35 +131,75 @@ var Breakout = (_a) => {
   }, props), children);
 };
 
-// src/Card/Card.tsx
-import React9 from "react";
-var Card = (_a) => {
+// src/Button/Button.tsx
+import React5, {
+  forwardRef,
+  useImperativeHandle,
+  useRef
+} from "react";
+import { useButton } from "@react-aria/button";
+import { useFocusRing } from "@react-aria/focus";
+import { mergeProps } from "@react-aria/utils";
+import {
+  Box as Box2,
+  useComponentStyles as useComponentStyles2,
+  useStateProps
+} from "@marigold/system";
+var Button = forwardRef((_a, ref) => {
   var _b = _a, {
-    variant = "",
-    title,
-    width,
-    className,
-    children
+    as = "button",
+    children,
+    variant,
+    size,
+    disabled
   } = _b, props = __objRest(_b, [
+    "as",
+    "children",
     "variant",
-    "title",
-    "width",
-    "className",
-    "children"
+    "size",
+    "disabled"
   ]);
-  return /* @__PURE__ */ React9.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    variant: `card.${variant}`,
-    maxWidth: width,
-    className
-  }), title && /* @__PURE__ */ React9.createElement(Box, {
-    as: "h2",
-    variant: "text.h2",
-    pb: "small"
-  }, title), children);
+  const buttonRef = useRef(null);
+  useImperativeHandle(ref, () => buttonRef.current);
+  const { buttonProps, isPressed } = useButton(__spreadProps(__spreadValues({}, props), {
+    elementType: typeof as === "string" ? as : "span",
+    isDisabled: disabled
+  }), buttonRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = useComponentStyles2("Button", { variant, size });
+  const stateProps = useStateProps({
+    active: isPressed,
+    focus: isFocusVisible
+  });
+  return /* @__PURE__ */ React5.createElement(Box2, __spreadProps(__spreadValues(__spreadValues({}, mergeProps(buttonProps, focusProps)), stateProps), {
+    as,
+    ref: buttonRef,
+    __baseCSS: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5ch",
+      cursor: disabled ? "not-allowed" : "pointer"
+    },
+    css: styles
+  }), children);
+});
+
+// src/Card/Card.tsx
+import React6 from "react";
+import {
+  Box as Box3,
+  useComponentStyles as useComponentStyles3
+} from "@marigold/system";
+var Card = (_a) => {
+  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+  const styles = useComponentStyles3("Card", { variant, size });
+  return /* @__PURE__ */ React6.createElement(Box3, __spreadProps(__spreadValues({}, props), {
+    css: styles
+  }), children);
 };
 
 // src/Center/Center.tsx
-import React10 from "react";
+import React7 from "react";
 var Center = (_a) => {
   var _b = _a, {
     maxWidth,
@@ -298,7 +210,7 @@ var Center = (_a) => {
     "space",
     "children"
   ]);
-  return /* @__PURE__ */ React10.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React7.createElement(Box, __spreadValues({
     css: {
       boxSizing: "content-box",
       display: "flex",
@@ -313,172 +225,226 @@ var Center = (_a) => {
 };
 
 // src/Checkbox/Checkbox.tsx
-import React14 from "react";
-import { useFocusRing } from "@react-aria/focus";
-import { VisuallyHidden } from "@react-aria/visually-hidden";
-import { useCheckbox } from "@react-aria/checkbox";
+import React10 from "react";
+import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
+import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
 import { useToggleState } from "@react-stately/toggle";
-import { Exclamation } from "@marigold/icons";
-
-// src/Checkbox/CheckboxIcon.tsx
-import React11 from "react";
-import { conditional, SVG } from "@marigold/system";
-var CheckboxIcon = ({
-  variant = "",
-  checked = false,
-  disabled = false,
-  indeterminated,
-  error = false
-}) => {
-  const conditionalStates = disabled ? {
-    disabled
-  } : {
-    checked,
-    error
-  };
-  return /* @__PURE__ */ React11.createElement(SVG, {
-    width: "16",
-    height: "32",
-    viewBox: "0 0 16 32",
-    fill: "none",
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React11.createElement(Box, {
-    as: "rect",
-    x: "0.5",
-    y: "8.5",
-    width: "15px",
-    height: "15px",
-    rx: "1.5",
-    variant: conditional(`checkbox.${variant}`, conditionalStates)
-  }), checked && indeterminated && /* @__PURE__ */ React11.createElement(Box, {
-    __baseCSS: { fill: "gray00" },
-    as: "path",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M13.5 17.0402H2.5V15.4688H13.5V17.0402V17.0402Z"
-  }), checked && !indeterminated && /* @__PURE__ */ React11.createElement(Box, {
-    __baseCSS: { fill: "gray00" },
-    as: "path",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M13.9571 12.8338L12.4085 11.2852L6.08699 17.6007L3.59887 15.1126L2.04163 16.6588L6.08682 20.704L13.9571 12.8338Z"
-  }));
-};
+import {
+  Box as Box6,
+  useComponentStyles as useComponentStyles6,
+  useStateProps as useStateProps2
+} from "@marigold/system";
+
+// src/Checkbox/CheckboxGroup.tsx
+import React9, { createContext, useContext } from "react";
+import { useCheckboxGroup } from "@react-aria/checkbox";
+import {
+  useCheckboxGroupState
+} from "@react-stately/checkbox";
+import {
+  Box as Box5,
+  useComponentStyles as useComponentStyles5
+} from "@marigold/system";
 
 // src/Label/Label.tsx
-import React12 from "react";
+import React8 from "react";
 import { Required } from "@marigold/icons";
-var LabelBase = (_a) => {
-  var _b = _a, {
-    variant = "above",
-    required,
-    color = "text",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "required",
-    "color",
-    "children"
-  ]);
-  return /* @__PURE__ */ React12.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    as: "label",
-    __baseCSS: { color },
-    variant: `label.${variant}`
-  }), children);
-};
+import { Box as Box4, useComponentStyles as useComponentStyles4 } from "@marigold/system";
 var Label = (_a) => {
   var _b = _a, {
+    as = "label",
     required,
-    children
+    children,
+    variant,
+    size
   } = _b, props = __objRest(_b, [
+    "as",
     "required",
-    "children"
+    "children",
+    "variant",
+    "size"
   ]);
-  return required ? /* @__PURE__ */ React12.createElement(Box, {
-    as: "span",
-    display: "inline-flex",
-    alignItems: "center"
-  }, /* @__PURE__ */ React12.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ React12.createElement(Required, {
+  const styles = useComponentStyles4("Label", { size, variant });
+  return /* @__PURE__ */ React8.createElement(Box4, __spreadProps(__spreadValues({}, props), {
+    as,
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+    css: styles
+  }), children, required && /* @__PURE__ */ React8.createElement(Required, {
+    role: "presentation",
     size: 16,
     fill: "error"
-  })) : /* @__PURE__ */ React12.createElement(LabelBase, __spreadValues({}, props), children);
+  }));
 };
 
-// src/ValidationMessage/ValidationMessage.tsx
-import React13 from "react";
-var ValidationMessage = (_a) => {
+// src/Checkbox/CheckboxGroup.tsx
+var CheckboxGroupContext = createContext(null);
+var useCheckboxGroupContext = () => useContext(CheckboxGroupContext);
+var CheckboxGroup = (_a) => {
   var _b = _a, {
-    variant = "error",
     children,
-    className
-  } = _b, props = __objRest(_b, [
-    "variant",
+    variant,
+    size,
+    required,
+    disabled,
+    readOnly,
+    error
+  } = _b, rest = __objRest(_b, [
     "children",
-    "className"
+    "variant",
+    "size",
+    "required",
+    "disabled",
+    "readOnly",
+    "error"
   ]);
-  return /* @__PURE__ */ React13.createElement(Box, __spreadValues({
+  const props = __spreadValues({
+    isRequired: required,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, rest);
+  const state = useCheckboxGroupState(props);
+  const { groupProps, labelProps } = useCheckboxGroup(props, state);
+  const styles = useComponentStyles5("CheckboxGroup", { variant, size }, { parts: ["container", "group"] });
+  return /* @__PURE__ */ React9.createElement(Box5, __spreadProps(__spreadValues({}, groupProps), {
+    css: styles.container
+  }), props.label && /* @__PURE__ */ React9.createElement(Label, __spreadValues({
     as: "span",
-    display: "flex",
-    alignItems: "center",
-    variant: `validation.${variant}`,
-    className
-  }, props), children);
+    required
+  }, labelProps), props.label), /* @__PURE__ */ React9.createElement(Box5, {
+    role: "presentation",
+    __baseCSS: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "start"
+    },
+    css: styles.group
+  }, /* @__PURE__ */ React9.createElement(CheckboxGroupContext.Provider, {
+    value: __spreadValues({ variant, size, error }, state)
+  }, children)));
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckboxInput = (_a) => {
-  var _b = _a, {
-    error,
-    indeterminated = false
-  } = _b, props = __objRest(_b, [
-    "error",
-    "indeterminated"
-  ]);
-  const state = useToggleState(props);
-  const ref = React14.useRef(null);
-  const { inputProps } = useCheckbox(props, state, ref);
-  const { focusProps } = useFocusRing();
-  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ React14.createElement(Box, {
-    pr: "xsmall"
-  }, /* @__PURE__ */ React14.createElement(VisuallyHidden, null, /* @__PURE__ */ React14.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
-    ref
-  }), restProps))), /* @__PURE__ */ React14.createElement(CheckboxIcon, {
-    checked: props.checked,
-    variant: props.variant,
-    disabled: props.disabled,
-    indeterminated,
-    error
-  }));
+var CheckMark = () => /* @__PURE__ */ React10.createElement("svg", {
+  viewBox: "0 0 12 10"
+}, /* @__PURE__ */ React10.createElement("path", {
+  fill: "currentColor",
+  stroke: "none",
+  d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
+}));
+var IndeterminateMark = () => /* @__PURE__ */ React10.createElement("svg", {
+  width: "12",
+  height: "3",
+  viewBox: "0 0 12 3"
+}, /* @__PURE__ */ React10.createElement("path", {
+  fill: "currentColor",
+  stroke: "none",
+  d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
+}));
+var Icon = (_a) => {
+  var _b = _a, { css, checked, indeterminate } = _b, props = __objRest(_b, ["css", "checked", "indeterminate"]);
+  return /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
+    "aria-hidden": "true",
+    __baseCSS: {
+      width: 16,
+      height: 16,
+      bg: "#fff",
+      border: "1px solid #000",
+      borderRadius: 3,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: 1
+    },
+    css
+  }, props), indeterminate ? /* @__PURE__ */ React10.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React10.createElement(CheckMark, null) : null);
 };
 var Checkbox = (_a) => {
   var _b = _a, {
+    size,
+    variant,
+    disabled,
+    checked,
+    defaultChecked,
+    indeterminate,
+    readOnly,
     required,
-    labelVariant = "inline",
-    errorMessage
+    error
   } = _b, props = __objRest(_b, [
+    "size",
+    "variant",
+    "disabled",
+    "checked",
+    "defaultChecked",
+    "indeterminate",
+    "readOnly",
     "required",
-    "labelVariant",
-    "errorMessage"
+    "error"
   ]);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Box, {
-    as: Label,
+  const ref = React10.useRef(null);
+  const checkboxProps = {
+    isIndeterminate: indeterminate,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isRequired: required,
+    validationState: error ? "invalid" : "valid"
+  };
+  const groupState = useCheckboxGroupContext();
+  const { inputProps } = groupState ? useCheckboxGroupItem(__spreadProps(__spreadValues(__spreadValues({}, props), checkboxProps), {
+    value: props.value
+  }), groupState, ref) : useCheckbox(__spreadValues(__spreadValues({
+    isSelected: checked,
+    defaultSelected: defaultChecked
+  }, checkboxProps), props), useToggleState(__spreadValues({
+    isSelected: checked,
+    defaultSelected: defaultChecked
+  }, props)), ref);
+  const styles = useComponentStyles6("Checkbox", { variant: (groupState == null ? void 0 : groupState.variant) || variant, size: (groupState == null ? void 0 : groupState.size) || size }, { parts: ["container", "label", "checkbox"] });
+  const { hoverProps, isHovered } = useHover({});
+  const { isFocusVisible, focusProps } = useFocusRing2();
+  const stateProps = useStateProps2({
+    hover: isHovered,
+    focus: isFocusVisible,
+    checked: inputProps.checked,
+    disabled: inputProps.disabled,
+    error: (groupState == null ? void 0 : groupState.error) || error,
+    readOnly,
+    indeterminate
+  });
+  return /* @__PURE__ */ React10.createElement(Box6, __spreadValues(__spreadValues({
+    as: "label",
     __baseCSS: {
-      ":hover": { cursor: props.disabled ? "not-allowed" : "pointer" }
+      display: "flex",
+      alignItems: "center",
+      gap: "1ch",
+      position: "relative"
     },
-    htmlFor: props.id,
-    required,
-    variant: `label.${labelVariant}`,
-    color: props.disabled ? "disabled" : "text"
-  }, /* @__PURE__ */ React14.createElement(CheckboxInput, __spreadValues({
-    error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React14.createElement(ValidationMessage, null, /* @__PURE__ */ React14.createElement(Exclamation, {
-    size: 16
-  }), errorMessage));
+    css: styles.container
+  }, hoverProps), stateProps), /* @__PURE__ */ React10.createElement(Box6, __spreadValues(__spreadValues({
+    as: "input",
+    ref,
+    css: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      opacity: 1e-4,
+      cursor: inputProps.disabled ? "not-allowed" : "pointer"
+    }
+  }, inputProps), focusProps)), /* @__PURE__ */ React10.createElement(Icon, __spreadValues({
+    checked: inputProps.checked,
+    indeterminate,
+    css: styles.checkbox
+  }, stateProps)), props.children && /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
+    css: styles.label
+  }, stateProps), props.children));
 };
 
 // src/Columns/Columns.tsx
-import React15, { Children } from "react";
+import React11, { Children } from "react";
 var Columns = (_a) => {
   var _b = _a, {
     space = "none",
@@ -501,7 +467,7 @@ var Columns = (_a) => {
       }
     };
   });
-  return /* @__PURE__ */ React15.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React11.createElement(Box, __spreadValues({
     display: "flex",
     css: Object.assign({
       flexWrap: "wrap",
@@ -513,373 +479,862 @@ var Columns = (_a) => {
   }, props), children);
 };
 
-// src/Dialog/Dialog.tsx
-import React18 from "react";
-import { useOverlayTriggerState } from "@react-stately/overlays";
-import { OverlayContainer } from "@react-aria/overlays";
-import { useButton as useButton2 } from "@react-aria/button";
-import { Close } from "@marigold/icons";
-
-// src/Text/Text.tsx
-import React16, { forwardRef as forwardRef2 } from "react";
-var Text = forwardRef2((_a, ref) => {
-  var _b = _a, {
-    as = "span",
-    variant = "body",
-    children,
-    align,
-    color,
-    cursor,
-    size,
-    outline,
-    userSelect
+// src/Container/Container.tsx
+import React12 from "react";
+import { size as tokenSize } from "@marigold/tokens";
+var ALIGNMENT = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var Container = (_a) => {
+  var _b = _a, {
+    contentType = "content",
+    size = "medium",
+    align = "left",
+    alignContainer = "left",
+    children
   } = _b, props = __objRest(_b, [
-    "as",
-    "variant",
-    "children",
-    "align",
-    "color",
-    "cursor",
+    "contentType",
     "size",
-    "outline",
-    "userSelect"
+    "align",
+    "alignContainer",
+    "children"
   ]);
-  return /* @__PURE__ */ React16.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    as,
-    variant: `text.${variant}`,
+  const maxWidth = tokenSize[contentType][size];
+  let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
+  let gridColumn = 1;
+  if (alignContainer === "center") {
+    gridTemplateColumns = `1fr ${maxWidth} 1fr`;
+    gridColumn = 2;
+  }
+  if (alignContainer === "right") {
+    gridTemplateColumns = `1fr 1fr ${maxWidth}`;
+    gridColumn = 3;
+  }
+  return /* @__PURE__ */ React12.createElement(Box, __spreadValues({
+    display: "grid",
     css: {
-      textAlign: align,
-      fontSize: size,
-      color,
-      cursor,
-      outline,
-      userSelect
-    },
-    ref
-  }), children);
-});
+      gridTemplateColumns,
+      placeItems: ALIGNMENT[align],
+      "> *": {
+        gridColumn
+      }
+    }
+  }, props), children);
+};
 
-// src/Dialog/ModalDialog.tsx
-import React17 from "react";
+// src/Content/Content.tsx
+import React13 from "react";
 import {
-  useOverlay,
-  usePreventScroll,
-  useModal
-} from "@react-aria/overlays";
+  Box as Box7,
+  useComponentStyles as useComponentStyles7
+} from "@marigold/system";
+var Content = (_a) => {
+  var _b = _a, {
+    children,
+    variant,
+    size
+  } = _b, props = __objRest(_b, [
+    "children",
+    "variant",
+    "size"
+  ]);
+  const styles = useComponentStyles7("Content", { variant, size });
+  return /* @__PURE__ */ React13.createElement(Box7, __spreadProps(__spreadValues({
+    as: "section"
+  }, props), {
+    css: styles
+  }), children);
+};
+
+// src/Dialog/Dialog.tsx
+import React21, { useRef as useRef4 } from "react";
+import { useButton as useButton2 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
-import { FocusScope } from "@react-aria/focus";
-var ModalDialog = (_a) => {
+import {
+  Box as Box10,
+  useComponentStyles as useComponentStyles11
+} from "@marigold/system";
+
+// src/Header/Header.tsx
+import React14 from "react";
+import {
+  useComponentStyles as useComponentStyles8
+} from "@marigold/system";
+var Header = (_a) => {
+  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+  const styles = useComponentStyles8("Header", { variant, size });
+  return /* @__PURE__ */ React14.createElement(Box, __spreadProps(__spreadValues({
+    as: "header"
+  }, props), {
+    css: styles
+  }), children);
+};
+
+// src/Headline/Headline.tsx
+import React15 from "react";
+import {
+  Box as Box8,
+  useComponentStyles as useComponentStyles9
+} from "@marigold/system";
+var Headline = (_a) => {
   var _b = _a, {
+    children,
     variant,
-    backdropVariant = "backdrop",
-    children
+    size,
+    level = "1"
   } = _b, props = __objRest(_b, [
+    "children",
     "variant",
-    "backdropVariant",
-    "children"
+    "size",
+    "level"
   ]);
-  const _a2 = props, { isDismissable, isOpen, onClose } = _a2, restProps = __objRest(_a2, ["isDismissable", "isOpen", "onClose"]);
-  const ref = React17.useRef();
-  const { overlayProps, underlayProps } = useOverlay({ isDismissable, isOpen, onClose }, ref);
-  usePreventScroll();
-  const { modalProps } = useModal();
-  const { dialogProps } = useDialog(props, ref);
-  return /* @__PURE__ */ React17.createElement(Box, __spreadValues({
+  const styles = useComponentStyles9("Headline", {
+    variant,
+    size: size != null ? size : `level-${level}`
+  });
+  return /* @__PURE__ */ React15.createElement(Box8, __spreadProps(__spreadValues({
+    as: `h${level}`
+  }, props), {
+    css: styles
+  }), children);
+};
+
+// src/Dialog/Context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var DialogContext = createContext2({});
+var useDialogContext = () => useContext2(DialogContext);
+
+// src/Dialog/DialogTrigger.tsx
+import React20, { useRef as useRef3 } from "react";
+import { PressResponder } from "@react-aria/interactions";
+import { useOverlayTriggerState } from "@react-stately/overlays";
+
+// src/Overlay/Modal.tsx
+import React17, { forwardRef as forwardRef2 } from "react";
+import { FocusScope } from "@react-aria/focus";
+import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
+import { mergeProps as mergeProps2, useObjectRef } from "@react-aria/utils";
+
+// src/Overlay/Underlay.tsx
+import React16 from "react";
+import { Box as Box9, useComponentStyles as useComponentStyles10 } from "@marigold/system";
+var Underlay = (_a) => {
+  var _b = _a, { size, variant } = _b, props = __objRest(_b, ["size", "variant"]);
+  const styles = useComponentStyles10("Underlay", { size, variant });
+  return /* @__PURE__ */ React16.createElement(Box9, __spreadValues({
     __baseCSS: {
-      display: "grid",
-      placeItems: "center",
       position: "fixed",
-      zIndex: 100,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
+      inset: 0,
+      zIndex: 1
     },
-    variant: `dialog.${backdropVariant}`
-  }, underlayProps), /* @__PURE__ */ React17.createElement(FocusScope, {
+    css: styles
+  }, props));
+};
+
+// src/Overlay/Modal.tsx
+var Modal = forwardRef2((_a, ref) => {
+  var _b = _a, { children, open, dismissable, keyboardDismissable, onClose } = _b, props = __objRest(_b, ["children", "open", "dismissable", "keyboardDismissable", "onClose"]);
+  const modalRef = useObjectRef(ref);
+  const { overlayProps, underlayProps } = useOverlay({
+    isOpen: open,
+    onClose,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: !keyboardDismissable
+  }, modalRef);
+  usePreventScroll();
+  const { modalProps } = useModal({});
+  return /* @__PURE__ */ React17.createElement(FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ React17.createElement(Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
-    ref,
-    variant: variant ? `dialog.${variant}` : `dialog`
-  }), restProps), children)));
+  }, /* @__PURE__ */ React17.createElement(Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ React17.createElement("div", __spreadValues({
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "fixed",
+      inset: 0,
+      zIndex: 2,
+      pointerEvents: "none"
+    },
+    ref: modalRef
+  }, mergeProps2(props, overlayProps, modalProps)), /* @__PURE__ */ React17.createElement("div", {
+    style: { pointerEvents: "auto" }
+  }, children)));
+});
+
+// src/Overlay/Overlay.tsx
+import React18 from "react";
+import { OverlayContainer } from "@react-aria/overlays";
+var Overlay = (_a) => {
+  var _b = _a, {
+    children,
+    open = false,
+    container = document.body
+  } = _b, props = __objRest(_b, [
+    "children",
+    "open",
+    "container"
+  ]);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ React18.createElement(OverlayContainer, {
+    portalContainer: container
+  }, /* @__PURE__ */ React18.createElement(Box, __spreadValues({}, props), children));
 };
 
-// src/Dialog/Dialog.tsx
-var Dialog = (_a) => {
+// src/Overlay/Popover.tsx
+import React19, { forwardRef as forwardRef3, useRef as useRef2 } from "react";
+import { useModal as useModal2, useOverlay as useOverlay2 } from "@react-aria/overlays";
+import { mergeProps as mergeProps3 } from "@react-aria/utils";
+var Popover = forwardRef3((_a, ref) => {
   var _b = _a, {
-    backdropVariant,
     children,
-    className,
-    close,
-    isOpen,
-    title,
-    variant
+    open,
+    dismissable,
+    keyboardDismissDisabled,
+    shouldCloseOnBlur,
+    minWidth = 0
   } = _b, props = __objRest(_b, [
-    "backdropVariant",
     "children",
-    "className",
-    "close",
-    "isOpen",
-    "title",
-    "variant"
+    "open",
+    "dismissable",
+    "keyboardDismissDisabled",
+    "shouldCloseOnBlur",
+    "minWidth"
   ]);
-  const closeButtonRef = React18.useRef();
-  const { buttonProps: closeButtonProps } = useButton2({
-    onPress: () => close()
-  }, closeButtonRef);
-  return /* @__PURE__ */ React18.createElement(OverlayContainer, null, /* @__PURE__ */ React18.createElement(ModalDialog, __spreadValues({
-    variant,
-    backdropVariant,
-    isOpen,
-    onClose: close,
-    isDismissable: true
-  }, props), /* @__PURE__ */ React18.createElement(Box, {
+  const fallbackRef = useRef2(null);
+  const popoverRef = ref || fallbackRef;
+  const { overlayProps } = useOverlay2(__spreadValues({
+    isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: keyboardDismissDisabled,
+    shouldCloseOnBlur
+  }, props), popoverRef);
+  const { modalProps } = useModal2({});
+  const style = { minWidth };
+  return /* @__PURE__ */ React19.createElement(Overlay, {
+    open
+  }, /* @__PURE__ */ React19.createElement(Box, __spreadValues({
+    ref: popoverRef,
+    role: "presentation"
+  }, mergeProps3(props, overlayProps, modalProps, style)), children));
+});
+
+// src/Dialog/DialogTrigger.tsx
+var DialogTrigger = ({
+  children,
+  dismissable = true,
+  keyboardDismissable = true
+}) => {
+  const [dialogTrigger, dialog] = React20.Children.toArray(children);
+  const dialogTriggerRef = useRef3(null);
+  const state = useOverlayTriggerState({});
+  const ctx = { open: state.isOpen, close: state.close };
+  return /* @__PURE__ */ React20.createElement(DialogContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ React20.createElement(PressResponder, {
+    ref: dialogTriggerRef,
+    isPressed: state.isOpen,
+    onPress: state.toggle
+  }, dialogTrigger), /* @__PURE__ */ React20.createElement(Overlay, {
+    open: state.isOpen
+  }, /* @__PURE__ */ React20.createElement(Modal, {
+    open: state.isOpen,
+    onClose: state.close,
+    dismissable,
+    keyboardDismissable
+  }, dialog)));
+};
+
+// src/Dialog/Dialog.tsx
+var CloseButton = ({ css }) => {
+  const ref = useRef4(null);
+  const { close } = useDialogContext();
+  const { buttonProps } = useButton2({
+    onPress: () => close == null ? void 0 : close()
+  }, ref);
+  return /* @__PURE__ */ React21.createElement(Box10, {
+    css: { display: "flex", justifyContent: "flex-end" }
+  }, /* @__PURE__ */ React21.createElement(Box10, __spreadValues({
+    as: "button",
     __baseCSS: {
-      display: "flex",
-      justifyContent: "space-between",
-      borderRadius: "small",
-      pl: "large",
-      pb: "large"
+      outline: "none",
+      border: "none",
+      cursor: "pointer",
+      height: 16,
+      width: 16,
+      lineHeight: 1,
+      p: 0
     },
-    className
-  }, /* @__PURE__ */ React18.createElement(Box, {
-    pt: "medium"
-  }, title && /* @__PURE__ */ React18.createElement(Text, {
-    as: "h4",
-    variant: "headline4"
-  }, title), children), /* @__PURE__ */ React18.createElement(Box, {
-    __baseCSS: {
-      display: "flex",
-      justifyContent: "flex-end",
-      alignItems: "start",
-      paddingTop: "xsmall",
-      paddingX: "xsmall"
-    }
-  }, /* @__PURE__ */ React18.createElement(Box, __spreadProps(__spreadValues({
-    as: Button,
-    __baseCSS: {
-      color: "text",
-      bg: "transparent",
-      lineHeight: "xsmall",
-      px: "xxsmall",
-      ":hover": {
-        color: "text",
-        bg: "transparent",
-        cursor: "pointer"
-      },
-      ":focus": {
-        outline: 0
-      }
-    }
-  }, closeButtonProps), {
-    ref: closeButtonRef
-  }), /* @__PURE__ */ React18.createElement(Close, {
-    size: 16
-  }))))));
+    css,
+    ref
+  }, buttonProps), /* @__PURE__ */ React21.createElement("svg", {
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, /* @__PURE__ */ React21.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+  }))));
 };
-var useDialogButtonProps = () => {
-  const state = useOverlayTriggerState({});
-  const openButtonRef = React18.useRef();
-  const { buttonProps: openButtonProps } = useButton2({
-    onPress: () => state.open()
-  }, openButtonRef);
-  return {
-    state,
-    openButtonProps,
-    openButtonRef
-  };
+var addTitleProps = (children, titleProps) => {
+  const childs = React21.Children.toArray(children);
+  const titleIndex = childs.findIndex((child) => React21.isValidElement(child) && (child.type === Header || child.type === Headline));
+  if (titleIndex < 0) {
+    console.warn("No child in <Dialog> found that can act as title for accessibility. Please add a <Header> or <Headline> as direct child.");
+    return children;
+  }
+  const titleChild = React21.cloneElement(childs[titleIndex], titleProps);
+  childs.splice(titleIndex, 1, titleChild);
+  return childs;
+};
+var Dialog = (_a) => {
+  var _b = _a, {
+    children,
+    variant,
+    size,
+    closeButton
+  } = _b, props = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "closeButton"
+  ]);
+  const ref = useRef4(null);
+  const { close } = useDialogContext();
+  const { dialogProps, titleProps } = useDialog(props, ref);
+  const styles = useComponentStyles11("Dialog", { variant, size }, { parts: ["container", "closeButton"] });
+  return /* @__PURE__ */ React21.createElement(Box10, __spreadValues({
+    __baseCSS: { bg: "#fff" },
+    css: styles.container
+  }, dialogProps), closeButton && /* @__PURE__ */ React21.createElement(CloseButton, {
+    css: styles.closeButton
+  }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
+Dialog.Trigger = DialogTrigger;
 
 // src/Divider/Divider.tsx
-import React19 from "react";
+import React22 from "react";
 import { useSeparator } from "@react-aria/separator";
+import { Box as Box11, useComponentStyles as useComponentStyles12 } from "@marigold/system";
 var Divider = (_a) => {
-  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
+  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
   const { separatorProps } = useSeparator(props);
-  return /* @__PURE__ */ React19.createElement(Box, __spreadValues(__spreadValues({
-    __baseCSS: { width: "100%", height: "1px", m: "none", bg: "text" },
-    variant: `divider.${variant}`
+  const styles = useComponentStyles12("Divider", { variant });
+  return /* @__PURE__ */ React22.createElement(Box11, __spreadValues(__spreadValues({
+    css: styles
   }, props), separatorProps));
 };
 
-// src/Field/Field.tsx
-import React20, { useRef } from "react";
-import { useTextField } from "@react-aria/textfield";
-import { Exclamation as Exclamation2 } from "@marigold/icons";
-var Field = (_a) => {
-  var _b = _a, {
-    type = "text",
-    variant = "",
-    labelVariant = "above",
-    htmlFor,
-    required,
-    error,
-    errorMessage
-  } = _b, props = __objRest(_b, [
-    "type",
-    "variant",
-    "labelVariant",
-    "htmlFor",
-    "required",
-    "error",
-    "errorMessage"
-  ]);
-  const ref = useRef(null);
-  const { labelProps, inputProps, errorMessageProps } = useTextField(props, ref);
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Label, __spreadValues({
-    variant: labelVariant,
-    htmlFor,
-    required
-  }, labelProps), props.label), /* @__PURE__ */ React20.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
-    as: "input",
-    type,
-    id: htmlFor,
-    variant: `input.${variant}`
-  }, inputProps), {
-    ref
-  }), props)), error && errorMessage && /* @__PURE__ */ React20.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React20.createElement(Exclamation2, {
-    size: 16
-  }), errorMessage));
+// src/Footer/Footer.tsx
+import React23 from "react";
+import {
+  useComponentStyles as useComponentStyles13
+} from "@marigold/system";
+var Footer = (_a) => {
+  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+  const styles = useComponentStyles13("Footer", { variant, size });
+  return /* @__PURE__ */ React23.createElement(Box, __spreadProps(__spreadValues({
+    as: "footer"
+  }, props), {
+    css: styles
+  }), children);
 };
 
-// src/VisuallyHidden/VisuallyHidden.tsx
-import { VisuallyHidden as VisuallyHidden2 } from "@react-aria/visually-hidden";
-
 // src/Image/Image.tsx
-import React21 from "react";
+import React24 from "react";
+import { useComponentStyles as useComponentStyles14 } from "@marigold/system";
 var Image = (_a) => {
+  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
+  const styles = useComponentStyles14("Image", { variant });
+  return /* @__PURE__ */ React24.createElement(Box, __spreadProps(__spreadValues({}, props), {
+    as: "img",
+    css: styles
+  }));
+};
+
+// src/Inline/Inline.tsx
+import React25 from "react";
+var ALIGNMENT_X = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var ALIGNMENT_Y = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
+var Inline = (_a) => {
   var _b = _a, {
-    variant = "fullWidth"
+    space = "none",
+    alignX = "left",
+    alignY = "center",
+    children
   } = _b, props = __objRest(_b, [
-    "variant"
+    "space",
+    "alignX",
+    "alignY",
+    "children"
   ]);
-  return /* @__PURE__ */ React21.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    as: "img",
-    variant: `image.${variant}`
-  }));
+  return /* @__PURE__ */ React25.createElement(Box, __spreadValues({
+    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 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(Box12, __spreadProps(__spreadValues({}, props), {
+    ref,
+    as: "input",
+    type,
+    css: styles
+  }));
+});
+
 // src/Link/Link.tsx
-import React22, { useRef as useRef2 } from "react";
+import React27, { useRef as useRef5 } from "react";
 import { useLink } from "@react-aria/link";
-import { conditional as conditional2 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles16 } from "@marigold/system";
 var Link = (_a) => {
   var _b = _a, {
     as = "a",
-    variant = "",
+    variant,
+    size,
     children,
     disabled
   } = _b, props = __objRest(_b, [
     "as",
     "variant",
+    "size",
     "children",
     "disabled"
   ]);
-  const ref = useRef2(null);
+  const ref = useRef5(null);
   const { linkProps } = useLink(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
   }), ref);
-  return /* @__PURE__ */ React22.createElement(Box, __spreadValues(__spreadValues({
+  const styles = useComponentStyles16("Link", { variant, size });
+  return /* @__PURE__ */ React27.createElement(Box, __spreadValues(__spreadValues({
     as,
-    variant: conditional2(`link.${variant}`, { disabled }),
-    css: { cursor: disabled ? "default" : "pointer" },
+    css: styles,
     ref
   }, props), linkProps), children);
 };
 
 // src/Menu/Menu.tsx
-import React23 from "react";
-var Menu = (_a) => {
-  var _b = _a, {
-    variant = "default",
-    label = "Menu",
-    onClick,
-    show = false,
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "label",
-    "onClick",
-    "show",
-    "children"
-  ]);
-  return /* @__PURE__ */ React23.createElement(Box, __spreadValues({
-    variant: `menu.${variant}`
-  }, props), /* @__PURE__ */ React23.createElement(Button, {
-    onClick,
-    variant: "menu"
-  }, label), show ? /* @__PURE__ */ React23.createElement(Box, {
-    display: "block",
-    position: "absolute",
-    minWidth: "120px",
-    borderRadius: "2px"
-  }, children) : null);
-};
-
-// src/MenuItem/MenuItem.tsx
-import React24 from "react";
-var MenuItem = (_a) => {
-  var _b = _a, {
-    variant = "default",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "children"
-  ]);
-  return /* @__PURE__ */ React24.createElement(Box, {
-    variant: `menuItem.${variant}`
-  }, /* @__PURE__ */ React24.createElement(Link, __spreadValues({
-    variant: "menuItemLink"
-  }, props), children));
+import React30, { useRef as useRef8 } from "react";
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
+import { useMenu } from "@react-aria/menu";
+import { DismissButton } from "@react-aria/overlays";
+import { Item } from "@react-stately/collections";
+import { useTreeState } from "@react-stately/tree";
+import {
+  Box as Box14,
+  useComponentStyles as useComponentStyles17
+} from "@marigold/system";
+
+// src/Menu/Context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var MenuContext = createContext3({});
+var useMenuContext = () => useContext3(MenuContext);
+
+// src/Menu/MenuTrigger.tsx
+import React28, { useRef as useRef6 } from "react";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useMenuTrigger } from "@react-aria/menu";
+import { useOverlayPosition } from "@react-aria/overlays";
+import { PressResponder as PressResponder2 } from "@react-aria/interactions";
+var MenuTrigger = ({ disabled, children }) => {
+  const [menuTrigger, menu] = React28.Children.toArray(children);
+  const menuTriggerRef = useRef6(null);
+  const overlayRef = useRef6(null);
+  const state = useMenuTriggerState({});
+  const { menuTriggerProps, menuProps } = useMenuTrigger({ trigger: "press", isDisabled: disabled }, state, menuTriggerRef);
+  const { overlayProps: positionProps } = useOverlayPosition({
+    targetRef: menuTriggerRef,
+    overlayRef,
+    isOpen: state.isOpen
+  });
+  const menuContext = __spreadProps(__spreadValues({}, menuProps), {
+    open: state.isOpen,
+    onClose: state.close,
+    autoFocus: state.focusStrategy,
+    triggerWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0
+  });
+  return /* @__PURE__ */ React28.createElement(MenuContext.Provider, {
+    value: menuContext
+  }, /* @__PURE__ */ React28.createElement(PressResponder2, __spreadProps(__spreadValues({}, menuTriggerProps), {
+    ref: menuTriggerRef,
+    isPressed: state.isOpen
+  }), menuTrigger), /* @__PURE__ */ React28.createElement(Popover, __spreadValues({
+    open: state.isOpen,
+    onClose: state.close,
+    dismissable: true,
+    shouldCloseOnBlur: true,
+    ref: overlayRef
+  }, positionProps), menu));
 };
 
-// src/Message/Message.tsx
-import React25 from "react";
-import { Exclamation as Exclamation3, Info, Notification } from "@marigold/icons";
-var Message = (_a) => {
-  var _b = _a, {
-    messageTitle,
-    variant = "info",
-    className,
-    children
-  } = _b, props = __objRest(_b, [
+// src/Menu/MenuItem.tsx
+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 Box13, useStateProps as useStateProps3 } from "@marigold/system";
+var MenuItem = ({ item, state, onAction, css }) => {
+  const ref = useRef7(null);
+  const { onClose } = useMenuContext();
+  const { menuItemProps } = useMenuItem({
+    key: item.key,
+    onAction,
+    onClose
+  }, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing3();
+  const stateProps = useStateProps3({
+    focus: isFocusVisible
+  });
+  return /* @__PURE__ */ React29.createElement(Box13, __spreadValues(__spreadValues({
+    as: "li",
+    ref,
+    __baseCSS: {
+      "&:focus": {
+        outline: 0
+      }
+    },
+    css
+  }, mergeProps4(menuItemProps, focusProps)), stateProps), item.rendered);
+};
+
+// src/Menu/Menu.tsx
+var Menu = (_a) => {
+  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
+  const _a2 = useMenuContext(), { triggerWidth } = _a2, menuContext = __objRest(_a2, ["triggerWidth"]);
+  const ownProps = __spreadValues(__spreadValues({}, props), menuContext);
+  const ref = useRef8(null);
+  const state = useTreeState(__spreadProps(__spreadValues({}, ownProps), { selectionMode: "none" }));
+  const { menuProps } = useMenu(ownProps, state, ref);
+  const styles = useComponentStyles17("Menu", { variant, size }, { parts: ["container", "item"] });
+  return /* @__PURE__ */ React30.createElement(FocusScope2, {
+    restoreFocus: true
+  }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement(DismissButton, {
+    onDismiss: ownProps.onClose
+  }), /* @__PURE__ */ React30.createElement(Box14, __spreadValues({
+    as: "ul",
+    ref,
+    style: { width: triggerWidth },
+    __baseCSS: {
+      listStyle: "none",
+      p: 0,
+      overflowWrap: "break-word"
+    },
+    css: styles.container
+  }, menuProps), [...state.collection].map((item) => /* @__PURE__ */ React30.createElement(MenuItem, {
+    key: item.key,
+    item,
+    state,
+    onAction: props.onSelect,
+    css: styles.item
+  }))), /* @__PURE__ */ React30.createElement(DismissButton, {
+    onDismiss: ownProps.onClose
+  })));
+};
+Menu.Trigger = MenuTrigger;
+Menu.Item = Item;
+
+// src/Message/Message.tsx
+import React31 from "react";
+import { Exclamation, Info, Notification } from "@marigold/icons";
+import { useComponentStyles as useComponentStyles18 } from "@marigold/system";
+var Message = (_a) => {
+  var _b = _a, {
+    messageTitle,
+    variant = "info",
+    size,
+    children
+  } = _b, props = __objRest(_b, [
     "messageTitle",
     "variant",
-    "className",
+    "size",
     "children"
   ]);
-  var icon = /* @__PURE__ */ React25.createElement(Info, null);
+  const styles = useComponentStyles18("Message", {
+    variant,
+    size
+  }, { parts: ["container", "icon", "title", "content"] });
+  var icon = /* @__PURE__ */ React31.createElement(Info, null);
   if (variant === "warning") {
-    icon = /* @__PURE__ */ React25.createElement(Notification, null);
+    icon = /* @__PURE__ */ React31.createElement(Notification, null);
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ React25.createElement(Exclamation3, null);
+    icon = /* @__PURE__ */ React31.createElement(Exclamation, null);
   }
-  return /* @__PURE__ */ React25.createElement(Box, __spreadValues({
-    display: "inline-block",
-    variant: `message.${variant}`,
-    className
-  }, props), /* @__PURE__ */ React25.createElement(Box, {
-    display: "flex",
-    alignItems: "center",
-    variant: "message.title"
-  }, icon, /* @__PURE__ */ React25.createElement(Text, {
-    as: "h4",
-    variant: "headline4"
-  }, messageTitle)), /* @__PURE__ */ React25.createElement(Box, {
-    css: { color: "black" }
+  return /* @__PURE__ */ React31.createElement(Box, __spreadValues({
+    css: styles.container
+  }, props), /* @__PURE__ */ React31.createElement(Box, {
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 }
+  }, /* @__PURE__ */ React31.createElement(Box, {
+    role: "presentation",
+    css: styles.icon
+  }, icon), /* @__PURE__ */ React31.createElement(Box, {
+    css: styles.title
+  }, messageTitle)), /* @__PURE__ */ React31.createElement(Box, {
+    css: styles.content
   }, children));
 };
 
+// src/NumberField/NumberField.tsx
+import React35, { forwardRef as forwardRef5 } from "react";
+import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
+import { useHover as useHover3 } from "@react-aria/interactions";
+import { useLocale } from "@react-aria/i18n";
+import { useNumberField } from "@react-aria/numberfield";
+import { mergeProps as mergeProps6, useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { useNumberFieldState } from "@react-stately/numberfield";
+import {
+  Box as Box18,
+  useComponentStyles as useComponentStyles20,
+  useStateProps as useStateProps5
+} from "@marigold/system";
+
+// src/FieldBase/FieldBase.tsx
+import React33 from "react";
+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 Box15,
+  useComponentStyles as useComponentStyles19
+} from "@marigold/system";
+var HelpText = (_a) => {
+  var _b = _a, {
+    variant,
+    size,
+    disabled,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "disabled",
+    "description",
+    "descriptionProps",
+    "error",
+    "errorMessage",
+    "errorMessageProps"
+  ]);
+  var _a2;
+  const hasErrorMessage = errorMessage && error;
+  const styles = useComponentStyles19("HelpText", { variant, size }, { parts: ["container", "icon"] });
+  return /* @__PURE__ */ React32.createElement(Box15, __spreadProps(__spreadValues(__spreadValues({}, hasErrorMessage ? errorMessageProps : descriptionProps), props), {
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+    css: styles.container
+  }), hasErrorMessage ? /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Exclamation2, {
+    role: "presentation",
+    size: ((_a2 = styles == null ? void 0 : styles.icon) == null ? void 0 : _a2.size) || 16
+  }), errorMessage) : /* @__PURE__ */ React32.createElement(React32.Fragment, null, description));
+};
+
+// src/FieldBase/FieldBase.tsx
+var FieldBase = ({
+  children,
+  variant,
+  size,
+  width = "100%",
+  disabled,
+  required,
+  label,
+  labelProps,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  stateProps
+}) => {
+  const hasHelpText = !!description || errorMessage && error;
+  return /* @__PURE__ */ React33.createElement(Box16, {
+    css: { display: "flex", flexDirection: "column", width }
+  }, label && /* @__PURE__ */ React33.createElement(Label, __spreadValues(__spreadValues({
+    required,
+    variant,
+    size
+  }, labelProps), stateProps), label), children, hasHelpText && /* @__PURE__ */ React33.createElement(HelpText, __spreadProps(__spreadValues({}, stateProps), {
+    variant,
+    size,
+    disabled,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps
+  })));
+};
+
+// src/NumberField/StepButton.tsx
+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 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",
+  fill: "currentColor"
+}, /* @__PURE__ */ React34.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+}));
+var Minus = () => /* @__PURE__ */ React34.createElement(Box17, {
+  as: "svg",
+  __baseCSS: { width: 16, height: 16 },
+  viewBox: "0 0 20 20",
+  fill: "currentColor"
+}, /* @__PURE__ */ React34.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+}));
+var StepButton = (_a) => {
+  var _b = _a, { direction, css } = _b, props = __objRest(_b, ["direction", "css"]);
+  const ref = useRef9(null);
+  const { buttonProps, isPressed } = useButton3(__spreadProps(__spreadValues({}, props), { elementType: "div" }), ref);
+  const { hoverProps, isHovered } = useHover2(props);
+  const stateProps = useStateProps4({
+    active: isPressed,
+    hover: isHovered,
+    disabled: props.isDisabled
+  });
+  const Icon3 = direction === "up" ? Plus : Minus;
+  return /* @__PURE__ */ React34.createElement(Box17, __spreadValues(__spreadValues({
+    __baseCSS: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: props.isDisabled ? "not-allowed" : "pointer"
+    },
+    css
+  }, mergeProps5(buttonProps, hoverProps)), stateProps), /* @__PURE__ */ React34.createElement(Icon3, null));
+};
+
+// src/NumberField/NumberField.tsx
+var NumberField = forwardRef5((_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({
+    isDisabled: disabled,
+    isRequired: required,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, rest);
+  const showStepper = !hideStepper;
+  const { locale } = useLocale();
+  const inputRef = useObjectRef2(ref);
+  const state = useNumberFieldState(__spreadProps(__spreadValues({}, props), { locale }));
+  const {
+    labelProps,
+    groupProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    incrementButtonProps,
+    decrementButtonProps
+  } = useNumberField(props, state, inputRef);
+  const { hoverProps, isHovered } = useHover3({ isDisabled: disabled });
+  const { focusProps, isFocused } = useFocusRing4({
+    within: true,
+    isTextInput: true,
+    autoFocus: props.autoFocus
+  });
+  const styles = useComponentStyles20("NumberField", { variant, size }, { parts: ["group", "stepper"] });
+  const stateProps = useStateProps5({
+    hover: isHovered,
+    focus: isFocused,
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ React35.createElement(FieldBase, {
+    label: props.label,
+    labelProps,
+    required,
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    stateProps,
+    variant,
+    size,
+    width
+  }, /* @__PURE__ */ React35.createElement(Box18, __spreadValues(__spreadValues({
+    "data-group": true,
+    __baseCSS: {
+      display: "flex",
+      alignItems: "stretch",
+      "> input": {
+        flexGrow: 1
+      }
+    },
+    css: styles.group
+  }, mergeProps6(groupProps, focusProps, hoverProps)), stateProps), showStepper && /* @__PURE__ */ React35.createElement(StepButton, __spreadValues({
+    direction: "down",
+    css: styles.stepper
+  }, decrementButtonProps)), /* @__PURE__ */ React35.createElement(Input, __spreadValues(__spreadValues({
+    ref: inputRef,
+    variant,
+    size
+  }, inputProps), stateProps)), showStepper && /* @__PURE__ */ React35.createElement(StepButton, __spreadValues({
+    direction: "up",
+    css: styles.stepper
+  }, incrementButtonProps))));
+});
+
 // src/Provider/index.ts
 import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React26 from "react";
+import React36 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -893,431 +1348,1098 @@ function MarigoldProvider({
 }) {
   const outer = useTheme();
   const isTopLevel = outer.theme === __defaultTheme;
-  return /* @__PURE__ */ React26.createElement(ThemeProvider, {
+  return /* @__PURE__ */ React36.createElement(ThemeProvider, {
     theme
-  }, isTopLevel ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Global, null), /* @__PURE__ */ React26.createElement(OverlayProvider, null, children)) : children);
+  }, isTopLevel ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Global, null), /* @__PURE__ */ React36.createElement(OverlayProvider, null, children)) : children);
 }
 
 // src/Radio/Radio.tsx
-import React28 from "react";
-import { Exclamation as Exclamation4 } from "@marigold/icons";
-import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
-import { VisuallyHidden as VisuallyHidden3 } from "@react-aria/visually-hidden";
-
-// src/Radio/RadioIcon.tsx
-import React27 from "react";
-import { conditional as conditional3, SVG as SVG2 } from "@marigold/system";
-var RadioIcon = ({
-  variant = "",
-  checked = false,
-  disabled = false,
-  error = false
-}) => {
-  const conditionalStates = disabled ? {
-    disabled
-  } : {
-    checked,
+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 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 from "react";
+import { useRadioGroup } from "@react-aria/radio";
+import { useRadioGroupState } from "@react-stately/radio";
+import {
+  Box as Box19,
+  useComponentStyles as useComponentStyles21
+} from "@marigold/system";
+var RadioGroup = (_a) => {
+  var _b = _a, {
+    children,
+    orientation = "vertical",
+    size,
+    variant,
+    width,
+    required,
+    disabled,
+    readOnly,
     error
-  };
-  return /* @__PURE__ */ React27.createElement(SVG2, {
-    width: "16",
-    height: "32",
-    viewBox: "0 0 16 32",
-    fill: "none",
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React27.createElement(Box, {
-    variant: conditional3(`radio.${variant}`, conditionalStates),
-    as: "circle",
-    cx: "8",
-    cy: "16",
-    r: "7.5"
-  }), checked && /* @__PURE__ */ React27.createElement("circle", {
-    fill: "white",
-    cx: "8",
-    cy: "16",
-    r: "3"
-  }));
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "orientation",
+    "size",
+    "variant",
+    "width",
+    "required",
+    "disabled",
+    "readOnly",
+    "error"
+  ]);
+  const props = __spreadValues({
+    isRequired: required,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, rest);
+  const state = useRadioGroupState(props);
+  const { radioGroupProps, labelProps } = useRadioGroup(props, state);
+  const styles = useComponentStyles21("RadioGroup", { variant, size }, { parts: ["container", "group"] });
+  return /* @__PURE__ */ React37.createElement(Box19, __spreadProps(__spreadValues({}, radioGroupProps), {
+    css: styles.container
+  }), props.label && /* @__PURE__ */ React37.createElement(Label, __spreadValues({
+    as: "span",
+    required
+  }, labelProps), props.label), /* @__PURE__ */ React37.createElement(Box19, {
+    role: "presentation",
+    "data-orientation": orientation,
+    __baseCSS: {
+      display: "flex",
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      alignItems: "start",
+      gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
+    },
+    css: styles.group
+  }, /* @__PURE__ */ React37.createElement(RadioGroupContext.Provider, {
+    value: __spreadValues({ variant, size, width, error }, state)
+  }, children)));
 };
 
 // src/Radio/Radio.tsx
-var RadioInput = (_a) => {
-  var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
-  const { focusProps } = useFocusRing2();
-  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ React28.createElement(Box, {
-    pr: "xsmall"
-  }, /* @__PURE__ */ React28.createElement(VisuallyHidden3, null, /* @__PURE__ */ React28.createElement("input", __spreadValues(__spreadValues({
-    type: "radio",
-    disabled: props.disabled
-  }, focusProps), restProps))), /* @__PURE__ */ React28.createElement(RadioIcon, {
-    variant: props.variant,
-    disabled: props.disabled,
-    checked: props.checked,
-    error
-  }));
+var Dot = () => /* @__PURE__ */ React38.createElement("svg", {
+  viewBox: "0 0 6 6"
+}, /* @__PURE__ */ React38.createElement("circle", {
+  fill: "currentColor",
+  cx: "3",
+  cy: "3",
+  r: "3"
+}));
+var Icon2 = (_a) => {
+  var _b = _a, { checked, css } = _b, props = __objRest(_b, ["checked", "css"]);
+  return /* @__PURE__ */ React38.createElement(Box20, __spreadValues({
+    "aria-hidden": "true",
+    __baseCSS: {
+      width: 16,
+      height: 16,
+      bg: "#fff",
+      border: "1px solid #000",
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: 4
+    },
+    css
+  }, props), checked ? /* @__PURE__ */ React38.createElement(Dot, null) : null);
 };
 var Radio = (_a) => {
-  var _b = _a, {
-    required,
-    labelVariant = "inline",
-    errorMessage
-  } = _b, props = __objRest(_b, [
-    "required",
-    "labelVariant",
-    "errorMessage"
+  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"
   ]);
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Box, {
-    as: Label,
-    htmlFor: props.id,
-    required,
-    variant: `label.${labelVariant}`,
-    css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
-  }, /* @__PURE__ */ React28.createElement(Box, __spreadValues({
-    as: RadioInput,
-    error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React28.createElement(ValidationMessage, null, /* @__PURE__ */ React28.createElement(Exclamation4, {
-    size: 16
-  }), errorMessage));
+  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"] });
+  const { hoverProps, isHovered } = useHover4({});
+  const { isFocusVisible, focusProps } = useFocusRing5();
+  const stateProps = useStateProps6({
+    hover: isHovered,
+    focus: isFocusVisible,
+    checked: inputProps.checked,
+    disabled: inputProps.disabled,
+    readOnly: props.readOnly,
+    error
+  });
+  return /* @__PURE__ */ React38.createElement(Box20, __spreadValues(__spreadValues({
+    as: "label",
+    __baseCSS: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1ch",
+      position: "relative",
+      width: width || groupWidth || "100%"
+    },
+    css: styles.container
+  }, hoverProps), stateProps), /* @__PURE__ */ React38.createElement(Box20, __spreadValues(__spreadValues({
+    as: "input",
+    ref,
+    css: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      opacity: 1e-4,
+      cursor: inputProps.disabled ? "not-allowed" : "pointer"
+    }
+  }, inputProps), focusProps)), /* @__PURE__ */ React38.createElement(Icon2, __spreadValues({
+    checked: inputProps.checked,
+    css: styles.radio
+  }, stateProps)), /* @__PURE__ */ React38.createElement(Box20, __spreadValues({
+    css: styles.label
+  }, stateProps), props.children));
 };
+Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React33, { useRef as useRef5 } from "react";
-import { useSelectState } from "@react-stately/select";
-import { useButton as useButton3 } from "@react-aria/button";
-import { mergeProps as mergeProps2 } from "@react-aria/utils";
-import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import React42, { useRef as useRef12 } from "react";
+import { useButton as useButton4 } from "@react-aria/button";
+import { FocusScope as FocusScope3, useFocusRing as useFocusRing6 } from "@react-aria/focus";
+import { useMessageFormatter } from "@react-aria/i18n";
+import { DismissButton as DismissButton2, useOverlayPosition as useOverlayPosition2 } from "@react-aria/overlays";
 import { HiddenSelect, useSelect } from "@react-aria/select";
-import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import { useOverlayTrigger, useOverlayPosition } from "@react-aria/overlays";
-import { ArrowDown, ArrowUp, Exclamation as Exclamation5, Required as Required2 } from "@marigold/icons";
+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 Box24,
+  useComponentStyles as useComponentStyles24,
+  useStateProps as useStateProps8
+} from "@marigold/system";
 
-// src/Select/ListBox.tsx
-import React31, { useRef as useRef4 } from "react";
+// src/ListBox/ListBox.tsx
+import React41, { forwardRef as forwardRef6 } from "react";
+import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
+import {
+  Box as Box23,
+  useComponentStyles as useComponentStyles23
+} from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
 
-// src/Select/Option.tsx
-import React29, { useEffect, useRef as useRef3, useState } from "react";
+// src/ListBox/Context.ts
+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 Box22 } from "@marigold/system";
+
+// src/ListBox/ListBoxOption.tsx
+import React39, { useRef as useRef11 } from "react";
 import { useOption } from "@react-aria/listbox";
-var Option = ({ item, state }) => {
-  const ref = useRef3(null);
-  const [disabled, setDisabled] = useState(false);
-  const { optionProps, isSelected } = useOption({
+import { Box as Box21, useStateProps as useStateProps7 } from "@marigold/system";
+var ListBoxOption = ({ item, state }) => {
+  const ref = useRef11(null);
+  const { optionProps, isSelected, isDisabled, isFocused } = useOption({
     key: item.key
   }, state, ref);
-  useEffect(() => {
-    for (const key of state.disabledKeys.values()) {
-      if (key === item.key) {
-        setDisabled(true);
-      }
-    }
-  }, [state.disabledKeys, item.key]);
-  return /* @__PURE__ */ React29.createElement(Box, __spreadProps(__spreadValues({
-    as: "li"
-  }, optionProps), {
+  const { styles } = useListBoxContext();
+  const stateProps = useStateProps7({
+    selected: isSelected,
+    disabled: isDisabled,
+    focusVisible: isFocused
+  });
+  return /* @__PURE__ */ React39.createElement(Box21, __spreadValues(__spreadValues({
+    as: "li",
     ref,
-    variant: isSelected ? "select.option.selected" : disabled ? "select.option.disabled" : "select.option"
-  }), item.rendered);
+    css: styles.option
+  }, optionProps), stateProps), item.rendered);
 };
 
-// src/Select/ListBoxSection.tsx
-import React30 from "react";
-import { useListBoxSection } from "@react-aria/listbox";
+// src/ListBox/ListBoxSection.tsx
 var ListBoxSection = ({ section, state }) => {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ React30.createElement(Box, __spreadProps(__spreadValues({
-    as: "li"
-  }, itemProps), {
-    css: {
-      cursor: "not-allowed"
-    }
-  }), section.rendered && /* @__PURE__ */ React30.createElement(Box, __spreadProps(__spreadValues({
-    as: "span"
-  }, headingProps), {
-    variant: "select.section"
-  }), section.rendered), /* @__PURE__ */ React30.createElement(Box, __spreadValues({
-    as: "ul"
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ React30.createElement(Option, {
+  const { styles } = useListBoxContext();
+  return /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
+    as: "li",
+    css: styles.section
+  }, itemProps), section.rendered && /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
+    css: styles.sectionTitle
+  }, headingProps), section.rendered), /* @__PURE__ */ React40.createElement(Box22, __spreadValues({
+    as: "ul",
+    __baseCSS: { listStyle: "none", p: 0 },
+    css: styles.list
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ React40.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
   }))));
 };
 
-// src/Select/ListBox.tsx
-var ListBox = (props) => {
-  const ref = useRef4(null);
-  const { state, error } = props;
-  const { listBoxProps } = useListBox(props, state, ref);
-  return /* @__PURE__ */ React31.createElement(Box, __spreadProps(__spreadValues({
+// src/ListBox/ListBox.tsx
+var ListBox = forwardRef6((_a, ref) => {
+  var _b = _a, { state, variant, size } = _b, props = __objRest(_b, ["state", "variant", "size"]);
+  const innerRef = useObjectRef3(ref);
+  const { listBoxProps } = useListBox(props, state, innerRef);
+  const styles = useComponentStyles23("ListBox", { variant, size }, { parts: ["container", "list", "option", "section", "sectionTitle"] });
+  return /* @__PURE__ */ React41.createElement(ListBoxContext.Provider, {
+    value: { styles }
+  }, /* @__PURE__ */ React41.createElement(Box23, {
+    css: styles.container
+  }, /* @__PURE__ */ React41.createElement(Box23, __spreadValues({
     as: "ul",
-    p: "none",
-    css: {
-      listStyle: "none"
-    }
-  }, listBoxProps), {
-    variant: error ? "select.listbox.error" : "select.listbox",
-    ref
-  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ React31.createElement(ListBoxSection, {
+    ref: innerRef,
+    __baseCSS: { listStyle: "none", p: 0 },
+    css: styles.list
+  }, listBoxProps), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ React41.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
-  }) : /* @__PURE__ */ React31.createElement(Option, {
+  }) : /* @__PURE__ */ React41.createElement(ListBoxOption, {
     key: item.key,
     item,
     state
-  })));
-};
-
-// src/Select/Popover.tsx
-import React32, { forwardRef as forwardRef3 } from "react";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
-import {
-  DismissButton,
-  OverlayContainer as OverlayContainer2,
-  useModal as useModal2,
-  useOverlay as useOverlay2
-} from "@react-aria/overlays";
-import { mergeProps } from "@react-aria/utils";
-var Popover = forwardRef3((_a, ref) => {
-  var _b = _a, { children, className, isOpen, onClose } = _b, otherProps = __objRest(_b, ["children", "className", "isOpen", "onClose"]);
-  const { overlayProps } = useOverlay2({
-    isOpen,
-    onClose,
-    shouldCloseOnBlur: true,
-    isDismissable: true
-  }, ref);
-  const { modalProps } = useModal2();
-  return /* @__PURE__ */ React32.createElement(OverlayContainer2, null, /* @__PURE__ */ React32.createElement(FocusScope2, {
-    restoreFocus: true
-  }, /* @__PURE__ */ React32.createElement(Box, __spreadProps(__spreadValues({}, mergeProps(overlayProps, otherProps, modalProps)), {
-    className,
-    ref
-  }), children, /* @__PURE__ */ React32.createElement(DismissButton, {
-    onDismiss: onClose
-  }))));
+  })))));
 });
 
+// src/Select/intl.ts
+var messages = {
+  "en-US": {
+    placeholder: "Select an option\u2026"
+  },
+  "de-DE": {
+    placeholder: "Option ausw\xE4hlen\u2026"
+  }
+};
+
 // src/Select/Select.tsx
+var Chevron = ({ css }) => /* @__PURE__ */ React42.createElement(Box24, {
+  as: "svg",
+  __baseCSS: { width: 16, height: 16 },
+  css,
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  strokeWidth: 2
+}, /* @__PURE__ */ React42.createElement("path", {
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  d: "M19 9l-7 7-7-7"
+}));
 var Select = (_a) => {
   var _b = _a, {
-    labelVariant = "above",
-    placeholder = "Select an option",
+    variant,
+    size,
+    width,
+    open,
     disabled,
     required,
-    error,
-    errorMessage,
-    width,
-    className
-  } = _b, props = __objRest(_b, [
-    "labelVariant",
-    "placeholder",
+    error
+  } = _b, rest = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
+    "open",
     "disabled",
     "required",
-    "error",
-    "errorMessage",
-    "width",
-    "className"
+    "error"
   ]);
+  const formatMessage = useMessageFormatter(messages);
+  const props = __spreadValues({
+    isOpen: open,
+    isDisabled: disabled,
+    isRequired: required,
+    validationState: error ? "invalid" : "valid",
+    placeholder: rest.placeholder || formatMessage("placeholder")
+  }, rest);
   const state = useSelectState(props);
-  const overlayTriggerState = useOverlayTriggerState2({});
-  const triggerRef = useRef5();
-  const overlayRef = useRef5();
-  const { overlayProps } = useOverlayTrigger({ type: "listbox" }, overlayTriggerState, triggerRef);
-  const { overlayProps: positionProps } = useOverlayPosition({
-    targetRef: triggerRef,
+  const buttonRef = useRef12(null);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    descriptionProps,
+    errorMessageProps
+  } = useSelect(props, state, buttonRef);
+  const { buttonProps } = useButton4(__spreadValues({ isDisabled: disabled }, triggerProps), buttonRef);
+  const { focusProps, isFocusVisible } = useFocusRing6();
+  const overlayRef = useRef12(null);
+  const { overlayProps: positionProps } = useOverlayPosition2({
+    targetRef: buttonRef,
     overlayRef,
-    placement: "bottom",
-    shouldFlip: false,
     isOpen: state.isOpen,
-    onClose: state.close
+    placement: "bottom left"
   });
-  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, triggerRef);
-  const { buttonProps } = useButton3(triggerProps, triggerRef);
-  const { focusProps } = useFocusRing3();
-  return /* @__PURE__ */ React33.createElement(Box, {
-    position: "relative",
-    display: "inline-block",
-    width: width && width
-  }, props.label && /* @__PURE__ */ React33.createElement(Box, null, /* @__PURE__ */ React33.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
-    htmlFor: labelProps.id,
-    variant: labelVariant
-  }), required ? /* @__PURE__ */ React33.createElement(Box, {
-    as: "span",
-    display: "inline-flex",
-    alignItems: "center"
-  }, props.label, /* @__PURE__ */ React33.createElement(Required2, {
-    size: 16,
-    fill: "error"
-  })) : props.label)), /* @__PURE__ */ React33.createElement(HiddenSelect, {
+  const styles = useComponentStyles24("Select", { variant, size }, { parts: ["container", "button", "icon"] });
+  const stateProps = useStateProps8({
+    disabled,
+    error,
+    focusVisible: isFocusVisible,
+    expanded: state.isOpen
+  });
+  return /* @__PURE__ */ React42.createElement(FieldBase, {
+    variant,
+    size,
+    width,
+    label: props.label,
+    labelProps: __spreadValues({ as: "span" }, labelProps),
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    stateProps,
+    disabled,
+    required
+  }, /* @__PURE__ */ React42.createElement(HiddenSelect, {
     state,
-    triggerRef,
+    triggerRef: buttonRef,
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ React33.createElement(Box, __spreadProps(__spreadValues({
-    as: "button"
-  }, mergeProps2(buttonProps, focusProps)), {
-    ref: triggerRef,
-    variant: error && state.isOpen && !disabled ? "button.select.errorOpened" : error ? "button.select.error" : state.isOpen && !disabled ? "button.select.open" : "button.select",
-    disabled,
-    className
-  }), /* @__PURE__ */ React33.createElement(Box, __spreadProps(__spreadValues({
-    as: "span"
-  }, valueProps), {
-    variant: disabled ? "select.disabled" : "select"
-  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ React33.createElement(ArrowUp, {
-    size: 16,
-    fill: "text"
-  }) : /* @__PURE__ */ React33.createElement(ArrowDown, {
-    size: 16,
-    fill: disabled ? "disabled" : "text"
-  })), state.isOpen && !disabled && /* @__PURE__ */ React33.createElement(Box, __spreadProps(__spreadValues(__spreadValues({
-    as: Popover
-  }, overlayProps), positionProps), {
-    css: {
-      width: triggerRef.current && triggerRef.current.offsetWidth + "px"
+  }), /* @__PURE__ */ React42.createElement(Box24, __spreadValues(__spreadValues({
+    as: "button",
+    __baseCSS: {
+      display: "flex",
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%"
     },
-    ref: overlayRef,
-    isOpen: state.isOpen,
-    onClose: state.close
-  }), /* @__PURE__ */ React33.createElement(ListBox, __spreadProps(__spreadValues({
-    error
-  }, menuProps), {
-    state
-  }))), error && errorMessage && /* @__PURE__ */ React33.createElement(Box, {
-    as: "span",
-    display: "inline-flex",
-    alignItems: "center"
-  }, /* @__PURE__ */ React33.createElement(Box, {
-    as: Exclamation5,
-    size: 16,
-    css: { color: "error" }
-  }), /* @__PURE__ */ React33.createElement(ValidationMessage, null, errorMessage)));
+    css: styles.button,
+    ref: buttonRef
+  }, mergeProps7(buttonProps, focusProps)), stateProps), /* @__PURE__ */ React42.createElement(Box24, __spreadValues({
+    css: {
+      overflow: "hidden",
+      whiteSpace: "nowrap"
+    }
+  }, valueProps), state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React42.createElement(Chevron, {
+    css: styles.icon
+  })), /* @__PURE__ */ React42.createElement(Popover, __spreadValues({
+    open: state.isOpen,
+    onClose: state.close,
+    dismissable: true,
+    shouldCloseOnBlur: true,
+    minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
+    ref: overlayRef
+  }, positionProps), /* @__PURE__ */ React42.createElement(FocusScope3, {
+    restoreFocus: true
+  }, /* @__PURE__ */ React42.createElement(DismissButton2, {
+    onDismiss: state.close
+  }), /* @__PURE__ */ React42.createElement(ListBox, __spreadValues({
+    state,
+    variant,
+    size
+  }, menuProps)), /* @__PURE__ */ React42.createElement(DismissButton2, {
+    onDismiss: state.close
+  }))));
 };
+Select.Option = Item2;
+Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React34 from "react";
-var Slider = (_a) => {
-  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
-  return /* @__PURE__ */ React34.createElement(Box, __spreadValues({
+import React44, { useRef as useRef13 } from "react";
+import { useSlider } from "@react-aria/slider";
+import { useSliderState } from "@react-stately/slider";
+import { useNumberFormatter } from "@react-aria/i18n";
+import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
+
+// src/Slider/Thumb.tsx
+import React43, { useEffect } from "react";
+import { useSliderThumb } from "@react-aria/slider";
+import { mergeProps as mergeProps8 } from "@react-aria/utils";
+import { useStateProps as useStateProps9 } from "@marigold/system";
+
+// src/VisuallyHidden/VisuallyHidden.tsx
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+
+// src/Slider/Thumb.tsx
+import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+var Thumb = (_a) => {
+  var _b = _a, { state, trackRef, styles } = _b, props = __objRest(_b, ["state", "trackRef", "styles"]);
+  const { disabled } = props;
+  const inputRef = React43.useRef(null);
+  const { isFocusVisible, focusProps, isFocused } = useFocusRing7();
+  const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
+  const stateProps = useStateProps9({
+    focus: focused,
+    disabled
+  });
+  const { thumbProps, inputProps } = useSliderThumb({
+    index: 0,
+    trackRef,
+    inputRef,
+    isDisabled: disabled
+  }, state);
+  useEffect(() => {
+    state.setThumbEditable(0, !disabled);
+  }, [disabled, state]);
+  return /* @__PURE__ */ React43.createElement(Box, {
+    __baseCSS: {
+      position: "absolute",
+      top: 16,
+      transform: "translateX(-50%)",
+      left: `${state.getThumbPercent(0) * 100}%`
+    }
+  }, /* @__PURE__ */ React43.createElement(Box, __spreadValues(__spreadProps(__spreadValues({}, thumbProps), {
+    __baseCSS: styles
+  }), stateProps), /* @__PURE__ */ React43.createElement(VisuallyHidden, null, /* @__PURE__ */ React43.createElement(Box, __spreadValues({
     as: "input",
     type: "range",
-    css: { verticalAlign: "middle" },
-    variant: `slider.${variant}`
-  }, props));
+    ref: inputRef
+  }, mergeProps8(inputProps, focusProps))))));
+};
+
+// src/Slider/Slider.tsx
+var Slider = (_a) => {
+  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);
+  const state = useSliderState(__spreadProps(__spreadValues({}, props), { numberFormatter }));
+  const { groupProps, trackProps, labelProps, outputProps } = useSlider(__spreadValues({
+    label: props.children
+  }, props), state, trackRef);
+  const styles = useComponentStyles25("Slider", { variant, size }, { parts: ["track", "thumb", "label", "output"] });
+  return /* @__PURE__ */ React44.createElement(Box, __spreadValues({
+    __baseCSS: {
+      display: "flex",
+      flexDirection: "column",
+      touchAction: "none",
+      width
+    }
+  }, groupProps), /* @__PURE__ */ React44.createElement(Box, {
+    __baseCSS: { display: "flex", alignSelf: "stretch" }
+  }, props.children && /* @__PURE__ */ React44.createElement(Box, __spreadValues({
+    as: "label",
+    __baseCSS: styles.label
+  }, labelProps), props.children), /* @__PURE__ */ React44.createElement(Box, __spreadProps(__spreadValues({
+    as: "output"
+  }, outputProps), {
+    __baseCSS: { flex: "1 0 auto", textAlign: "end" },
+    css: styles.output
+  }), state.getThumbValueLabel(0))), /* @__PURE__ */ React44.createElement(Box, __spreadProps(__spreadValues({}, trackProps), {
+    ref: trackRef,
+    __baseCSS: {
+      position: "relative",
+      height: 32,
+      width: "100%",
+      cursor: props.disabled ? "not-allowed" : "pointer"
+    }
+  }), /* @__PURE__ */ React44.createElement(Box, {
+    __baseCSS: styles.track
+  }), /* @__PURE__ */ React44.createElement(Thumb, {
+    state,
+    trackRef,
+    disabled: props.disabled,
+    styles: styles.thumb
+  })));
+};
+
+// src/Stack/Stack.tsx
+import React45 from "react";
+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",
+    alignX = "left",
+    alignY = "top",
+    stretch = false
+  } = _b, props = __objRest(_b, [
+    "children",
+    "space",
+    "alignX",
+    "alignY",
+    "stretch"
+  ]);
+  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
-import React35, { useRef as useRef6 } from "react";
-import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
+import React46, { useRef as useRef14 } from "react";
+import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
-import { VisuallyHidden as VisuallyHidden4 } from "@react-aria/visually-hidden";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
-import { conditional as conditional4 } from "@marigold/system";
+import {
+  useComponentStyles as useComponentStyles26,
+  useStateProps as useStateProps10
+} from "@marigold/system";
 var Switch = (_a) => {
   var _b = _a, {
-    variant = "",
-    labelVariant = "above",
-    disabled
-  } = _b, props = __objRest(_b, [
+    variant,
+    size,
+    width = "100%",
+    checked,
+    disabled,
+    readOnly,
+    defaultChecked
+  } = _b, rest = __objRest(_b, [
     "variant",
-    "labelVariant",
-    "disabled"
+    "size",
+    "width",
+    "checked",
+    "disabled",
+    "readOnly",
+    "defaultChecked"
   ]);
+  const ref = useRef14(null);
+  const props = __spreadValues({
+    isSelected: checked,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    defaultSelected: defaultChecked
+  }, rest);
   const state = useToggleState2(props);
-  const ref = useRef6();
   const { inputProps } = useSwitch(props, state, ref);
-  const { focusProps } = useFocusRing4();
-  return /* @__PURE__ */ React35.createElement(Box, {
-    as: Label,
-    __baseCSS: {
-      userSelect: "none"
-    },
-    variant: labelVariant
-  }, props.children, /* @__PURE__ */ React35.createElement(VisuallyHidden4, null, /* @__PURE__ */ React35.createElement("input", __spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+  const { isFocusVisible, focusProps } = useFocusRing8();
+  const stateProps = useStateProps10({
+    checked: state.isSelected,
     disabled,
-    ref
-  }))), /* @__PURE__ */ React35.createElement(Box, {
-    as: "svg",
+    readOnly,
+    focus: isFocusVisible
+  });
+  const styles = useComponentStyles26("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
+  return /* @__PURE__ */ React46.createElement(Box, {
+    as: "label",
     __baseCSS: {
-      cursor: disabled ? "not-allowed" : "pointer",
-      width: 56,
-      height: 32
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "1ch",
+      position: "relative",
+      width
     },
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React35.createElement(Box, {
-    as: "rect",
+    css: styles.container
+  }, /* @__PURE__ */ React46.createElement(Box, __spreadValues(__spreadValues({
+    as: "input",
+    ref,
+    css: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      opacity: 1e-4,
+      cursor: inputProps.disabled ? "not-allowed" : "pointer"
+    }
+  }, inputProps), focusProps)), props.children && /* @__PURE__ */ React46.createElement(Box, {
+    css: styles.label
+  }, props.children), /* @__PURE__ */ React46.createElement(Box, __spreadValues({
     __baseCSS: {
-      x: 4,
-      y: 4,
-      rx: 12,
+      position: "relative",
       width: 48,
-      height: 24
+      height: 24,
+      bg: "#dee2e6",
+      borderRadius: 20
     },
-    variant: conditional4(`switch.${variant}`, {
-      checked: state.isSelected,
-      disabled
-    })
-  }), /* @__PURE__ */ React35.createElement(Box, {
-    as: "circle",
+    css: styles.track
+  }, stateProps), /* @__PURE__ */ React46.createElement(Box, __spreadValues({
     __baseCSS: {
-      boxShadow: "1px 1px 4px rgba(0, 0, 0, 0.25)",
-      cx: state.isSelected ? 40 : 16,
-      cy: 16,
-      r: 11,
-      fill: disabled ? "gray20" : "gray00"
-    }
-  })));
+      display: "block",
+      position: "absolute",
+      top: 1,
+      left: 0,
+      willChange: "transform",
+      transform: "translateX(1px)",
+      transition: "all 0.1s cubic-bezier(.7, 0, .3, 1)",
+      height: 22,
+      width: 22,
+      borderRadius: 9999,
+      bg: "#fff",
+      "&:checked": {
+        transform: "translateX(calc(47px - 100%))"
+      }
+    },
+    css: styles.thumb
+  }, stateProps))));
 };
 
-// src/Textarea/Textarea.tsx
-import React36, { useRef as useRef7 } from "react";
-import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { Exclamation as Exclamation6 } from "@marigold/icons";
-var Textarea = (_a) => {
+// src/Table/Table.tsx
+import React55, { useRef as useRef21 } from "react";
+import { useTable } from "@react-aria/table";
+import {
+  Cell,
+  Column,
+  Row,
+  TableBody as Body,
+  TableHeader as Header2,
+  useTableState
+} from "@react-stately/table";
+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 React48, { useRef as useRef15 } from "react";
+import { useTableCell } from "@react-aria/table";
+import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
+import { mergeProps as mergeProps9 } from "@react-aria/utils";
+import { Box as 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({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React48.createElement(Box25, __spreadValues(__spreadValues({
+    as: "td",
+    ref,
+    css: styles.cell
+  }, mergeProps9(gridCellProps, focusProps)), stateProps), cell.rendered);
+};
+
+// src/Table/TableCheckboxCell.tsx
+import React49, { useRef as useRef16 } from "react";
+import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
+import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
+import { mergeProps as mergeProps10 } from "@react-aria/utils";
+import { Box as 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 checkboxProps = __spreadValues({
+    disabled: isDisabled,
+    checked: isSelected,
+    defaultChecked: defaultSelected,
+    indeterminate: isIndeterminate
+  }, rest);
+  return { checkboxProps };
+};
+
+// src/Table/TableCheckboxCell.tsx
+var TableCheckboxCell = ({ cell }) => {
+  const ref = useRef16(null);
+  const { state, styles } = useTableContext();
+  const disabled = state.disabledKeys.has(cell.parentKey);
+  const { gridCellProps } = useTableCell2({
+    node: cell
+  }, state, ref);
+  const { checkboxProps } = mapCheckboxProps(useTableSelectionCheckbox({ key: cell.parentKey }, state));
+  const { focusProps, isFocusVisible } = useFocusRing10();
+  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,
+    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 React52, { useRef as useRef18 } from "react";
+import { useTableHeaderRow } from "@react-aria/table";
+var TableHeaderRow = ({ item, children }) => {
+  const { state } = useTableContext();
+  const ref = useRef18(null);
+  const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
+  return /* @__PURE__ */ React52.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+    ref
+  }), children);
+};
+
+// src/Table/TableRow.tsx
+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 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 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__ */ React53.createElement(Box28, __spreadValues(__spreadValues({
+    as: "tr",
+    ref,
+    css: styles.row
+  }, mergeProps12(rowProps, focusProps, hoverProps)), stateProps), 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 tableRef = useRef21(null);
+  const state = useTableState(__spreadProps(__spreadValues({}, props), {
+    showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
+  }));
+  const { gridProps } = useTable(props, state, tableRef);
+  const styles = useComponentStyles27("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  const { collection } = state;
+  return /* @__PURE__ */ React55.createElement(TableContext.Provider, {
+    value: { state, styles }
+  }, /* @__PURE__ */ React55.createElement(Box30, __spreadValues({
+    as: "table",
+    ref: tableRef,
+    css: styles.table
+  }, gridProps), /* @__PURE__ */ React55.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React55.createElement(TableHeaderRow, {
+    key: headerRow.key,
+    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,
+    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 = Body;
+Table.Cell = Cell;
+Table.Column = Column;
+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 = "",
-    htmlFor,
-    error,
-    errorMessage,
-    required,
+    variant,
+    size,
+    align,
+    color,
+    fontSize,
+    cursor,
+    outline,
     children
   } = _b, props = __objRest(_b, [
     "variant",
-    "htmlFor",
-    "error",
-    "errorMessage",
-    "required",
+    "size",
+    "align",
+    "color",
+    "fontSize",
+    "cursor",
+    "outline",
     "children"
   ]);
-  const ref = useRef7(null);
-  const { labelProps, inputProps, errorMessageProps } = useTextField2(__spreadProps(__spreadValues({}, props), {
-    inputElementType: "textarea"
-  }), ref);
-  return /* @__PURE__ */ React36.createElement(Box, null, /* @__PURE__ */ React36.createElement(Label, __spreadValues({
-    htmlFor,
-    required
-  }, labelProps), props.label), /* @__PURE__ */ React36.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
+  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 React57, { useRef as useRef22 } from "react";
+import { useTextField } from "@react-aria/textfield";
+import {
+  Box as Box32,
+  useComponentStyles as useComponentStyles29,
+  useStateProps as useStateProps16
+} from "@marigold/system";
+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
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
+    "disabled",
+    "required",
+    "readOnly",
+    "error"
+  ]);
+  const { label, description, errorMessage } = props;
+  const ref = useRef22(null);
+  const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(__spreadValues({
+    inputElementType: "textarea",
+    isDisabled: disabled,
+    isRequired: required,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, props), ref);
+  const { hoverProps, isHovered } = useHover8({});
+  const { focusProps, isFocusVisible } = useFocusRing14();
+  const stateProps = useStateProps16({
+    hover: isHovered,
+    focus: isFocusVisible,
+    disabled,
+    readOnly,
+    error
+  });
+  const styles = useComponentStyles29("TextArea", { variant, size });
+  return /* @__PURE__ */ React57.createElement(FieldBase, {
+    label,
+    labelProps,
+    required,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps,
+    stateProps,
+    variant,
+    size,
+    width
+  }, /* @__PURE__ */ React57.createElement(Box32, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
-    variant: `textarea.${variant}`,
-    css: {
-      outlineColor: error && "error"
-    }
-  }, inputProps), {
+    css: styles,
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ React36.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React36.createElement(Exclamation6, {
-    size: 16
-  }), errorMessage));
+  }, inputProps), focusProps), hoverProps), stateProps)));
+};
+
+// src/TextField/TextField.tsx
+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 useStateProps17 } from "@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"
+  ]);
+  const { label, description, errorMessage, autoFocus } = props;
+  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 } = useHover9({});
+  const { focusProps, isFocusVisible } = useFocusRing15({
+    isTextInput: true,
+    autoFocus
+  });
+  const stateProps = useStateProps17({
+    hover: isHovered,
+    focus: isFocusVisible,
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ React58.createElement(FieldBase, {
+    label,
+    labelProps,
+    required,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps,
+    stateProps,
+    variant,
+    size,
+    width
+  }, /* @__PURE__ */ React58.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    ref,
+    variant,
+    size
+  }, inputProps), focusProps), hoverProps), stateProps)));
 };
 
 // src/Tiles/Tiles.tsx
-import React37 from "react";
-var Tiles = React37.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__ */ React37.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React59.createElement(Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -1328,119 +2450,99 @@ var Tiles = React37.forwardRef(function Tiles2(_a, ref) {
 });
 
 // src/Tooltip/Tooltip.tsx
-import React39, { useContext } from "react";
+import React61 from "react";
 import { useTooltip } from "@react-aria/tooltip";
-import { mergeProps as mergeProps3 } 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 React38, { useRef as useRef8 } 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 = React38.createContext({});
+import { useTooltipTriggerState } from "@react-stately/tooltip";
 var TooltipTrigger = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [trigger, tooltip] = React38.Children.toArray(children);
-  const state = useTooltipTriggerState(props);
-  const tooltipTriggerRef = useRef8();
-  const { triggerProps, tooltipProps } = useTooltipTrigger({}, state, tooltipTriggerRef);
-  return /* @__PURE__ */ React38.createElement(FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
-    ref: tooltipTriggerRef
-  }), trigger, state.isOpen && /* @__PURE__ */ React38.createElement(TooltipContext.Provider, {
-    value: __spreadValues({
-      state
-    }, tooltipProps)
-  }, tooltip));
-};
-
-// src/Tooltip/Tooltip.tsx
-var Tooltip = (_a) => {
   var _b = _a, {
-    variant = "",
+    disabled,
+    open,
+    delay = 1e3,
+    placement = "top",
     children
-  } = _b, props = __objRest(_b, [
-    "variant",
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "open",
+    "delay",
+    "placement",
     "children"
   ]);
-  const _a2 = useContext(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
-  const mergedProps = mergeProps3(props, tooltipProviderProps);
-  const { tooltipProps } = useTooltip(mergedProps, state);
-  return /* @__PURE__ */ React39.createElement(Box, __spreadValues({
-    position: "relative"
-  }, tooltipProps), /* @__PURE__ */ React39.createElement(Box, __spreadValues({
-    position: "absolute",
-    variant: `tooltip.${variant}`
-  }, mergedProps), children));
-};
-
-// src/Input/Input.tsx
-import React40 from "react";
-var Input = (_a) => {
-  var _b = _a, {
-    variant = "",
-    type = "text"
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "type"
-  ]);
-  return /* @__PURE__ */ React40.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    as: "input",
-    type,
-    variant: `input.${variant}`
-  }));
+  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 { 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
+  }, 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/Container/Container.tsx
-import React41 from "react";
-import { size as tokenSize } from "@marigold/tokens";
-var ALIGNMENT3 = {
-  left: "flex-start",
-  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"
-  ]);
-  const maxWidth = tokenSize[contentType][size];
-  let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
-  let gridColumn = 1;
-  if (alignContainer === "center") {
-    gridTemplateColumns = `1fr ${maxWidth} 1fr`;
-    gridColumn = 2;
-  }
-  if (alignContainer === "right") {
-    gridTemplateColumns = `1fr 1fr ${maxWidth}`;
-    gridColumn = 3;
-  }
-  return /* @__PURE__ */ React41.createElement(Box, __spreadValues({
-    display: "grid",
-    css: {
-      gridTemplateColumns,
-      placeItems: ALIGNMENT3[align],
-      "> *": {
-        gridColumn
-      }
-    }
-  }, props), children);
+// 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 { 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
+  })));
 };
-
-// src/index.ts
-import { Item, Section } from "@react-stately/collections";
+Tooltip.Trigger = TooltipTrigger;
 export {
-  ActionGroup,
   Aside,
   Aspect,
   Badge,
@@ -1450,38 +2552,42 @@ export {
   Card,
   Center,
   Checkbox,
+  CheckboxGroup,
+  CheckboxGroupContext,
   Columns,
   Container,
+  Content,
   Dialog,
   Divider,
-  Field,
+  Footer,
+  Header,
+  Headline,
   Image,
   Inline,
   Input,
-  Item,
   Label,
-  LabelBase,
   Link,
   MarigoldProvider,
   Menu,
-  MenuItem,
   Message,
+  NumberField,
+  Overlay,
+  Popover,
   Radio,
   SSRProvider,
-  Section,
   Select,
   Slider,
   Stack,
   Switch,
+  Table,
   Text,
-  Textarea,
+  TextArea,
+  TextField,
   ThemeProvider2 as ThemeProvider,
   Tiles,
   Tooltip,
-  TooltipContext,
-  TooltipTrigger,
-  ValidationMessage,
-  VisuallyHidden2 as VisuallyHidden,
-  useDialogButtonProps,
+  Underlay,
+  VisuallyHidden,
+  useCheckboxGroupContext,
   useTheme2 as useTheme
 };