@marigold/components 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -131,27 +131,10 @@ interface LabelProps extends LabelBaseProps {
 }
 declare const Label: React.FC<LabelProps>;
 
-interface TextThemeExtension<Value> {
-    text?: {
-        [key: string]: Value;
-    };
-}
-interface TextOwnProps extends BoxOwnProps {
-    align?: ResponsiveStyleValue<string>;
-    color?: ResponsiveStyleValue<string>;
-    cursor?: ResponsiveStyleValue<string>;
-    size?: ResponsiveStyleValue<keyof Theme$1['fontSizes'] | string>;
-    outline?: ResponsiveStyleValue<string>;
-    userSelect?: ResponsiveStyleValue<string>;
-}
-interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
-}
-declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
-
 interface LinkThemeExtension<Value> {
     link?: Value;
 }
-interface LinkOwnProps extends TextOwnProps {
+interface LinkOwnProps extends BoxOwnProps {
     disabled?: boolean;
 }
 interface LinkProps extends PolymorphicProps<LinkOwnProps, 'a'> {
@@ -259,6 +242,23 @@ declare type SwitchProps = {
 } & AriaSwitchProps & ToggleProps & ComponentProps<'input'>;
 declare const Switch: React.FC<SwitchProps>;
 
+interface TextThemeExtension<Value> {
+    text?: {
+        [key: string]: Value;
+    };
+}
+interface TextOwnProps extends BoxOwnProps {
+    align?: ResponsiveStyleValue<string>;
+    color?: ResponsiveStyleValue<string>;
+    cursor?: ResponsiveStyleValue<string>;
+    size?: ResponsiveStyleValue<keyof Theme$1['fontSizes'] | string>;
+    outline?: ResponsiveStyleValue<string>;
+    userSelect?: ResponsiveStyleValue<string>;
+}
+interface TextProps extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {
+}
+declare const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'>;
+
 interface TextareaThemeExtension<Value> {
     textarea?: {
         [key: string]: Value;
@@ -326,18 +326,23 @@ interface AspectProps extends ComponentProps<'div'> {
 }
 declare const Aspect: React.FC<AspectProps>;
 
-declare type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-interface ColumnProps {
-    className?: string;
-    width?: WidthValues | WidthValues[];
+interface BreakoutProps extends ComponentProps<'div'> {
+    horizontalAlign?: 'top' | 'bottom' | 'center';
+    verticalAlign?: 'left' | 'right' | 'center';
 }
-declare const Column: React.FC<ColumnProps>;
+declare const Breakout: React.FC<BreakoutProps>;
+
+interface CenterProps extends ComponentProps<'div'> {
+    maxWidth?: string;
+    space?: ResponsiveStyleValue<string>;
+}
+declare const Center: React.FC<CenterProps>;
 
 interface ColumnsProps {
-    className?: string;
+    columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
-    horizontalAlign?: 'left' | 'right' | 'center';
-    verticalAlign?: 'top' | 'bottom' | 'center';
+    columnLimit?: number;
+    collapseAt?: string;
 }
 declare const Columns: React.FC<ColumnsProps>;
 
@@ -377,6 +382,7 @@ interface InlineProps {
 declare const Inline: React.FC<InlineProps>;
 
 interface StackProps {
+    as?: 'div' | 'ul' | 'ol';
     space?: ResponsiveStyleValue<string>;
     align?: 'left' | 'right' | 'center';
 }
@@ -392,7 +398,8 @@ interface ContainerProps extends ComponentProps<'div'> {
     contentType?: 'content' | 'header';
     size?: keyof typeof size.content | keyof typeof size.header;
     align?: 'left' | 'right' | 'center';
+    alignContainer?: 'left' | 'right' | 'center';
 }
 declare const Container: React.FC<ContainerProps>;
 
-export { ActionGroup, ActionGroupProps, Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Checkbox, CheckboxProps, CheckboxThemeExtension, Column, ColumnProps, Columns, ColumnsProps, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };
+export { ActionGroup, ActionGroupProps, Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Dialog, DialogProps, Divider, DividerProps, DividerThemeExtension, Field, FieldProps, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputProps, InputThemeExtension, Label, LabelBase, LabelBaseProps, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuItem, MenuItemProps, MenuItemThemeExtension, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, Radio, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Text, TextOwnProps, TextProps, TextThemeExtension, Textarea, TextareaProps, TextareaThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipContext, TooltipProps, TooltipThemeExtension, TooltipTrigger, ValidationMessage, ValidationMessageProps, ValidationMessageThemeExtension, useDialogButtonProps };

package/dist/index.js

@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -38,22 +37,16 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
@@ -63,10 +56,11 @@ __export(src_exports, {
   Aspect: () => Aspect,
   Badge: () => Badge,
   Box: () => import_system.Box,
+  Breakout: () => Breakout,
   Button: () => Button,
   Card: () => Card,
+  Center: () => Center,
   Checkbox: () => Checkbox,
-  Column: () => Column,
   Columns: () => Columns,
   Container: () => Container,
   Dialog: () => Dialog,
@@ -102,6 +96,7 @@ __export(src_exports, {
   useDialogButtonProps: () => useDialogButtonProps,
   useTheme: () => import_system5.useTheme
 });
+module.exports = __toCommonJS(src_exports);
 
 // src/ActionGroup/ActionGroup.tsx
 var import_react3 = __toESM(require("react"));
@@ -153,10 +148,11 @@ var Stack = (_a) => {
     "children"
   ]);
   return /* @__PURE__ */ import_react2.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    __baseCSS: { gap: space },
     display: "flex",
     flexDirection: "column",
-    alignItems: ALIGNMENT2[align]
+    alignItems: ALIGNMENT2[align],
+    p: "0",
+    css: { gap: space }
   }), children);
 };
 
@@ -295,8 +291,44 @@ var Button = (0, import_react7.forwardRef)((_a, ref) => {
   }), children);
 });
 
