@marigold/components 0.9.0 → 1.0.0-beta.0

package/dist/index.js

@@ -73,18 +73,16 @@ __export(src_exports, {
   Image: () => Image,
   Inline: () => Inline,
   Input: () => Input,
-  Item: () => import_collections2.Item,
-  Label: () => Label2,
-  LabelBase: () => LabelBase,
+  Label: () => Label,
   Link: () => Link,
   MarigoldProvider: () => MarigoldProvider,
   Menu: () => Menu,
   Message: () => Message,
+  NumberField: () => NumberField,
   Overlay: () => Overlay,
   Popover: () => Popover,
   Radio: () => Radio,
   SSRProvider: () => import_ssr.SSRProvider,
-  Section: () => import_collections2.Section,
   Select: () => Select,
   Slider: () => Slider,
   Stack: () => Stack,
@@ -93,16 +91,15 @@ __export(src_exports, {
   Text: () => Text,
   TextArea: () => TextArea,
   TextField: () => TextField,
-  ThemeProvider: () => import_system18.ThemeProvider,
+  ThemeProvider: () => import_system26.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => Tooltip,
   TooltipContext: () => TooltipContext,
   TooltipTrigger: () => TooltipTrigger,
-  ValidationMessage: () => ValidationMessage,
+  Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   useCheckboxGroupContext: () => useCheckboxGroupContext,
-  useDialogButtonProps: () => useDialogButtonProps,
-  useTheme: () => import_system18.useTheme
+  useTheme: () => import_system26.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -171,13 +168,49 @@ var Badge = (_a) => {
   }), children);
 };
 
-// src/Button/Button.tsx
+// src/Breakout/Breakout.tsx
 var import_react4 = __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, {
+    horizontalAlign,
+    verticalAlign,
+    children
+  } = _b, props = __objRest(_b, [
+    "horizontalAlign",
+    "verticalAlign",
+    "children"
+  ]);
+  const alignItems = useAlignment(horizontalAlign);
+  const justifyContent = useAlignment(verticalAlign);
+  return /* @__PURE__ */ import_react4.default.createElement(import_system.Box, __spreadValues({
+    alignItems,
+    justifyContent,
+    width: "100%",
+    display: verticalAlign || horizontalAlign ? "flex" : "block",
+    css: {
+      gridColumn: "1 / -1"
+    }
+  }, props), children);
+};
+
+// src/Button/Button.tsx
+var import_react5 = __toESM(require("react"));
 var import_button = require("@react-aria/button");
 var import_focus = require("@react-aria/focus");
 var import_utils = require("@react-aria/utils");
 var import_system3 = require("@marigold/system");
-var Button = (0, import_react4.forwardRef)((_a, ref) => {
+var Button = (0, import_react5.forwardRef)((_a, ref) => {
   var _b = _a, {
     as = "button",
     children,
@@ -191,8 +224,8 @@ var Button = (0, import_react4.forwardRef)((_a, ref) => {
     "size",
     "disabled"
   ]);
-  const buttonRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useImperativeHandle)(ref, () => buttonRef.current);
+  const buttonRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useImperativeHandle)(ref, () => buttonRef.current);
   const { buttonProps, isPressed } = (0, import_button.useButton)(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
@@ -203,7 +236,7 @@ var Button = (0, import_react4.forwardRef)((_a, ref) => {
     active: isPressed,
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ import_react4.default.createElement(import_system3.Box, __spreadProps(__spreadValues(__spreadValues({}, (0, import_utils.mergeProps)(buttonProps, focusProps)), stateProps), {
+  return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, __spreadProps(__spreadValues(__spreadValues({}, (0, import_utils.mergeProps)(buttonProps, focusProps)), stateProps), {
     as,
     ref: buttonRef,
     __baseCSS: {
@@ -216,42 +249,6 @@ var Button = (0, import_react4.forwardRef)((_a, ref) => {
   }), children);
 });
 
-// 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, {
-    horizontalAlign,
-    verticalAlign,
-    children
-  } = _b, props = __objRest(_b, [
-    "horizontalAlign",
-    "verticalAlign",
-    "children"
-  ]);
-  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"
-    }
-  }, props), children);
-};
-
 // src/Card/Card.tsx
 var import_react6 = __toESM(require("react"));
 var import_system4 = require("@marigold/system");
@@ -303,7 +300,7 @@ var import_checkbox = require("@react-aria/checkbox");
 var import_checkbox2 = require("@react-stately/checkbox");
 var import_system6 = require("@marigold/system");
 
-// src/Field/Label.tsx
+// src/Label/Label.tsx
 var import_react8 = __toESM(require("react"));
 var import_icons = require("@marigold/icons");
 var import_system5 = require("@marigold/system");
@@ -373,7 +370,7 @@ var CheckboxGroup = (_a) => {
     __baseCSS: {
       display: "flex",
       flexDirection: "column",
-      alignItems: "left"
+      alignItems: "start"
     },
     css: styles.group
   }, /* @__PURE__ */ import_react9.default.createElement(CheckboxGroupContext.Provider, {
@@ -412,7 +409,7 @@ var Icon = (_a) => {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      p: "1px"
+      p: 1
     },
     css
   }, props), checked ? icon : null);
@@ -471,7 +468,6 @@ var Checkbox = (_a) => {
   });
   return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues(__spreadValues({
     as: "label",
-    variant: "checkbox",
     __baseCSS: {
       display: "flex",
       alignItems: "center",
@@ -481,7 +477,6 @@ var Checkbox = (_a) => {
     css: styles.container
   }, hoverProps), stateProps), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues(__spreadValues({
     as: "input",
-    type: "checkbox",
     ref,
     css: {
       position: "absolute",
@@ -538,8 +533,53 @@ var Columns = (_a) => {
   }, props), children);
 };
 
-// src/Content/Content.tsx
+// src/Container/Container.tsx
 var import_react12 = __toESM(require("react"));
+var import_tokens2 = require("@marigold/tokens");
+var ALIGNMENT = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var Container = (_a) => {
+  var _b = _a, {
+    contentType = "content",
+    size = "medium",
+    align = "left",
+    alignContainer = "left",
+    children
+  } = _b, props = __objRest(_b, [
+    "contentType",
+    "size",
+    "align",
+    "alignContainer",
+    "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_react12.default.createElement(import_system.Box, __spreadValues({
+    display: "grid",
+    css: {
+      gridTemplateColumns,
+      placeItems: ALIGNMENT[align],
+      "> *": {
+        gridColumn
+      }
+    }
+  }, props), children);
+};
+
+// src/Content/Content.tsx
+var import_react13 = __toESM(require("react"));
 var import_system8 = require("@marigold/system");
 var Content = (_a) => {
   var _b = _a, {
@@ -552,7 +592,7 @@ var Content = (_a) => {
     "size"
   ]);
   const styles = (0, import_system8.useComponentStyles)("Content", { variant, size });
-  return /* @__PURE__ */ import_react12.default.createElement(import_system8.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, __spreadProps(__spreadValues({
     as: "section"
   }, props), {
     css: styles
@@ -560,15 +600,27 @@ var Content = (_a) => {
 };
 
 // src/Dialog/Dialog.tsx
-var import_react15 = __toESM(require("react"));
-var import_overlays2 = require("@react-stately/overlays");
-var import_overlays3 = require("@react-aria/overlays");
+var import_react22 = __toESM(require("react"));
 var import_button2 = require("@react-aria/button");
-var import_icons2 = require("@marigold/icons");
+var import_dialog = require("@react-aria/dialog");
+var import_system12 = require("@marigold/system");
 
-// src/Headline/Headline.tsx
-var import_react13 = __toESM(require("react"));
+// src/Header/Header.tsx
+var import_react14 = __toESM(require("react"));
 var import_system9 = require("@marigold/system");
+var Header = (_a) => {
+  var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
+  const styles = (0, import_system9.useComponentStyles)("Header", { variant, size });
+  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+    as: "header"
+  }, props), {
+    css: styles
+  }), children);
+};
+
+// src/Headline/Headline.tsx
+var import_react15 = __toESM(require("react"));
+var import_system10 = require("@marigold/system");
 var Headline = (_a) => {
   var _b = _a, {
     children,
@@ -581,202 +633,274 @@ var Headline = (_a) => {
     "size",
     "level"
   ]);
-  const styles = (0, import_system9.useComponentStyles)("Headline", {
+  const styles = (0, import_system10.useComponentStyles)("Headline", {
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ import_react13.default.createElement(import_system9.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, __spreadProps(__spreadValues({
     as: `h${level}`
   }, props), {
     css: styles
   }), children);
 };
 
-// src/Dialog/ModalDialog.tsx
-var import_react14 = __toESM(require("react"));
-var import_overlays = require("@react-aria/overlays");
-var import_dialog = require("@react-aria/dialog");
+// src/Dialog/Context.ts
+var import_react16 = require("react");
+var DialogContext = (0, import_react16.createContext)({});
+var useDialogContext = () => (0, import_react16.useContext)(DialogContext);
+
+// src/Dialog/DialogTrigger.tsx
+var import_react21 = __toESM(require("react"));
+var import_interactions2 = require("@react-aria/interactions");
+var import_overlays4 = require("@react-stately/overlays");
+
+// src/Overlay/Modal.tsx
+var import_react18 = __toESM(require("react"));
 var import_focus3 = require("@react-aria/focus");
-var ModalDialog = (_a) => {
-  var _b = _a, {
-    variant,
-    backdropVariant = "backdrop",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "backdropVariant",
-    "children"
-  ]);
-  const _a2 = props, { isDismissable, isOpen, onClose } = _a2, restProps = __objRest(_a2, ["isDismissable", "isOpen", "onClose"]);
-  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_react14.default.createElement(import_system.Box, __spreadValues({
+var import_overlays = require("@react-aria/overlays");
+var import_utils2 = require("@react-aria/utils");
+
+// src/Overlay/Underlay.tsx
+var import_react17 = __toESM(require("react"));
+var import_system11 = require("@marigold/system");
+var Underlay = (_a) => {
+  var _b = _a, { size, variant } = _b, props = __objRest(_b, ["size", "variant"]);
+  const styles = (0, import_system11.useComponentStyles)("Underlay", { size, variant });
+  return /* @__PURE__ */ import_react17.default.createElement(import_system11.Box, __spreadValues({
     __baseCSS: {
-      display: "grid",
-      placeItems: "center",
       position: "fixed",
-      zIndex: 100,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
+      inset: 0,
+      zIndex: 1
     },
-    variant: `dialog.${backdropVariant}`
-  }, underlayProps), /* @__PURE__ */ import_react14.default.createElement(import_focus3.FocusScope, {
+    css: styles
+  }, props));
+};
+
+// src/Overlay/Modal.tsx
+var Modal = (0, import_react18.forwardRef)((_a, ref) => {
+  var _b = _a, { children, open, dismissable, keyboardDismissable, onClose } = _b, props = __objRest(_b, ["children", "open", "dismissable", "keyboardDismissable", "onClose"]);
+  const modalRef = (0, import_utils2.useObjectRef)(ref);
+  const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)({
+    isOpen: open,
+    onClose,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: !keyboardDismissable
+  }, modalRef);
+  (0, import_overlays.usePreventScroll)();
+  const { modalProps } = (0, import_overlays.useModal)({});
+  return /* @__PURE__ */ import_react18.default.createElement(import_focus3.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
-    ref,
-    variant: variant ? `dialog.${variant}` : `dialog`
-  }), restProps), children)));
-};
+  }, /* @__PURE__ */ import_react18.default.createElement(Underlay, __spreadValues({}, underlayProps)), /* @__PURE__ */ import_react18.default.createElement("div", __spreadValues({
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "fixed",
+      inset: 0,
+      zIndex: 2,
+      pointerEvents: "none"
+    },
+    ref: modalRef
+  }, (0, import_utils2.mergeProps)(props, overlayProps, modalProps)), /* @__PURE__ */ import_react18.default.createElement("div", {
+    style: { pointerEvents: "auto" }
+  }, children)));
+});
 
