@marigold/components 0.6.0 → 0.9.0

package/dist/index.js

@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -38,627 +37,566 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ActionGroup: () => ActionGroup,
+  Aside: () => Aside,
+  Aspect: () => Aspect,
   Badge: () => Badge,
   Box: () => import_system.Box,
+  Breakout: () => Breakout,
   Button: () => Button,
   Card: () => Card,
+  Center: () => Center,
   Checkbox: () => Checkbox,
-  Column: () => Column,
+  CheckboxGroup: () => CheckboxGroup,
+  CheckboxGroupContext: () => CheckboxGroupContext,
   Columns: () => Columns,
   Container: () => Container,
+  Content: () => Content,
   Dialog: () => Dialog,
   Divider: () => Divider,
-  Field: () => Field,
+  Footer: () => Footer,
+  Header: () => Header,
+  Headline: () => Headline,
   Image: () => Image,
   Inline: () => Inline,
   Input: () => Input,
-  Item: () => import_collections.Item,
-  Label: () => Label,
+  Item: () => import_collections2.Item,
+  Label: () => Label2,
   LabelBase: () => LabelBase,
   Link: () => Link,
   MarigoldProvider: () => MarigoldProvider,
   Menu: () => Menu,
-  MenuItem: () => MenuItem,
   Message: () => Message,
+  Overlay: () => Overlay,
+  Popover: () => Popover,
   Radio: () => Radio,
   SSRProvider: () => import_ssr.SSRProvider,
-  Section: () => import_collections.Section,
+  Section: () => import_collections2.Section,
   Select: () => Select,
   Slider: () => Slider,
   Stack: () => Stack,
   Switch: () => Switch,
+  Table: () => Table,
   Text: () => Text,
-  Textarea: () => Textarea,
-  ThemeProvider: () => import_system5.ThemeProvider,
+  TextArea: () => TextArea,
+  TextField: () => TextField,
+  ThemeProvider: () => import_system18.ThemeProvider,
+  Tiles: () => Tiles,
   Tooltip: () => Tooltip,
   TooltipContext: () => TooltipContext,
   TooltipTrigger: () => TooltipTrigger,
   ValidationMessage: () => ValidationMessage,
-  VisuallyHidden: () => import_visually_hidden2.VisuallyHidden,
+  VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
+  useCheckboxGroupContext: () => useCheckboxGroupContext,
   useDialogButtonProps: () => useDialogButtonProps,
-  useTheme: () => import_system5.useTheme
+  useTheme: () => import_system18.useTheme
 });
+module.exports = __toCommonJS(src_exports);
 
-// src/ActionGroup/ActionGroup.tsx
-var import_react4 = __toESM(require("react"));
-
-// src/Inline/Inline.tsx
-var import_react2 = __toESM(require("react"));
-
-// src/utils/flatten-children.ts
-var import_react = require("react");
-var import_react_is = require("react-is");
-var flattenChildren = (children, depth = 0, keys = []) => import_react.Children.toArray(children).reduce((acc, node) => {
-  if ((0, import_react_is.isFragment)(node)) {
-    acc.push.apply(acc, flattenChildren(node.props.children, depth + 1, keys.concat(node.key)));
-  } else {
-    if ((0, import_react.isValidElement)(node)) {
-      acc.push((0, import_react.cloneElement)(node, {
-        key: keys.concat(String(node.key)).join(".")
-      }));
-    } else if (typeof node === "string" || typeof node === "number") {
-      acc.push(node);
-    }
-  }
-  return acc;
-}, []);
+// src/Aside/Aside.tsx
+var import_react = __toESM(require("react"));
 
 // src/Box.ts
 var import_system = require("@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__ */ import_react2.default.createElement(import_system.Box, __spreadValues({
-    __baseCSS: { gap: space, flexWrap: "wrap" },
-    display: "inline-flex",
-    alignItems: ALIGNMENT[align]
-  }, props), import_react2.Children.map(flattenChildren(children), (child) => child));
-};
-
-// src/Stack/Stack.tsx
-var import_react3 = __toESM(require("react"));
-var ALIGNMENT2 = {
-  left: "flex-start",
-  center: "center",
-  right: "flex-end"
+// src/Aside/Aside.tsx
+var SIDE_MAP = {
+  left: [":not(style):first-of-type", ":last-child"],
+  right: [":last-child", ":not(style):first-of-type"]
 };
-var Stack = (_a) => {
-  var _b = _a, {
-    space = "none",
-    align = "left",
-    children
-  } = _b, props = __objRest(_b, [
-    "space",
-    "align",
-    "children"
-  ]);
-  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: ALIGNMENT2[align],
-    css: { "> * + *": { pt: space } }
-  }), import_react3.Children.map(flattenChildren(children), (child) => /* @__PURE__ */ import_react3.default.createElement(import_system.Box, null, import_react3.default.cloneElement(child, {}, child.props.children))));
+var Aside = ({
+  children,
+  sideWidth,
+  space = "none",
+  side = "left",
+  stretch = true,
+  wrap = "50%"
+}) => {
+  const [aside, content] = SIDE_MAP[side];
+  return /* @__PURE__ */ import_react.default.createElement(import_system.Box, {
+    css: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: space,
+      alignItems: stretch ? void 0 : "flex-start",
+      [`> ${aside}`]: {
+        flexBasis: sideWidth,
+        flexGrow: 1
+      },
+      [`> ${content}`]: {
+        flexBasis: 0,
+        flexGrow: 999,
+        minInlineSize: wrap
+      }
+    }
+  }, 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__ */ import_react4.default.createElement(Stack, __spreadValues({
-    space
-  }, props), children) : /* @__PURE__ */ import_react4.default.createElement(Inline, __spreadValues({
-    space
-  }, props), children);
-};
+// src/Aspect/Aspect.tsx
+var import_react2 = __toESM(require("react"));
+var import_tokens = require("@marigold/tokens");
+var Aspect = ({
+  ratio = "square",
+  maxWidth,
+  children
+}) => /* @__PURE__ */ import_react2.default.createElement(import_system.Box, {
+  css: {
+    aspectRatio: import_tokens.aspect[ratio],
+    overflow: "hidden",
+    maxWidth
+  }
+}, children);
 
 // src/Badge/Badge.tsx
-var import_react5 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
+var import_system2 = require("@marigold/system");
 var Badge = (_a) => {
-  var _b = _a, {
-    variant = "",
-    bgColor = "transparent",
-    borderColor = "transparent",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "bgColor",
-    "borderColor",
-    "children"
-  ]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_system.Box, __spreadValues({
-    css: { bg: bgColor, borderColor },
-    variant: `badge.${variant}`
-  }, props), children);
+  var _b = _a, { variant, size, children } = _b, props = __objRest(_b, ["variant", "size", "children"]);
+  const styles = (0, import_system2.useComponentStyles)("Badge", { variant, size });
+  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    css: styles
+  }), children);
 };
 
 // src/Button/Button.tsx
-var import_react6 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_button = require("@react-aria/button");
-var Button = (0, import_react6.forwardRef)((_a, ref) => {
+var import_focus = require("@react-aria/focus");
+var import_utils = require("@react-aria/utils");
+var import_system3 = require("@marigold/system");
+var Button = (0, import_react4.forwardRef)((_a, ref) => {
   var _b = _a, {
     as = "button",
-    variant = "primary",
-    size = "large",
-    space = "none",
-    disabled,
     children,
-    className
+    variant,
+    size,
+    disabled
   } = _b, props = __objRest(_b, [
     "as",
+    "children",
     "variant",
     "size",
-    "space",
-    "disabled",
-    "children",
-    "className"
+    "disabled"
   ]);
-  const { buttonProps } = (0, import_button.useButton)(__spreadProps(__spreadValues({}, props), {
+  const buttonRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useImperativeHandle)(ref, () => buttonRef.current);
+  const { buttonProps, isPressed } = (0, import_button.useButton)(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
-  }), ref);
-  return /* @__PURE__ */ import_react6.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({}, buttonProps), props), {
+  }), buttonRef);
+  const { isFocusVisible, focusProps } = (0, import_focus.useFocusRing)();
+  const styles = (0, import_system3.useComponentStyles)("Button", { variant, size });
+  const stateProps = (0, import_system3.useStateProps)({
+    active: isPressed,
+    focus: isFocusVisible
+  });
+  return /* @__PURE__ */ import_react4.default.createElement(import_system3.Box, __spreadProps(__spreadValues(__spreadValues({}, (0, import_utils.mergeProps)(buttonProps, focusProps)), stateProps), {
     as,
-    display: "inline-flex",
-    alignItems: "center",
-    variant: [`button.${variant}`, `button.${size}`],
-    className,
-    ref,
-    css: { columnGap: space }
+    ref: buttonRef,
+    __baseCSS: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5ch",
+      cursor: disabled ? "not-allowed" : "pointer"
+    },
+    css: styles
   }), children);
 });
 