-// src/Card/Card.tsx
+// src/Breakout/Breakout.tsx
 var import_react8 = __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_react8.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_react9 = __toESM(require("react"));
 var Card = (_a) => {
   var _b = _a, {
     variant = "",
@@ -311,19 +343,45 @@ var Card = (_a) => {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ import_react8.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react9.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     variant: `card.${variant}`,
     maxWidth: width,
     className
-  }), title && /* @__PURE__ */ import_react8.default.createElement(import_system.Box, {
+  }), title && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
     as: "h2",
     variant: "text.h2",
     pb: "small"
   }, title), children);
 };
 
+// src/Center/Center.tsx
+var import_react10 = __toESM(require("react"));
+var Center = (_a) => {
+  var _b = _a, {
+    maxWidth,
+    space = "none",
+    children
+  } = _b, props = __objRest(_b, [
+    "maxWidth",
+    "space",
+    "children"
+  ]);
+  return /* @__PURE__ */ import_react10.default.createElement(import_system.Box, __spreadValues({
+    css: {
+      boxSizing: "content-box",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      marginInline: "auto",
+      maxInlineSize: maxWidth,
+      gap: space
+    }
+  }, props), children);
+};
+
 // src/Checkbox/Checkbox.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_focus = require("@react-aria/focus");
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_checkbox = require("@react-aria/checkbox");
@@ -331,7 +389,7 @@ var import_toggle = require("@react-stately/toggle");
 var import_icons2 = require("@marigold/icons");
 
 // src/Checkbox/CheckboxIcon.tsx