-// src/Dialog/Dialog.tsx
-var Dialog = (_a) => {
+// src/Overlay/Overlay.tsx
+var import_react19 = __toESM(require("react"));
+var import_overlays2 = require("@react-aria/overlays");
+var Overlay = (_a) => {
   var _b = _a, {
-    backdropVariant,
     children,
-    className,
-    close,
-    isOpen,
-    title,
-    variant
+    open = false,
+    container = document.body
   } = _b, props = __objRest(_b, [
-    "backdropVariant",
     "children",
-    "className",
-    "close",
-    "isOpen",
-    "title",
-    "variant"
+    "open",
+    "container"
   ]);
-  const closeButtonRef = import_react15.default.useRef();
-  const { buttonProps: closeButtonProps } = (0, import_button2.useButton)({
-    onPress: () => close()
-  }, closeButtonRef);
-  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_react15.default.createElement(import_system.Box, {
-    __baseCSS: {
-      display: "flex",
-      justifyContent: "space-between",
-      borderRadius: "small",
-      pl: "large",
-      pb: "large"
-    },
-    className
-  }, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
-    pt: "medium"
-  }, 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",
-      alignItems: "start",
-      paddingTop: "xsmall",
-      paddingX: "xsmall"
-    }
-  }, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: Button,
-    __baseCSS: {
-      color: "text",
-      bg: "transparent",
-      lineHeight: "xsmall",
-      px: "xxsmall",
-      ":hover": {
-        color: "text",
-        bg: "transparent",
-        cursor: "pointer"
-      },
-      ":focus": {
-        outline: 0
-      }
-    }
-  }, closeButtonProps), {
-    ref: closeButtonRef
-  }), /* @__PURE__ */ import_react15.default.createElement(import_icons2.Close, {
-    size: 16
-  }))))));
-};
-var useDialogButtonProps = () => {
-  const state = (0, import_overlays2.useOverlayTriggerState)({});
-  const openButtonRef = import_react15.default.useRef();
-  const { buttonProps: openButtonProps } = (0, import_button2.useButton)({
-    onPress: () => state.open()
-  }, openButtonRef);
-  return {
-    state,
-    openButtonProps,
-    openButtonRef
-  };
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react19.default.createElement(import_overlays2.OverlayContainer, {
+    portalContainer: container
+  }, /* @__PURE__ */ import_react19.default.createElement(import_system.Box, __spreadValues({}, props), children));
 };
 
-// src/Divider/Divider.tsx
-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"]);
-  const { separatorProps } = (0, import_separator.useSeparator)(props);
-  const styles = (0, import_system10.useComponentStyles)("Divider", { variant });
-  return /* @__PURE__ */ import_react16.default.createElement(import_system.Box, __spreadValues(__spreadValues({
-    css: styles
-  }, props), separatorProps));
-};
+// src/Overlay/Popover.tsx
+var import_react20 = __toESM(require("react"));
+var import_overlays3 = require("@react-aria/overlays");
+var import_utils3 = require("@react-aria/utils");
+var Popover = (0, import_react20.forwardRef)((_a, ref) => {
+  var _b = _a, {
+    children,
+    open,
+    dismissable,
+    keyboardDismissDisabled,
+    shouldCloseOnBlur,
+    minWidth = 0
+  } = _b, props = __objRest(_b, [
+    "children",
+    "open",
+    "dismissable",
+    "keyboardDismissDisabled",
+    "shouldCloseOnBlur",
+    "minWidth"
+  ]);
+  const fallbackRef = (0, import_react20.useRef)(null);
+  const popoverRef = ref || fallbackRef;
+  const { overlayProps } = (0, import_overlays3.useOverlay)(__spreadValues({
+    isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: keyboardDismissDisabled,
+    shouldCloseOnBlur
+  }, props), popoverRef);
+  const { modalProps } = (0, import_overlays3.useModal)({});
+  const style = { minWidth };
+  return /* @__PURE__ */ import_react20.default.createElement(Overlay, {
+    open
+  }, /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadValues({
+    ref: popoverRef,
+    role: "presentation"
+  }, (0, import_utils3.mergeProps)(props, overlayProps, modalProps, style)), children));
+});
 
-// 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/Dialog/DialogTrigger.tsx
+var DialogTrigger = ({
+  children,
+  dismissable = true,
+  keyboardDismissable = true
+}) => {
+  const [dialogTrigger, dialog] = import_react21.default.Children.toArray(children);
+  const dialogTriggerRef = (0, import_react21.useRef)(null);
+  const state = (0, import_overlays4.useOverlayTriggerState)({});
+  const ctx = { open: state.isOpen, close: state.close };
+  return /* @__PURE__ */ import_react21.default.createElement(DialogContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ import_react21.default.createElement(import_interactions2.PressResponder, {
+    ref: dialogTriggerRef,
+    isPressed: state.isOpen,
+    onPress: state.toggle
+  }, dialogTrigger), /* @__PURE__ */ import_react21.default.createElement(Overlay, {
+    open: state.isOpen
+  }, /* @__PURE__ */ import_react21.default.createElement(Modal, {
+    open: state.isOpen,
+    onClose: state.close,
+    dismissable,
+    keyboardDismissable
+  }, dialog)));
 };
 
-// src/VisuallyHidden/VisuallyHidden.tsx
-var import_visually_hidden = require("@react-aria/visually-hidden");
+// src/Dialog/Dialog.tsx
+var CloseButton = ({ css }) => {
+  const ref = (0, import_react22.useRef)(null);
+  const { close } = useDialogContext();
+  const { buttonProps } = (0, import_button2.useButton)({
+    onPress: () => close == null ? void 0 : close()
+  }, ref);
+  return /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, {
+    css: { display: "flex", justifyContent: "flex-end" }
+  }, /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, __spreadValues({
+    as: "button",
+    __baseCSS: {
+      outline: "none",
+      border: "none",
+      cursor: "pointer",
+      height: 16,
+      width: 16,
+      lineHeight: 1,
+      p: 0
+    },
+    css,
+    ref
+  }, buttonProps), /* @__PURE__ */ import_react22.default.createElement("svg", {
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, /* @__PURE__ */ import_react22.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+  }))));
+};
+var addTitleProps = (children, titleProps) => {
+  const childs = import_react22.default.Children.toArray(children);
+  const titleIndex = childs.findIndex((child) => import_react22.default.isValidElement(child) && (child.type === Header || child.type === Headline));
+  if (titleIndex < 0) {
+    console.warn("No child in <Dialog> found that can act as title for accessibility. Please add a <Header> or <Headline> as direct child.");
+    return children;
+  }
+  const titleChild = import_react22.default.cloneElement(childs[titleIndex], titleProps);
+  childs.splice(titleIndex, 1, titleChild);
+  return childs;
+};
+var Dialog = (_a) => {
+  var _b = _a, {
+    children,
+    variant,
+    size,
+    closeButton
+  } = _b, props = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "closeButton"
+  ]);
+  const ref = (0, import_react22.useRef)(null);
+  const { close } = useDialogContext();
+  const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
+  const styles = (0, import_system12.useComponentStyles)("Dialog", { variant, size }, { parts: ["container", "closeButton"] });
+  return /* @__PURE__ */ import_react22.default.createElement(import_system12.Box, __spreadValues({
+    __baseCSS: { bg: "#fff" },
+    css: styles.container
+  }, dialogProps), closeButton && /* @__PURE__ */ import_react22.default.createElement(CloseButton, {
+    css: styles.closeButton
+  }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+};
+Dialog.Trigger = DialogTrigger;
 
-// src/Header/Header.tsx
-var import_react18 = __toESM(require("react"));
-var import_system12 = require("@marigold/system");
-var Header = (_a) => {
+// src/Divider/Divider.tsx
+var import_react23 = __toESM(require("react"));
+var import_separator = require("@react-aria/separator");
+var import_system13 = require("@marigold/system");
+var Divider = (_a) => {
+  var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
+  const { separatorProps } = (0, import_separator.useSeparator)(props);
+  const styles = (0, import_system13.useComponentStyles)("Divider", { variant });
+  return /* @__PURE__ */ import_react23.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+    css: styles
+  }, props), separatorProps));
+};
+
+// src/Footer/Footer.tsx
+var import_react24 = __toESM(require("react"));
+var import_system14 = require("@marigold/system");
+var Footer = (_a) => {
   var _b = _a, { children, variant, size } = _b, props = __objRest(_b, ["children", "variant", "size"]);
-  const styles = (0, import_system12.useComponentStyles)("Header", { variant, size });
-  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "header"
+  const styles = (0, import_system14.useComponentStyles)("Footer", { variant, size });
+  return /* @__PURE__ */ import_react24.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+    as: "footer"
   }, props), {
     css: styles
   }), children);
 };
 
 // src/Image/Image.tsx