-// src/Card/Card.tsx
-var import_react7 = __toESM(require("react"));
-var Card = (_a) => {
+// src/Breakout/Breakout.tsx
+var import_react5 = __toESM(require("react"));
+var useAlignment = (direction) => {
+  switch (direction) {
+    case "right":
+      return "flex-end";
+    case "bottom":
+      return "flex-end";
+    case "center":
+      return "center";
+  }
+  return "flex-start";
+};
+var Breakout = (_a) => {
   var _b = _a, {
-    variant = "",
-    title,
-    width,
-    className,
+    horizontalAlign,
+    verticalAlign,
     children
   } = _b, props = __objRest(_b, [
-    "variant",
-    "title",
-    "width",
-    "className",
+    "horizontalAlign",
+    "verticalAlign",
     "children"
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    variant: `card.${variant}`,
-    maxWidth: width,
-    className
-  }), title && /* @__PURE__ */ import_react7.default.createElement(import_system.Box, {
-    as: "h2",
-    variant: "text.h2",
-    pb: "small"
-  }, title), children);
-};
-
-// src/Checkbox/Checkbox.tsx
-var import_react12 = __toESM(require("react"));
-var import_focus = require("@react-aria/focus");
-var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_checkbox = require("@react-aria/checkbox");
-
-// ../../node_modules/@react-stately/utils/dist/module.js
-var import_react8 = require("react");
-function useControlledState(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, import_react8.useState)(value || defaultValue);
-  let ref = (0, import_react8.useRef)(value !== void 0);
-  let wasControlled = ref.current;
-  let isControlled = value !== void 0;
-  let stateRef = (0, import_react8.useRef)(stateValue);
-  if (wasControlled !== isControlled) {
-    console.warn("WARN: A component changed from " + (wasControlled ? "controlled" : "uncontrolled") + " to " + (isControlled ? "controlled" : "uncontrolled") + ".");
-  }
-  ref.current = isControlled;
-  let setValue = (0, import_react8.useCallback)(function(value2) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-    let onChangeCaller = function onChangeCaller2(value3) {
-      if (onChange) {
-        if (!Object.is(stateRef.current, value3)) {
-          for (var _len2 = arguments.length, onChangeArgs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-            onChangeArgs[_key2 - 1] = arguments[_key2];
-          }
-          onChange(value3, ...onChangeArgs);
-        }
-      }
-      if (!isControlled) {
-        stateRef.current = value3;
-      }
-    };
-    if (typeof value2 === "function") {
-      let updateFunction = function updateFunction2(oldValue) {
-        for (var _len3 = arguments.length, functionArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
-          functionArgs[_key3 - 1] = arguments[_key3];
-        }
-        let interceptedValue = value2(isControlled ? stateRef.current : oldValue, ...functionArgs);
-        onChangeCaller(interceptedValue, ...args);
-        if (!isControlled) {
-          return interceptedValue;
-        }
-        return oldValue;
-      };
-      setStateValue(updateFunction);
-    } else {
-      if (!isControlled) {
-        setStateValue(value2);
-      }
-      onChangeCaller(value2, ...args);
-    }
-  }, [isControlled, onChange]);
-  if (isControlled) {
-    stateRef.current = value;
-  } else {
-    value = stateValue;
-  }
-  return [value, setValue];
-}
-
-// ../../node_modules/@react-stately/toggle/dist/module.js
-function useToggleState(props) {
-  if (props === void 0) {
-    props = {};
-  }
-  let {
-    isReadOnly,
-    onChange
-  } = props;
-  let [isSelected, setSelected] = useControlledState(props.isSelected, props.defaultSelected || false, () => {
-  });
-  function updateSelected(value) {
-    if (!isReadOnly) {
-      setSelected(value);
-      if (onChange) {
-        onChange(value);
-      }
-    }
-  }
-  function toggleState() {
-    if (!isReadOnly) {
-      setSelected((prev) => {
-        let newVal = !prev;
-        if (onChange) {
-          onChange(newVal);
-        }
-        return newVal;
-      });
+  const alignItems = useAlignment(horizontalAlign);
+  const justifyContent = useAlignment(verticalAlign);
+  return /* @__PURE__ */ import_react5.default.createElement(import_system.Box, __spreadValues({
+    alignItems,
+    justifyContent,
+    width: "100%",
+    display: verticalAlign || horizontalAlign ? "flex" : "block",
+    css: {
+      gridColumn: "1 / -1"
     }
-  }
-  return {
-    isSelected,
-    setSelected: updateSelected,
-    toggle: toggleState
-  };
-}
-
-// src/Checkbox/Checkbox.tsx
-var import_icons2 = require("@marigold/icons");
+  }, props), children);
+};
 
-// src/Checkbox/CheckboxIcon.tsx
-var import_react9 = __toESM(require("react"));
-var import_system2 = require("@marigold/system");
-var CheckboxIcon = ({
-  variant = "",
-  checked = false,
-  disabled = false,
-  indeterminated,
-  error = false
-}) => {
-  const conditionalStates = disabled ? {
-    disabled
-  } : {
-    checked,
-    error
-  };
-  return /* @__PURE__ */ import_react9.default.createElement(import_system2.SVG, {
-    width: "16",
-    height: "32",
-    viewBox: "0 0 16 32",
-    fill: "none",
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
-    as: "rect",
-    x: "0.5",
-    y: "8.5",
-    width: "15px",
-    height: "15px",
-    rx: "1.5",
-    variant: (0, import_system2.conditional)(`checkbox.${variant}`, conditionalStates)
-  }), checked && indeterminated && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
-    __baseCSS: { fill: "gray00" },
-    as: "path",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M13.5 17.0402H2.5V15.4688H13.5V17.0402V17.0402Z"
-  }), checked && !indeterminated && /* @__PURE__ */ import_react9.default.createElement(import_system.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"
-  }));
+// src/Card/Card.tsx
+var import_react6 = __toESM(require("react"));
+var import_system4 = require("@marigold/system");
+var Card = (_a) => {
+  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+  const styles = (0, import_system4.useComponentStyles)("Card", { variant, size });
+  return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, __spreadProps(__spreadValues({}, props), {
+    css: styles
+  }), children);
 };
 
-// src/Label/Label.tsx
-var import_react10 = __toESM(require("react"));
-var import_icons = require("@marigold/icons");
-var LabelBase = (_a) => {
+// src/Center/Center.tsx
+var import_react7 = __toESM(require("react"));
+var Center = (_a) => {
   var _b = _a, {
-    variant = "above",
-    required,
-    color = "text",
+    maxWidth,
+    space = "none",
     children
   } = _b, props = __objRest(_b, [
-    "variant",
-    "required",
-    "color",
+    "maxWidth",
+    "space",
     "children"
   ]);
-  return /* @__PURE__ */ import_react10.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    as: "label",
-    __baseCSS: { color },
-    variant: `label.${variant}`
-  }), children);
+  return /* @__PURE__ */ import_react7.default.createElement(import_system.Box, __spreadValues({
+    css: {
+      boxSizing: "content-box",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      marginInline: "auto",
+      maxInlineSize: maxWidth,
+      gap: space
+    }
+  }, props), children);
 };
+
+// src/Checkbox/Checkbox.tsx
+var import_react10 = __toESM(require("react"));
+var import_checkbox3 = require("@react-aria/checkbox");
+var import_focus2 = require("@react-aria/focus");
+var import_interactions = require("@react-aria/interactions");
+var import_toggle = require("@react-stately/toggle");
+var import_system7 = require("@marigold/system");
+
+// src/Checkbox/CheckboxGroup.tsx
+var import_react9 = __toESM(require("react"));
+var import_checkbox = require("@react-aria/checkbox");
+var import_checkbox2 = require("@react-stately/checkbox");
+var import_system6 = require("@marigold/system");
+
+// src/Field/Label.tsx
+var import_react8 = __toESM(require("react"));
+var import_icons = require("@marigold/icons");
+var import_system5 = require("@marigold/system");
 var Label = (_a) => {
   var _b = _a, {
+    as = "label",
     required,
-    children
+    children,
+    variant,
+    size
   } = _b, props = __objRest(_b, [
+    "as",
     "required",
-    "children"
+    "children",
+    "variant",
+    "size"
   ]);
-  return required ? /* @__PURE__ */ import_react10.default.createElement(import_system.Box, {
-    as: "span",
-    display: "inline-flex",
-    alignItems: "center"
-  }, /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react10.default.createElement(import_icons.Required, {
+  const styles = (0, import_system5.useComponentStyles)("Label", { size, variant });
+  return /* @__PURE__ */ import_react8.default.createElement(import_system5.Box, __spreadProps(__spreadValues({}, props), {
+    as,
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+    css: styles
+  }), children, required && /* @__PURE__ */ import_react8.default.createElement(import_icons.Required, {
+    role: "presentation",
     size: 16,
     fill: "error"
-  })) : /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children);
+  }));
 };
 
-// src/ValidationMessage/ValidationMessage.tsx
-var import_react11 = __toESM(require("react"));
-var ValidationMessage = (_a) => {
+// src/Checkbox/CheckboxGroup.tsx
+var CheckboxGroupContext = (0, import_react9.createContext)(null);
+var useCheckboxGroupContext = () => (0, import_react9.useContext)(CheckboxGroupContext);
+var CheckboxGroup = (_a) => {
   var _b = _a, {
-    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__ */ import_react11.default.createElement(import_system.Box, __spreadValues({
+  const props = __spreadValues({
+    isRequired: required,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, rest);
+  const state = (0, import_checkbox2.useCheckboxGroupState)(props);
+  const { groupProps, labelProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
+  const styles = (0, import_system6.useComponentStyles)("CheckboxGroup", { variant, size }, { parts: ["container", "group"] });
+  return /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, __spreadProps(__spreadValues({}, groupProps), {
+    css: styles.container
+  }), props.label && /* @__PURE__ */ import_react9.default.createElement(Label, __spreadValues({
     as: "span",
-    display: "flex",
-    alignItems: "center",
-    variant: `validation.${variant}`,
-    className
-  }, props), children);
+    required
+  }, labelProps), props.label), /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
+    role: "presentation",
+    __baseCSS: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "left"
+    },
+    css: styles.group
+  }, /* @__PURE__ */ import_react9.default.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 = import_react12.default.useRef(null);
-  const { inputProps } = (0, import_checkbox.useCheckbox)(props, state, ref);
-  const { focusProps } = (0, import_focus.useFocusRing)();
-  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
-    pr: "xsmall"
-  }, /* @__PURE__ */ import_react12.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react12.default.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
-    ref
-  }), restProps))), /* @__PURE__ */ import_react12.default.createElement(CheckboxIcon, {
-    checked: props.checked,
-    variant: props.variant,
-    disabled: props.disabled,
-    indeterminated,
-    error
-  }));
+var CheckMark = () => /* @__PURE__ */ import_react10.default.createElement("svg", {
+  viewBox: "0 0 12 10"
+}, /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.createElement("svg", {
+  width: "12",
+  height: "3",
+  viewBox: "0 0 12 3"
+}, /* @__PURE__ */ import_react10.default.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"]);
+  const icon = indeterminate ? /* @__PURE__ */ import_react10.default.createElement(IndeterminateMark, null) : /* @__PURE__ */ import_react10.default.createElement(CheckMark, null);
+  return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues({
+    "aria-hidden": "true",
+    __baseCSS: {
+      width: 16,
+      height: 16,
+      bg: "#fff",
+      border: "1px solid #000",
+      borderRadius: 3,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: "1px"
+    },
+    css
+  }, props), checked ? icon : 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"
-  ]);
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
-    as: Label,
-    __baseCSS: {
-      ":hover": { cursor: props.disabled ? "not-allowed" : "pointer" }
-    },
-    htmlFor: props.id,
-    required,
-    variant: `label.${labelVariant}`,
-    color: props.disabled ? "disabled" : "text"
-  }, /* @__PURE__ */ import_react12.default.createElement(CheckboxInput, __spreadValues({
-    error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react12.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react12.default.createElement(import_icons2.Exclamation, {
-    size: 16
-  }), errorMessage));
-};
-
-// src/Column/Column.tsx
-var import_react13 = __toESM(require("react"));
-var transform = (width) => {
-  if (Array.isArray(width)) {
-    return width.map((v) => `${v / 12 * 100}%`);
-  }
-  return `${width / 12 * 100}%`;
-};
-var Column = (_a) => {
-  var _b = _a, {
-    width = 12,
-    children
-  } = _b, props = __objRest(_b, [
-    "width",
-    "children"
+    "error"
   ]);
-  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    width: transform(width)
-  }), children);
+  const ref = import_react10.default.useRef(null);
+  const checkboxProps = {
+    isIndeterminate: indeterminate,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isRequired: required,
+    validationState: error ? "invalid" : "valid"
+  };
+  const groupState = useCheckboxGroupContext();
+  const { inputProps } = groupState ? (0, import_checkbox3.useCheckboxGroupItem)(__spreadProps(__spreadValues(__spreadValues({}, props), checkboxProps), {
+    value: props.value
+  }), groupState, ref) : (0, import_checkbox3.useCheckbox)(__spreadValues(__spreadValues({
+    isSelected: checked,
+    defaultSelected: defaultChecked
+  }, checkboxProps), props), (0, import_toggle.useToggleState)(__spreadValues({
+    isSelected: checked,
+    defaultSelected: defaultChecked
+  }, props)), ref);
+  const styles = (0, import_system7.useComponentStyles)("Checkbox", { variant: (groupState == null ? void 0 : groupState.variant) || variant, size: (groupState == null ? void 0 : groupState.size) || size }, { parts: ["container", "label", "checkbox"] });
+  const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
+  const { isFocusVisible, focusProps } = (0, import_focus2.useFocusRing)();
+  const stateProps = (0, import_system7.useStateProps)({
+    hover: isHovered,
+    focus: isFocusVisible,
+    checked: inputProps.checked,
+    disabled: inputProps.disabled,
+    error: (groupState == null ? void 0 : groupState.error) || error,
+    readOnly,
+    indeterminate
+  });
+  return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues(__spreadValues({
+    as: "label",
+    variant: "checkbox",
+    __baseCSS: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1ch",
+      position: "relative"
+    },
+    css: styles.container
+  }, hoverProps), stateProps), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues(__spreadValues({
+    as: "input",
+    type: "checkbox",
+    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__ */ import_react10.default.createElement(Icon, __spreadValues({
+    checked: inputProps.checked,
+    indeterminate,
+    css: styles.checkbox
+  }, stateProps)), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues({
+    css: styles.label
+  }, stateProps), props.children));
 };
 
 // src/Columns/Columns.tsx
