@marigold/components 2.2.0 → 3.0.1

package/dist/index.d.ts

@@ -34,6 +34,13 @@ interface BadgeProps extends ComponentProps<'div'> {
 }
 declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => JSX.Element;
 
+interface BodyThemeExtension extends ThemeExtension<'Body'> {
+}
+interface BodyProps extends ThemeComponentProps, ComponentProps<'section'> {
+    children?: ReactNode;
+}
+declare const Body: ({ children, variant, size, ...props }: BodyProps) => JSX.Element;
+
 interface ButtonThemeExtension extends ThemeExtension<'Button'> {
 }
 interface ButtonOwnProps extends PressEvents, ComponentProps<'button'> {
@@ -106,13 +113,6 @@ interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, Ar
 }
 declare const CheckboxGroup: ({ children, variant, size, required, disabled, readOnly, error, ...rest }: CheckboxGroupProps) => JSX.Element;
 
-interface ContentThemeExtension extends ThemeExtension<'Content'> {
-}
-interface ContentProps extends ThemeComponentProps, ComponentProps<'section'> {
-    children?: ReactNode;
-}
-declare const Content: ({ children, variant, size, ...props }: ContentProps) => JSX.Element;
-
 interface DialogTriggerProps {
     children: [trigger: ReactNode, menu: ReactNode];
     dismissable?: boolean;
@@ -505,11 +505,15 @@ declare const Tooltip: {
     Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
 };
 
-interface ComponentStyles extends BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, CheckboxGroupThemeExtension, ContentThemeExtension, DialogThemeExtension, DividerThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, RadioGroupThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
+interface ComponentStyles extends BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, CheckboxGroupThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, FooterThemeExtension, HeaderThemeExtension, HeadlineThemeExtension, HelpTextThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, LinkThemeExtension, ListThemeExtension, ListBoxThemeExtension, MenuThemeExtension, MessageThemeExtension, NumberFieldThemeExtension, RadioThemeExtension, RadioGroupThemeExtension, SelectThemeExtension, SliderThemeExtension, SwitchThemeExtension, TableThemeExtension, TextThemeExtension, TextAreaThemeExtension, TooltipThemeExtension, UnderlayThemeExtension {
 }
 interface Theme extends Theme$1 {
     components: ComponentStyles;
 }
+interface CustomizedTheme extends Theme$1 {
+    components?: Partial<ComponentStyles>;
+}
+declare const extendTheme: (baseTheme: Theme, extendTheme: CustomizedTheme) => Theme;
 
 interface AsideProps {
     children: [ReactElement, ReactElement];
@@ -534,10 +538,11 @@ declare const Aspect: ({ ratio, maxWidth, children, }: AspectProps) => JSX.Eleme
 
 interface BreakoutProps extends ComponentProps<'div'> {
     children?: ReactNode;
-    horizontalAlign?: 'top' | 'bottom' | 'center';
-    verticalAlign?: 'left' | 'right' | 'center';
+    alignY?: 'top' | 'bottom' | 'center';
+    alignX?: 'left' | 'right' | 'center';
+    height?: string;
 }
-declare const Breakout: ({ horizontalAlign, verticalAlign, children, ...props }: BreakoutProps) => JSX.Element;
+declare const Breakout: ({ alignX, alignY, height, children, ...props }: BreakoutProps) => JSX.Element;
 
 interface CenterProps extends ComponentProps<'div'> {
     children?: ReactNode;
@@ -551,9 +556,10 @@ interface ColumnsProps {
     columns: Array<number>;
     space?: ResponsiveStyleValue<string>;
     columnLimit?: number;
-    collapseAt?: string;
+    collapseAt?: string | 0;
+    stretch?: boolean;
 }
-declare const Columns: ({ space, columns, collapseAt, children, ...props }: ColumnsProps) => JSX.Element;
+declare const Columns: ({ space, columns, collapseAt, stretch, children, ...props }: ColumnsProps) => JSX.Element;
 
 interface ContainerProps extends ComponentProps<'div'> {
     children?: ReactNode;
@@ -591,17 +597,18 @@ interface SplitProps extends ComponentProps<'div'> {
 declare const Split: (props: SplitProps) => JSX.Element;
 
 declare const ALIGNMENT_X: {
+    none: string;
     left: string;
     center: string;
     right: string;
 };
 declare const ALIGNMENT_Y: {
+    none: string;
     top: string;
     center: string;
     bottom: string;
 };
 interface StackProps {
-    as?: 'div' | 'ul' | 'ol';
     children?: ReactNode;
     space?: ResponsiveStyleValue<string>;
     alignX?: keyof typeof ALIGNMENT_X;
@@ -636,4 +643,4 @@ interface TilesProps {
 }
 declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Content, ContentProps, ContentThemeExtension, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };
+export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Body, BodyProps, BodyThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreaEvents, CustomTextFieldEvents, CustomizedTheme, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, List, ListProps, ListThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioComponent, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, Select, SelectComponent, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, extendTheme, useCheckboxGroupContext };

package/dist/index.js

@@ -29,6 +29,7 @@ __export(src_exports, {
   Aside: () => Aside,
   Aspect: () => Aspect,
   Badge: () => Badge,
+  Body: () => Body,
   Box: () => import_system.Box,
   Breakout: () => Breakout,
   Button: () => Button,
@@ -39,7 +40,6 @@ __export(src_exports, {
   CheckboxGroupContext: () => CheckboxGroupContext,
   Columns: () => Columns,
   Container: () => Container,
-  Content: () => Content,
   Dialog: () => Dialog,
   Divider: () => Divider,
   Footer: () => Footer,
@@ -73,6 +73,7 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
+  extendTheme: () => extendTheme,
   useAsyncList: () => import_data.useAsyncList,
   useCheckboxGroupContext: () => useCheckboxGroupContext,
   useListData: () => import_data.useListData,
@@ -83,6 +84,10 @@ module.exports = __toCommonJS(src_exports);
 // src/hooks.ts
 var import_data = require("@react-stately/data");
 
+// src/theme.ts
+var import_deepmerge = __toESM(require("deepmerge"));
+var extendTheme = (baseTheme, extendTheme2) => (0, import_deepmerge.default)(baseTheme, extendTheme2);
+
 // src/Aside/Aside.tsx
 var import_react = __toESM(require("react"));
 
@@ -162,33 +167,47 @@ var useAlignment = (direction) => {
   return "flex-start";
 };
 var Breakout = ({
-  horizontalAlign,
-  verticalAlign,
+  alignX,
+  alignY,
+  height,
   children,
   ...props
 }) => {
-  const alignItems = useAlignment(horizontalAlign);
-  const justifyContent = useAlignment(verticalAlign);
+  const alignItems = useAlignment(alignY);
+  const justifyContent = useAlignment(alignX);
   return /* @__PURE__ */ import_react4.default.createElement(import_system.Box, {
     alignItems,
     justifyContent,
     width: "100%",
-    display: verticalAlign || horizontalAlign ? "flex" : "block",
-    css: {
-      gridColumn: "1 / -1"
+    height,
+    display: alignY || alignX ? "flex" : "block",
+    __baseCSS: {
+      gridColumn: "1 / -1 !important"
     },
     ...props
   }, children);
 };
 
-// src/Button/Button.tsx
+// src/Body/Body.tsx
 var import_react5 = __toESM(require("react"));
+var import_system3 = require("@marigold/system");
+var Body = ({ children, variant, size, ...props }) => {
+  const styles = (0, import_system3.useComponentStyles)("Body", { variant, size });
+  return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, {
+    as: "section",
+    ...props,
+    css: styles
+  }, children);
+};
+
+// src/Button/Button.tsx
+var import_react6 = __toESM(require("react"));
 var import_button = require("@react-aria/button");
 var import_focus = require("@react-aria/focus");
 var import_interactions = require("@react-aria/interactions");
 var import_utils = require("@react-aria/utils");
-var import_system3 = require("@marigold/system");
-var Button = (0, import_react5.forwardRef)(
+var import_system4 = require("@marigold/system");
+var Button = (0, import_react6.forwardRef)(
   ({
     as = "button",
     children,
@@ -223,13 +242,13 @@ var Button = (0, import_react5.forwardRef)(
       },
       buttonRef
     );
-    const styles = (0, import_system3.useComponentStyles)("Button", { variant, size });
-    const stateProps = (0, import_system3.useStateProps)({
+    const styles = (0, import_system4.useComponentStyles)("Button", { variant, size });
+    const stateProps = (0, import_system4.useStateProps)({
       active: isPressed,
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, {
+    return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, {
       ...(0, import_utils.mergeProps)(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       as,
@@ -251,8 +270,8 @@ var Button = (0, import_react5.forwardRef)(
 );
 
 // src/Card/Card.tsx
-var import_react6 = __toESM(require("react"));
-var import_system4 = require("@marigold/system");
+var import_react7 = __toESM(require("react"));
+var import_system5 = require("@marigold/system");
 var Card = ({
   children,
   variant,
@@ -266,21 +285,21 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const styles = (0, import_system4.useComponentStyles)("Card", { variant, size });
-  return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, {
+  const styles = (0, import_system5.useComponentStyles)("Card", { variant, size });
+  return /* @__PURE__ */ import_react7.default.createElement(import_system5.Box, {
     ...props,
     css: [styles, { p, px, py, pt, pb, pl, pr }]
   }, children);
 };
 
 // src/Center/Center.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var Center = ({
   maxWidth,
   space = "none",
   children,
   ...props
-}) => /* @__PURE__ */ import_react7.default.createElement(import_system.Box, {
+}) => /* @__PURE__ */ import_react8.default.createElement(import_system.Box, {
   css: {
     boxSizing: "content-box",
     display: "flex",
@@ -295,24 +314,24 @@ var Center = ({
 }, children);
 
 // src/Checkbox/Checkbox.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_checkbox3 = require("@react-aria/checkbox");
 var import_focus2 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_utils2 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
-var import_system7 = require("@marigold/system");
+var import_system8 = require("@marigold/system");
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_checkbox2 = require("@react-stately/checkbox");
-var import_system6 = require("@marigold/system");
+var import_system7 = require("@marigold/system");
 
 // src/Label/Label.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_icons = require("@marigold/icons");
-var import_system5 = require("@marigold/system");
+var import_system6 = require("@marigold/system");
 var Label = ({
   as = "label",
   required,
@@ -321,13 +340,13 @@ var Label = ({
   size,
   ...props
 }) => {
-  const styles = (0, import_system5.useComponentStyles)("Label", { size, variant });
-  return /* @__PURE__ */ import_react8.default.createElement(import_system5.Box, {
+  const styles = (0, import_system6.useComponentStyles)("Label", { size, variant });
+  return /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
     ...props,
     as,
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles
-  }, children, required && /* @__PURE__ */ import_react8.default.createElement(import_icons.Required, {
+  }, children, required && /* @__PURE__ */ import_react9.default.createElement(import_icons.Required, {
     role: "presentation",
     size: 16,
     fill: "error"
@@ -335,10 +354,10 @@ var Label = ({
 };
 
 // src/Checkbox/CheckboxGroup.tsx
-var CheckboxGroupContext = (0, import_react9.createContext)(
+var CheckboxGroupContext = (0, import_react10.createContext)(
   null
 );
-var useCheckboxGroupContext = () => (0, import_react9.useContext)(CheckboxGroupContext);
+var useCheckboxGroupContext = () => (0, import_react10.useContext)(CheckboxGroupContext);
 var CheckboxGroup = ({
   children,
   variant,
@@ -358,19 +377,19 @@ var CheckboxGroup = ({
   };
   const state = (0, import_checkbox2.useCheckboxGroupState)(props);
   const { groupProps, labelProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
-  const styles = (0, import_system6.useComponentStyles)(
+  const styles = (0, import_system7.useComponentStyles)(
     "CheckboxGroup",
     { variant, size },
     { parts: ["container", "group"] }
   );
-  return /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
+  return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
     ...groupProps,
     css: styles.container
-  }, props.label && /* @__PURE__ */ import_react9.default.createElement(Label, {
+  }, props.label && /* @__PURE__ */ import_react10.default.createElement(Label, {
     as: "span",
     required,
     ...labelProps
-  }, props.label), /* @__PURE__ */ import_react9.default.createElement(import_system6.Box, {
+  }, props.label), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
     role: "presentation",
     __baseCSS: {
       display: "flex",
@@ -378,29 +397,29 @@ var CheckboxGroup = ({
       alignItems: "start"
     },
     css: styles.group
-  }, /* @__PURE__ */ import_react9.default.createElement(CheckboxGroupContext.Provider, {
+  }, /* @__PURE__ */ import_react10.default.createElement(CheckboxGroupContext.Provider, {
     value: { variant, size, error, ...state }
   }, children)));
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ import_react10.default.createElement("svg", {
+var CheckMark = () => /* @__PURE__ */ import_react11.default.createElement("svg", {
   viewBox: "0 0 12 10"
-}, /* @__PURE__ */ import_react10.default.createElement("path", {
+}, /* @__PURE__ */ import_react11.default.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
 }));
-var IndeterminateMark = () => /* @__PURE__ */ import_react10.default.createElement("svg", {
+var IndeterminateMark = () => /* @__PURE__ */ import_react11.default.createElement("svg", {
   width: "12",
   height: "3",
   viewBox: "0 0 12 3"
-}, /* @__PURE__ */ import_react10.default.createElement("path", {
+}, /* @__PURE__ */ import_react11.default.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
 }));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
   "aria-hidden": "true",
   __baseCSS: {
     width: 16,
@@ -415,8 +434,8 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import
   },
   css,
   ...props
-}, indeterminate ? /* @__PURE__ */ import_react10.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react10.default.createElement(CheckMark, null) : null);
-var Checkbox = (0, import_react10.forwardRef)(
+}, indeterminate ? /* @__PURE__ */ import_react11.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react11.default.createElement(CheckMark, null) : null);
+var Checkbox = (0, import_react11.forwardRef)(
   ({
     size,
     variant,
@@ -461,7 +480,7 @@ var Checkbox = (0, import_react10.forwardRef)(
       }),
       inputRef
     );
-    const styles = (0, import_system7.useComponentStyles)(
+    const styles = (0, import_system8.useComponentStyles)(
       "Checkbox",
       {
         variant: (groupState == null ? void 0 : groupState.variant) || variant,
@@ -471,7 +490,7 @@ var Checkbox = (0, import_react10.forwardRef)(
     );
     const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
     const { isFocusVisible, focusProps } = (0, import_focus2.useFocusRing)();
-    const stateProps = (0, import_system7.useStateProps)({
+    const stateProps = (0, import_system8.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -480,7 +499,7 @@ var Checkbox = (0, import_react10.forwardRef)(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+    return /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -491,7 +510,7 @@ var Checkbox = (0, import_react10.forwardRef)(
       css: styles.container,
       ...hoverProps,
       ...stateProps
-    }, /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+    }, /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
       as: "input",
       ref: inputRef,
       css: {
@@ -506,12 +525,12 @@ var Checkbox = (0, import_react10.forwardRef)(
       },
       ...inputProps,
       ...focusProps
-    }), /* @__PURE__ */ import_react10.default.createElement(Icon, {
+    }), /* @__PURE__ */ import_react11.default.createElement(Icon, {
       checked: inputProps.checked,
       indeterminate,
       css: styles.checkbox,
       ...stateProps
-    }), props.children && /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, {
+    }), props.children && /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -519,46 +538,49 @@ var Checkbox = (0, import_react10.forwardRef)(
 );
 
 // src/Columns/Columns.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var Columns = ({
   space = "none",
   columns,
-  collapseAt = "40em",
+  collapseAt = "0em",
+  stretch,
   children,
   ...props
 }) => {
-  if (import_react11.Children.count(children) !== columns.length) {
+  if (import_react12.Children.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${import_react11.Children.count(
+      `Columns: expected ${columns.length} children, got ${import_react12.Children.count(
         children
       )}`
     );
   }
-  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
-    display: "flex",
+  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
     css: {
+      display: "flex",
       flexWrap: "wrap",
+      alignItems: "stretch",
+      height: stretch ? "100%" : void 0,
       gap: space,
       "> *": {
         flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
       }
     },
     ...props
-  }, import_react11.Children.map(children, (child, idx) => /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
+  }, import_react12.Children.map(children, (child, idx) => /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
     css: {
       flexGrow: columns[idx]
     }
-  }, (0, import_react11.isValidElement)(child) ? (0, import_react11.cloneElement)(child) : null)));
+  }, (0, import_react12.isValidElement)(child) ? (0, import_react12.cloneElement)(child) : null)));
 };
 
 // src/Container/Container.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_tokens2 = require("@marigold/tokens");
 var ALIGN_ITEMS = {
   left: "start",
   center: "center",
   right: "end",
-  none: "undefined"
+  none: "initial"
 };
 var ALIGN = {
   left: (maxWidth) => ({
@@ -583,7 +605,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = import_tokens2.size[contentType][size];
-  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, {
     display: "grid",
     css: {
       gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
@@ -596,23 +618,6 @@ var Container = ({
   }, children);
 };
 
-// src/Content/Content.tsx
-var import_react13 = __toESM(require("react"));
-var import_system8 = require("@marigold/system");
-var Content = ({
-  children,
-  variant,
-  size,
-  ...props
-}) => {
-  const styles = (0, import_system8.useComponentStyles)("Content", { variant, size });
-  return /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, {
-    as: "section",
-    ...props,
-    css: styles
-  }, children);
-};
-
 // src/Dialog/Dialog.tsx
 var import_react22 = __toESM(require("react"));
 var import_button2 = require("@react-aria/button");
@@ -930,6 +935,7 @@ var Image = ({
   return /* @__PURE__ */ import_react25.default.createElement(import_system15.Box, {
     ...props,
     as: "img",
+    __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
     css
   });
 };
@@ -2037,11 +2043,13 @@ var Split = (props) => /* @__PURE__ */ import_react52.default.createElement(impo
 // src/Stack/Stack.tsx
 var import_react53 = __toESM(require("react"));
 var ALIGNMENT_X2 = {
+  none: "initial",
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
 var ALIGNMENT_Y2 = {
+  none: "initial",
   top: "flex-start",
   center: "center",
   bottom: "flex-end"
@@ -2049,8 +2057,8 @@ var ALIGNMENT_Y2 = {
 var Stack = ({
   children,
   space = "none",
-  alignX = "left",
-  alignY = "top",
+  alignX = "none",
+  alignY = "none",
   stretch = false,
   ...props
 }) => /* @__PURE__ */ import_react53.default.createElement(import_system.Box, {
@@ -2061,7 +2069,7 @@ var Stack = ({
     gap: space,
     alignItems: ALIGNMENT_X2[alignX],
     justifyContent: ALIGNMENT_Y2[alignY],
-    blockSize: stretch ? "100%" : "auto"
+    blockSize: stretch ? "100%" : "initial"
   },
   ...props
 }, children);
@@ -2531,7 +2539,7 @@ var Text = ({
   return /* @__PURE__ */ import_react65.default.createElement(import_system47.Box, {
     as: "p",
     ...props,
-    css: { color, cursor, outline, fontSize, textAlign: align, ...styles }
+    css: [styles, { color, cursor, outline, fontSize, textAlign: align }]
   }, children);
 };
 
@@ -2779,6 +2787,7 @@ Tooltip.Trigger = TooltipTrigger;
   Aside,
   Aspect,
   Badge,
+  Body,
   Box,
   Breakout,
   Button,
@@ -2789,7 +2798,6 @@ Tooltip.Trigger = TooltipTrigger;
   CheckboxGroupContext,
   Columns,
   Container,
-  Content,
   Dialog,
   Divider,
   Footer,
@@ -2823,6 +2831,7 @@ Tooltip.Trigger = TooltipTrigger;
   Tooltip,
   Underlay,
   VisuallyHidden,
+  extendTheme,
   useAsyncList,
   useCheckboxGroupContext,
   useListData,

package/dist/index.mjs

@@ -1,6 +1,10 @@
 // src/hooks.ts
 import { useAsyncList, useListData } from "@react-stately/data";
 
+// src/theme.ts
+import merge from "deepmerge";
+var extendTheme = (baseTheme, extendTheme2) => merge(baseTheme, extendTheme2);
+
 // src/Aside/Aside.tsx
 import React from "react";
 
@@ -80,34 +84,51 @@ var useAlignment = (direction) => {
   return "flex-start";
 };
 var Breakout = ({
-  horizontalAlign,
-  verticalAlign,
+  alignX,
+  alignY,
+  height,
   children,
   ...props
 }) => {
-  const alignItems = useAlignment(horizontalAlign);
-  const justifyContent = useAlignment(verticalAlign);
+  const alignItems = useAlignment(alignY);
+  const justifyContent = useAlignment(alignX);
   return /* @__PURE__ */ React4.createElement(Box, {
     alignItems,
     justifyContent,
     width: "100%",
-    display: verticalAlign || horizontalAlign ? "flex" : "block",
-    css: {
-      gridColumn: "1 / -1"
+    height,
+    display: alignY || alignX ? "flex" : "block",
+    __baseCSS: {
+      gridColumn: "1 / -1 !important"
     },
     ...props
   }, children);
 };
 
+// src/Body/Body.tsx
+import React5 from "react";
+import {
+  Box as Box2,
+  useComponentStyles as useComponentStyles2
+} from "@marigold/system";
+var Body = ({ children, variant, size, ...props }) => {
+  const styles = useComponentStyles2("Body", { variant, size });
+  return /* @__PURE__ */ React5.createElement(Box2, {
+    as: "section",
+    ...props,
+    css: styles
+  }, children);
+};
+
 // src/Button/Button.tsx
-import React5, { forwardRef } from "react";
+import React6, { forwardRef } from "react";
 import { useButton } from "@react-aria/button";
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import {
-  Box as Box2,
-  useComponentStyles as useComponentStyles2,
+  Box as Box3,
+  useComponentStyles as useComponentStyles3,
   useStateProps
 } from "@marigold/system";
 var Button = forwardRef(
@@ -145,13 +166,13 @@ var Button = forwardRef(
       },
       buttonRef
     );
-    const styles = useComponentStyles2("Button", { variant, size });
+    const styles = useComponentStyles3("Button", { variant, size });
     const stateProps = useStateProps({
       active: isPressed,
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ React5.createElement(Box2, {
+    return /* @__PURE__ */ React6.createElement(Box3, {
       ...mergeProps(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       as,
@@ -173,10 +194,10 @@ var Button = forwardRef(
 );
 
 // src/Card/Card.tsx
-import React6 from "react";
+import React7 from "react";
 import {
-  Box as Box3,
-  useComponentStyles as useComponentStyles3
+  Box as Box4,
+  useComponentStyles as useComponentStyles4
 } from "@marigold/system";
 var Card = ({
   children,
@@ -191,21 +212,21 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const styles = useComponentStyles3("Card", { variant, size });
-  return /* @__PURE__ */ React6.createElement(Box3, {
+  const styles = useComponentStyles4("Card", { variant, size });
+  return /* @__PURE__ */ React7.createElement(Box4, {
     ...props,
     css: [styles, { p, px, py, pt, pb, pl, pr }]
   }, children);
 };
 
 // src/Center/Center.tsx
-import React7 from "react";
+import React8 from "react";
 var Center = ({
   maxWidth,
   space = "none",
   children,
   ...props
-}) => /* @__PURE__ */ React7.createElement(Box, {
+}) => /* @__PURE__ */ React8.createElement(Box, {
   css: {
     boxSizing: "content-box",
     display: "flex",
@@ -220,33 +241,33 @@ var Center = ({
 }, children);
 
 // src/Checkbox/Checkbox.tsx
-import React10, { forwardRef as forwardRef2 } from "react";
+import React11, { forwardRef as forwardRef2 } from "react";
 import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { useToggleState } from "@react-stately/toggle";
 import {
-  Box as Box6,
-  useComponentStyles as useComponentStyles6,
+  Box as Box7,
+  useComponentStyles as useComponentStyles7,
   useStateProps as useStateProps2
 } from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
-import React9, { createContext, useContext } from "react";
+import React10, { createContext, useContext } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
 } from "@react-stately/checkbox";
 import {
-  Box as Box5,
-  useComponentStyles as useComponentStyles5
+  Box as Box6,
+  useComponentStyles as useComponentStyles6
 } from "@marigold/system";
 
 // src/Label/Label.tsx
-import React8 from "react";
+import React9 from "react";
 import { Required } from "@marigold/icons";
-import { Box as Box4, useComponentStyles as useComponentStyles4 } from "@marigold/system";
+import { Box as Box5, useComponentStyles as useComponentStyles5 } from "@marigold/system";
 var Label = ({
   as = "label",
   required,
@@ -255,13 +276,13 @@ var Label = ({
   size,
   ...props
 }) => {
-  const styles = useComponentStyles4("Label", { size, variant });
-  return /* @__PURE__ */ React8.createElement(Box4, {
+  const styles = useComponentStyles5("Label", { size, variant });
+  return /* @__PURE__ */ React9.createElement(Box5, {
     ...props,
     as,
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles
-  }, children, required && /* @__PURE__ */ React8.createElement(Required, {
+  }, children, required && /* @__PURE__ */ React9.createElement(Required, {
     role: "presentation",
     size: 16,
     fill: "error"
@@ -292,19 +313,19 @@ var CheckboxGroup = ({
   };
   const state = useCheckboxGroupState(props);
   const { groupProps, labelProps } = useCheckboxGroup(props, state);
-  const styles = useComponentStyles5(
+  const styles = useComponentStyles6(
     "CheckboxGroup",
     { variant, size },
     { parts: ["container", "group"] }
   );
-  return /* @__PURE__ */ React9.createElement(Box5, {
+  return /* @__PURE__ */ React10.createElement(Box6, {
     ...groupProps,
     css: styles.container
-  }, props.label && /* @__PURE__ */ React9.createElement(Label, {
+  }, props.label && /* @__PURE__ */ React10.createElement(Label, {
     as: "span",
     required,
     ...labelProps
-  }, props.label), /* @__PURE__ */ React9.createElement(Box5, {
+  }, props.label), /* @__PURE__ */ React10.createElement(Box6, {
     role: "presentation",
     __baseCSS: {
       display: "flex",
@@ -312,29 +333,29 @@ var CheckboxGroup = ({
       alignItems: "start"
     },
     css: styles.group
-  }, /* @__PURE__ */ React9.createElement(CheckboxGroupContext.Provider, {
+  }, /* @__PURE__ */ React10.createElement(CheckboxGroupContext.Provider, {
     value: { variant, size, error, ...state }
   }, children)));
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React10.createElement("svg", {
+var CheckMark = () => /* @__PURE__ */ React11.createElement("svg", {
   viewBox: "0 0 12 10"
-}, /* @__PURE__ */ React10.createElement("path", {
+}, /* @__PURE__ */ React11.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
 }));
-var IndeterminateMark = () => /* @__PURE__ */ React10.createElement("svg", {
+var IndeterminateMark = () => /* @__PURE__ */ React11.createElement("svg", {
   width: "12",
   height: "3",
   viewBox: "0 0 12 3"
-}, /* @__PURE__ */ React10.createElement("path", {
+}, /* @__PURE__ */ React11.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
 }));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React10.createElement(Box6, {
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React11.createElement(Box7, {
   "aria-hidden": "true",
   __baseCSS: {
     width: 16,
@@ -349,7 +370,7 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React1
   },
   css,
   ...props
-}, indeterminate ? /* @__PURE__ */ React10.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React10.createElement(CheckMark, null) : null);
+}, indeterminate ? /* @__PURE__ */ React11.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React11.createElement(CheckMark, null) : null);
 var Checkbox = forwardRef2(
   ({
     size,
@@ -395,7 +416,7 @@ var Checkbox = forwardRef2(
       }),
       inputRef
     );
-    const styles = useComponentStyles6(
+    const styles = useComponentStyles7(
       "Checkbox",
       {
         variant: (groupState == null ? void 0 : groupState.variant) || variant,
@@ -414,7 +435,7 @@ var Checkbox = forwardRef2(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React10.createElement(Box6, {
+    return /* @__PURE__ */ React11.createElement(Box7, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -425,7 +446,7 @@ var Checkbox = forwardRef2(
       css: styles.container,
       ...hoverProps,
       ...stateProps
-    }, /* @__PURE__ */ React10.createElement(Box6, {
+    }, /* @__PURE__ */ React11.createElement(Box7, {
       as: "input",
       ref: inputRef,
       css: {
@@ -440,12 +461,12 @@ var Checkbox = forwardRef2(
       },
       ...inputProps,
       ...focusProps
-    }), /* @__PURE__ */ React10.createElement(Icon, {
+    }), /* @__PURE__ */ React11.createElement(Icon, {
       checked: inputProps.checked,
       indeterminate,
       css: styles.checkbox,
       ...stateProps
-    }), props.children && /* @__PURE__ */ React10.createElement(Box6, {
+    }), props.children && /* @__PURE__ */ React11.createElement(Box7, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -453,7 +474,7 @@ var Checkbox = forwardRef2(
 );
 
 // src/Columns/Columns.tsx
-import React11, {
+import React12, {
   Children,
   cloneElement,
   isValidElement
@@ -461,7 +482,8 @@ import React11, {
 var Columns = ({
   space = "none",
   columns,
-  collapseAt = "40em",
+  collapseAt = "0em",
+  stretch,
   children,
   ...props
 }) => {
@@ -472,17 +494,19 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ React11.createElement(Box, {
-    display: "flex",
+  return /* @__PURE__ */ React12.createElement(Box, {
     css: {
+      display: "flex",
       flexWrap: "wrap",
+      alignItems: "stretch",
+      height: stretch ? "100%" : void 0,
       gap: space,
       "> *": {
         flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
       }
     },
     ...props
-  }, Children.map(children, (child, idx) => /* @__PURE__ */ React11.createElement(Box, {
+  }, Children.map(children, (child, idx) => /* @__PURE__ */ React12.createElement(Box, {
     css: {
       flexGrow: columns[idx]
     }
@@ -490,13 +514,13 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import React12 from "react";
+import React13 from "react";
 import { size as tokenSize } from "@marigold/tokens";
 var ALIGN_ITEMS = {
   left: "start",
   center: "center",
   right: "end",
-  none: "undefined"
+  none: "initial"
 };
 var ALIGN = {
   left: (maxWidth) => ({
@@ -521,7 +545,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = tokenSize[contentType][size];
-  return /* @__PURE__ */ React12.createElement(Box, {
+  return /* @__PURE__ */ React13.createElement(Box, {
     display: "grid",
     css: {
       gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
@@ -534,26 +558,6 @@ var Container = ({
   }, children);
 };
 
-// src/Content/Content.tsx
-import React13 from "react";
-import {
-  Box as Box7,
-  useComponentStyles as useComponentStyles7
-} from "@marigold/system";
-var Content = ({
-  children,
-  variant,
-  size,
-  ...props
-}) => {
-  const styles = useComponentStyles7("Content", { variant, size });
-  return /* @__PURE__ */ React13.createElement(Box7, {
-    as: "section",
-    ...props,
-    css: styles
-  }, children);
-};
-
 // src/Dialog/Dialog.tsx
 import React21, { useRef as useRef3 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
@@ -881,6 +885,7 @@ var Image = ({
   return /* @__PURE__ */ React24.createElement(Box12, {
     ...props,
     as: "img",
+    __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
     css
   });
 };
@@ -2025,11 +2030,13 @@ var Split = (props) => /* @__PURE__ */ React47.createElement(Box28, {
 // src/Stack/Stack.tsx
 import React48 from "react";
 var ALIGNMENT_X2 = {
+  none: "initial",
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
 var ALIGNMENT_Y2 = {
+  none: "initial",
   top: "flex-start",
   center: "center",
   bottom: "flex-end"
@@ -2037,8 +2044,8 @@ var ALIGNMENT_Y2 = {
 var Stack = ({
   children,
   space = "none",
-  alignX = "left",
-  alignY = "top",
+  alignX = "none",
+  alignY = "none",
   stretch = false,
   ...props
 }) => /* @__PURE__ */ React48.createElement(Box, {
@@ -2049,7 +2056,7 @@ var Stack = ({
     gap: space,
     alignItems: ALIGNMENT_X2[alignX],
     justifyContent: ALIGNMENT_Y2[alignY],
-    blockSize: stretch ? "100%" : "auto"
+    blockSize: stretch ? "100%" : "initial"
   },
   ...props
 }, children);
@@ -2165,7 +2172,7 @@ import {
   Cell,
   Column,
   Row,
-  TableBody as Body,
+  TableBody as Body2,
   TableHeader as Header2,
   useTableState
 } from "@react-stately/table";
@@ -2507,7 +2514,7 @@ var Table = ({
     }
   ))))));
 };
-Table.Body = Body;
+Table.Body = Body2;
 Table.Cell = Cell;
 Table.Column = Column;
 Table.Header = Header2;
@@ -2537,7 +2544,7 @@ var Text = ({
   return /* @__PURE__ */ React59.createElement(Box35, {
     as: "p",
     ...props,
-    css: { color, cursor, outline, fontSize, textAlign: align, ...styles }
+    css: [styles, { color, cursor, outline, fontSize, textAlign: align }]
   }, children);
 };
 
@@ -2791,6 +2798,7 @@ export {
   Aside,
   Aspect,
   Badge,
+  Body,
   Box,
   Breakout,
   Button,
@@ -2801,7 +2809,6 @@ export {
   CheckboxGroupContext,
   Columns,
   Container,
-  Content,
   Dialog,
   Divider,
   Footer,
@@ -2835,6 +2842,7 @@ export {
   Tooltip,
   Underlay,
   VisuallyHidden,
+  extendTheme,
   useAsyncList,
   useCheckboxGroupContext,
   useListData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "2.2.0",
+  "version": "3.0.1",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,14 +23,14 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.0.5",
-    "@marigold/system": "2.2.0",
+    "@marigold/icons": "1.1.1",
+    "@marigold/system": "3.0.1",
     "@marigold/tokens": "3.1.0",
-    "@marigold/types": "0.5.3",
+    "@marigold/types": "0.5.4",
     "@react-aria/button": "3.6.1",
     "@react-aria/checkbox": "3.5.1",
     "@react-aria/dialog": "3.3.1",
-    "@react-aria/focus": "3.7.0",
+    "@react-aria/focus": "3.8.0",
     "@react-aria/i18n": "3.6.0",
     "@react-aria/interactions": "3.11.0",
     "@react-aria/link": "3.3.3",
@@ -69,6 +69,7 @@
     "@react-types/radio": "3.2.3",
     "@react-types/shared": "3.14.1",
     "@react-types/tooltip": "3.2.3",
+    "deepmerge": "^4.2.2",
     "react-is": "18.2.0"
   },
   "peerDependencies": {