-var import_react19 = __toESM(require("react"));
-var import_system13 = require("@marigold/system");
+var import_react25 = __toESM(require("react"));
+var import_system15 = 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), {
+  const styles = (0, import_system15.useComponentStyles)("Image", { variant });
+  return /* @__PURE__ */ import_react25.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as: "img",
     css: styles
   }));
 };
 
 // src/Inline/Inline.tsx
-var import_react20 = __toESM(require("react"));
-var ALIGNMENT = {
+var import_react26 = __toESM(require("react"));
+var ALIGNMENT2 = {
   top: "flex-start",
   center: "center",
   bottom: "flex-end"
@@ -791,56 +915,31 @@ var Inline = (_a) => {
     "align",
     "children"
   ]);
-  return /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react26.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: { gap: space, flexWrap: "wrap" },
     display: "inline-flex",
-    alignItems: ALIGNMENT[align]
+    alignItems: ALIGNMENT2[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,
-    color = "text",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "required",
-    "color",
-    "children"
-  ]);
-  return /* @__PURE__ */ import_react21.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    as: "label",
-    __baseCSS: { color },
-    variant: `label.${variant}`
-  }), children);
-};
-var Label2 = (_a) => {
-  var _b = _a, {
-    required,
-    children
-  } = _b, props = __objRest(_b, [
-    "required",
-    "children"
-  ]);
-  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/Input/Input.tsx
+var import_react27 = __toESM(require("react"));
+var import_system16 = require("@marigold/system");
+var Input = (0, import_react27.forwardRef)((_a, ref) => {
+  var _b = _a, { variant, size, type = "text" } = _b, props = __objRest(_b, ["variant", "size", "type"]);
+  const styles = (0, import_system16.useComponentStyles)("Input", { variant, size });
+  return /* @__PURE__ */ import_react27.default.createElement(import_system16.Box, __spreadProps(__spreadValues({}, props), {
+    ref,
+    as: "input",
+    type,
+    css: styles
+  }));
+});
 
 // src/Link/Link.tsx
-var import_react22 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
-var import_system14 = require("@marigold/system");
+var import_system17 = require("@marigold/system");
 var Link = (_a) => {
   var _b = _a, {
     as = "a",
@@ -855,13 +954,13 @@ var Link = (_a) => {
     "children",
     "disabled"
   ]);
-  const ref = (0, import_react22.useRef)(null);
+  const ref = (0, import_react28.useRef)(null);
   const { linkProps } = (0, import_link.useLink)(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
   }), ref);
-  const styles = (0, import_system14.useComponentStyles)("Link", { variant, size });
-  return /* @__PURE__ */ import_react22.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  const styles = (0, import_system17.useComponentStyles)("Link", { variant, size });
+  return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as,
     css: styles,
     ref
@@ -869,84 +968,29 @@ var Link = (_a) => {
 };
 
 // src/Menu/Menu.tsx