-var import_react14 = __toESM(require("react"));
-var import_system3 = require("@marigold/system");
-var useAlignment = (direction) => {
-  switch (direction) {
-    case "right":
-      return "flex-end";
-    case "bottom":
-      return "flex-end";
-    case "center":
-      return "center";
-  }
-  return "flex-start";
-};
+var import_react11 = __toESM(require("react"));
 var Columns = (_a) => {
   var _b = _a, {
     space = "none",
-    horizontalAlign = "left",
-    verticalAlign = "top",
-    className,
+    columns,
+    collapseAt = "40em",
     children
   } = _b, props = __objRest(_b, [
     "space",
-    "horizontalAlign",
-    "verticalAlign",
-    "className",
+    "columns",
+    "collapseAt",
     "children"
   ]);
-  const justifyContent = useAlignment(horizontalAlign);
-  const alignItems = useAlignment(verticalAlign);
-  const { css } = (0, import_system3.useTheme)();
-  const spaceObject = css({ space });
-  const spaceValue = Object.values(spaceObject)[0];
-  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
-    p: space,
-    display: "flex",
-    className
-  }, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadValues({
-    width: `calc(100% + ${spaceValue}px)`,
-    m: `${-spaceValue / 2}px`,
+  if (import_react11.Children.count(children) !== columns.length) {
+    throw new Error(`Columns: expected ${columns.length} children, got ${import_react11.Children.count(children)}`);
+  }
+  const getColumnWidths = columns.map((column, index) => {
+    return {
+      [`> :nth-of-type(${index + 1})`]: {
+        flexGrow: column
+      }
+    };
+  });
+  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, __spreadValues({
     display: "flex",
-    flexWrap: "wrap",
-    alignItems,
-    justifyContent
-  }, props), import_react14.Children.map(flattenChildren(children), (child) => {
-    return import_react14.default.cloneElement(child, {}, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
-      css: { p: `${spaceValue / 2}px` }
-    }, child.props.children));
-  })));
+    css: Object.assign({
+      flexWrap: "wrap",
+      gap: space,
+      "> *": {
+        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
+      }
+    }, ...getColumnWidths)
+  }, props), children);
+};
+
+// src/Content/Content.tsx
+var import_react12 = __toESM(require("react"));
+var import_system8 = require("@marigold/system");
+var Content = (_a) => {
+  var _b = _a, {
+    children,
+    variant,
+    size
+  } = _b, props = __objRest(_b, [
+    "children",
+    "variant",
+    "size"
+  ]);
+  const styles = (0, import_system8.useComponentStyles)("Content", { variant, size });
+  return /* @__PURE__ */ import_react12.default.createElement(import_system8.Box, __spreadProps(__spreadValues({
+    as: "section"
+  }, props), {
+    css: styles
+  }), children);
 };
 
 // src/Dialog/Dialog.tsx
-var import_react17 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_overlays2 = require("@react-stately/overlays");
 var import_overlays3 = require("@react-aria/overlays");
 var import_button2 = require("@react-aria/button");
-var import_icons3 = require("@marigold/icons");
+var import_icons2 = require("@marigold/icons");
 
-// src/Text/Text.tsx
-var import_react15 = __toESM(require("react"));
-var Text = (0, import_react15.forwardRef)((_a, ref) => {
+// src/Headline/Headline.tsx
+var import_react13 = __toESM(require("react"));
+var import_system9 = require("@marigold/system");
+var Headline = (_a) => {
   var _b = _a, {
-    as = "span",
-    variant = "body",
     children,
-    align,
-    color,
-    cursor,
+    variant,
     size,
-    outline,
-    userSelect
+    level = "1"
   } = _b, props = __objRest(_b, [
-    "as",
-    "variant",
     "children",
-    "align",
-    "color",
-    "cursor",
+    "variant",
     "size",
-    "outline",
-    "userSelect"
+    "level"
   ]);
-  return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    as,
-    variant: `text.${variant}`,
-    css: {
-      textAlign: align,
-      fontSize: size,
-      color,
-      cursor,
-      outline,
-      userSelect
-    },
-    ref
+  const styles = (0, import_system9.useComponentStyles)("Headline", {
+    variant,
+    size: size != null ? size : `level-${level}`
+  });
+  return /* @__PURE__ */ import_react13.default.createElement(import_system9.Box, __spreadProps(__spreadValues({
+    as: `h${level}`
+  }, props), {
+    css: styles
   }), children);
-});
+};
 
 // src/Dialog/ModalDialog.tsx
-var import_react16 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_overlays = require("@react-aria/overlays");
 var import_dialog = require("@react-aria/dialog");
-var import_focus2 = require("@react-aria/focus");
+var import_focus3 = require("@react-aria/focus");
 var ModalDialog = (_a) => {
   var _b = _a, {
     variant,
@@ -670,12 +608,12 @@ var ModalDialog = (_a) => {
     "children"
   ]);
   const _a2 = props, { isDismissable, isOpen, onClose } = _a2, restProps = __objRest(_a2, ["isDismissable", "isOpen", "onClose"]);
-  const ref = import_react16.default.useRef();
+  const ref = import_react14.default.useRef();
   const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)({ isDismissable, isOpen, onClose }, ref);
   (0, import_overlays.usePreventScroll)();
   const { modalProps } = (0, import_overlays.useModal)();
   const { dialogProps } = (0, import_dialog.useDialog)(props, ref);
-  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       display: "grid",
       placeItems: "center",
@@ -687,11 +625,11 @@ var ModalDialog = (_a) => {
       right: 0
     },
     variant: `dialog.${backdropVariant}`
-  }, underlayProps), /* @__PURE__ */ import_react16.default.createElement(import_focus2.FocusScope, {
+  }, underlayProps), /* @__PURE__ */ import_react14.default.createElement(import_focus3.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
+  }, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
     ref,
     variant: variant ? `dialog.${variant}` : `dialog`
   }), restProps), children)));
@@ -716,17 +654,17 @@ var Dialog = (_a) => {
     "title",
     "variant"
   ]);
-  const closeButtonRef = import_react17.default.useRef();
+  const closeButtonRef = import_react15.default.useRef();
   const { buttonProps: closeButtonProps } = (0, import_button2.useButton)({
     onPress: () => close()
   }, closeButtonRef);
-  return /* @__PURE__ */ import_react17.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react17.default.createElement(ModalDialog, __spreadValues({
+  return /* @__PURE__ */ import_react15.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react15.default.createElement(ModalDialog, __spreadValues({
     variant,
     backdropVariant,
     isOpen,
     onClose: close,
     isDismissable: true
-  }, props), /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+  }, props), /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
     __baseCSS: {
       display: "flex",
       justifyContent: "space-between",
@@ -735,12 +673,11 @@ var Dialog = (_a) => {
       pb: "large"
     },
     className
-  }, /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
     pt: "medium"
-  }, title && /* @__PURE__ */ import_react17.default.createElement(Text, {
-    as: "h4",
-    variant: "headline4"
-  }, title), children), /* @__PURE__ */ import_react17.default.createElement(import_system.Box, {
+  }, title && /* @__PURE__ */ import_react15.default.createElement(Headline, {
+    level: "4"
+  }, title), children), /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
     __baseCSS: {
       display: "flex",
       justifyContent: "flex-end",
@@ -748,7 +685,7 @@ var Dialog = (_a) => {
       paddingTop: "xsmall",
       paddingX: "xsmall"
     }
-  }, /* @__PURE__ */ import_react17.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: Button,
     __baseCSS: {
       color: "text",
@@ -766,13 +703,13 @@ var Dialog = (_a) => {
     }
   }, closeButtonProps), {
     ref: closeButtonRef
-  }), /* @__PURE__ */ import_react17.default.createElement(import_icons3.Close, {
+  }), /* @__PURE__ */ import_react15.default.createElement(import_icons2.Close, {
     size: 16
   }))))));
 };
 var useDialogButtonProps = () => {
   const state = (0, import_overlays2.useOverlayTriggerState)({});
-  const openButtonRef = import_react17.default.useRef();
+  const openButtonRef = import_react15.default.useRef();
   const { buttonProps: openButtonProps } = (0, import_button2.useButton)({
     onPress: () => state.open()
   }, openButtonRef);
@@ -784,150 +721,328 @@ var useDialogButtonProps = () => {
 };
 
 // src/Divider/Divider.tsx
-var import_react18 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_separator = require("@react-aria/separator");
+var import_system10 = require("@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 } = (0, import_separator.useSeparator)(props);
-  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, __spreadValues(__spreadValues({
-    __baseCSS: { width: "100%", height: "1px", m: "none", bg: "text" },
-    variant: `divider.${variant}`
+  const styles = (0, import_system10.useComponentStyles)("Divider", { variant });
+  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+    css: styles
   }, props), separatorProps));
 };
 
