@marigold/components 0.7.0 → 0.8.0

package/dist/index.mjs

@@ -80,10 +80,11 @@ var Stack = (_a) => {
     "children"
   ]);
   return /* @__PURE__ */ React2.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    __baseCSS: { gap: space },
     display: "flex",
     flexDirection: "column",
-    alignItems: ALIGNMENT2[align]
+    alignItems: ALIGNMENT2[align],
+    p: "0",
+    css: { gap: space }
   }), children);
 };
 
@@ -222,8 +223,44 @@ var Button = forwardRef((_a, ref) => {
   }), children);
 });
 
-// src/Card/Card.tsx
+// src/Breakout/Breakout.tsx
 import React8 from "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__ */ React8.createElement(Box, __spreadValues({
+    alignItems,
+    justifyContent,
+    width: "100%",
+    display: verticalAlign || horizontalAlign ? "flex" : "block",
+    css: {
+      gridColumn: "1 / -1"
+    }
+  }, props), children);
+};
+
+// src/Card/Card.tsx
+import React9 from "react";
 var Card = (_a) => {
   var _b = _a, {
     variant = "",
@@ -238,19 +275,45 @@ var Card = (_a) => {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ React8.createElement(Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React9.createElement(Box, __spreadProps(__spreadValues({}, props), {
     variant: `card.${variant}`,
     maxWidth: width,
     className
-  }), title && /* @__PURE__ */ React8.createElement(Box, {
+  }), title && /* @__PURE__ */ React9.createElement(Box, {
     as: "h2",
     variant: "text.h2",
     pb: "small"
   }, title), children);
 };
 
+// src/Center/Center.tsx
+import React10 from "react";
+var Center = (_a) => {
+  var _b = _a, {
+    maxWidth,
+    space = "none",
+    children
+  } = _b, props = __objRest(_b, [
+    "maxWidth",
+    "space",
+    "children"
+  ]);
+  return /* @__PURE__ */ React10.createElement(Box, __spreadValues({
+    css: {
+      boxSizing: "content-box",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      marginInline: "auto",
+      maxInlineSize: maxWidth,
+      gap: space
+    }
+  }, props), children);
+};
+
 // src/Checkbox/Checkbox.tsx
-import React12 from "react";
+import React14 from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useCheckbox } from "@react-aria/checkbox";
@@ -258,7 +321,7 @@ import { useToggleState } from "@react-stately/toggle";
 import { Exclamation } from "@marigold/icons";
 
 // src/Checkbox/CheckboxIcon.tsx
-import React9 from "react";
+import React11 from "react";
 import { conditional, SVG } from "@marigold/system";
 var CheckboxIcon = ({
   variant = "",
@@ -273,13 +336,13 @@ var CheckboxIcon = ({
     checked,
     error
   };
-  return /* @__PURE__ */ React9.createElement(SVG, {
+  return /* @__PURE__ */ React11.createElement(SVG, {
     width: "16",
     height: "32",
     viewBox: "0 0 16 32",
     fill: "none",
     "aria-hidden": "true"
-  }, /* @__PURE__ */ React9.createElement(Box, {
+  }, /* @__PURE__ */ React11.createElement(Box, {
     as: "rect",
     x: "0.5",
     y: "8.5",
@@ -287,13 +350,13 @@ var CheckboxIcon = ({
     height: "15px",
     rx: "1.5",
     variant: conditional(`checkbox.${variant}`, conditionalStates)
-  }), checked && indeterminated && /* @__PURE__ */ React9.createElement(Box, {
+  }), checked && indeterminated && /* @__PURE__ */ React11.createElement(Box, {
     __baseCSS: { fill: "gray00" },
     as: "path",
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M13.5 17.0402H2.5V15.4688H13.5V17.0402V17.0402Z"
-  }), checked && !indeterminated && /* @__PURE__ */ React9.createElement(Box, {
+  }), checked && !indeterminated && /* @__PURE__ */ React11.createElement(Box, {
     __baseCSS: { fill: "gray00" },
     as: "path",
     fillRule: "evenodd",
@@ -303,7 +366,7 @@ var CheckboxIcon = ({
 };
 
 // src/Label/Label.tsx
-import React10 from "react";
+import React12 from "react";
 import { Required } from "@marigold/icons";
 var LabelBase = (_a) => {
   var _b = _a, {
@@ -317,7 +380,7 @@ var LabelBase = (_a) => {
     "color",
     "children"
   ]);
-  return /* @__PURE__ */ React10.createElement(Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React12.createElement(Box, __spreadProps(__spreadValues({}, props), {
     as: "label",
     __baseCSS: { color },
     variant: `label.${variant}`
@@ -331,18 +394,18 @@ var Label = (_a) => {
     "required",
     "children"
   ]);
-  return required ? /* @__PURE__ */ React10.createElement(Box, {
+  return required ? /* @__PURE__ */ React12.createElement(Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ React10.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ React10.createElement(Required, {
+  }, /* @__PURE__ */ React12.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ React12.createElement(Required, {
     size: 16,
     fill: "error"
-  })) : /* @__PURE__ */ React10.createElement(LabelBase, __spreadValues({}, props), children);
+  })) : /* @__PURE__ */ React12.createElement(LabelBase, __spreadValues({}, props), children);
 };
 
 // src/ValidationMessage/ValidationMessage.tsx
-import React11 from "react";
+import React13 from "react";
 var ValidationMessage = (_a) => {
   var _b = _a, {
     variant = "error",
@@ -353,7 +416,7 @@ var ValidationMessage = (_a) => {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ React11.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React13.createElement(Box, __spreadValues({
     as: "span",
     display: "flex",
     alignItems: "center",
@@ -372,15 +435,15 @@ var CheckboxInput = (_a) => {
     "indeterminated"
   ]);
   const state = useToggleState(props);
-  const ref = React12.useRef(null);
+  const ref = React14.useRef(null);
   const { inputProps } = useCheckbox(props, state, ref);
   const { focusProps } = useFocusRing();
   const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ React12.createElement(Box, {
+  return /* @__PURE__ */ React14.createElement(Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ React12.createElement(VisuallyHidden, null, /* @__PURE__ */ React12.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+  }, /* @__PURE__ */ React14.createElement(VisuallyHidden, null, /* @__PURE__ */ React14.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     ref
-  }), restProps))), /* @__PURE__ */ React12.createElement(CheckboxIcon, {
+  }), restProps))), /* @__PURE__ */ React14.createElement(CheckboxIcon, {
     checked: props.checked,
     variant: props.variant,
     disabled: props.disabled,
@@ -398,7 +461,7 @@ var Checkbox = (_a) => {
     "labelVariant",
     "errorMessage"
   ]);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Box, {
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Box, {
     as: Label,
     __baseCSS: {
       ":hover": { cursor: props.disabled ? "not-allowed" : "pointer" }
@@ -407,118 +470,58 @@ var Checkbox = (_a) => {
     required,
     variant: `label.${labelVariant}`,
     color: props.disabled ? "disabled" : "text"
-  }, /* @__PURE__ */ React12.createElement(CheckboxInput, __spreadValues({
+  }, /* @__PURE__ */ React14.createElement(CheckboxInput, __spreadValues({
     error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React12.createElement(ValidationMessage, null, /* @__PURE__ */ React12.createElement(Exclamation, {
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React14.createElement(ValidationMessage, null, /* @__PURE__ */ React14.createElement(Exclamation, {
     size: 16
   }), errorMessage));
 };
 
-// src/Column/Column.tsx
-import React13 from "react";
-var transform = (width) => {
-  if (Array.isArray(width)) {
-    return width.map((v) => `${v / 12 * 100}%`);
-  }
-  return `${width / 12 * 100}%`;
-};
-var Column = (_a) => {
-  var _b = _a, {
-    width = 12,
-    children
-  } = _b, props = __objRest(_b, [
-    "width",
-    "children"
-  ]);
-  return /* @__PURE__ */ React13.createElement(Box, __spreadProps(__spreadValues({}, props), {
-    width: transform(width)
-  }), children);
-};
-
 // src/Columns/Columns.tsx
-import React14, { Children as Children2 } from "react";
-import { useTheme } from "@marigold/system";
-
-// src/utils/flatten-children.ts
-import {
-  Children,
-  isValidElement,
-  cloneElement
-} from "react";
-import { isFragment } from "react-is";
-var flattenChildren = (children, depth = 0, keys = []) => Children.toArray(children).reduce((acc, node) => {
-  if (isFragment(node)) {
-    acc.push.apply(acc, flattenChildren(node.props.children, depth + 1, keys.concat(node.key)));
-  } else {
-    if (isValidElement(node)) {
-      acc.push(cloneElement(node, {
-        key: keys.concat(String(node.key)).join(".")
-      }));
-    } else if (typeof node === "string" || typeof node === "number") {
-      acc.push(node);
-    }
-  }
-  return acc;
-}, []);
-
-// src/Columns/Columns.tsx
-var useAlignment = (direction) => {
-  switch (direction) {
-    case "right":
-      return "flex-end";
-    case "bottom":
-      return "flex-end";
-    case "center":
-      return "center";
-  }
-  return "flex-start";
-};
+import React15, { Children } from "react";
 var Columns = (_a) => {
   var _b = _a, {
     space = "none",
-    horizontalAlign = "left",
-    verticalAlign = "top",
-    className,
+    columns,
+    collapseAt = "40em",
     children
   } = _b, props = __objRest(_b, [
     "space",
-    "horizontalAlign",
-    "verticalAlign",
-    "className",
+    "columns",
+    "collapseAt",
     "children"
   ]);
-  const justifyContent = useAlignment(horizontalAlign);
-  const alignItems = useAlignment(verticalAlign);
-  const { css } = useTheme();
-  const spaceObject = css({ space });
-  const spaceValue = Object.values(spaceObject)[0];
-  return /* @__PURE__ */ React14.createElement(Box, {
-    p: space,
-    display: "flex",
-    className
-  }, /* @__PURE__ */ React14.createElement(Box, __spreadValues({
-    width: `calc(100% + ${spaceValue}px)`,
-    m: `${-spaceValue / 2}px`,
+  if (Children.count(children) !== columns.length) {
+    throw new Error(`Columns: expected ${columns.length} children, got ${Children.count(children)}`);
+  }
+  const getColumnWidths = columns.map((column, index) => {
+    return {
+      [`> :nth-of-type(${index + 1})`]: {
+        flexGrow: column
+      }
+    };
+  });
+  return /* @__PURE__ */ React15.createElement(Box, __spreadValues({
     display: "flex",
-    flexWrap: "wrap",
-    alignItems,
-    justifyContent
-  }, props), Children2.map(flattenChildren(children), (child) => {
-    return React14.cloneElement(child, {}, /* @__PURE__ */ React14.createElement(Box, {
-      css: { p: `${spaceValue / 2}px` }
-    }, child.props.children));
-  })));
+    css: Object.assign({
+      flexWrap: "wrap",
+      gap: space,
+      "> *": {
+        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
+      }
+    }, ...getColumnWidths)
+  }, props), children);
 };
 
 // src/Dialog/Dialog.tsx
-import React17 from "react";
+import React18 from "react";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 import { OverlayContainer } from "@react-aria/overlays";
 import { useButton as useButton2 } from "@react-aria/button";
 import { Close } from "@marigold/icons";
 
 // src/Text/Text.tsx
-import React15, { forwardRef as forwardRef2 } from "react";
+import React16, { forwardRef as forwardRef2 } from "react";
 var Text = forwardRef2((_a, ref) => {
   var _b = _a, {
     as = "span",
@@ -541,7 +544,7 @@ var Text = forwardRef2((_a, ref) => {
     "outline",
     "userSelect"
   ]);
-  return /* @__PURE__ */ React15.createElement(Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React16.createElement(Box, __spreadProps(__spreadValues({}, props), {
     as,
     variant: `text.${variant}`,
     css: {
@@ -557,7 +560,7 @@ var Text = forwardRef2((_a, ref) => {
 });
 
 // src/Dialog/ModalDialog.tsx
-import React16 from "react";
+import React17 from "react";
 import {
   useOverlay,
   usePreventScroll,
@@ -576,12 +579,12 @@ var ModalDialog = (_a) => {
     "children"
   ]);
   const _a2 = props, { isDismissable, isOpen, onClose } = _a2, restProps = __objRest(_a2, ["isDismissable", "isOpen", "onClose"]);
-  const ref = React16.useRef();
+  const ref = React17.useRef();
   const { overlayProps, underlayProps } = useOverlay({ isDismissable, isOpen, onClose }, ref);
   usePreventScroll();
   const { modalProps } = useModal();
   const { dialogProps } = useDialog(props, ref);
-  return /* @__PURE__ */ React16.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React17.createElement(Box, __spreadValues({
     __baseCSS: {
       display: "grid",
       placeItems: "center",
@@ -593,11 +596,11 @@ var ModalDialog = (_a) => {
       right: 0
     },
     variant: `dialog.${backdropVariant}`
-  }, underlayProps), /* @__PURE__ */ React16.createElement(FocusScope, {
+  }, underlayProps), /* @__PURE__ */ React17.createElement(FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, /* @__PURE__ */ React16.createElement(Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
+  }, /* @__PURE__ */ React17.createElement(Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, overlayProps), dialogProps), modalProps), {
     ref,
     variant: variant ? `dialog.${variant}` : `dialog`
   }), restProps), children)));
@@ -622,17 +625,17 @@ var Dialog = (_a) => {
     "title",
     "variant"
   ]);
-  const closeButtonRef = React17.useRef();
+  const closeButtonRef = React18.useRef();
   const { buttonProps: closeButtonProps } = useButton2({
     onPress: () => close()
   }, closeButtonRef);
-  return /* @__PURE__ */ React17.createElement(OverlayContainer, null, /* @__PURE__ */ React17.createElement(ModalDialog, __spreadValues({
+  return /* @__PURE__ */ React18.createElement(OverlayContainer, null, /* @__PURE__ */ React18.createElement(ModalDialog, __spreadValues({
     variant,
     backdropVariant,
     isOpen,
     onClose: close,
     isDismissable: true
-  }, props), /* @__PURE__ */ React17.createElement(Box, {
+  }, props), /* @__PURE__ */ React18.createElement(Box, {
     __baseCSS: {
       display: "flex",
       justifyContent: "space-between",
@@ -641,12 +644,12 @@ var Dialog = (_a) => {
       pb: "large"
     },
     className
-  }, /* @__PURE__ */ React17.createElement(Box, {
+  }, /* @__PURE__ */ React18.createElement(Box, {
     pt: "medium"
-  }, title && /* @__PURE__ */ React17.createElement(Text, {
+  }, title && /* @__PURE__ */ React18.createElement(Text, {
     as: "h4",
     variant: "headline4"
-  }, title), children), /* @__PURE__ */ React17.createElement(Box, {
+  }, title), children), /* @__PURE__ */ React18.createElement(Box, {
     __baseCSS: {
       display: "flex",
       justifyContent: "flex-end",
@@ -654,7 +657,7 @@ var Dialog = (_a) => {
       paddingTop: "xsmall",
       paddingX: "xsmall"
     }
-  }, /* @__PURE__ */ React17.createElement(Box, __spreadProps(__spreadValues({
+  }, /* @__PURE__ */ React18.createElement(Box, __spreadProps(__spreadValues({
     as: Button,
     __baseCSS: {
       color: "text",
@@ -672,13 +675,13 @@ var Dialog = (_a) => {
     }
   }, closeButtonProps), {
     ref: closeButtonRef
-  }), /* @__PURE__ */ React17.createElement(Close, {
+  }), /* @__PURE__ */ React18.createElement(Close, {
     size: 16
   }))))));
 };
 var useDialogButtonProps = () => {
   const state = useOverlayTriggerState({});
-  const openButtonRef = React17.useRef();
+  const openButtonRef = React18.useRef();
   const { buttonProps: openButtonProps } = useButton2({
     onPress: () => state.open()
   }, openButtonRef);
@@ -690,19 +693,19 @@ var useDialogButtonProps = () => {
 };
 
 // src/Divider/Divider.tsx
-import React18 from "react";
+import React19 from "react";
 import { useSeparator } from "@react-aria/separator";
 var Divider = (_a) => {
   var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
   const { separatorProps } = useSeparator(props);
-  return /* @__PURE__ */ React18.createElement(Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React19.createElement(Box, __spreadValues(__spreadValues({
     __baseCSS: { width: "100%", height: "1px", m: "none", bg: "text" },
     variant: `divider.${variant}`
   }, props), separatorProps));
 };
 
 // src/Field/Field.tsx
-import React19, { useRef } from "react";
+import React20, { useRef } from "react";
 import { useTextField } from "@react-aria/textfield";
 import { Exclamation as Exclamation2 } from "@marigold/icons";
 var Field = (_a) => {
@@ -725,18 +728,18 @@ var Field = (_a) => {
   ]);
   const ref = useRef(null);
   const { labelProps, inputProps, errorMessageProps } = useTextField(props, ref);
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(Label, __spreadValues({
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Label, __spreadValues({
     variant: labelVariant,
     htmlFor,
     required
-  }, labelProps), props.label), /* @__PURE__ */ React19.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
+  }, labelProps), props.label), /* @__PURE__ */ React20.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
     as: "input",
     type,
     id: htmlFor,
     variant: `input.${variant}`
   }, inputProps), {
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ React19.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React19.createElement(Exclamation2, {
+  }), props)), error && errorMessage && /* @__PURE__ */ React20.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React20.createElement(Exclamation2, {
     size: 16
   }), errorMessage));
 };
@@ -745,26 +748,27 @@ var Field = (_a) => {
 import { VisuallyHidden as VisuallyHidden2 } from "@react-aria/visually-hidden";
 
 // src/Image/Image.tsx
-import React20 from "react";
+import React21 from "react";
 var Image = (_a) => {
   var _b = _a, {
     variant = "fullWidth"
   } = _b, props = __objRest(_b, [
     "variant"
   ]);
-  return /* @__PURE__ */ React20.createElement(Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React21.createElement(Box, __spreadProps(__spreadValues({}, props), {
     as: "img",
     variant: `image.${variant}`
   }));
 };
 
 // src/Link/Link.tsx
-import React21, { useRef as useRef2 } from "react";
+import React22, { useRef as useRef2 } from "react";
 import { useLink } from "@react-aria/link";
+import { conditional as conditional2 } from "@marigold/system";
 var Link = (_a) => {
   var _b = _a, {
     as = "a",
-    variant = "link",
+    variant = "",
     children,
     disabled
   } = _b, props = __objRest(_b, [
@@ -773,20 +777,21 @@ var Link = (_a) => {
     "children",
     "disabled"
   ]);
-  const ref = useRef2();
+  const ref = useRef2(null);
   const { linkProps } = useLink(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
   }), ref);
-  return /* @__PURE__ */ React21.createElement(Text, __spreadProps(__spreadValues(__spreadValues({}, props), linkProps), {
+  return /* @__PURE__ */ React22.createElement(Box, __spreadValues(__spreadValues({
     as,
-    variant,
+    variant: conditional2(`link.${variant}`, { disabled }),
+    css: { cursor: disabled ? "default" : "pointer" },
     ref
-  }), children);
+  }, props), linkProps), children);
 };
 
 // src/Menu/Menu.tsx
-import React22 from "react";
+import React23 from "react";
 var Menu = (_a) => {
   var _b = _a, {
     variant = "default",
@@ -801,12 +806,12 @@ var Menu = (_a) => {
     "show",
     "children"
   ]);
-  return /* @__PURE__ */ React22.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React23.createElement(Box, __spreadValues({
     variant: `menu.${variant}`
-  }, props), /* @__PURE__ */ React22.createElement(Button, {
+  }, props), /* @__PURE__ */ React23.createElement(Button, {
     onClick,
     variant: "menu"
-  }, label), show ? /* @__PURE__ */ React22.createElement(Box, {
+  }, label), show ? /* @__PURE__ */ React23.createElement(Box, {
     display: "block",
     position: "absolute",
     minWidth: "120px",
@@ -815,7 +820,7 @@ var Menu = (_a) => {
 };
 
 // src/MenuItem/MenuItem.tsx
-import React23 from "react";
+import React24 from "react";
 var MenuItem = (_a) => {
   var _b = _a, {
     variant = "default",
@@ -824,15 +829,15 @@ var MenuItem = (_a) => {
     "variant",
     "children"
   ]);
-  return /* @__PURE__ */ React23.createElement(Box, {
+  return /* @__PURE__ */ React24.createElement(Box, {
     variant: `menuItem.${variant}`
-  }, /* @__PURE__ */ React23.createElement(Link, __spreadValues({
+  }, /* @__PURE__ */ React24.createElement(Link, __spreadValues({
     variant: "menuItemLink"
   }, props), children));
 };
 
 // src/Message/Message.tsx
-import React24 from "react";
+import React25 from "react";
 import { Exclamation as Exclamation3, Info, Notification } from "@marigold/icons";
 var Message = (_a) => {
   var _b = _a, {
@@ -846,62 +851,62 @@ var Message = (_a) => {
     "className",
     "children"
   ]);
-  var icon = /* @__PURE__ */ React24.createElement(Info, null);
+  var icon = /* @__PURE__ */ React25.createElement(Info, null);
   if (variant === "warning") {
-    icon = /* @__PURE__ */ React24.createElement(Notification, null);
+    icon = /* @__PURE__ */ React25.createElement(Notification, null);
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ React24.createElement(Exclamation3, null);
+    icon = /* @__PURE__ */ React25.createElement(Exclamation3, null);
   }
-  return /* @__PURE__ */ React24.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React25.createElement(Box, __spreadValues({
     display: "inline-block",
     variant: `message.${variant}`,
     className
-  }, props), /* @__PURE__ */ React24.createElement(Box, {
+  }, props), /* @__PURE__ */ React25.createElement(Box, {
     display: "flex",
     alignItems: "center",
     variant: "message.title"
-  }, icon, /* @__PURE__ */ React24.createElement(Text, {
+  }, icon, /* @__PURE__ */ React25.createElement(Text, {
     as: "h4",
     variant: "headline4"
-  }, messageTitle)), /* @__PURE__ */ React24.createElement(Box, {
+  }, messageTitle)), /* @__PURE__ */ React25.createElement(Box, {
     css: { color: "black" }
   }, children));
 };
 
 // src/Provider/index.ts
-import { useTheme as useTheme3, ThemeProvider as ThemeProvider2 } from "@marigold/system";
+import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React25 from "react";
+import React26 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
   ThemeProvider,
-  useTheme as useTheme2,
+  useTheme,
   __defaultTheme
 } from "@marigold/system";
 function MarigoldProvider({
   theme,
   children
 }) {
-  const outer = useTheme2();
+  const outer = useTheme();
   const isTopLevel = outer.theme === __defaultTheme;
-  return /* @__PURE__ */ React25.createElement(ThemeProvider, {
+  return /* @__PURE__ */ React26.createElement(ThemeProvider, {
     theme
-  }, isTopLevel ? /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Global, null), /* @__PURE__ */ React25.createElement(OverlayProvider, null, children)) : children);
+  }, isTopLevel ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Global, null), /* @__PURE__ */ React26.createElement(OverlayProvider, null, children)) : children);
 }
 
 // src/Radio/Radio.tsx
-import React27 from "react";
+import React28 from "react";
 import { Exclamation as Exclamation4 } from "@marigold/icons";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { VisuallyHidden as VisuallyHidden3 } from "@react-aria/visually-hidden";
 
 // src/Radio/RadioIcon.tsx
-import React26 from "react";
-import { conditional as conditional2, SVG as SVG2 } from "@marigold/system";
+import React27 from "react";
+import { conditional as conditional3, SVG as SVG2 } from "@marigold/system";
 var RadioIcon = ({
   variant = "",
   checked = false,
@@ -914,19 +919,19 @@ var RadioIcon = ({
     checked,
     error
   };
-  return /* @__PURE__ */ React26.createElement(SVG2, {
+  return /* @__PURE__ */ React27.createElement(SVG2, {
     width: "16",
     height: "32",
     viewBox: "0 0 16 32",
     fill: "none",
     "aria-hidden": "true"
-  }, /* @__PURE__ */ React26.createElement(Box, {
-    variant: conditional2(`radio.${variant}`, conditionalStates),
+  }, /* @__PURE__ */ React27.createElement(Box, {
+    variant: conditional3(`radio.${variant}`, conditionalStates),
     as: "circle",
     cx: "8",
     cy: "16",
     r: "7.5"
-  }), checked && /* @__PURE__ */ React26.createElement("circle", {
+  }), checked && /* @__PURE__ */ React27.createElement("circle", {
     fill: "white",
     cx: "8",
     cy: "16",
@@ -939,12 +944,12 @@ var RadioInput = (_a) => {
   var _b = _a, { error } = _b, props = __objRest(_b, ["error"]);
   const { focusProps } = useFocusRing2();
   const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ React27.createElement(Box, {
+  return /* @__PURE__ */ React28.createElement(Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ React27.createElement(VisuallyHidden3, null, /* @__PURE__ */ React27.createElement("input", __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React28.createElement(VisuallyHidden3, null, /* @__PURE__ */ React28.createElement("input", __spreadValues(__spreadValues({
     type: "radio",
     disabled: props.disabled
-  }, focusProps), restProps))), /* @__PURE__ */ React27.createElement(RadioIcon, {
+  }, focusProps), restProps))), /* @__PURE__ */ React28.createElement(RadioIcon, {
     variant: props.variant,
     disabled: props.disabled,
     checked: props.checked,
@@ -961,22 +966,22 @@ var Radio = (_a) => {
     "labelVariant",
     "errorMessage"
   ]);
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Box, {
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Box, {
     as: Label,
     htmlFor: props.id,
     required,
     variant: `label.${labelVariant}`,
     css: props.disabled ? { color: "disabled", ":hover": { cursor: "not-allowed" } } : { color: "text", ":hover": { cursor: "pointer" } }
-  }, /* @__PURE__ */ React27.createElement(Box, __spreadValues({
+  }, /* @__PURE__ */ React28.createElement(Box, __spreadValues({
     as: RadioInput,
     error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React27.createElement(ValidationMessage, null, /* @__PURE__ */ React27.createElement(Exclamation4, {
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ React28.createElement(ValidationMessage, null, /* @__PURE__ */ React28.createElement(Exclamation4, {
     size: 16
   }), errorMessage));
 };
 
 // src/Select/Select.tsx
-import React32, { useRef as useRef5 } from "react";
+import React33, { useRef as useRef5 } from "react";
 import { useSelectState } from "@react-stately/select";
 import { useButton as useButton3 } from "@react-aria/button";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
@@ -987,11 +992,11 @@ import { useOverlayTrigger, useOverlayPosition } from "@react-aria/overlays";
 import { ArrowDown, ArrowUp, Exclamation as Exclamation5, Required as Required2 } from "@marigold/icons";
 
 // src/Select/ListBox.tsx
-import React30, { useRef as useRef4 } from "react";
+import React31, { useRef as useRef4 } from "react";
 import { useListBox } from "@react-aria/listbox";
 
 // src/Select/Option.tsx
-import React28, { useEffect, useRef as useRef3, useState } from "react";
+import React29, { useEffect, useRef as useRef3, useState } from "react";
 import { useOption } from "@react-aria/listbox";
 var Option = ({ item, state }) => {
   const ref = useRef3(null);
@@ -1006,7 +1011,7 @@ var Option = ({ item, state }) => {
       }
     }
   }, [state.disabledKeys, item.key]);
-  return /* @__PURE__ */ React28.createElement(Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React29.createElement(Box, __spreadProps(__spreadValues({
     as: "li"
   }, optionProps), {
     ref,
@@ -1015,26 +1020,26 @@ var Option = ({ item, state }) => {
 };
 
 // src/Select/ListBoxSection.tsx
-import React29 from "react";
+import React30 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
 var ListBoxSection = ({ section, state }) => {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ React29.createElement(Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React30.createElement(Box, __spreadProps(__spreadValues({
     as: "li"
   }, itemProps), {
     css: {
       cursor: "not-allowed"
     }
-  }), section.rendered && /* @__PURE__ */ React29.createElement(Box, __spreadProps(__spreadValues({
+  }), section.rendered && /* @__PURE__ */ React30.createElement(Box, __spreadProps(__spreadValues({
     as: "span"
   }, headingProps), {
     variant: "select.section"
-  }), section.rendered), /* @__PURE__ */ React29.createElement(Box, __spreadValues({
+  }), section.rendered), /* @__PURE__ */ React30.createElement(Box, __spreadValues({
     as: "ul"
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ React29.createElement(Option, {
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ React30.createElement(Option, {
     key: node.key,
     item: node,
     state
@@ -1046,7 +1051,7 @@ var ListBox = (props) => {
   const ref = useRef4(null);
   const { state, error } = props;
   const { listBoxProps } = useListBox(props, state, ref);
-  return /* @__PURE__ */ React30.createElement(Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React31.createElement(Box, __spreadProps(__spreadValues({
     as: "ul",
     p: "none",
     css: {
@@ -1055,11 +1060,11 @@ var ListBox = (props) => {
   }, listBoxProps), {
     variant: error ? "select.listbox.error" : "select.listbox",
     ref
-  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ React30.createElement(ListBoxSection, {
+  }), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ React31.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
-  }) : /* @__PURE__ */ React30.createElement(Option, {
+  }) : /* @__PURE__ */ React31.createElement(Option, {
     key: item.key,
     item,
     state
@@ -1067,7 +1072,7 @@ var ListBox = (props) => {
 };
 
 // src/Select/Popover.tsx
-import React31, { forwardRef as forwardRef3 } from "react";
+import React32, { forwardRef as forwardRef3 } from "react";
 import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import {
   DismissButton,
@@ -1085,12 +1090,12 @@ var Popover = forwardRef3((_a, ref) => {
     isDismissable: true
   }, ref);
   const { modalProps } = useModal2();
-  return /* @__PURE__ */ React31.createElement(OverlayContainer2, null, /* @__PURE__ */ React31.createElement(FocusScope2, {
+  return /* @__PURE__ */ React32.createElement(OverlayContainer2, null, /* @__PURE__ */ React32.createElement(FocusScope2, {
     restoreFocus: true
-  }, /* @__PURE__ */ React31.createElement(Box, __spreadProps(__spreadValues({}, mergeProps(overlayProps, otherProps, modalProps)), {
+  }, /* @__PURE__ */ React32.createElement(Box, __spreadProps(__spreadValues({}, mergeProps(overlayProps, otherProps, modalProps)), {
     className,
     ref
-  }), children, /* @__PURE__ */ React31.createElement(DismissButton, {
+  }), children, /* @__PURE__ */ React32.createElement(DismissButton, {
     onDismiss: onClose
   }))));
 });
@@ -1132,44 +1137,44 @@ var Select = (_a) => {
   const { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, triggerRef);
   const { buttonProps } = useButton3(triggerProps, triggerRef);
   const { focusProps } = useFocusRing3();
-  return /* @__PURE__ */ React32.createElement(Box, {
+  return /* @__PURE__ */ React33.createElement(Box, {
     position: "relative",
     display: "inline-block",
     width: width && width
-  }, props.label && /* @__PURE__ */ React32.createElement(Box, null, /* @__PURE__ */ React32.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+  }, props.label && /* @__PURE__ */ React33.createElement(Box, null, /* @__PURE__ */ React33.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
     htmlFor: labelProps.id,
     variant: labelVariant
-  }), required ? /* @__PURE__ */ React32.createElement(Box, {
+  }), required ? /* @__PURE__ */ React33.createElement(Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, props.label, /* @__PURE__ */ React32.createElement(Required2, {
+  }, props.label, /* @__PURE__ */ React33.createElement(Required2, {
     size: 16,
     fill: "error"
-  })) : props.label)), /* @__PURE__ */ React32.createElement(HiddenSelect, {
+  })) : props.label)), /* @__PURE__ */ React33.createElement(HiddenSelect, {
     state,
     triggerRef,
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ React32.createElement(Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ React33.createElement(Box, __spreadProps(__spreadValues({
     as: "button"
   }, mergeProps2(buttonProps, focusProps)), {
     ref: triggerRef,
     variant: error && state.isOpen && !disabled ? "button.select.errorOpened" : error ? "button.select.error" : state.isOpen && !disabled ? "button.select.open" : "button.select",
     disabled,
     className
-  }), /* @__PURE__ */ React32.createElement(Box, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ React33.createElement(Box, __spreadProps(__spreadValues({
     as: "span"
   }, valueProps), {
     variant: disabled ? "select.disabled" : "select"
-  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ React32.createElement(ArrowUp, {
+  }), state.selectedItem ? state.selectedItem.rendered : placeholder), state.isOpen && !disabled ? /* @__PURE__ */ React33.createElement(ArrowUp, {
     size: 16,
     fill: "text"
-  }) : /* @__PURE__ */ React32.createElement(ArrowDown, {
+  }) : /* @__PURE__ */ React33.createElement(ArrowDown, {
     size: 16,
     fill: disabled ? "disabled" : "text"
-  })), state.isOpen && !disabled && /* @__PURE__ */ React32.createElement(Box, __spreadProps(__spreadValues(__spreadValues({
+  })), state.isOpen && !disabled && /* @__PURE__ */ React33.createElement(Box, __spreadProps(__spreadValues(__spreadValues({
     as: Popover
   }, overlayProps), positionProps), {
     css: {
@@ -1178,26 +1183,26 @@ var Select = (_a) => {
     ref: overlayRef,
     isOpen: state.isOpen,
     onClose: state.close
-  }), /* @__PURE__ */ React32.createElement(ListBox, __spreadProps(__spreadValues({
+  }), /* @__PURE__ */ React33.createElement(ListBox, __spreadProps(__spreadValues({
     error
   }, menuProps), {
     state
-  }))), error && errorMessage && /* @__PURE__ */ React32.createElement(Box, {
+  }))), error && errorMessage && /* @__PURE__ */ React33.createElement(Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ React32.createElement(Box, {
+  }, /* @__PURE__ */ React33.createElement(Box, {
     as: Exclamation5,
     size: 16,
     css: { color: "error" }
-  }), /* @__PURE__ */ React32.createElement(ValidationMessage, null, errorMessage)));
+  }), /* @__PURE__ */ React33.createElement(ValidationMessage, null, errorMessage)));
 };
 
 // src/Slider/Slider.tsx
-import React33 from "react";
+import React34 from "react";
 var Slider = (_a) => {
   var _b = _a, { variant = "" } = _b, props = __objRest(_b, ["variant"]);
-  return /* @__PURE__ */ React33.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React34.createElement(Box, __spreadValues({
     as: "input",
     type: "range",
     css: { verticalAlign: "middle" },
@@ -1206,12 +1211,12 @@ var Slider = (_a) => {
 };
 
 // src/Switch/Switch.tsx
-import React34, { useRef as useRef6 } from "react";
+import React35, { useRef as useRef6 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
 import { VisuallyHidden as VisuallyHidden4 } from "@react-aria/visually-hidden";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
-import { conditional as conditional3 } from "@marigold/system";
+import { conditional as conditional4 } from "@marigold/system";
 var Switch = (_a) => {
   var _b = _a, {
     variant = "",
@@ -1226,16 +1231,16 @@ var Switch = (_a) => {
   const ref = useRef6();
   const { inputProps } = useSwitch(props, state, ref);
   const { focusProps } = useFocusRing4();
-  return /* @__PURE__ */ React34.createElement(Box, {
+  return /* @__PURE__ */ React35.createElement(Box, {
     as: Label,
     __baseCSS: {
       userSelect: "none"
     },
     variant: labelVariant
-  }, props.children, /* @__PURE__ */ React34.createElement(VisuallyHidden4, null, /* @__PURE__ */ React34.createElement("input", __spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+  }, props.children, /* @__PURE__ */ React35.createElement(VisuallyHidden4, null, /* @__PURE__ */ React35.createElement("input", __spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     disabled,
     ref
-  }))), /* @__PURE__ */ React34.createElement(Box, {
+  }))), /* @__PURE__ */ React35.createElement(Box, {
     as: "svg",
     __baseCSS: {
       cursor: disabled ? "not-allowed" : "pointer",
@@ -1243,7 +1248,7 @@ var Switch = (_a) => {
       height: 32
     },
     "aria-hidden": "true"
-  }, /* @__PURE__ */ React34.createElement(Box, {
+  }, /* @__PURE__ */ React35.createElement(Box, {
     as: "rect",
     __baseCSS: {
       x: 4,
@@ -1252,11 +1257,11 @@ var Switch = (_a) => {
       width: 48,
       height: 24
     },
-    variant: conditional3(`switch.${variant}`, {
+    variant: conditional4(`switch.${variant}`, {
       checked: state.isSelected,
       disabled
     })
-  }), /* @__PURE__ */ React34.createElement(Box, {
+  }), /* @__PURE__ */ React35.createElement(Box, {
     as: "circle",
     __baseCSS: {
       boxShadow: "1px 1px 4px rgba(0, 0, 0, 0.25)",
@@ -1269,7 +1274,7 @@ var Switch = (_a) => {
 };
 
 // src/Textarea/Textarea.tsx
-import React35, { useRef as useRef7 } from "react";
+import React36, { useRef as useRef7 } from "react";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { Exclamation as Exclamation6 } from "@marigold/icons";
 var Textarea = (_a) => {
@@ -1292,10 +1297,10 @@ var Textarea = (_a) => {
   const { labelProps, inputProps, errorMessageProps } = useTextField2(__spreadProps(__spreadValues({}, props), {
     inputElementType: "textarea"
   }), ref);
-  return /* @__PURE__ */ React35.createElement(Box, null, /* @__PURE__ */ React35.createElement(Label, __spreadValues({
+  return /* @__PURE__ */ React36.createElement(Box, null, /* @__PURE__ */ React36.createElement(Label, __spreadValues({
     htmlFor,
     required
-  }, labelProps), props.label), /* @__PURE__ */ React35.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
+  }, labelProps), props.label), /* @__PURE__ */ React36.createElement(Box, __spreadValues(__spreadProps(__spreadValues({
     as: "textarea",
     variant: `textarea.${variant}`,
     css: {
@@ -1303,16 +1308,16 @@ var Textarea = (_a) => {
     }
   }, inputProps), {
     ref
-  }), props)), error && errorMessage && /* @__PURE__ */ React35.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React35.createElement(Exclamation6, {
+  }), props)), error && errorMessage && /* @__PURE__ */ React36.createElement(ValidationMessage, __spreadValues({}, errorMessageProps), /* @__PURE__ */ React36.createElement(Exclamation6, {
     size: 16
   }), errorMessage));
 };
 
 // src/Tiles/Tiles.tsx
-import React36 from "react";
-var Tiles = React36.forwardRef(function Tiles2(_a, ref) {
+import React37 from "react";
+var Tiles = React37.forwardRef(function Tiles2(_a, ref) {
   var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ React36.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React37.createElement(Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -1323,27 +1328,27 @@ var Tiles = React36.forwardRef(function Tiles2(_a, ref) {
 });
 
 // src/Tooltip/Tooltip.tsx
-import React38, { useContext } from "react";
+import React39, { useContext } from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
 
 // src/Tooltip/TooltipTrigger.tsx
-import React37, { useRef as useRef8 } from "react";
+import React38, { useRef as useRef8 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useTooltipTrigger } from "@react-aria/tooltip";
 import {
   useTooltipTriggerState
 } from "@react-stately/tooltip";
-var TooltipContext = React37.createContext({});
+var TooltipContext = React38.createContext({});
 var TooltipTrigger = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [trigger, tooltip] = React37.Children.toArray(children);
+  const [trigger, tooltip] = React38.Children.toArray(children);
   const state = useTooltipTriggerState(props);
   const tooltipTriggerRef = useRef8();
   const { triggerProps, tooltipProps } = useTooltipTrigger({}, state, tooltipTriggerRef);
-  return /* @__PURE__ */ React37.createElement(FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
+  return /* @__PURE__ */ React38.createElement(FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
     ref: tooltipTriggerRef
-  }), trigger, state.isOpen && /* @__PURE__ */ React37.createElement(TooltipContext.Provider, {
+  }), trigger, state.isOpen && /* @__PURE__ */ React38.createElement(TooltipContext.Provider, {
     value: __spreadValues({
       state
     }, tooltipProps)
@@ -1362,16 +1367,16 @@ var Tooltip = (_a) => {
   const _a2 = useContext(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
   const mergedProps = mergeProps3(props, tooltipProviderProps);
   const { tooltipProps } = useTooltip(mergedProps, state);
-  return /* @__PURE__ */ React38.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React39.createElement(Box, __spreadValues({
     position: "relative"
-  }, tooltipProps), /* @__PURE__ */ React38.createElement(Box, __spreadValues({
+  }, tooltipProps), /* @__PURE__ */ React39.createElement(Box, __spreadValues({
     position: "absolute",
     variant: `tooltip.${variant}`
   }, mergedProps), children));
 };
 
 // src/Input/Input.tsx
-import React39 from "react";
+import React40 from "react";
 var Input = (_a) => {
   var _b = _a, {
     variant = "",
@@ -1380,7 +1385,7 @@ var Input = (_a) => {
     "variant",
     "type"
   ]);
-  return /* @__PURE__ */ React39.createElement(Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ React40.createElement(Box, __spreadProps(__spreadValues({}, props), {
     as: "input",
     type,
     variant: `input.${variant}`
@@ -1388,7 +1393,7 @@ var Input = (_a) => {
 };
 
 // src/Container/Container.tsx
-import React40 from "react";
+import React41 from "react";
 import { size as tokenSize } from "@marigold/tokens";
 var ALIGNMENT3 = {
   left: "flex-start",
@@ -1400,18 +1405,35 @@ var Container = (_a) => {
     contentType = "content",
     size = "medium",
     align = "left",
+    alignContainer = "left",
     children
   } = _b, props = __objRest(_b, [
     "contentType",
     "size",
     "align",
+    "alignContainer",
     "children"
   ]);
-  return /* @__PURE__ */ React40.createElement(Box, __spreadValues({
-    display: "flex",
-    flexDirection: "column",
-    maxWidth: tokenSize[contentType][size],
-    alignItems: ALIGNMENT3[align]
+  const maxWidth = tokenSize[contentType][size];
+  let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
+  let gridColumn = 1;
+  if (alignContainer === "center") {
+    gridTemplateColumns = `1fr ${maxWidth} 1fr`;
+    gridColumn = 2;
+  }
+  if (alignContainer === "right") {
+    gridTemplateColumns = `1fr 1fr ${maxWidth}`;
+    gridColumn = 3;
+  }
+  return /* @__PURE__ */ React41.createElement(Box, __spreadValues({
+    display: "grid",
+    css: {
+      gridTemplateColumns,
+      placeItems: ALIGNMENT3[align],
+      "> *": {
+        gridColumn
+      }
+    }
   }, props), children);
 };
 
@@ -1423,10 +1445,11 @@ export {
   Aspect,
   Badge,
   Box,
+  Breakout,
   Button,
   Card,
+  Center,
   Checkbox,
-  Column,
   Columns,
   Container,
   Dialog,
@@ -1460,5 +1483,5 @@ export {
   ValidationMessage,
   VisuallyHidden2 as VisuallyHidden,
   useDialogButtonProps,
-  useTheme3 as useTheme
+  useTheme2 as useTheme
 };