-var import_react28 = __toESM(require("react"));
+var import_react32 = __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");
+var import_system19 = 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);
+var import_react29 = require("react");
+var MenuContext = (0, import_react29.createContext)({});
+var useMenuContext = () => (0, import_react29.useContext)(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-var import_react26 = __toESM(require("react"));
+var import_react30 = __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, {
-    children,
-    open = false,
-    container = document.body
-  } = _b, props = __objRest(_b, [
-    "children",
-    "open",
-    "container"
-  ]);
-  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/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, {
-    children,
-    open,
-    dismissable,
-    keyboardDismissDisabled,
-    shouldCloseOnBlur
-  } = _b, props = __objRest(_b, [
-    "children",
-    "open",
-    "dismissable",
-    "keyboardDismissDisabled",
-    "shouldCloseOnBlur"
-  ]);
-  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 import_interactions3 = 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 [menuTrigger, menu] = import_react30.default.Children.toArray(children);
+  const menuTriggerRef = (0, import_react30.useRef)(null);
+  const overlayRef = (0, import_react30.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)({
@@ -960,12 +1004,12 @@ var MenuTrigger = ({ disabled, children }) => {
     autoFocus: state.focusStrategy,
     triggerWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0
   });
-  return /* @__PURE__ */ import_react26.default.createElement(MenuContext.Provider, {
+  return /* @__PURE__ */ import_react30.default.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ import_react26.default.createElement(import_interactions2.PressResponder, __spreadProps(__spreadValues({}, menuTriggerProps), {
+  }, /* @__PURE__ */ import_react30.default.createElement(import_interactions3.PressResponder, __spreadProps(__spreadValues({}, menuTriggerProps), {
     ref: menuTriggerRef,
     isPressed: state.isOpen
-  }), menuTrigger), /* @__PURE__ */ import_react26.default.createElement(Popover, __spreadValues({
+  }), menuTrigger), /* @__PURE__ */ import_react30.default.createElement(Popover, __spreadValues({
     open: state.isOpen,
     onClose: state.close,
     dismissable: true,
@@ -975,13 +1019,13 @@ var MenuTrigger = ({ disabled, children }) => {
 };
 
 // src/Menu/MenuItem.tsx
-var import_react27 = __toESM(require("react"));
+var import_react31 = __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 import_utils4 = require("@react-aria/utils");
+var import_system18 = require("@marigold/system");
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = (0, import_react27.useRef)(null);
+  const ref = (0, import_react31.useRef)(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = (0, import_menu3.useMenuItem)({
     key: item.key,
@@ -989,10 +1033,10 @@ var MenuItem = ({ item, state, onAction, css }) => {
     onClose
   }, state, ref);
   const { isFocusVisible, focusProps } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system15.useStateProps)({
+  const stateProps = (0, import_system18.useStateProps)({
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ import_react27.default.createElement(import_system15.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react31.default.createElement(import_system18.Box, __spreadValues(__spreadValues({
     as: "li",
     ref,
     __baseCSS: {
@@ -1001,7 +1045,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
       }
     },
     css
-  }, (0, import_utils3.mergeProps)(menuItemProps, focusProps)), stateProps), item.rendered);
+  }, (0, import_utils4.mergeProps)(menuItemProps, focusProps)), stateProps), item.rendered);
 };
 
 // src/Menu/Menu.tsx
@@ -1009,15 +1053,15 @@ 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 ref = (0, import_react32.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, {
+  const styles = (0, import_system19.useComponentStyles)("Menu", { variant, size }, { parts: ["container", "item"] });
+  return /* @__PURE__ */ import_react32.default.createElement(import_focus5.FocusScope, {
     restoreFocus: true
-  }, /* @__PURE__ */ import_react28.default.createElement("div", null, /* @__PURE__ */ import_react28.default.createElement(import_overlays6.DismissButton, {
+  }, /* @__PURE__ */ import_react32.default.createElement("div", null, /* @__PURE__ */ import_react32.default.createElement(import_overlays6.DismissButton, {
     onDismiss: ownProps.onClose
-  }), /* @__PURE__ */ import_react28.default.createElement(import_system16.Box, __spreadValues({
+  }), /* @__PURE__ */ import_react32.default.createElement(import_system19.Box, __spreadValues({
     as: "ul",
     ref,
     style: { width: triggerWidth },
@@ -1027,13 +1071,13 @@ var Menu = (_a) => {
       overflowWrap: "break-word"
     },
     css: styles.container
-  }, menuProps), [...state.collection].map((item) => /* @__PURE__ */ import_react28.default.createElement(MenuItem, {
+  }, menuProps), [...state.collection].map((item) => /* @__PURE__ */ import_react32.default.createElement(MenuItem, {
     key: item.key,
     item,
     state,
     onAction: props.onSelect,
     css: styles.item
-  }))), /* @__PURE__ */ import_react28.default.createElement(import_overlays6.DismissButton, {
+  }))), /* @__PURE__ */ import_react32.default.createElement(import_overlays6.DismissButton, {
     onDismiss: ownProps.onClose
   })));
 };
@@ -1041,529 +1085,924 @@ Menu.Trigger = MenuTrigger;
 Menu.Item = import_collections.Item;
 
 // src/Message/Message.tsx
-var import_react29 = __toESM(require("react"));
-var import_icons4 = require("@marigold/icons");
+var import_react33 = __toESM(require("react"));
+var import_icons2 = require("@marigold/icons");
+var import_system20 = require("@marigold/system");
 var Message = (_a) => {
   var _b = _a, {
     messageTitle,
     variant = "info",
-    className,
+    size,
     children
   } = _b, props = __objRest(_b, [
     "messageTitle",
     "variant",
-    "className",
+    "size",
     "children"
   ]);
-  var icon = /* @__PURE__ */ import_react29.default.createElement(import_icons4.Info, null);
+  const styles = (0, import_system20.useComponentStyles)("Message", {
+    variant,
+    size
+  }, { parts: ["container", "icon", "title", "content"] });
+  var icon = /* @__PURE__ */ import_react33.default.createElement(import_icons2.Info, null);
   if (variant === "warning") {
-    icon = /* @__PURE__ */ import_react29.default.createElement(import_icons4.Notification, null);
+    icon = /* @__PURE__ */ import_react33.default.createElement(import_icons2.Notification, null);
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ import_react29.default.createElement(import_icons4.Exclamation, null);
+    icon = /* @__PURE__ */ import_react33.default.createElement(import_icons2.Exclamation, null);
   }
-  return /* @__PURE__ */ import_react29.default.createElement(import_system.Box, __spreadValues({
-    display: "inline-block",
-    variant: `message.${variant}`,
-    className
-  }, props), /* @__PURE__ */ import_react29.default.createElement(import_system.Box, {
-    display: "flex",
-    alignItems: "center",
-    variant: "message.title"
-  }, icon, /* @__PURE__ */ import_react29.default.createElement(Headline, {
-    level: "4"
-  }, messageTitle)), /* @__PURE__ */ import_react29.default.createElement(import_system.Box, {
-    css: { color: "black" }
+  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadValues({
+    css: styles.container
+  }, props), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 }
+  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    role: "presentation",
+    css: styles.icon
+  }, icon), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    css: styles.title
+  }, messageTitle)), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
+    css: styles.content
   }, children));
 };
 
-// src/Provider/index.ts
-var import_system18 = require("@marigold/system");
-var import_ssr = require("@react-aria/ssr");
-
-// src/Provider/MarigoldProvider.tsx
-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_system17.useTheme)();
-  const isTopLevel = outer.theme === import_system17.__defaultTheme;
-  return /* @__PURE__ */ import_react30.default.createElement(import_system17.ThemeProvider, {
-    theme
-  }, 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_react33 = __toESM(require("react"));
-var import_icons5 = require("@marigold/icons");
+// src/NumberField/NumberField.tsx
+var import_react37 = __toESM(require("react"));
 var import_focus6 = require("@react-aria/focus");
-var import_visually_hidden2 = require("@react-aria/visually-hidden");
+var import_interactions5 = require("@react-aria/interactions");
+var import_i18n = require("@react-aria/i18n");
+var import_numberfield = require("@react-aria/numberfield");
+var import_utils6 = require("@react-aria/utils");
+var import_numberfield2 = require("@react-stately/numberfield");
+var import_system24 = require("@marigold/system");
 
-// src/Radio/RadioIcon.tsx
-var import_react31 = __toESM(require("react"));
-var import_system19 = require("@marigold/system");
-var RadioIcon = ({
-  variant = "",
-  checked = false,
-  disabled = false,
-  error = false
-}) => {
-  const conditionalStates = disabled ? {
-    disabled
-  } : {
-    checked,
-    error
-  };
-  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_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_react31.default.createElement("circle", {
-    fill: "white",
-    cx: "8",
-    cy: "16",
-    r: "3"
-  }));
-};
+// src/FieldBase/FieldBase.tsx
+var import_react35 = __toESM(require("react"));
+var import_system22 = require("@marigold/system");
 
-// src/ValidationMessage/ValidationMessage.tsx
-var import_react32 = __toESM(require("react"));
-var ValidationMessage = (_a) => {
+// src/HelpText/HelpText.tsx
+var import_react34 = __toESM(require("react"));
+var import_icons3 = require("@marigold/icons");
+var import_system21 = require("@marigold/system");
+var HelpText = (_a) => {
   var _b = _a, {
-    variant = "error",
-    children,
-    className
+    variant,
+    size,
+    disabled,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps
   } = _b, props = __objRest(_b, [
     "variant",
-    "children",
-    "className"
+    "size",
+    "disabled",
+    "description",
+    "descriptionProps",
+    "error",
+    "errorMessage",
+    "errorMessageProps"
   ]);
-  return /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadValues({
-    as: "span",
-    display: "flex",
-    alignItems: "center",
-    variant: `validation.${variant}`,
-    className
-  }, props), children);
+  var _a2;
+  const hasErrorMessage = errorMessage && error;
+  const styles = (0, import_system21.useComponentStyles)("HelpText", { variant, size }, { parts: ["container", "icon"] });
+  return /* @__PURE__ */ import_react34.default.createElement(import_system21.Box, __spreadProps(__spreadValues(__spreadValues({}, hasErrorMessage ? errorMessageProps : descriptionProps), props), {
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+    css: styles.container
+  }), hasErrorMessage ? /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(import_icons3.Exclamation, {
+    role: "presentation",
+    size: ((_a2 = styles == null ? void 0 : styles.icon) == null ? void 0 : _a2.size) || 16
+  }), errorMessage) : /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, description));
 };
 
-// src/Radio/Radio.tsx
-var RadioInput = (_a) => {
-  var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
-  const { focusProps } = (0, import_focus6.useFocusRing)();
-  const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
-    pr: "xsmall"
-  }, /* @__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_react33.default.createElement(RadioIcon, {
-    variant: props.variant,
-    disabled: props.disabled,
-    checked: props.checked,
-    error
-  }));
-};
-var Radio = (_a) => {
-  var _b = _a, {
-    required,
-    labelVariant = "inline",
-    errorMessage
-  } = _b, props = __objRest(_b, [
-    "required",
-    "labelVariant",
-    "errorMessage"
-  ]);
-  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, {
-    as: Label2,
-    htmlFor: props.id,
+// src/FieldBase/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_react35.default.createElement(import_system22.Box, {
+    css: { display: "flex", flexDirection: "column", width: "100%" }
+  }, label && /* @__PURE__ */ import_react35.default.createElement(Label, __spreadValues(__spreadValues({
     required,
-    variant: `label.${labelVariant}`,
-    css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
-  }, /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadValues({
-    as: RadioInput,
-    error: props.error
-  }, 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_react38 = __toESM(require("react"));
-var import_select = require("@react-stately/select");
+    variant,
+    size
+  }, labelProps), stateProps), label), children, hasHelpText && /* @__PURE__ */ import_react35.default.createElement(HelpText, __spreadProps(__spreadValues({}, stateProps), {
+    variant,
+    size,
+    disabled,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps
+  })));
+};
+
+// src/NumberField/StepButton.tsx
+var import_react36 = __toESM(require("react"));
 var import_button3 = require("@react-aria/button");
+var import_interactions4 = require("@react-aria/interactions");
 var import_utils5 = require("@react-aria/utils");
+var import_system23 = require("@marigold/system");
+var Plus = () => /* @__PURE__ */ import_react36.default.createElement(import_system23.Box, {
+  as: "svg",
+  __baseCSS: { width: 16, height: 16 },
+  viewBox: "0 0 20 20",
+  fill: "currentColor"
+}, /* @__PURE__ */ import_react36.default.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+}));
+var Minus = () => /* @__PURE__ */ import_react36.default.createElement(import_system23.Box, {
+  as: "svg",
+  __baseCSS: { width: 16, height: 16 },
+  viewBox: "0 0 20 20",
+  fill: "currentColor"
+}, /* @__PURE__ */ import_react36.default.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+}));
+var StepButton = (_a) => {
+  var _b = _a, { direction, css } = _b, props = __objRest(_b, ["direction", "css"]);
+  const ref = (0, import_react36.useRef)(null);
+  const { buttonProps, isPressed } = (0, import_button3.useButton)(__spreadProps(__spreadValues({}, props), { elementType: "div" }), ref);
+  const { hoverProps, isHovered } = (0, import_interactions4.useHover)(props);
+  const stateProps = (0, import_system23.useStateProps)({
+    active: isPressed,
+    hover: isHovered,
+    disabled: props.isDisabled
+  });
+  const Icon3 = direction === "up" ? Plus : Minus;
+  return /* @__PURE__ */ import_react36.default.createElement(import_system23.Box, __spreadValues(__spreadValues({
+    __baseCSS: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: props.isDisabled ? "not-allowed" : "pointer"
+    },
+    css
+  }, (0, import_utils5.mergeProps)(buttonProps, hoverProps)), stateProps), /* @__PURE__ */ import_react36.default.createElement(Icon3, null));
+};
+
+// src/NumberField/NumberField.tsx
+var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
+  var _b = _a, {
+    disabled,
+    required,
+    readOnly,
+    error,
+    variant,
+    size,
+    hideStepper
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "required",
+    "readOnly",
+    "error",
+    "variant",
+    "size",
+    "hideStepper"
+  ]);
+  const props = __spreadValues({
+    isDisabled: disabled,
+    isRequired: required,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, rest);
+  const showStepper = !hideStepper;
+  const { locale } = (0, import_i18n.useLocale)();
+  const inputRef = (0, import_utils6.useObjectRef)(ref);
+  const state = (0, import_numberfield2.useNumberFieldState)(__spreadProps(__spreadValues({}, props), { locale }));
+  const {
+    labelProps,
+    groupProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+    incrementButtonProps,
+    decrementButtonProps
+  } = (0, import_numberfield.useNumberField)(props, state, inputRef);
+  const { hoverProps, isHovered } = (0, import_interactions5.useHover)({ isDisabled: disabled });
+  const { focusProps, isFocused } = (0, import_focus6.useFocusRing)({
+    within: true,
+    isTextInput: true,
+    autoFocus: props.autoFocus
+  });
+  const styles = (0, import_system24.useComponentStyles)("NumberField", { variant, size }, { parts: ["group", "stepper"] });
+  const stateProps = (0, import_system24.useStateProps)({
+    hover: isHovered,
+    focus: isFocused,
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ import_react37.default.createElement(FieldBase, {
+    label: props.label,
+    labelProps,
+    required,
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    stateProps,
+    variant,
+    size
+  }, /* @__PURE__ */ import_react37.default.createElement(import_system24.Box, __spreadValues(__spreadValues({
+    "data-group": true,
+    __baseCSS: {
+      display: "flex",
+      alignItems: "stretch",
+      "> input": {
+        flexGrow: 1
+      }
+    },
+    css: styles.group
+  }, (0, import_utils6.mergeProps)(groupProps, focusProps, hoverProps)), stateProps), showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, __spreadValues({
+    direction: "down",
+    css: styles.stepper
+  }, decrementButtonProps)), /* @__PURE__ */ import_react37.default.createElement(Input, __spreadValues(__spreadValues({
+    ref: inputRef,
+    variant,
+    size
+  }, inputProps), stateProps)), showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, __spreadValues({
+    direction: "up",
+    css: styles.stepper
+  }, incrementButtonProps))));
+});
+
+// src/Provider/index.ts
+var import_system26 = require("@marigold/system");
+var import_ssr = require("@react-aria/ssr");
+
+// src/Provider/MarigoldProvider.tsx
+var import_react38 = __toESM(require("react"));
+var import_overlays7 = require("@react-aria/overlays");
+var import_system25 = require("@marigold/system");
+function MarigoldProvider({
+  theme,
+  children
+}) {
+  const outer = (0, import_system25.useTheme)();
+  const isTopLevel = outer.theme === import_system25.__defaultTheme;
+  return /* @__PURE__ */ import_react38.default.createElement(import_system25.ThemeProvider, {
+    theme
+  }, isTopLevel ? /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(import_system25.Global, null), /* @__PURE__ */ import_react38.default.createElement(import_overlays7.OverlayProvider, null, children)) : children);
+}
+
+// src/Radio/Radio.tsx
+var import_react40 = __toESM(require("react"));
+var import_radio3 = require("@react-aria/radio");
+var import_system28 = require("@marigold/system");
+
+// src/Radio/RadioGroup.tsx
+var import_react39 = __toESM(require("react"));
+var import_radio = require("@react-aria/radio");
+var import_radio2 = require("@react-stately/radio");
+var import_system27 = require("@marigold/system");
+var RadioGroupContext = import_react39.default.createContext(null);
+var useRadioGroupContext = () => (0, import_react39.useContext)(RadioGroupContext);
+var RadioGroup = (_a) => {
+  var _b = _a, {
+    children,
+    orientation = "vertical",
+    size,
+    variant,
+    required,
+    disabled,
+    readOnly,
+    error
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "orientation",
+    "size",
+    "variant",
+    "required",
+    "disabled",
+    "readOnly",
+    "error"
+  ]);
+  const props = __spreadValues({
+    isRequired: required,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  }, rest);
+  const state = (0, import_radio2.useRadioGroupState)(props);
+  const { radioGroupProps, labelProps } = (0, import_radio.useRadioGroup)(props, state);
+  const styles = (0, import_system27.useComponentStyles)("RadioGroup", { variant, size }, { parts: ["container", "group"] });
+  return /* @__PURE__ */ import_react39.default.createElement(import_system27.Box, __spreadProps(__spreadValues({}, radioGroupProps), {
+    css: styles.container
+  }), props.label && /* @__PURE__ */ import_react39.default.createElement(Label, __spreadValues({
+    as: "span",
+    required
+  }, labelProps), props.label), /* @__PURE__ */ import_react39.default.createElement(import_system27.Box, {
+    role: "presentation",
+    "data-orientation": orientation,
+    __baseCSS: {
+      display: "flex",
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      alignItems: "start",
+      gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
+    },
+    css: styles.group
+  }, /* @__PURE__ */ import_react39.default.createElement(RadioGroupContext.Provider, {
+    value: __spreadValues({ variant, size, error }, state)
+  }, children)));
+};
+
+// src/Radio/Radio.tsx
+var import_interactions6 = require("@react-aria/interactions");
+var import_focus7 = require("@react-aria/focus");
+var Dot = () => /* @__PURE__ */ import_react40.default.createElement("svg", {
+  viewBox: "0 0 6 6"
+}, /* @__PURE__ */ import_react40.default.createElement("circle", {
+  fill: "currentColor",
+  cx: "3",
+  cy: "3",
+  r: "3"
+}));
+var Icon2 = (_a) => {
+  var _b = _a, { checked, css } = _b, props = __objRest(_b, ["checked", "css"]);
+  return /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues({
+    "aria-hidden": "true",
+    __baseCSS: {
+      width: 16,
+      height: 16,
+      bg: "#fff",
+      border: "1px solid #000",
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: 4
+    },
+    css
+  }, props), checked ? /* @__PURE__ */ import_react40.default.createElement(Dot, null) : null);
+};
+var Radio = (_a) => {
+  var _b = _a, { disabled } = _b, props = __objRest(_b, ["disabled"]);
+  const _a2 = useRadioGroupContext(), { variant, size, error } = _a2, state = __objRest(_a2, ["variant", "size", "error"]);
+  const ref = (0, import_react40.useRef)(null);
+  const { inputProps } = (0, import_radio3.useRadio)(__spreadValues({ isDisabled: disabled }, props), state, ref);
+  const styles = (0, import_system28.useComponentStyles)("Radio", { variant: variant || props.variant, size: size || props.size }, { parts: ["container", "label", "radio"] });
+  const { hoverProps, isHovered } = (0, import_interactions6.useHover)({});
+  const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
+  const stateProps = (0, import_system28.useStateProps)({
+    hover: isHovered,
+    focus: isFocusVisible,
+    checked: inputProps.checked,
+    disabled: inputProps.disabled,
+    readOnly: props.readOnly,
+    error
+  });
+  return /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
+    as: "label",
+    __baseCSS: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1ch",
+      position: "relative"
+    },
+    css: styles.container
+  }, hoverProps), stateProps), /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
+    as: "input",
+    ref,
+    css: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      opacity: 1e-4,
+      cursor: inputProps.disabled ? "not-allowed" : "pointer"
+    }
+  }, inputProps), focusProps)), /* @__PURE__ */ import_react40.default.createElement(Icon2, __spreadValues({
+    checked: inputProps.checked,
+    css: styles.radio
+  }, stateProps)), /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues({
+    css: styles.label
+  }, stateProps), props.children));
+};
+Radio.Group = RadioGroup;
+
+// src/Select/Select.tsx
+var import_react45 = __toESM(require("react"));
+var import_button4 = require("@react-aria/button");
 var import_focus8 = require("@react-aria/focus");