-// src/Field/Field.tsx
+// src/Footer/Footer.tsx
+var import_react17 = __toESM(require("react"));
+var import_system11 = require("@marigold/system");
+var Footer = (_a) => {
+  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+  const styles = (0, import_system11.useComponentStyles)("Footer", { variant, size });
+  return /* @__PURE__ */ import_react17.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+    as: "footer"
+  }, props), {
+    css: styles
+  }), children);
+};
+
+// src/VisuallyHidden/VisuallyHidden.tsx
+var import_visually_hidden = require("@react-aria/visually-hidden");
+
+// src/Header/Header.tsx
+var import_react18 = __toESM(require("react"));
+var import_system12 = require("@marigold/system");
+var Header = (_a) => {
+  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+  const styles = (0, import_system12.useComponentStyles)("Header", { variant, size });
+  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+    as: "header"
+  }, props), {
+    css: styles
+  }), children);
+};
+
+// src/Image/Image.tsx
 var import_react19 = __toESM(require("react"));
-var import_textfield = require("@react-aria/textfield");
-var import_icons4 = require("@marigold/icons");
-var Field = (_a) => {
+var import_system13 = require("@marigold/system");
+var Image = (_a) => {
+  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
+  const styles = (0, import_system13.useComponentStyles)("Image", { variant });
+  return /* @__PURE__ */ import_react19.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    as: "img",
+    css: styles
+  }));
+};
+
+// src/Inline/Inline.tsx
+var import_react20 = __toESM(require("react"));
+var ALIGNMENT = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
+var Inline = (_a) => {
   var _b = _a, {
-    type = "text",
-    variant = "",
-    labelVariant = "above",
-    htmlFor,
+    space = "none",
+    align = "center",
+    children
+  } = _b, props = __objRest(_b, [
+    "space",
+    "align",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadValues({
+    __baseCSS: { gap: space, flexWrap: "wrap" },
+    display: "inline-flex",
+    alignItems: ALIGNMENT[align]
+  }, props), children);
+};
+
+// src/Label/Label.tsx
+var import_react21 = __toESM(require("react"));
+var import_icons3 = require("@marigold/icons");
+var LabelBase = (_a) => {
+  var _b = _a, {
+    variant = "above",
     required,
-    error,
-    errorMessage
+    color = "text",
+    children
   } = _b, props = __objRest(_b, [
-    "type",
     "variant",
-    "labelVariant",
-    "htmlFor",
     "required",
-    "error",
-    "errorMessage"
+    "color",
+    "children"
   ]);
-  const ref = (0, import_react19.useRef)(null);
-  const { labelProps, inputProps, errorMessageProps } = (0, import_textfield.useTextField)(props, ref);
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(Label, __spreadValues({
-    variant: labelVariant,
-    htmlFor,
-    required
-  }, labelProps), props.label), /* @__PURE__ */ import_react19.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
-    as: "input",
-    type,
-    id: htmlFor,
-    variant: `input.${variant}`
-  }, inputProps), {
-    ref
-  }), props)), error && errorMessage && /* @__PURE__ */ import_react19.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react19.default.createElement(import_icons4.Exclamation, {
-    size: 16
-  }), errorMessage));
+  return /* @__PURE__ */ import_react21.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    as: "label",
+    __baseCSS: { color },
+    variant: `label.${variant}`
+  }), children);
 };
-
-// src/VisuallyHidden/VisuallyHidden.tsx
-var import_visually_hidden2 = require("@react-aria/visually-hidden");
-
-// src/Image/Image.tsx
-var import_react20 = __toESM(require("react"));
-var Image = (_a) => {
+var Label2 = (_a) => {
   var _b = _a, {
-    variant = "fullWidth"
+    required,
+    children
   } = _b, props = __objRest(_b, [
-    "variant"
+    "required",
+    "children"
   ]);
-  return /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    as: "img",
-    variant: `image.${variant}`
-  }));
+  return required ? /* @__PURE__ */ import_react21.default.createElement(import_system.Box, {
+    as: "span",
+    display: "inline-flex",
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react21.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react21.default.createElement(import_icons3.Required, {
+    size: 16,
+    fill: "error"
+  })) : /* @__PURE__ */ import_react21.default.createElement(LabelBase, __spreadValues({}, props), children);
 };
 
 // src/Link/Link.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
+var import_system14 = require("@marigold/system");
 var Link = (_a) => {
   var _b = _a, {
     as = "a",
-    variant = "link",
+    variant,
+    size,
     children,
     disabled
   } = _b, props = __objRest(_b, [
     "as",
     "variant",
+    "size",
     "children",
     "disabled"
   ]);
-  const ref = (0, import_react21.useRef)();
+  const ref = (0, import_react22.useRef)(null);
   const { linkProps } = (0, import_link.useLink)(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
   }), ref);
-  return /* @__PURE__ */ import_react21.default.createElement(Text, __spreadProps(__spreadValues(__spreadValues({}, props), linkProps), {
+  const styles = (0, import_system14.useComponentStyles)("Link", { variant, size });
+  return /* @__PURE__ */ import_react22.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as,
-    variant,
+    css: styles,
     ref
-  }), children);
+  }, props), linkProps), children);
 };
 
 // src/Menu/Menu.tsx
-var import_react22 = __toESM(require("react"));
-var Menu = (_a) => {
+var import_react28 = __toESM(require("react"));
+var import_focus5 = require("@react-aria/focus");
+var import_menu4 = require("@react-aria/menu");
+var import_overlays6 = require("@react-aria/overlays");
+var import_collections = require("@react-stately/collections");
+var import_tree = require("@react-stately/tree");
+var import_system16 = require("@marigold/system");
+
+// src/Menu/Context.ts
+var import_react23 = require("react");
+var MenuContext = (0, import_react23.createContext)({});
+var useMenuContext = () => (0, import_react23.useContext)(MenuContext);
+
+// src/Menu/MenuTrigger.tsx
+var import_react26 = __toESM(require("react"));
+var import_menu = require("@react-stately/menu");
+var import_menu2 = require("@react-aria/menu");
+
+// src/Overlay/Overlay.tsx
+var import_react24 = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var Overlay = (_a) => {
   var _b = _a, {
-    variant = "default",
-    label = "Menu",
-    onClick,
-    show = false,
-    children
+    children,
+    open = false,
+    container = document.body
   } = _b, props = __objRest(_b, [
-    "variant",
-    "label",
-    "onClick",
-    "show",
-    "children"
+    "children",
+    "open",
+    "container"
   ]);
-  return /* @__PURE__ */ import_react22.default.createElement(import_system.Box, __spreadValues({
-    variant: `menu.${variant}`
-  }, props), /* @__PURE__ */ import_react22.default.createElement(Button, {
-    onClick,
-    variant: "menu"
-  }, label), show ? /* @__PURE__ */ import_react22.default.createElement(import_system.Box, {
-    display: "block",
-    position: "absolute",
-    minWidth: "120px",
-    borderRadius: "2px"
-  }, children) : null);
+  if (!open) {
+    return null;
+  }
+  const component = /* @__PURE__ */ import_react24.default.createElement(import_system.Box, __spreadValues({}, props), children);
+  return import_react_dom.default.createPortal(component, container);
 };
 
-// src/MenuItem/MenuItem.tsx
-var import_react23 = __toESM(require("react"));
-var MenuItem = (_a) => {
+// src/Overlay/Popover.tsx
+var import_react25 = __toESM(require("react"));
+var import_overlays4 = require("@react-aria/overlays");
+var import_utils2 = require("@react-aria/utils");
+var Popover = (0, import_react25.forwardRef)((_a, ref) => {
   var _b = _a, {
-    variant = "default",
-    children
+    children,
+    open,
+    dismissable,
+    keyboardDismissDisabled,
+    shouldCloseOnBlur
   } = _b, props = __objRest(_b, [
-    "variant",
-    "children"
+    "children",
+    "open",
+    "dismissable",
+    "keyboardDismissDisabled",
+    "shouldCloseOnBlur"
   ]);
-  return /* @__PURE__ */ import_react23.default.createElement(import_system.Box, {
-    variant: `menuItem.${variant}`
-  }, /* @__PURE__ */ import_react23.default.createElement(Link, __spreadValues({
-    variant: "menuItemLink"
-  }, props), children));
+  const { overlayProps } = (0, import_overlays4.useOverlay)(__spreadValues({
+    isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: keyboardDismissDisabled,
+    shouldCloseOnBlur
+  }, props), ref);
+  const { modalProps } = (0, import_overlays4.useModal)({});
+  return /* @__PURE__ */ import_react25.default.createElement(Overlay, {
+    open
+  }, /* @__PURE__ */ import_react25.default.createElement(import_system.Box, __spreadValues({
+    ref,
+    role: "presentation"
+  }, (0, import_utils2.mergeProps)(props, overlayProps, modalProps)), children));
+});
+
+// src/Menu/MenuTrigger.tsx
+var import_overlays5 = require("@react-aria/overlays");
+var import_interactions2 = require("@react-aria/interactions");
+var MenuTrigger = ({ disabled, children }) => {
+  const [menuTrigger, menu] = import_react26.default.Children.toArray(children);
+  const menuTriggerRef = (0, import_react26.useRef)(null);
+  const overlayRef = (0, import_react26.useRef)(null);
+  const state = (0, import_menu.useMenuTriggerState)({});
+  const { menuTriggerProps, menuProps } = (0, import_menu2.useMenuTrigger)({ trigger: "press", isDisabled: disabled }, state, menuTriggerRef);
+  const { overlayProps: positionProps } = (0, import_overlays5.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__ */ import_react26.default.createElement(MenuContext.Provider, {
+    value: menuContext
+  }, /* @__PURE__ */ import_react26.default.createElement(import_interactions2.PressResponder, __spreadProps(__spreadValues({}, menuTriggerProps), {
+    ref: menuTriggerRef,
+    isPressed: state.isOpen
+  }), menuTrigger), /* @__PURE__ */ import_react26.default.createElement(Popover, __spreadValues({
+    open: state.isOpen,
+    onClose: state.close,
+    dismissable: true,
+    shouldCloseOnBlur: true,
+    ref: overlayRef
+  }, positionProps), menu));
+};
+
+// src/Menu/MenuItem.tsx
+var import_react27 = __toESM(require("react"));
+var import_focus4 = require("@react-aria/focus");
+var import_menu3 = require("@react-aria/menu");
+var import_utils3 = require("@react-aria/utils");
+var import_system15 = require("@marigold/system");
+var MenuItem = ({ item, state, onAction, css }) => {
+  const ref = (0, import_react27.useRef)(null);
+  const { onClose } = useMenuContext();
+  const { menuItemProps } = (0, import_menu3.useMenuItem)({
+    key: item.key,
+    onAction,
+    onClose
+  }, state, ref);
+  const { isFocusVisible, focusProps } = (0, import_focus4.useFocusRing)();
+  const stateProps = (0, import_system15.useStateProps)({
+    focus: isFocusVisible
+  });
+  return /* @__PURE__ */ import_react27.default.createElement(import_system15.Box, __spreadValues(__spreadValues({
+    as: "li",
+    ref,
+    __baseCSS: {
+      "&:focus": {
+        outline: 0
+      }
+    },
+    css
+  }, (0, import_utils3.mergeProps)(menuItemProps, focusProps)), stateProps), item.rendered);
+};
+
+// src/Menu/Menu.tsx
+var Menu = (_a) => {
+  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
+  const _a2 = useMenuContext(), { triggerWidth } = _a2, menuContext = __objRest(_a2, ["triggerWidth"]);
+  const ownProps = __spreadValues(__spreadValues({}, props), menuContext);
+  const ref = (0, import_react28.useRef)(null);
+  const state = (0, import_tree.useTreeState)(__spreadProps(__spreadValues({}, ownProps), { selectionMode: "none" }));
+  const { menuProps } = (0, import_menu4.useMenu)(ownProps, state, ref);
+  const styles = (0, import_system16.useComponentStyles)("Menu", { variant, size }, { parts: ["container", "item"] });
+  return /* @__PURE__ */ import_react28.default.createElement(import_focus5.FocusScope, {
+    restoreFocus: true
+  }, /* @__PURE__ */ import_react28.default.createElement("div", null, /* @__PURE__ */ import_react28.default.createElement(import_overlays6.DismissButton, {
+    onDismiss: ownProps.onClose
+  }), /* @__PURE__ */ import_react28.default.createElement(import_system16.Box, __spreadValues({
+    as: "ul",
+    ref,
+    style: { width: triggerWidth },
+    __baseCSS: {
+      listStyle: "none",
+      p: 0,
+      overflowWrap: "break-word"
+    },
+    css: styles.container
+  }, menuProps), [...state.collection].map((item) => /* @__PURE__ */ import_react28.default.createElement(MenuItem, {
+    key: item.key,
+    item,
+    state,
+    onAction: props.onSelect,
+    css: styles.item
+  }))), /* @__PURE__ */ import_react28.default.createElement(import_overlays6.DismissButton, {
+    onDismiss: ownProps.onClose
+  })));
 };
+Menu.Trigger = MenuTrigger;
+Menu.Item = import_collections.Item;
 
 // src/Message/Message.tsx
-var import_react24 = __toESM(require("react"));
-var import_icons5 = require("@marigold/icons");
+var import_react29 = __toESM(require("react"));
+var import_icons4 = require("@marigold/icons");
 var Message = (_a) => {
   var _b = _a, {
     messageTitle,
@@ -940,57 +1055,56 @@ var Message = (_a) => {
     "className",
     "children"
   ]);
-  var icon = /* @__PURE__ */ import_react24.default.createElement(import_icons5.Info, null);
+  var icon = /* @__PURE__ */ import_react29.default.createElement(import_icons4.Info, null);
   if (variant === "warning") {
-    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons5.Notification, null);
+    icon = /* @__PURE__ */ import_react29.default.createElement(import_icons4.Notification, null);
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ import_react24.default.createElement(import_icons5.Exclamation, null);
+    icon = /* @__PURE__ */ import_react29.default.createElement(import_icons4.Exclamation, null);
   }
-  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadValues({
     display: "inline-block",
     variant: `message.${variant}`,
     className
-  }, props), /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+  }, props), /* @__PURE__ */ import_react29.default.createElement(import_system.Box, {
     display: "flex",
     alignItems: "center",
     variant: "message.title"
-  }, icon, /* @__PURE__ */ import_react24.default.createElement(Text, {
-    as: "h4",
-    variant: "headline4"
-  }, messageTitle)), /* @__PURE__ */ import_react24.default.createElement(import_system.Box, {
+  }, icon, /* @__PURE__ */ import_react29.default.createElement(Headline, {
+    level: "4"
+  }, messageTitle)), /* @__PURE__ */ import_react29.default.createElement(import_system.Box, {
     css: { color: "black" }
   }, children));
 };
 
 // src/Provider/index.ts