-var import_react9 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_system2 = require("@marigold/system");
 var CheckboxIcon = ({
   variant = "",
@@ -346,13 +404,13 @@ var CheckboxIcon = ({
     checked,
     error
   };
-  return /* @__PURE__ */ import_react9.default.createElement(import_system2.SVG, {
+  return /* @__PURE__ */ import_react11.default.createElement(import_system2.SVG, {
     width: "16",
     height: "32",
     viewBox: "0 0 16 32",
     fill: "none",
     "aria-hidden": "true"
-  }, /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+  }, /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
     as: "rect",
     x: "0.5",
     y: "8.5",
@@ -360,13 +418,13 @@ var CheckboxIcon = ({
     height: "15px",
     rx: "1.5",
     variant: (0, import_system2.conditional)(`checkbox.${variant}`, conditionalStates)
-  }), checked && indeterminated && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+  }), checked && indeterminated && /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
     __baseCSS: { fill: "gray00" },
     as: "path",
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M13.5 17.0402H2.5V15.4688H13.5V17.0402V17.0402Z"
-  }), checked && !indeterminated && /* @__PURE__ */ import_react9.default.createElement(import_system.Box, {
+  }), checked && !indeterminated && /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
     __baseCSS: { fill: "gray00" },
     as: "path",
     fillRule: "evenodd",
@@ -376,7 +434,7 @@ var CheckboxIcon = ({
 };
 
 // src/Label/Label.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_icons = require("@marigold/icons");
 var LabelBase = (_a) => {
   var _b = _a, {
@@ -390,7 +448,7 @@ var LabelBase = (_a) => {
     "color",
     "children"
   ]);
-  return /* @__PURE__ */ import_react10.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
     as: "label",
     __baseCSS: { color },
     variant: `label.${variant}`
@@ -404,18 +462,18 @@ var Label = (_a) => {
     "required",
     "children"
   ]);
-  return required ? /* @__PURE__ */ import_react10.default.createElement(import_system.Box, {
+  return required ? /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
     as: "span",
     display: "inline-flex",
     alignItems: "center"
-  }, /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react10.default.createElement(import_icons.Required, {
+  }, /* @__PURE__ */ import_react12.default.createElement(LabelBase, __spreadValues({}, props), children), required && /* @__PURE__ */ import_react12.default.createElement(import_icons.Required, {
     size: 16,
     fill: "error"
-  })) : /* @__PURE__ */ import_react10.default.createElement(LabelBase, __spreadValues({}, props), children);
+  })) : /* @__PURE__ */ import_react12.default.createElement(LabelBase, __spreadValues({}, props), children);
 };
 
 // src/ValidationMessage/ValidationMessage.tsx
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var ValidationMessage = (_a) => {
   var _b = _a, {
     variant = "error",
@@ -426,7 +484,7 @@ var ValidationMessage = (_a) => {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, __spreadValues({
     as: "span",
     display: "flex",
     alignItems: "center",
@@ -445,15 +503,15 @@ var CheckboxInput = (_a) => {
     "indeterminated"
   ]);
   const state = (0, import_toggle.useToggleState)(props);
-  const ref = import_react12.default.useRef(null);
+  const ref = import_react14.default.useRef(null);
   const { inputProps } = (0, import_checkbox.useCheckbox)(props, state, ref);
   const { focusProps } = (0, import_focus.useFocusRing)();
   const _a2 = props, { children } = _a2, restProps = __objRest(_a2, ["children"]);
-  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
     pr: "xsmall"
-  }, /* @__PURE__ */ import_react12.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react12.default.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
+  }, /* @__PURE__ */ import_react14.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react14.default.createElement("input", __spreadValues(__spreadProps(__spreadValues(__spreadValues({}, inputProps), focusProps), {
     ref
-  }), restProps))), /* @__PURE__ */ import_react12.default.createElement(CheckboxIcon, {
+  }), restProps))), /* @__PURE__ */ import_react14.default.createElement(CheckboxIcon, {
     checked: props.checked,
     variant: props.variant,
     disabled: props.disabled,
@@ -471,7 +529,7 @@ var Checkbox = (_a) => {
     "labelVariant",
     "errorMessage"
   ]);
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(import_system.Box, {
     as: Label,
     __baseCSS: {
       ":hover": { cursor: props.disabled ? "not-allowed" : "pointer" }
@@ -480,103 +538,47 @@ var Checkbox = (_a) => {
     required,
     variant: `label.${labelVariant}`,
     color: props.disabled ? "disabled" : "text"
-  }, /* @__PURE__ */ import_react12.default.createElement(CheckboxInput, __spreadValues({
+  }, /* @__PURE__ */ import_react14.default.createElement(CheckboxInput, __spreadValues({
     error: props.error
-  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react12.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react12.default.createElement(import_icons2.Exclamation, {
+  }, props)), props.children), props.error && errorMessage && /* @__PURE__ */ import_react14.default.createElement(ValidationMessage, null, /* @__PURE__ */ import_react14.default.createElement(import_icons2.Exclamation, {
     size: 16
   }), errorMessage));
 };
 
-// src/Column/Column.tsx
-var import_react13 = __toESM(require("react"));
-var transform = (width) => {
-  if (Array.isArray(width)) {
-    return width.map((v) => `${v / 12 * 100}%`);
-  }
-  return `${width / 12 * 100}%`;
-};
-var Column = (_a) => {
-  var _b = _a, {
-    width = 12,
-    children
-  } = _b, props = __objRest(_b, [
-    "width",
-    "children"
-  ]);
-  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    width: transform(width)
-  }), children);
-};
-
 // src/Columns/Columns.tsx
 var import_react15 = __toESM(require("react"));
-var import_system3 = require("@marigold/system");
-
-// src/utils/flatten-children.ts
-var import_react14 = require("react");
-var import_react_is = require("react-is");
-var flattenChildren = (children, depth = 0, keys = []) => import_react14.Children.toArray(children).reduce((acc, node) => {
-  if ((0, import_react_is.isFragment)(node)) {
-    acc.push.apply(acc, flattenChildren(node.props.children, depth + 1, keys.concat(node.key)));
-  } else {
-    if ((0, import_react14.isValidElement)(node)) {
-      acc.push((0, import_react14.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";
-};
 var Columns = (_a) => {
   var _b = _a, {
     space = "none",
-    horizontalAlign = "left",
-    verticalAlign = "top",
-    className,
+    columns,
+    collapseAt = "40em",
     children
   } = _b, props = __objRest(_b, [
     "space",
-    "horizontalAlign",
-    "verticalAlign",
-    "className",
+    "columns",
+    "collapseAt",
     "children"
   ]);
-  const justifyContent = useAlignment(horizontalAlign);
-  const alignItems = useAlignment(verticalAlign);
-  const { css } = (0, import_system3.useTheme)();
-  const spaceObject = css({ space });
-  const spaceValue = Object.values(spaceObject)[0];
-  return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
-    p: space,
-    display: "flex",
-    className
-  }, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadValues({
-    width: `calc(100% + ${spaceValue}px)`,
-    m: `${-spaceValue / 2}px`,
+  if (import_react15.Children.count(children) !== columns.length) {
+    throw new Error(`Columns: expected ${columns.length} children, got ${import_react15.Children.count(children)}`);
+  }
+  const getColumnWidths = columns.map((column, index) => {
+    return {
+      [`> :nth-of-type(${index + 1})`]: {
+        flexGrow: column
+      }
+    };
+  });
+  return /* @__PURE__ */ import_react15.default.createElement(import_system.Box, __spreadValues({
     display: "flex",
-    flexWrap: "wrap",
-    alignItems,
-    justifyContent
-  }, props), import_react15.Children.map(flattenChildren(children), (child) => {
-    return import_react15.default.cloneElement(child, {}, /* @__PURE__ */ import_react15.default.createElement(import_system.Box, {
-      css: { p: `${spaceValue / 2}px` }
-    }, child.props.children));
-  })));
+    css: Object.assign({
+      flexWrap: "wrap",
+      gap: space,
+      "> *": {
+        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
+      }
+    }, ...getColumnWidths)
+  }, props), children);
 };
 
 // src/Dialog/Dialog.tsx
@@ -826,10 +828,11 @@ var Image = (_a) => {
 // src/Link/Link.tsx
 var import_react22 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
+var import_system3 = require("@marigold/system");
 var Link = (_a) => {
   var _b = _a, {
     as = "a",
-    variant = "link",
+    variant = "",
     children,
     disabled
   } = _b, props = __objRest(_b, [
@@ -838,16 +841,17 @@ var Link = (_a) => {
     "children",
     "disabled"
   ]);
-  const ref = (0, import_react22.useRef)();
+  const ref = (0, import_react22.useRef)(null);
   const { linkProps } = (0, import_link.useLink)(__spreadProps(__spreadValues({}, props), {
     elementType: typeof as === "string" ? as : "span",
     isDisabled: disabled
   }), ref);
-  return /* @__PURE__ */ import_react22.default.createElement(Text, __spreadProps(__spreadValues(__spreadValues({}, props), linkProps), {
+  return /* @__PURE__ */ import_react22.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as,
-    variant,
+    variant: (0, import_system3.conditional)(`link.${variant}`, { disabled }),
+    css: { cursor: disabled ? "default" : "pointer" },
     ref
-  }), children);
+  }, props), linkProps), children);
 };
 
 // src/Menu/Menu.tsx
@@ -1039,7 +1043,7 @@ var Radio = (_a) => {
 var import_react33 = __toESM(require("react"));
 var import_select = require("@react-stately/select");
 var import_button3 = require("@react-aria/button");
-var import_utils3 = require("@react-aria/utils");
+var import_utils2 = require("@react-aria/utils");
 var import_focus5 = require("@react-aria/focus");
 var import_select2 = require("@react-aria/select");
 var import_overlays6 = require("@react-stately/overlays");
@@ -1130,7 +1134,7 @@ var ListBox = (props) => {
 var import_react32 = __toESM(require("react"));
 var import_focus4 = require("@react-aria/focus");
 var import_overlays5 = require("@react-aria/overlays");
-var import_utils2 = require("@react-aria/utils");
+var import_utils = require("@react-aria/utils");
 var Popover = (0, import_react32.forwardRef)((_a, ref) => {
   var _b = _a, { children, className, isOpen, onClose } = _b, otherProps = __objRest(_b, ["children", "className", "isOpen", "onClose"]);
   const { overlayProps } = (0, import_overlays5.useOverlay)({
@@ -1142,7 +1146,7 @@ var Popover = (0, import_react32.forwardRef)((_a, ref) => {
   const { modalProps } = (0, import_overlays5.useModal)();
   return /* @__PURE__ */ import_react32.default.createElement(import_overlays5.OverlayContainer, null, /* @__PURE__ */ import_react32.default.createElement(import_focus4.FocusScope, {
     restoreFocus: true
-  }, /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils2.mergeProps)(overlayProps, otherProps, modalProps)), {
+  }, /* @__PURE__ */ import_react32.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, (0, import_utils.mergeProps)(overlayProps, otherProps, modalProps)), {
     className,
     ref
   }), children, /* @__PURE__ */ import_react32.default.createElement(import_overlays5.DismissButton, {
@@ -1209,7 +1213,7 @@ var Select = (_a) => {
     isDisabled: disabled
   }), /* @__PURE__ */ import_react33.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "button"
-  }, (0, import_utils3.mergeProps)(buttonProps, focusProps)), {
+  }, (0, import_utils2.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,
@@ -1380,7 +1384,7 @@ var Tiles = import_react37.default.forwardRef(function Tiles2(_a, ref) {
 // src/Tooltip/Tooltip.tsx
 var import_react39 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_utils4 = require("@react-aria/utils");
+var import_utils3 = require("@react-aria/utils");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react38 = __toESM(require("react"));
@@ -1413,7 +1417,7 @@ var Tooltip = (_a) => {
     "children"
   ]);
   const _a2 = (0, import_react39.useContext)(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
-  const mergedProps = (0, import_utils4.mergeProps)(props, tooltipProviderProps);
+  const mergedProps = (0, import_utils3.mergeProps)(props, tooltipProviderProps);
   const { tooltipProps } = (0, import_tooltip3.useTooltip)(mergedProps, state);
   return /* @__PURE__ */ import_react39.default.createElement(import_system.Box, __spreadValues({
     position: "relative"
@@ -1453,24 +1457,40 @@ var Container = (_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_react41.default.createElement(import_system.Box, __spreadValues({
-    display: "flex",
-    flexDirection: "column",
-    maxWidth: import_tokens2.size[contentType][size],
-    alignItems: ALIGNMENT3[align]
+    display: "grid",
+    css: {
+      gridTemplateColumns,
+      placeItems: ALIGNMENT3[align],
+      "> *": {
+        gridColumn
+      }
+    }
   }, props), children);
 };
 
 // src/index.ts
 var import_collections = require("@react-stately/collections");
-module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionGroup,
@@ -1478,10 +1498,11 @@ module.exports = __toCommonJS(src_exports);
   Aspect,
   Badge,
   Box,
+  Breakout,
   Button,
   Card,
+  Center,
   Checkbox,
-  Column,
   Columns,
   Container,
   Dialog,