-var import_select2 = require("@react-aria/select");
-var import_overlays9 = require("@react-stately/overlays");
-var import_overlays10 = require("@react-aria/overlays");
-var import_icons6 = require("@marigold/icons");
+var import_i18n2 = require("@react-aria/i18n");
+var import_overlays8 = require("@react-aria/overlays");
+var import_select = require("@react-aria/select");
+var import_select2 = require("@react-stately/select");
+var import_collections2 = require("@react-stately/collections");
+var import_utils8 = require("@react-aria/utils");
+var import_system32 = require("@marigold/system");
 
-// src/Select/ListBox.tsx
-var import_react36 = __toESM(require("react"));
+// src/ListBox/ListBox.tsx
+var import_react44 = __toESM(require("react"));
+var import_utils7 = require("@react-aria/utils");
+var import_system31 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
-// src/Select/Option.tsx
-var import_react34 = __toESM(require("react"));
+// src/ListBox/Context.ts
+var import_react41 = require("react");
+var ListBoxContext = (0, import_react41.createContext)({});
+var useListBoxContext = () => (0, import_react41.useContext)(ListBoxContext);
+
+// src/ListBox/ListBoxSection.tsx
+var import_react43 = __toESM(require("react"));
+var import_listbox2 = require("@react-aria/listbox");
+var import_system30 = require("@marigold/system");
+
+// src/ListBox/ListBoxOption.tsx
+var import_react42 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
-var Option = ({ item, state }) => {
-  const ref = (0, import_react34.useRef)(null);
-  const [disabled, setDisabled] = (0, import_react34.useState)(false);
-  const { optionProps, isSelected } = (0, import_listbox.useOption)({
+var import_system29 = require("@marigold/system");
+var ListBoxOption = ({ item, state }) => {
+  const ref = (0, import_react42.useRef)(null);
+  const { optionProps, isSelected, isDisabled, isFocused } = (0, import_listbox.useOption)({
     key: item.key
   }, state, ref);
-  (0, import_react34.useEffect)(() => {
-    for (const key of state.disabledKeys.values()) {
-      if (key === item.key) {
-        setDisabled(true);
-      }
-    }
-  }, [state.disabledKeys, item.key]);
-  return /* @__PURE__ */ import_react34.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "li"
-  }, optionProps), {
+  const { styles } = useListBoxContext();
+  const stateProps = (0, import_system29.useStateProps)({
+    selected: isSelected,
+    disabled: isDisabled,
+    focusVisible: isFocused
+  });
+  return /* @__PURE__ */ import_react42.default.createElement(import_system29.Box, __spreadValues(__spreadValues({
+    as: "li",
     ref,
-    variant: isSelected ? "select.option.selected" : disabled ? "select.option.disabled" : "select.option"
-  }), item.rendered);
+    css: styles.option
+  }, optionProps), stateProps), item.rendered);
 };
 
-// src/Select/ListBoxSection.tsx
-var import_react35 = __toESM(require("react"));
-var import_listbox2 = require("@react-aria/listbox");
+// src/ListBox/ListBoxSection.tsx
 var ListBoxSection = ({ section, state }) => {
   const { itemProps, headingProps, groupProps } = (0, import_listbox2.useListBoxSection)({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "li"
-  }, itemProps), {
-    css: {
-      cursor: "not-allowed"
-    }
-  }), section.rendered && /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "span"
-  }, headingProps), {
-    variant: "select.section"
-  }), section.rendered), /* @__PURE__ */ import_react35.default.createElement(import_system.Box, __spreadValues({
-    as: "ul"
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react35.default.createElement(Option, {
+  const { styles } = useListBoxContext();
+  return /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, __spreadValues({
+    as: "li",
+    css: styles.section
+  }, itemProps), section.rendered && /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, __spreadValues({
+    css: styles.sectionTitle
+  }, headingProps), section.rendered), /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, __spreadValues({
+    as: "ul",
+    __baseCSS: { listStyle: "none", p: 0 },
+    css: styles.list
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react43.default.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
   }))));
 };
 