-var import_system5 = require("@marigold/system");
+var import_system18 = require("@marigold/system");
 var import_ssr = require("@react-aria/ssr");
 
 // src/Provider/MarigoldProvider.tsx
-var import_react25 = __toESM(require("react"));
-var import_overlays4 = require("@react-aria/overlays");
-var import_system4 = require("@marigold/system");
+var import_react30 = __toESM(require("react"));
+var import_overlays7 = require("@react-aria/overlays");
+var import_system17 = require("@marigold/system");
 function MarigoldProvider({
   theme,
   children
 }) {
-  const outer = (0, import_system4.useTheme)();
-  const isTopLevel = outer.theme === import_system4.__defaultTheme;
-  return /* @__PURE__ */ import_react25.default.createElement(import_system4.ThemeProvider, {
+  const outer = (0, import_system17.useTheme)();
+  const isTopLevel = outer.theme === import_system17.__defaultTheme;
+  return /* @__PURE__ */ import_react30.default.createElement(import_system17.ThemeProvider, {
     theme
-  }, isTopLevel ? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(import_system4.Global, null), /* @__PURE__ */ import_react25.default.createElement(import_overlays4.OverlayProvider, null, children)) : children);
+  }, isTopLevel ? /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(import_system17.Global, null), /* @__PURE__ */ import_react30.default.createElement(import_overlays7.OverlayProvider, null, children)) : children);
 }
 
 // src/Radio/Radio.tsx
-var import_react27 = __toESM(require("react"));
-var import_icons6 = require("@marigold/icons");
-var import_focus3 = require("@react-aria/focus");
-var import_visually_hidden3 = require("@react-aria/visually-hidden");
+var import_react33 = __toESM(require("react"));
+var import_icons5 = require("@marigold/icons");
+var import_focus6 = require("@react-aria/focus");
+var import_visually_hidden2 = require("@react-aria/visually-hidden");
 
 // src/Radio/RadioIcon.tsx