-// src/Select/ListBox.tsx
-var ListBox = (props) => {
-  const ref = (0, import_react36.useRef)(null);
-  const { state, error } = props;
-  const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, ref);
-  return /* @__PURE__ */ import_react36.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+// src/ListBox/ListBox.tsx
+var ListBox = (0, import_react44.forwardRef)((_a, ref) => {
+  var _b = _a, { state, variant, size } = _b, props = __objRest(_b, ["state", "variant", "size"]);
+  const innerRef = (0, import_utils7.useObjectRef)(ref);
+  const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
+  const styles = (0, import_system31.useComponentStyles)("ListBox", { variant, size }, { parts: ["container", "list", "option", "section", "sectionTitle"] });
+  return /* @__PURE__ */ import_react44.default.createElement(ListBoxContext.Provider, {
+    value: { styles }
+  }, /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, {
+    css: styles.container
+  }, /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, __spreadValues({
     as: "ul",
-    p: "none",
-    css: {
-      listStyle: "none"
-    }
-  }, listBoxProps), {
-    variant: error ? "select.listbox.error" : "select.listbox",
-    ref
-  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react36.default.createElement(ListBoxSection, {
+    ref: innerRef,
+    __baseCSS: { listStyle: "none", p: 0 },
+    css: styles.list
+  }, listBoxProps), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react44.default.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
-  }) : /* @__PURE__ */ import_react36.default.createElement(Option, {
+  }) : /* @__PURE__ */ import_react44.default.createElement(ListBoxOption, {
     key: item.key,
     item,
     state
-  })));
-};
-
-// src/Select/Popover.tsx
-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_overlays8.useOverlay)({
-    isOpen,
-    onClose,
-    shouldCloseOnBlur: true,
-    isDismissable: true
-  }, ref);
-  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_react37.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils4.mergeProps)(overlayProps, otherProps, modalProps)), {
-    className,
-    ref
-  }), children, /* @__PURE__ */ import_react37.default.createElement(import_overlays8.DismissButton, {
-    onDismiss: onClose
-  }))));
+  })))));
 });
 
+// src/Select/intl.ts
+var messages = {
+  "en-US": {
+    placeholder: "Select an option\u2026"
+  },
+  "de-DE": {
+    placeholder: "Option ausw\xE4hlen\u2026"
+  }
+};
+
 // src/Select/Select.tsx
+var Chevron = ({ css }) => /* @__PURE__ */ import_react45.default.createElement(import_system32.Box, {
+  as: "svg",
+  __baseCSS: { width: 16, height: 16 },
+  css,
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  strokeWidth: 2
+}, /* @__PURE__ */ import_react45.default.createElement("path", {
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  d: "M19 9l-7 7-7-7"
+}));
 var Select = (_a) => {
   var _b = _a, {
-    labelVariant = "above",
-    placeholder = "Select an option",
+    open,
     disabled,
     required,
     error,
-    errorMessage,
-    width,
-    className
-  } = _b, props = __objRest(_b, [
-    "labelVariant",
-    "placeholder",
+    variant,
+    size,
+    css
+  } = _b, rest = __objRest(_b, [
+    "open",
     "disabled",
     "required",
     "error",
-    "errorMessage",
-    "width",
-    "className"
+    "variant",
+    "size",
+    "css"
   ]);
-  const state = (0, import_select.useSelectState)(props);
-  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,
+  const formatMessage = (0, import_i18n2.useMessageFormatter)(messages);
+  const props = __spreadValues({
+    isOpen: open,
+    isDisabled: disabled,
+    isRequired: required,
+    validationState: error ? "invalid" : "valid",
+    placeholder: rest.placeholder || formatMessage("placeholder")
+  }, rest);
+  const state = (0, import_select2.useSelectState)(props);
+  const buttonRef = (0, import_react45.useRef)(null);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    descriptionProps,
+    errorMessageProps
+  } = (0, import_select.useSelect)(props, state, buttonRef);
+  const { buttonProps } = (0, import_button4.useButton)(__spreadValues({ isDisabled: disabled }, triggerProps), buttonRef);
+  const { focusProps, isFocusVisible } = (0, import_focus8.useFocusRing)();
+  const overlayRef = (0, import_react45.useRef)(null);
+  const { overlayProps: positionProps } = (0, import_overlays8.useOverlayPosition)({
+    targetRef: buttonRef,
     overlayRef,
-    placement: "bottom",
-    shouldFlip: false,
     isOpen: state.isOpen,
-    onClose: state.close
+    placement: "bottom left"
   });
-  const { labelProps, triggerProps, valueProps, menuProps } = (0, import_select2.useSelect)(props, state, triggerRef);
-  const { buttonProps } = (0, import_button3.useButton)(triggerProps, triggerRef);
-  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_react38.default.createElement(import_system.Box, null, /* @__PURE__ */ import_react38.default.createElement(Label2, __spreadProps(__spreadValues({}, labelProps), {
-    htmlFor: labelProps.id,
-    variant: labelVariant
-  }), required ? /* @__PURE__ */ import_react38.default.createElement(import_system.Box, {
-    as: "span",
-    display: "inline-flex",
-    alignItems: "center"
-  }, props.label, /* @__PURE__ */ import_react38.default.createElement(import_icons6.Required, {
-    size: 16,
-    fill: "error"
-  })) : props.label)), /* @__PURE__ */ import_react38.default.createElement(import_select2.HiddenSelect, {
+  const styles = (0, import_system32.useComponentStyles)("Select", { variant, size }, { parts: ["container", "button", "icon"] });
+  const stateProps = (0, import_system32.useStateProps)({
+    disabled,
+    error,
+    focusVisible: isFocusVisible,
+    expanded: state.isOpen
+  });
+  return /* @__PURE__ */ import_react45.default.createElement(FieldBase, {
+    variant,
+    size,
+    label: props.label,
+    labelProps: __spreadValues({ as: "span" }, labelProps),
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    stateProps,
+    disabled,
+    required
+  }, /* @__PURE__ */ import_react45.default.createElement(import_select.HiddenSelect, {
     state,
-    triggerRef,
+    triggerRef: buttonRef,
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ import_react38.default.createElement(import_system.Box, __spreadProps(__spreadValues({
-    as: "button"
-  }, (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_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_react38.default.createElement(import_icons6.ArrowUp, {
-    size: 16,
-    fill: "text"
-  }) : /* @__PURE__ */ import_react38.default.createElement(import_icons6.ArrowDown, {
-    size: 16,
-    fill: disabled ? "disabled" : "text"
-  })), 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"
+  }), /* @__PURE__ */ import_react45.default.createElement(import_system32.Box, __spreadValues(__spreadValues({
+    as: "button",
+    __baseCSS: {
+      display: "flex",
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%"
     },
-    ref: overlayRef,
-    isOpen: state.isOpen,
-    onClose: state.close
-  }), /* @__PURE__ */ import_react38.default.createElement(ListBox, __spreadProps(__spreadValues({
-    error
-  }, menuProps), {
-    state
-  }))), error && errorMessage && /* @__PURE__ */ import_react38.default.createElement(import_system.Box, {
-    as: "span",
-    display: "inline-flex",
-    alignItems: "center"
-  }, /* @__PURE__ */ import_react38.default.createElement(import_system.Box, {
-    as: import_icons6.Exclamation,
-    size: 16,
-    css: { color: "error" }
-  }), /* @__PURE__ */ import_react38.default.createElement(ValidationMessage, null, errorMessage)));
+    css: styles.button,
+    ref: buttonRef
+  }, (0, import_utils8.mergeProps)(buttonProps, focusProps)), stateProps), /* @__PURE__ */ import_react45.default.createElement(import_system32.Box, __spreadValues({
+    css: {
+      overflow: "hidden",
+      whiteSpace: "nowrap"
+    }
+  }, valueProps), state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react45.default.createElement(Chevron, {
+    css: styles.icon
+  })), /* @__PURE__ */ import_react45.default.createElement(Popover, __spreadValues({
+    open: state.isOpen,
+    onClose: state.close,
+    dismissable: true,
+    shouldCloseOnBlur: true,
+    minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
+    ref: overlayRef
+  }, positionProps), /* @__PURE__ */ import_react45.default.createElement(import_focus8.FocusScope, {
+    restoreFocus: true
+  }, /* @__PURE__ */ import_react45.default.createElement(import_overlays8.DismissButton, {
+    onDismiss: state.close
+  }), /* @__PURE__ */ import_react45.default.createElement(ListBox, __spreadValues({
+    state,
+    variant,
+    size
+  }, menuProps)), /* @__PURE__ */ import_react45.default.createElement(import_overlays8.DismissButton, {
+    onDismiss: state.close
+  }))));
 };
+Select.Option = import_collections2.Item;
+Select.Section = import_collections2.Section;
 
 // src/Slider/Slider.tsx
-var import_react39 = __toESM(require("react"));
-var Slider = (_a) => {
-  var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
-  return /* @__PURE__ */ import_react39.default.createElement(import_system.Box, __spreadValues({
+var import_react47 = __toESM(require("react"));
+var import_slider2 = require("@react-aria/slider");
+var import_slider3 = require("@react-stately/slider");
+var import_i18n3 = require("@react-aria/i18n");
+var import_system34 = require("@marigold/system");
+
+// src/Slider/Thumb.tsx
+var import_react46 = __toESM(require("react"));
+var import_slider = require("@react-aria/slider");
+var import_utils9 = require("@react-aria/utils");
+var import_system33 = require("@marigold/system");
+
+// src/VisuallyHidden/VisuallyHidden.tsx
+var import_visually_hidden = require("@react-aria/visually-hidden");
+
+// src/Slider/Thumb.tsx
+var import_focus9 = require("@react-aria/focus");
+var Thumb = (_a) => {
+  var _b = _a, { state, trackRef, styles } = _b, props = __objRest(_b, ["state", "trackRef", "styles"]);
+  const { disabled } = props;
+  const inputRef = import_react46.default.useRef(null);
+  const { isFocusVisible, focusProps, isFocused } = (0, import_focus9.useFocusRing)();
+  const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
+  const stateProps = (0, import_system33.useStateProps)({
+    focus: focused,
+    disabled
+  });
+  const { thumbProps, inputProps } = (0, import_slider.useSliderThumb)({
+    index: 0,
+    trackRef,
+    inputRef,
+    isDisabled: disabled
+  }, state);
+  (0, import_react46.useEffect)(() => {
+    state.setThumbEditable(0, !disabled);
+  }, [disabled, state]);
+  return /* @__PURE__ */ import_react46.default.createElement(import_system.Box, {
+    __baseCSS: {
+      position: "absolute",
+      top: 16,
+      transform: "translateX(-50%)",
+      left: `${state.getThumbPercent(0) * 100}%`
+    }
+  }, /* @__PURE__ */ import_react46.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({}, thumbProps), {
+    __baseCSS: styles
+  }), stateProps), /* @__PURE__ */ import_react46.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react46.default.createElement(import_system.Box, __spreadValues({
     as: "input",
     type: "range",
-    css: { verticalAlign: "middle" },
-    variant: `slider.${variant}`
-  }, props));
+    ref: inputRef
+  }, (0, import_utils9.mergeProps)(inputProps, focusProps))))));
+};
+
+// src/Slider/Slider.tsx
+var Slider = (_a) => {
+  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
+  const { formatOptions } = props;
+  const trackRef = (0, import_react47.useRef)(null);
+  const numberFormatter = (0, import_i18n3.useNumberFormatter)(formatOptions);
+  const state = (0, import_slider3.useSliderState)(__spreadProps(__spreadValues({}, props), { numberFormatter }));
+  const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)(__spreadValues({
+    label: props.children
+  }, props), state, trackRef);
+  const styles = (0, import_system34.useComponentStyles)("Slider", { variant, size }, { parts: ["track", "thumb", "label", "output"] });
+  return /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues({
+    __baseCSS: {
+      display: "flex",
+      flexDirection: "column",
+      touchAction: "none"
+    }
+  }, groupProps), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, {
+    __baseCSS: { display: "flex", alignSelf: "stretch" }
+  }, props.children && /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues({
+    as: "label",
+    __baseCSS: styles.label
+  }, labelProps), props.children), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+    as: "output"
+  }, outputProps), {
+    __baseCSS: { flex: "1 0 auto", textAlign: "end" },
+    css: styles.output
+  }), state.getThumbValueLabel(0))), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, trackProps), {
+    ref: trackRef,
+    __baseCSS: {
+      position: "relative",
+      height: 32,
+      width: "100%",
+      cursor: props.disabled ? "not-allowed" : "pointer"
+    }
+  }), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, {
+    __baseCSS: styles.track
+  }), /* @__PURE__ */ import_react47.default.createElement(Thumb, {
+    state,
+    trackRef,
+    disabled: props.disabled,
+    styles: styles.thumb
+  })));
+};
+
+// src/Stack/Stack.tsx
+var import_react48 = __toESM(require("react"));
+var ALIGNMENT3 = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    space = "none",
+    align = "left",
+    children
+  } = _b, props = __objRest(_b, [
+    "space",
+    "align",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: ALIGNMENT3[align],
+    p: "0",
+    css: { gap: space }
+  }), children);
 };
 
 // src/Switch/Switch.tsx
-var import_react40 = __toESM(require("react"));
-var import_focus9 = require("@react-aria/focus");
+var import_react49 = __toESM(require("react"));
+var import_focus10 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
-var import_visually_hidden3 = require("@react-aria/visually-hidden");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system20 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var Switch = (_a) => {
   var _b = _a, {
-    variant = "",
-    labelVariant = "above",
-    disabled
-  } = _b, props = __objRest(_b, [
+    variant,
+    size,
+    checked,
+    disabled,
+    readOnly,
+    defaultChecked
+  } = _b, rest = __objRest(_b, [
     "variant",
-    "labelVariant",
-    "disabled"
+    "size",
+    "checked",
+    "disabled",
+    "readOnly",
+    "defaultChecked"
   ]);
+  const ref = (0, import_react49.useRef)(null);
+  const props = __spreadValues({
+    isSelected: checked,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    defaultSelected: defaultChecked
+  }, rest);
   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_focus9.useFocusRing)();
-  return /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
-    as: Label2,
-    __baseCSS: {
-      userSelect: "none"
-    },
-    variant: labelVariant
-  }, props.children, /* @__PURE__ */ import_react40.default.createElement(import_visually_hidden3.VisuallyHidden, null, /* @__PURE__ */ import_react40.default.createElement("input", __spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+  const { isFocusVisible, focusProps } = (0, import_focus10.useFocusRing)();
+  const stateProps = (0, import_system35.useStateProps)({
+    checked: state.isSelected,
     disabled,
-    ref
-  }))), /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
-    as: "svg",
+    readOnly,
+    focus: isFocusVisible
+  });
+  const styles = (0, import_system35.useComponentStyles)("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
+  return /* @__PURE__ */ import_react49.default.createElement(import_system.Box, {
+    as: "label",
     __baseCSS: {
-      cursor: disabled ? "not-allowed" : "pointer",
-      width: 56,
-      height: 32
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "1ch",
+      position: "relative"
     },
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
-    as: "rect",
+    css: styles.container
+  }, /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+    as: "input",
+    ref,
+    css: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      zIndex: 1,
+      opacity: 1e-4,
+      cursor: inputProps.disabled ? "not-allowed" : "pointer"
+    }
+  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react49.default.createElement(import_system.Box, {
+    css: styles.label
+  }, props.children), /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
-      x: 4,
-      y: 4,
-      rx: 12,
+      position: "relative",
       width: 48,
-      height: 24
+      height: 24,
+      bg: "#dee2e6",
+      borderRadius: 20
     },
-    variant: (0, import_system20.conditional)(`switch.${variant}`, {
-      checked: state.isSelected,
-      disabled
-    })
-  }), /* @__PURE__ */ import_react40.default.createElement(import_system.Box, {
-    as: "circle",
+    css: styles.track
+  }, stateProps), /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
-      boxShadow: "1px 1px 4px rgba(0, 0, 0, 0.25)",
-      cx: state.isSelected ? 40 : 16,
-      cy: 16,
-      r: 11,
-      fill: disabled ? "gray20" : "gray00"
-    }
-  })));
-};
-
-// 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, {
-    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);
+      display: "block",
+      position: "absolute",
+      top: 1,
+      left: 0,
+      willChange: "transform",
+      transform: "translateX(1px)",
+      transition: "all 0.1s cubic-bezier(.7, 0, .3, 1)",
+      height: 22,
+      width: 22,
+      borderRadius: 9999,
+      bg: "#fff",
+      "&:checked": {
+        transform: "translateX(calc(47px - 100%))"
+      }
+    },
+    css: styles.thumb
+  }, stateProps))));
 };
 
 // src/Table/Table.tsx
-var import_react48 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_table6 = require("@react-aria/table");
 var import_table7 = require("@react-stately/table");
-var import_system26 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 
 // src/Table/TableCell.tsx
-var import_react42 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_checkbox4 = require("@react-aria/checkbox");
-var import_focus10 = require("@react-aria/focus");
+var import_focus11 = require("@react-aria/focus");
 var import_table = require("@react-aria/table");
-var import_utils6 = require("@react-aria/utils");
+var import_utils10 = require("@react-aria/utils");
 var import_toggle3 = require("@react-stately/toggle");
-var import_system21 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var TableCell = ({
   item: cell,
   state,
   isSelectionCell,
-  align = "left",
   css
 }) => {
-  const cellRef = (0, import_react42.useRef)(null);
+  const cellRef = (0, import_react50.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 inputRef = (0, import_react50.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({
+  const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
+  const stateProps = (0, import_system36.useStateProps)({ focus: isFocusVisible });
+  return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as: "td",
     ref: cellRef,
     __baseCSS: {
-      textAlign: isSelectionCell ? "center" : align
+      textAlign: isSelectionCell ? "center" : "left"
     },
     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));
+  }, (0, import_utils10.mergeProps)(gridCellProps, focusProps)), stateProps), isSelectionCell ? /* @__PURE__ */ import_react50.default.createElement("input", __spreadValues({}, inputProps)) : /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, cell.rendered));
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react44 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_checkbox5 = require("@react-aria/checkbox");
-var import_focus11 = require("@react-aria/focus");
+var import_focus12 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
-var import_utils7 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_toggle4 = require("@react-stately/toggle");
-var import_system24 = require("@marigold/system");
+var import_system39 = 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 import_react51 = __toESM(require("react"));
+var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 var Text = (_a) => {
   var _b = _a, {
     variant,
@@ -1584,11 +2023,11 @@ var Text = (_a) => {
     "outline",
     "children"
   ]);
-  const styles = (0, import_system22.useComponentStyles)("Text", {
+  const styles = (0, import_system37.useComponentStyles)("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ import_react43.default.createElement(import_system23.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react51.default.createElement(import_system38.Box, __spreadProps(__spreadValues({
     as: "p"
   }, props), {
     css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
@@ -1600,128 +2039,115 @@ var TableColumnHeader = ({
   item: column,
   state,
   isSelectionColumn,
-  align = "left",
   css
 }) => {
-  const ref = (0, import_react44.useRef)(null);
+  const ref = (0, import_react52.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 inputRef = (0, import_react52.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({
+  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
+  const stateProps = (0, import_system39.useStateProps)({ focus: isFocusVisible });
+  return /* @__PURE__ */ import_react52.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as: "th",
     ref,
-    __baseCSS: { textAlign: isSelectionColumn ? "center" : align },
+    __baseCSS: { textAlign: isSelectionColumn ? "center" : "left" },
     css
-  }, (0, import_utils7.mergeProps)(columnHeaderProps, focusProps)), stateProps), isSelectionColumn ? /* @__PURE__ */ import_react44.default.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
+  }, (0, import_utils11.mergeProps)(columnHeaderProps, focusProps)), stateProps), isSelectionColumn ? /* @__PURE__ */ import_react52.default.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
     ref: inputRef
-  })) : /* @__PURE__ */ import_react44.default.createElement(Text, {
+  })) : /* @__PURE__ */ import_react52.default.createElement(Text, {
     size: "xxsmall"
   }, column.rendered));
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react45 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var TableHeaderRow = ({
   item,
   state,
   children
 }) => {
-  const ref = (0, import_react45.useRef)(null);
+  const ref = (0, import_react53.useRef)(null);
   const { rowProps } = (0, import_table3.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react45.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ import_react53.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_react54 = __toESM(require("react"));
+var import_focus13 = 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 import_utils12 = require("@react-aria/utils");
+var import_system40 = require("@marigold/system");
 var TableRow = ({ item, state, children, css }) => {
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react54.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)({
+  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const stateProps = (0, import_system40.useStateProps)({
     focus: isFocusVisible,
     checked: isSelected
   });
-  return /* @__PURE__ */ import_react46.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react54.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as: "tr",
     ref,
     css
-  }, (0, import_utils8.mergeProps)(rowProps, focusProps)), stateProps), children);
+  }, (0, import_utils12.mergeProps)(rowProps, focusProps)), stateProps), children);
 };
 
 // src/Table/TableRowGroup.tsx