-var import_react26 = __toESM(require("react"));
-var import_system6 = require("@marigold/system");
+var import_react31 = __toESM(require("react"));
+var import_system19 = require("@marigold/system");
 var RadioIcon = ({
   variant = "",
   checked = false,
@@ -1003,19 +1117,19 @@ var RadioIcon = ({
     checked,
     error
   };
-  return /* @__PURE__ */ import_react26.default.createElement(import_system6.SVG, {
+  return /* @__PURE__ */ import_react31.default.createElement(import_system19.SVG, {
     width: "16",
     height: "32",
     viewBox: "0 0 16 32",
     fill: "none",
     "aria-hidden": "true"
-  }, /* @__PURE__ */ import_react26.default.createElement(import_system.Box, {
-    variant: (0, import_system6.conditional)(`radio.${variant}`, conditionalStates),
+  }, /* @__PURE__ */ import_react31.default.createElement(import_system.Box, {
+    variant: (0, import_system19.conditional)(`radio.${variant}`, conditionalStates),
     as: "circle",
     cx: "8",
     cy: "16",
     r: "7.5"
-  }), checked && /* @__PURE__ */ import_react26.default.createElement("circle", {
+  }), checked && /* @__PURE__ */ import_react31.default.createElement("circle", {
     fill: "white",
     cx: "8",
     cy: "16",
@@ -1023,17 +1137,38 @@ var RadioIcon = ({
   }));
 };
 
+// src/ValidationMessage/ValidationMessage.tsx
+var import_react32 = __toESM(require("react"));
+var ValidationMessage = (_a) => {
+  var _b = _a, {
+    variant = "error",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadValues({
+    as: "span",
+    display: "flex",
+    alignItems: "center",
+    variant: `validation.${variant}`,
+    className
+  }, props), children);
+};
+
 // src/Radio/Radio.tsx
 var RadioInput = (_a) => {
   var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
-  const { focusProps } = (0, import_focus3.useFocusRing)();
+  const { focusProps } = (0, import_focus6.useFocusRing)();
   const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ import_react27.default.createElement(import_visually_hidden3.VisuallyHidden, null, /* @__PURE__ */ import_react27.default.createElement("input", __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react33.default.createElement(import_visually_hidden2.VisuallyHidden, null, /* @__PURE__ */ import_react33.default.createElement("input", __spreadValues(__spreadValues({
     type: "radio",
     disabled: props.disabled
-  }, focusProps), restProps))), /* @__PURE__ */ import_react27.default.createElement(RadioIcon, {
+  }, focusProps), restProps))), /* @__PURE__ */ import_react33.default.createElement(RadioIcon, {
     variant: props.variant,
     disabled: props.disabled,
     checked: props.checked,
@@ -1050,52 +1185,52 @@ var Radio = (_a) => {
     "labelVariant",
     "errorMessage"
   ]);
-  return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, {
-    as: Label,
+  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    as: Label2,
     htmlFor: props.id,
     required,
     variant: `label.${labelVariant}`,
     css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
-  }, /* @__PURE__ */ import_react27.default.createElement(import_system.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadValues({
     as: RadioInput,
     error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react27.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react27.default.createElement(import_icons6.Exclamation, {
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react33.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react33.default.createElement(import_icons5.Exclamation, {
     size: 16
   }), errorMessage));
 };
 
 // src/Select/Select.tsx
-var import_react32 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_select = require("@react-stately/select");
 var import_button3 = require("@react-aria/button");
-var import_utils6 = require("@react-aria/utils");
-var import_focus5 = require("@react-aria/focus");
+var import_utils5 = require("@react-aria/utils");
+var import_focus8 = require("@react-aria/focus");
 var import_select2 = require("@react-aria/select");
-var import_overlays6 = require("@react-stately/overlays");
-var import_overlays7 = require("@react-aria/overlays");
-var import_icons7 = require("@marigold/icons");
+var import_overlays9 = require("@react-stately/overlays");
+var import_overlays10 = require("@react-aria/overlays");
+var import_icons6 = require("@marigold/icons");
 
 // src/Select/ListBox.tsx
-var import_react30 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_listbox3 = require("@react-aria/listbox");
 
 // src/Select/Option.tsx
-var import_react28 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
 var Option = ({ item, state }) => {
-  const ref = (0, import_react28.useRef)(null);
-  const [disabled, setDisabled] = (0, import_react28.useState)(false);
+  const ref = (0, import_react34.useRef)(null);
+  const [disabled, setDisabled] = (0, import_react34.useState)(false);
   const { optionProps, isSelected } = (0, import_listbox.useOption)({
     key: item.key
   }, state, ref);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     for (const key of state.disabledKeys.values()) {
       if (key === item.key) {
         setDisabled(true);
       }
     }
   }, [state.disabledKeys, item.key]);
-  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "li"
   }, optionProps), {
     ref,
@@ -1104,26 +1239,26 @@ var Option = ({ item, state }) => {
 };
 
 // src/Select/ListBoxSection.tsx
-var import_react29 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_listbox2 = require("@react-aria/listbox");
 var ListBoxSection = ({ section, state }) => {
   const { itemProps, headingProps, groupProps } = (0, import_listbox2.useListBoxSection)({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "li"
   }, itemProps), {
     css: {
       cursor: "not-allowed"
     }
-  }), section.rendered && /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), section.rendered && /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "span"
   }, headingProps), {
     variant: "select.section"
-  }), section.rendered), /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadValues({
+  }), section.rendered), /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadValues({
     as: "ul"
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react29.default.createElement(Option, {
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react35.default.createElement(Option, {
     key: node.key,
     item: node,
     state
@@ -1132,10 +1267,10 @@ var ListBoxSection = ({ section, state }) => {
 
 // src/Select/ListBox.tsx
 var ListBox = (props) => {
-  const ref = (0, import_react30.useRef)(null);
+  const ref = (0, import_react36.useRef)(null);
   const { state, error } = props;
   const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, ref);
-  return /* @__PURE__ */ import_react30.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react36.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "ul",
     p: "none",
     css: {
@@ -1144,11 +1279,11 @@ var ListBox = (props) => {
   }, listBoxProps), {
     variant: error ? "select.listbox.error" : "select.listbox",
     ref
-  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react30.default.createElement(ListBoxSection, {
+  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react36.default.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
-  }) : /* @__PURE__ */ import_react30.default.createElement(Option, {
+  }) : /* @__PURE__ */ import_react36.default.createElement(Option, {
     key: item.key,
     item,
     state
@@ -1156,25 +1291,25 @@ var ListBox = (props) => {
 };
 
 // src/Select/Popover.tsx
-var import_react31 = __toESM(require("react"));
-var import_focus4 = require("@react-aria/focus");
-var import_overlays5 = require("@react-aria/overlays");
-var import_utils5 = require("@react-aria/utils");
-var Popover = (0, import_react31.forwardRef)((_a, ref) => {
+var import_react37 = __toESM(require("react"));
+var import_focus7 = require("@react-aria/focus");
+var import_overlays8 = require("@react-aria/overlays");
+var import_utils4 = require("@react-aria/utils");
+var Popover2 = (0, import_react37.forwardRef)((_a, ref) => {
   var _b = _a, { children, className, isOpen, onClose } = _b, otherProps = __objRest(_b, ["children", "className", "isOpen", "onClose"]);
-  const { overlayProps } = (0, import_overlays5.useOverlay)({
+  const { overlayProps } = (0, import_overlays8.useOverlay)({
     isOpen,
     onClose,
     shouldCloseOnBlur: true,
     isDismissable: true
   }, ref);
-  const { modalProps } = (0, import_overlays5.useModal)();
-  return /* @__PURE__ */ import_react31.default.createElement(import_overlays5.OverlayContainer, null, /* @__PURE__ */ import_react31.default.createElement(import_focus4.FocusScope, {
+  const { modalProps } = (0, import_overlays8.useModal)();
+  return /* @__PURE__ */ import_react37.default.createElement(import_overlays8.OverlayContainer, null, /* @__PURE__ */ import_react37.default.createElement(import_focus7.FocusScope, {
     restoreFocus: true
-  }, /* @__PURE__ */ import_react31.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils5.mergeProps)(overlayProps, otherProps, modalProps)), {
+  }, /* @__PURE__ */ import_react37.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils4.mergeProps)(overlayProps, otherProps, modalProps)), {
     className,
     ref
-  }), children, /* @__PURE__ */ import_react31.default.createElement(import_overlays5.DismissButton, {
+  }), children, /* @__PURE__ */ import_react37.default.createElement(import_overlays8.DismissButton, {
     onDismiss: onClose
   }))));
 });
@@ -1201,11 +1336,11 @@ var Select = (_a) => {
     "className"
   ]);
   const state = (0, import_select.useSelectState)(props);
-  const overlayTriggerState = (0, import_overlays6.useOverlayTriggerState)({});
-  const triggerRef = (0, import_react32.useRef)();
-  const overlayRef = (0, import_react32.useRef)();
-  const { overlayProps } = (0, import_overlays7.useOverlayTrigger)({ type: "listbox" }, overlayTriggerState, triggerRef);
-  const { overlayProps: positionProps } = (0, import_overlays7.useOverlayPosition)({
+  const overlayTriggerState = (0, import_overlays9.useOverlayTriggerState)({});
+  const triggerRef = (0, import_react38.useRef)();
+  const overlayRef = (0, import_react38.useRef)();
+  const { overlayProps } = (0, import_overlays10.useOverlayTrigger)({ type: "listbox" }, overlayTriggerState, triggerRef);
+  const { overlayProps: positionProps } = (0, import_overlays10.useOverlayPosition)({
     targetRef: triggerRef,
     overlayRef,
     placement: "bottom",
@@ -1215,46 +1350,46 @@ var Select = (_a) => {
   });
   const { labelProps, triggerProps, valueProps, menuProps } = (0, import_select2.useSelect)(props, state, triggerRef);
   const { buttonProps } = (0, import_button3.useButton)(triggerProps, triggerRef);
-  const { focusProps } = (0, import_focus5.useFocusRing)();
-  return /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
+  const { focusProps } = (0, import_focus8.useFocusRing)();
+  return /* @__PURE__ */ import_react38.default.createElement(import_system.Box, {
     position: "relative",
     display: "inline-block",
     width: width && width
-  }, props.label && /* @__PURE__ */ import_react32.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react32.default.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+  }, props.label && /* @__PURE__ */ import_react38.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react38.default.createElement(Label2, __spreadProps(__spreadValues({}, labelProps), {
     htmlFor: labelProps.id,
     variant: labelVariant
-  }), required ? /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
+  }), required ? /* @__PURE__ */ import_react38.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, props.label, /* @__PURE__ */ import_react32.default.createElement(import_icons7.Required, {
+  }, props.label, /* @__PURE__ */ import_react38.default.createElement(import_icons6.Required, {
     size: 16,
     fill: "error"
-  })) : props.label)), /* @__PURE__ */ import_react32.default.createElement(import_select2.HiddenSelect, {
+  })) : props.label)), /* @__PURE__ */ import_react38.default.createElement(import_select2.HiddenSelect, {
     state,
     triggerRef,
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react38.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "button"
-  }, (0, import_utils6.mergeProps)(buttonProps, focusProps)), {
+  }, (0, import_utils5.mergeProps)(buttonProps, focusProps)), {
     ref: triggerRef,
     variant: error && state.isOpen && !disabled ? "button.select.errorOpened" : error ? "button.select.error" : state.isOpen && !disabled ? "button.select.open" : "button.select",
     disabled,
     className
-  }), /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react38.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "span"
   }, valueProps), {
     variant: disabled ? "select.disabled" : "select"
-  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ import_react32.default.createElement(import_icons7.ArrowUp, {
+  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ import_react38.default.createElement(import_icons6.ArrowUp, {
     size: 16,
     fill: "text"
-  }) : /* @__PURE__ */ import_react32.default.createElement(import_icons7.ArrowDown, {
+  }) : /* @__PURE__ */ import_react38.default.createElement(import_icons6.ArrowDown, {
     size: 16,
     fill: disabled ? "disabled" : "text"
-  })), state.isOpen && !disabled && /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({
-    as: Popover
+  })), state.isOpen && !disabled && /* @__PURE__ */ import_react38.default.createElement(import_system.Box, __spreadProps(__spreadValues(__spreadValues({
+    as: Popover2
   }, overlayProps), positionProps), {
     css: {
       width: triggerRef.current && triggerRef.current.offsetWidth + "px"
@@ -1262,26 +1397,26 @@ var Select = (_a) => {
     ref: overlayRef,
     isOpen: state.isOpen,
     onClose: state.close
-  }), /* @__PURE__ */ import_react32.default.createElement(ListBox, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ import_react38.default.createElement(ListBox, __spreadProps(__spreadValues({
     error
   }, menuProps), {
     state
-  }))), error && errorMessage && /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
+  }))), error && errorMessage && /* @__PURE__ */ import_react38.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ import_react32.default.createElement(import_system.Box, {
-    as: import_icons7.Exclamation,
+  }, /* @__PURE__ */ import_react38.default.createElement(import_system.Box, {
+    as: import_icons6.Exclamation,
     size: 16,
     css: { color: "error" }
-  }), /* @__PURE__ */ import_react32.default.createElement(ValidationMessage, null, errorMessage)));
+  }), /* @__PURE__ */ import_react38.default.createElement(ValidationMessage, null, errorMessage)));
 };
 
 // src/Slider/Slider.tsx
-var import_react33 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var Slider = (_a) => {
   var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
-  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react39.default.createElement(import_system.Box, __spreadValues({
     as: "input",
     type: "range",
     css: { verticalAlign: "middle" },
@@ -1290,11 +1425,12 @@ var Slider = (_a) => {
 };
 
 // src/Switch/Switch.tsx
-var import_react34 = __toESM(require("react"));
-var import_focus6 = require("@react-aria/focus");
+var import_react40 = __toESM(require("react"));
+var import_focus9 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
-var import_visually_hidden4 = require("@react-aria/visually-hidden");
-var import_system7 = require("@marigold/system");
+var import_visually_hidden3 = require("@react-aria/visually-hidden");
+var import_toggle2 = require("@react-stately/toggle");
+var import_system20 = require("@marigold/system");
 var Switch = (_a) => {
   var _b = _a, {
     variant = "",
@@ -1305,20 +1441,20 @@ var Switch = (_a) => {
     "labelVariant",
     "disabled"
   ]);
-  const state = useToggleState(props);
-  const ref = (0, import_react34.useRef)();
+  const state = (0, import_toggle2.useToggleState)(props);
+  const ref = (0, import_react40.useRef)();
   const { inputProps } = (0, import_switch.useSwitch)(props, state, ref);
-  const { focusProps } = (0, import_focus6.useFocusRing)();
-  return /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
-    as: Label,
+  const { focusProps } = (0, import_focus9.useFocusRing)();
+  return /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
+    as: Label2,
     __baseCSS: {
       userSelect: "none"
     },
     variant: labelVariant
-  }, props.children, /* @__PURE__ */ import_react34.default.createElement(import_visually_hidden4.VisuallyHidden, null, /* @__PURE__ */ import_react34.default.createElement("input", __spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+  }, props.children, /* @__PURE__ */ import_react40.default.createElement(import_visually_hidden3.VisuallyHidden, null, /* @__PURE__ */ import_react40.default.createElement("input", __spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     disabled,
     ref
-  }))), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
+  }))), /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     as: "svg",
     __baseCSS: {
       cursor: disabled ? "not-allowed" : "pointer",
@@ -1326,7 +1462,7 @@ var Switch = (_a) => {
       height: 32
     },
     "aria-hidden": "true"
-  }, /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     as: "rect",
     __baseCSS: {
       x: 4,
@@ -1335,11 +1471,11 @@ var Switch = (_a) => {
       width: 48,
       height: 24
     },
-    variant: (0, import_system7.conditional)(`switch.${variant}`, {
+    variant: (0, import_system20.conditional)(`switch.${variant}`, {
       checked: state.isSelected,
       disabled
     })
-  }), /* @__PURE__ */ import_react34.default.createElement(import_system.Box, {
+  }), /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
     as: "circle",
     __baseCSS: {
       boxShadow: "1px 1px 4px rgba(0, 0, 0, 0.25)",
@@ -1351,66 +1487,475 @@ var Switch = (_a) => {
   })));
 };
 
-// src/Textarea/Textarea.tsx
-var import_react35 = __toESM(require("react"));
-var import_textfield2 = require("@react-aria/textfield");
-var import_icons8 = require("@marigold/icons");
-var Textarea = (_a) => {
+// src/Stack/Stack.tsx
+var import_react41 = __toESM(require("react"));
+var ALIGNMENT2 = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var Stack = (_a) => {
   var _b = _a, {
-    variant = "",
-    htmlFor,
+    space = "none",
+    align = "left",
+    children
+  } = _b, props = __objRest(_b, [
+    "space",
+    "align",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react41.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: ALIGNMENT2[align],
+    p: "0",
+    css: { gap: space }
+  }), children);
+};
+
+// src/Table/Table.tsx
+var import_react48 = __toESM(require("react"));
+var import_table6 = require("@react-aria/table");
+var import_table7 = require("@react-stately/table");
+var import_system26 = require("@marigold/system");
+
+// src/Table/TableCell.tsx
+var import_react42 = __toESM(require("react"));
+var import_checkbox4 = require("@react-aria/checkbox");
+var import_focus10 = require("@react-aria/focus");
+var import_table = require("@react-aria/table");
+var import_utils6 = require("@react-aria/utils");
+var import_toggle3 = require("@react-stately/toggle");
+var import_system21 = require("@marigold/system");
+var TableCell = ({
+  item: cell,
+  state,
+  isSelectionCell,
+  align = "left",
+  css
+}) => {
+  const cellRef = (0, import_react42.useRef)(null);
+  const { gridCellProps } = (0, import_table.useTableCell)({ node: cell }, state, cellRef);
+  const { checkboxProps } = (0, import_table.useTableSelectionCheckbox)({ key: cell.parentKey }, state);
+  const inputRef = (0, import_react42.useRef)(null);
+  const { inputProps } = (0, import_checkbox4.useCheckbox)(checkboxProps, (0, import_toggle3.useToggleState)(checkboxProps), inputRef);
+  const { focusProps, isFocusVisible } = (0, import_focus10.useFocusRing)();
+  const stateProps = (0, import_system21.useStateProps)({ focus: isFocusVisible });
+  return /* @__PURE__ */ import_react42.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+    as: "td",
+    ref: cellRef,
+    __baseCSS: {
+      textAlign: isSelectionCell ? "center" : align
+    },
+    css
+  }, (0, import_utils6.mergeProps)(gridCellProps, focusProps)), stateProps), isSelectionCell ? /* @__PURE__ */ import_react42.default.createElement("input", __spreadValues({}, inputProps)) : /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, cell.rendered));
+};
+
+// src/Table/TableColumnHeader.tsx
+var import_react44 = __toESM(require("react"));
+var import_checkbox5 = require("@react-aria/checkbox");
+var import_focus11 = require("@react-aria/focus");
+var import_table2 = require("@react-aria/table");
+var import_utils7 = require("@react-aria/utils");
+var import_toggle4 = require("@react-stately/toggle");
+var import_system24 = require("@marigold/system");
+
+// src/Text/Text.tsx
+var import_react43 = __toESM(require("react"));
+var import_system22 = require("@marigold/system");
+var import_system23 = require("@marigold/system");
+var Text = (_a) => {
+  var _b = _a, {
+    variant,
+    size,
+    align,
+    color,
+    fontSize,
+    cursor,
+    outline,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "align",
+    "color",
+    "fontSize",
+    "cursor",
+    "outline",
+    "children"
+  ]);
+  const styles = (0, import_system22.useComponentStyles)("Text", {
+    variant,
+    size
+  });
+  return /* @__PURE__ */ import_react43.default.createElement(import_system23.Box, __spreadProps(__spreadValues({
+    as: "p"
+  }, props), {
+    css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
+  }), children);
+};
+
+// src/Table/TableColumnHeader.tsx
+var TableColumnHeader = ({
+  item: column,
+  state,
+  isSelectionColumn,
+  align = "left",
+  css
+}) => {
+  const ref = (0, import_react44.useRef)(null);
+  const { columnHeaderProps } = (0, import_table2.useTableColumnHeader)({ node: column }, state, ref);
+  const { checkboxProps } = (0, import_table2.useTableSelectAllCheckbox)(state);
+  const inputRef = (0, import_react44.useRef)(null);
+  const { inputProps } = (0, import_checkbox5.useCheckbox)(checkboxProps, (0, import_toggle4.useToggleState)(checkboxProps), inputRef);
+  const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
+  const stateProps = (0, import_system24.useStateProps)({ focus: isFocusVisible });
+  return /* @__PURE__ */ import_react44.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+    as: "th",
+    ref,
+    __baseCSS: { textAlign: isSelectionColumn ? "center" : align },
+    css
+  }, (0, import_utils7.mergeProps)(columnHeaderProps, focusProps)), stateProps), isSelectionColumn ? /* @__PURE__ */ import_react44.default.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
+    ref: inputRef
+  })) : /* @__PURE__ */ import_react44.default.createElement(Text, {
+    size: "xxsmall"
+  }, column.rendered));
+};
+
+// src/Table/TableHeaderRow.tsx
+var import_react45 = __toESM(require("react"));
+var import_table3 = require("@react-aria/table");
+var TableHeaderRow = ({
+  item,
+  state,
+  children
+}) => {
+  const ref = (0, import_react45.useRef)(null);
+  const { rowProps } = (0, import_table3.useTableHeaderRow)({ node: item }, state, ref);
+  return /* @__PURE__ */ import_react45.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+    ref
+  }), children);
+};
+
+// src/Table/TableRow.tsx
+var import_react46 = __toESM(require("react"));
+var import_focus12 = require("@react-aria/focus");
+var import_table4 = require("@react-aria/table");
+var import_utils8 = require("@react-aria/utils");
+var import_system25 = require("@marigold/system");
+var TableRow = ({ item, state, children, css }) => {
+  const ref = (0, import_react46.useRef)(null);
+  const isSelected = state.selectionManager.isSelected(item.key);
+  const { rowProps } = (0, import_table4.useTableRow)({
+    node: item
+  }, state, ref);
+  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
+  const stateProps = (0, import_system25.useStateProps)({
+    focus: isFocusVisible,
+    checked: isSelected
+  });
+  return /* @__PURE__ */ import_react46.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+    as: "tr",
+    ref,
+    css
+  }, (0, import_utils8.mergeProps)(rowProps, focusProps)), stateProps), children);
+};
+
+// src/Table/TableRowGroup.tsx
+var import_react47 = __toESM(require("react"));
+var import_table5 = require("@react-aria/table");
+var TableRowGroup = ({
+  as: Element,
+  children
+}) => {
+  const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
+  return /* @__PURE__ */ import_react47.default.createElement(Element, __spreadValues({}, rowGroupProps), children);
+};
+
+// src/Table/Table.tsx
+var Table = (_a) => {
+  var _b = _a, {
+    align,
+    alignHeader,
+    variant,
+    size
+  } = _b, props = __objRest(_b, [
+    "align",
+    "alignHeader",
+    "variant",
+    "size"
+  ]);
+  const showSelectionCheckboxes = props.selectionMode === "multiple" && props.selectionBehavior !== "replace";
+  const state = (0, import_table7.useTableState)(__spreadProps(__spreadValues({}, props), {
+    showSelectionCheckboxes
+  }));
+  const ref = (0, import_react48.useRef)(null);
+  const { gridProps } = (0, import_table6.useTable)(props, state, ref);
+  const styles = (0, import_system26.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  return /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadValues({
+    as: "table",
+    ref,
+    __baseCSS: styles.table
+  }, gridProps), /* @__PURE__ */ import_react48.default.createElement(TableRowGroup, {
+    as: "thead"
+  }, state.collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react48.default.createElement(TableHeaderRow, {
+    key: headerRow.key,
+    item: headerRow,
+    state
+  }, [...headerRow.childNodes].map((column) => /* @__PURE__ */ import_react48.default.createElement(TableColumnHeader, {
+    key: column.key,
+    item: column,
+    state,
+    isSelectionColumn: column.props.isSelectionCell,
+    align: alignHeader,
+    css: styles.header
+  }))))), /* @__PURE__ */ import_react48.default.createElement(TableRowGroup, {
+    as: "tbody"
+  }, [...state.collection.body.childNodes].map((row) => /* @__PURE__ */ import_react48.default.createElement(TableRow, {
+    css: styles.row,
+    key: row.key,
+    item: row,
+    state
+  }, [...row.childNodes].map((cell) => /* @__PURE__ */ import_react48.default.createElement(TableCell, {
+    key: cell.key,
+    item: cell,
+    state,
+    isSelectionCell: cell.props.isSelectionCell,
+    align,
+    css: styles.cell
+  }))))));
+};
+Table.Body = import_table7.TableBody;
+Table.Cell = import_table7.Cell;
+Table.Column = import_table7.Column;
+Table.Header = import_table7.TableHeader;
+Table.Row = import_table7.Row;
+
+// src/TextArea/TextArea.tsx
+var import_react51 = __toESM(require("react"));
+var import_textfield = require("@react-aria/textfield");
+var import_system28 = require("@marigold/system");
+
+// src/Field/FieldBase.tsx
+var import_react50 = __toESM(require("react"));
+
+// src/Field/HelpText.tsx
+var import_react49 = __toESM(require("react"));
+var import_icons7 = require("@marigold/icons");
+var import_system27 = require("@marigold/system");
+var HelpText = (_a) => {
+  var _b = _a, {
+    variant,
+    size,
+    disabled,
+    description,
+    descriptionProps,
     error,
     errorMessage,
-    required,
-    children
+    errorMessageProps
   } = _b, props = __objRest(_b, [
     "variant",
-    "htmlFor",
+    "size",
+    "disabled",
+    "description",
+    "descriptionProps",
     "error",
     "errorMessage",
-    "required",
-    "children"
+    "errorMessageProps"
   ]);
-  const ref = (0, import_react35.useRef)(null);
-  const { labelProps, inputProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadProps(__spreadValues({}, props), {
-    inputElementType: "textarea"
-  }), ref);
-  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react35.default.createElement(Label, __spreadValues({
-    htmlFor,
+  var _a2;
+  const hasErrorMessage = errorMessage && error;
+  const styles = (0, import_system27.useComponentStyles)("HelpText", { variant, size }, { parts: ["container", "icon"] });
+  return /* @__PURE__ */ import_react49.default.createElement(import_system27.Box, __spreadProps(__spreadValues({}, props), {
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+    css: styles.container
+  }), hasErrorMessage ? /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement(import_icons7.Exclamation, {
+    role: "presentation",
+    size: ((_a2 = styles == null ? void 0 : styles.icon) == null ? void 0 : _a2.size) || 16
+  }), /* @__PURE__ */ import_react49.default.createElement(import_system27.Box, __spreadValues({}, errorMessageProps), errorMessage)) : /* @__PURE__ */ import_react49.default.createElement(import_system27.Box, __spreadValues({}, descriptionProps), description));
+};
+
+// src/Field/FieldBase.tsx
+var FieldBase = ({
+  variant,
+  size,
+  children,
+  disabled,
+  required,
+  label,
+  labelProps,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  stateProps
+}) => {
+  const hasHelpText = !!description || errorMessage && error;
+  return /* @__PURE__ */ import_react50.default.createElement(Stack, null, label && /* @__PURE__ */ import_react50.default.createElement(Label, __spreadProps(__spreadValues(__spreadValues({}, labelProps), stateProps), {
     required
-  }, labelProps), props.label), /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({
+  }), label), children, hasHelpText && /* @__PURE__ */ import_react50.default.createElement(HelpText, __spreadProps(__spreadValues({}, stateProps), {
+    disabled,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps
+  })));
+};
+
+// src/TextArea/TextArea.tsx
+var import_interactions3 = require("@react-aria/interactions");
+var import_focus13 = require("@react-aria/focus");
+var TextArea = (_a) => {
+  var _b = _a, {
+    disabled,
+    required,
+    readOnly,
+    error
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "required",
+    "readOnly",
+    "error"
+  ]);
+  const { label, description, errorMessage } = props;
+  const ref = (0, import_react51.useRef)(null);
+  const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(__spreadValues({
+    inputElementType: "textarea",
+    isDisabled: disabled,
+    isRequired: required,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, props), ref);
+  const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const stateProps = (0, import_system28.useStateProps)({
+    hover: isHovered,
+    focus: isFocusVisible,
+    disabled,
+    readOnly,
+    error
+  });
+  const styles = (0, import_system28.useComponentStyles)("TextArea", {});
+  return /* @__PURE__ */ import_react51.default.createElement(FieldBase, {
+    label,
+    labelProps,
+    required,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps,
+    stateProps
+  }, /* @__PURE__ */ import_react51.default.createElement(import_system28.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
-    variant: `textarea.${variant}`,
-    css: {
-      outlineColor: error && "error"
-    }
-  }, inputProps), {
+    variant: "textArea",
+    css: styles,
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ import_react35.default.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ import_react35.default.createElement(import_icons8.Exclamation, {
-    size: 16
-  }), errorMessage));
+  }, inputProps), focusProps), hoverProps), stateProps)));
+};
+
+// src/TextField/TextField.tsx
+var import_react53 = __toESM(require("react"));
+var import_interactions4 = require("@react-aria/interactions");
+var import_focus14 = require("@react-aria/focus");
+var import_textfield2 = require("@react-aria/textfield");
+var import_system30 = require("@marigold/system");
+
+// src/Input/Input.tsx
+var import_react52 = __toESM(require("react"));
+var import_system29 = require("@marigold/system");
+var Input = (0, import_react52.forwardRef)((_a, ref) => {
+  var _b = _a, { variant, size, type = "text" } = _b, props = __objRest(_b, ["variant", "size", "type"]);
+  const styles = (0, import_system29.useComponentStyles)("Input", { variant, size });
+  return /* @__PURE__ */ import_react52.default.createElement(import_system29.Box, __spreadProps(__spreadValues({}, props), {
+    ref,
+    as: "input",
+    type,
+    css: styles
+  }));
+});
+
+// src/TextField/TextField.tsx
+var TextField = (_a) => {
+  var _b = _a, {
+    disabled,
+    required,
+    readOnly,
+    error
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "required",
+    "readOnly",
+    "error"
+  ]);
+  const { label, description, errorMessage } = props;
+  const ref = (0, import_react53.useRef)(null);
+  const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadValues({
+    isDisabled: disabled,
+    isRequired: required,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, props), ref);
+  const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
+  const stateProps = (0, import_system30.useStateProps)({
+    hover: isHovered,
+    focus: isFocusVisible,
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ import_react53.default.createElement(FieldBase, {
+    label,
+    labelProps,
+    required,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps,
+    stateProps
+  }, /* @__PURE__ */ import_react53.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    ref
+  }, inputProps), focusProps), hoverProps), stateProps)));
 };
 