-var import_react47 = __toESM(require("react"));
+var import_react55 = __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);
+  return /* @__PURE__ */ import_react55.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"
-  ]);
+  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["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 ref = (0, import_react56.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({
+  const styles = (0, import_system41.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  return /* @__PURE__ */ import_react56.default.createElement(import_system.Box, __spreadValues({
     as: "table",
     ref,
     __baseCSS: styles.table
-  }, gridProps), /* @__PURE__ */ import_react48.default.createElement(TableRowGroup, {
+  }, gridProps), /* @__PURE__ */ import_react56.default.createElement(TableRowGroup, {
     as: "thead"
-  }, state.collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react48.default.createElement(TableHeaderRow, {
+  }, state.collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react56.default.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow,
     state
-  }, [...headerRow.childNodes].map((column) => /* @__PURE__ */ import_react48.default.createElement(TableColumnHeader, {
+  }, [...headerRow.childNodes].map((column) => /* @__PURE__ */ import_react56.default.createElement(TableColumnHeader, {
     key: column.key,
     item: column,
     state,
     isSelectionColumn: column.props.isSelectionCell,
-    align: alignHeader,
     css: styles.header
-  }))))), /* @__PURE__ */ import_react48.default.createElement(TableRowGroup, {
+  }))))), /* @__PURE__ */ import_react56.default.createElement(TableRowGroup, {
     as: "tbody"
-  }, [...state.collection.body.childNodes].map((row) => /* @__PURE__ */ import_react48.default.createElement(TableRow, {
+  }, [...state.collection.body.childNodes].map((row) => /* @__PURE__ */ import_react56.default.createElement(TableRow, {
     css: styles.row,
     key: row.key,
     item: row,
     state
-  }, [...row.childNodes].map((cell) => /* @__PURE__ */ import_react48.default.createElement(TableCell, {
+  }, [...row.childNodes].map((cell) => /* @__PURE__ */ import_react56.default.createElement(TableCell, {
     key: cell.key,
     item: cell,
     state,
     isSelectionCell: cell.props.isSelectionCell,
-    align,
     css: styles.cell
   }))))));
 };
@@ -1732,95 +2158,29 @@ Table.Header = import_table7.TableHeader;
 Table.Row = import_table7.Row;
 
 // src/TextArea/TextArea.tsx
-var import_react51 = __toESM(require("react"));
+var import_react57 = __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,
-    errorMessageProps
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "disabled",
-    "description",
-    "descriptionProps",
-    "error",
-    "errorMessage",
-    "errorMessageProps"
-  ]);
-  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
-  }), 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 import_system42 = require("@marigold/system");
+var import_interactions7 = require("@react-aria/interactions");
+var import_focus14 = require("@react-aria/focus");
 var TextArea = (_a) => {
   var _b = _a, {
     disabled,
     required,
     readOnly,
-    error
+    error,
+    variant,
+    size
   } = _b, props = __objRest(_b, [
     "disabled",
     "required",
     "readOnly",
-    "error"
+    "error",
+    "variant",
+    "size"
   ]);
   const { label, description, errorMessage } = props;
-  const ref = (0, import_react51.useRef)(null);
+  const ref = (0, import_react57.useRef)(null);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(__spreadValues({
     inputElementType: "textarea",
     isDisabled: disabled,
@@ -1828,17 +2188,17 @@ var TextArea = (_a) => {
     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)({
+  const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
+  const stateProps = (0, import_system42.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  const styles = (0, import_system28.useComponentStyles)("TextArea", {});
-  return /* @__PURE__ */ import_react51.default.createElement(FieldBase, {
+  const styles = (0, import_system42.useComponentStyles)("TextArea", { variant, size });
+  return /* @__PURE__ */ import_react57.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -1847,67 +2207,59 @@ var TextArea = (_a) => {
     error,
     errorMessage,
     errorMessageProps,
-    stateProps
-  }, /* @__PURE__ */ import_react51.default.createElement(import_system28.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    stateProps,
+    variant,
+    size
+  }, /* @__PURE__ */ import_react57.default.createElement(import_system42.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
-    variant: "textArea",
     css: styles,
     ref
   }, 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_react58 = __toESM(require("react"));
+var import_interactions8 = require("@react-aria/interactions");
+var import_focus15 = 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 import_system43 = require("@marigold/system");
 var TextField = (_a) => {
   var _b = _a, {
     disabled,
     required,
     readOnly,
-    error
+    error,
+    variant,
+    size
   } = _b, props = __objRest(_b, [
     "disabled",
     "required",
     "readOnly",
-    "error"
+    "error",
+    "variant",
+    "size"
   ]);
-  const { label, description, errorMessage } = props;
-  const ref = (0, import_react53.useRef)(null);
+  const { label, description, errorMessage, autoFocus } = props;
+  const ref = (0, import_react58.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)({
+  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)({
+    isTextInput: true,
+    autoFocus
+  });
+  const stateProps = (0, import_system43.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react53.default.createElement(FieldBase, {
+  return /* @__PURE__ */ import_react58.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -1916,17 +2268,21 @@ var TextField = (_a) => {
     error,
     errorMessage,
     errorMessageProps,
-    stateProps
-  }, /* @__PURE__ */ import_react53.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-    ref
+    stateProps,
+    variant,
+    size
+  }, /* @__PURE__ */ import_react58.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    ref,
+    variant,
+    size
   }, 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 import_react59 = __toESM(require("react"));
+var Tiles = import_react59.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({
+  return /* @__PURE__ */ import_react59.default.createElement(import_system.Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -1937,25 +2293,25 @@ var Tiles = import_react54.default.forwardRef(function Tiles2(_a, ref) {
 });
 
 // src/Tooltip/Tooltip.tsx
-var import_react56 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_utils9 = require("@react-aria/utils");
+var import_utils13 = require("@react-aria/utils");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react55 = __toESM(require("react"));
-var import_focus15 = require("@react-aria/focus");
+var import_react60 = __toESM(require("react"));
+var import_focus16 = require("@react-aria/focus");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
-var TooltipContext = import_react55.default.createContext({});
+var TooltipContext = import_react60.default.createContext({});
 var TooltipTrigger = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [trigger, tooltip] = import_react55.default.Children.toArray(children);
+  const [trigger, tooltip] = import_react60.default.Children.toArray(children);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
-  const tooltipTriggerRef = (0, import_react55.useRef)();
+  const tooltipTriggerRef = (0, import_react60.useRef)();
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)({}, state, tooltipTriggerRef);
-  return /* @__PURE__ */ import_react55.default.createElement(import_focus15.FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
+  return /* @__PURE__ */ import_react60.default.createElement(import_focus16.FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
     ref: tooltipTriggerRef
-  }), trigger, state.isOpen && /* @__PURE__ */ import_react55.default.createElement(TooltipContext.Provider, {
+  }), trigger, state.isOpen && /* @__PURE__ */ import_react60.default.createElement(TooltipContext.Provider, {
     value: __spreadValues({
       state
     }, tooltipProps)
@@ -1971,64 +2327,16 @@ var Tooltip = (_a) => {
     "variant",
     "children"
   ]);
-  const _a2 = (0, import_react56.useContext)(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
-  const mergedProps = (0, import_utils9.mergeProps)(props, tooltipProviderProps);
+  const _a2 = (0, import_react61.useContext)(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
+  const mergedProps = (0, import_utils13.mergeProps)(props, tooltipProviderProps);
   const { tooltipProps } = (0, import_tooltip3.useTooltip)(mergedProps, state);
-  return /* @__PURE__ */ import_react56.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react61.default.createElement(import_system.Box, __spreadValues({
     position: "relative"
-  }, tooltipProps), /* @__PURE__ */ import_react56.default.createElement(import_system.Box, __spreadValues({
+  }, tooltipProps), /* @__PURE__ */ import_react61.default.createElement(import_system.Box, __spreadValues({
     position: "absolute",
     variant: `tooltip.${variant}`
   }, mergedProps), children));
 };
-
-// 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, {
-    contentType = "content",
-    size = "medium",
-    align = "left",
-    alignContainer = "left",
-    children
-  } = _b, props = __objRest(_b, [
-    "contentType",
-    "size",
-    "align",
-    "alignContainer",
-    "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_collections2 = require("@react-stately/collections");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Aside,
@@ -2053,18 +2361,16 @@ var import_collections2 = require("@react-stately/collections");
   Image,
   Inline,
   Input,
-  Item,
   Label,
-  LabelBase,
   Link,
   MarigoldProvider,
   Menu,
   Message,
+  NumberField,
   Overlay,
   Popover,
   Radio,
   SSRProvider,
-  Section,
   Select,
   Slider,
   Stack,
@@ -2078,9 +2384,8 @@ var import_collections2 = require("@react-stately/collections");
   Tooltip,
   TooltipContext,
   TooltipTrigger,
-  ValidationMessage,
+  Underlay,
   VisuallyHidden,
   useCheckboxGroupContext,
-  useDialogButtonProps,
   useTheme
 });