+// src/Tiles/Tiles.tsx
+var import_react54 = __toESM(require("react"));
+var Tiles = import_react54.default.forwardRef(function Tiles2(_a, ref) {
+  var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
+  return /* @__PURE__ */ import_react54.default.createElement(import_system.Box, __spreadValues({
+    ref,
+    display: "grid",
+    __baseCSS: {
+      gap: space,
+      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`
+    }
+  }, props), children);
+});
+
 // src/Tooltip/Tooltip.tsx
-var import_react37 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_utils7 = require("@react-aria/utils");
+var import_utils9 = require("@react-aria/utils");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react36 = __toESM(require("react"));
-var import_focus7 = require("@react-aria/focus");
+var import_react55 = __toESM(require("react"));
+var import_focus15 = require("@react-aria/focus");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
-var TooltipContext = import_react36.default.createContext({});
+var TooltipContext = import_react55.default.createContext({});
 var TooltipTrigger = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [trigger, tooltip] = import_react36.default.Children.toArray(children);
+  const [trigger, tooltip] = import_react55.default.Children.toArray(children);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
-  const tooltipTriggerRef = (0, import_react36.useRef)();
+  const tooltipTriggerRef = (0, import_react55.useRef)();
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)({}, state, tooltipTriggerRef);
-  return /* @__PURE__ */ import_react36.default.createElement(import_focus7.FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
+  return /* @__PURE__ */ import_react55.default.createElement(import_focus15.FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
     ref: tooltipTriggerRef
-  }), trigger, state.isOpen && /* @__PURE__ */ import_react36.default.createElement(TooltipContext.Provider, {
+  }), trigger, state.isOpen && /* @__PURE__ */ import_react55.default.createElement(TooltipContext.Provider, {
     value: __spreadValues({
       state
     }, tooltipProps)
@@ -1426,60 +1971,85 @@ var Tooltip = (_a) => {
     "variant",
     "children"
   ]);
-  const _a2 = (0, import_react37.useContext)(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
-  const mergedProps = (0, import_utils7.mergeProps)(props, tooltipProviderProps);
+  const _a2 = (0, import_react56.useContext)(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
+  const mergedProps = (0, import_utils9.mergeProps)(props, tooltipProviderProps);
   const { tooltipProps } = (0, import_tooltip3.useTooltip)(mergedProps, state);
-  return /* @__PURE__ */ import_react37.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react56.default.createElement(import_system.Box, __spreadValues({
     position: "relative"
-  }, tooltipProps), /* @__PURE__ */ import_react37.default.createElement(import_system.Box, __spreadValues({
+  }, tooltipProps), /* @__PURE__ */ import_react56.default.createElement(import_system.Box, __spreadValues({
     position: "absolute",
     variant: `tooltip.${variant}`
   }, mergedProps), children));
 };
 
-// src/Input/Input.tsx
-var import_react38 = __toESM(require("react"));
-var Input = (_a) => {
+// src/Container/Container.tsx
+var import_react57 = __toESM(require("react"));
+var import_tokens2 = require("@marigold/tokens");
+var ALIGNMENT3 = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var Container = (_a) => {
   var _b = _a, {
-    variant = "",
-    type = "text"
+    contentType = "content",
+    size = "medium",
+    align = "left",
+    alignContainer = "left",
+    children
   } = _b, props = __objRest(_b, [
-    "variant",
-    "type"
+    "contentType",
+    "size",
+    "align",
+    "alignContainer",
+    "children"
   ]);
-  return /* @__PURE__ */ import_react38.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    as: "input",
-    type,
-    variant: `input.${variant}`
-  }));
-};
-
-// src/Container/Container.tsx
-var import_react39 = __toESM(require("react"));
-var Container = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react39.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    width: "100%"
-  }), children);
+  const maxWidth = import_tokens2.size[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__ */ import_react57.default.createElement(import_system.Box, __spreadValues({
+    display: "grid",
+    css: {
+      gridTemplateColumns,
+      placeItems: ALIGNMENT3[align],
+      "> *": {
+        gridColumn
+      }
+    }
+  }, props), children);
 };
 
 // src/index.ts
-var import_collections = require("@react-stately/collections");
-module.exports = __toCommonJS(src_exports);
+var import_collections2 = require("@react-stately/collections");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ActionGroup,
+  Aside,
+  Aspect,
   Badge,
   Box,
+  Breakout,
   Button,
   Card,
+  Center,
   Checkbox,
-  Column,
+  CheckboxGroup,
+  CheckboxGroupContext,
   Columns,
   Container,
+  Content,
   Dialog,
   Divider,
-  Field,
+  Footer,
+  Header,
+  Headline,
   Image,
   Inline,
   Input,
@@ -1489,8 +2059,9 @@ module.exports = __toCommonJS(src_exports);
   Link,
   MarigoldProvider,
   Menu,
-  MenuItem,
   Message,
+  Overlay,
+  Popover,
   Radio,
   SSRProvider,
   Section,
@@ -1498,14 +2069,18 @@ module.exports = __toCommonJS(src_exports);
   Slider,
   Stack,
   Switch,
+  Table,
   Text,
-  Textarea,
+  TextArea,
+  TextField,
   ThemeProvider,
+  Tiles,
   Tooltip,
   TooltipContext,
   TooltipTrigger,
   ValidationMessage,
   VisuallyHidden,
+  useCheckboxGroupContext,
   useDialogButtonProps,
   useTheme
 });