@marigold/components 2.1.3 → 3.0.0

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,24 +270,36 @@ var Button = (0, import_react5.forwardRef)(
 );
 
 // src/Card/Card.tsx
-var import_react6 = __toESM(require("react"));
-var import_system4 = require("@marigold/system");
-var Card = ({ children, variant, size, ...props }) => {
-  const styles = (0, import_system4.useComponentStyles)("Card", { variant, size });
-  return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, {
+var import_react7 = __toESM(require("react"));
+var import_system5 = require("@marigold/system");
+var Card = ({
+  children,
+  variant,
+  size,
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  pl,
+  pr,
+  ...props
+}) => {
+  const styles = (0, import_system5.useComponentStyles)("Card", { variant, size });
+  return /* @__PURE__ */ import_react7.default.createElement(import_system5.Box, {
     ...props,
-    css: styles
+    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",
@@ -283,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,
@@ -309,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"
@@ -323,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,
@@ -346,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",
@@ -366,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,
@@ -403,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,
@@ -449,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,
@@ -459,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,
@@ -468,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",
@@ -479,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: {
@@ -494,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));
@@ -507,101 +538,86 @@ 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
       )}`
     );
   }
-  const getColumnWidths = columns.map((column, index) => {
-    return {
-      [`> :nth-of-type(${index + 1})`]: {
-        flexGrow: column
+  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)`
       }
-    };
-  });
-  return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
-    display: "flex",
-    css: Object.assign(
-      {
-        flexWrap: "wrap",
-        gap: space,
-        "> *": {
-          flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
-        }
-      },
-      ...getColumnWidths
-    ),
+    },
     ...props
-  }, children);
+  }, import_react12.Children.map(children, (child, idx) => /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+    css: {
+      flexGrow: columns[idx]
+    }
+  }, (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 ALIGNMENT = {
-  left: "flex-start",
+var ALIGN_ITEMS = {
+  left: "start",
   center: "center",
-  right: "flex-end"
+  right: "end",
+  none: "initial"
+};
+var ALIGN = {
+  left: (maxWidth) => ({
+    gridTemplateColumns: `minmax(0, ${maxWidth}) 1fr 1fr`,
+    gridColumn: 1
+  }),
+  center: (maxWidth) => ({
+    gridTemplateColumns: `1fr minmax(0, ${maxWidth}) 1fr`,
+    gridColumn: 2
+  }),
+  right: (maxWidth) => ({
+    gridTemplateColumns: `1fr 1fr minmax(0, ${maxWidth})`,
+    gridColumn: 3
+  })
 };
 var Container = ({
   contentType = "content",
   size = "medium",
   align = "left",
-  alignContainer = "left",
+  alignItems = "none",
   children,
   ...props
 }) => {
   const maxWidth = import_tokens2.size[contentType][size];
-  let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
-  let gridColumn = 1;
-  if (alignContainer === "center") {
-    gridTemplateColumns = `1fr ${maxWidth} 1fr`;
-    gridColumn = 2;
-  }
-  if (alignContainer === "right") {
-    gridTemplateColumns = `1fr 1fr ${maxWidth}`;
-    gridColumn = 3;
-  }
-  return /* @__PURE__ */ import_react12.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react13.default.createElement(import_system.Box, {
     display: "grid",
     css: {
-      gridTemplateColumns,
-      placeItems: ALIGNMENT[align],
+      gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
+      placeItems: ALIGN_ITEMS[alignItems],
       "> *": {
-        gridColumn
+        gridColumn: ALIGN[align](maxWidth).gridColumn
       }
     },
     ...props
   }, 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");
@@ -1791,14 +1807,14 @@ var Chevron = ({ css }) => /* @__PURE__ */ import_react49.default.createElement(
 }));
 var Select = (0, import_react49.forwardRef)(
   ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
-    const formatMessage = (0, import_i18n2.useMessageFormatter)(messages);
+    const formatMessage = (0, import_i18n2.useLocalizedStringFormatter)(messages);
     const buttonRef = (0, import_utils11.useObjectRef)(ref);
     const props = {
       isOpen: open,
       isDisabled: disabled,
       isRequired: required,
       validationState: error ? "invalid" : "valid",
-      placeholder: rest.placeholder || formatMessage("placeholder"),
+      placeholder: rest.placeholder || formatMessage.format("placeholder"),
       ...rest
     };
     const state = (0, import_select2.useSelectState)(props);
@@ -2026,11 +2042,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"
@@ -2038,8 +2056,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, {
@@ -2050,7 +2068,7 @@ var Stack = ({
     gap: space,
     alignItems: ALIGNMENT_X2[alignX],
     justifyContent: ALIGNMENT_Y2[alignY],
-    blockSize: stretch ? "100%" : "auto"
+    blockSize: stretch ? "100%" : "initial"
   },
   ...props
 }, children);
@@ -2450,18 +2468,15 @@ var Table = ({
   const { collection } = state;
   return /* @__PURE__ */ import_react64.default.createElement(TableContext.Provider, {
     value: { state, interactive, styles }
-  }, /* @__PURE__ */ import_react64.default.createElement(import_system45.Box, {
-    __baseCSS: {
-      overflow: ["scroll", "unset"],
-      whiteSpace: ["nowrap", "unset"]
-    }
   }, /* @__PURE__ */ import_react64.default.createElement(import_system45.Box, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
+      display: "block",
       borderCollapse: "collapse",
-      width: stretch ? "100%" : void 0,
-      overflow: ["scroll", "unset"]
+      overflow: "auto",
+      whiteSpace: "nowrap",
+      width: stretch ? "100%" : void 0
     },
     css: styles.table,
     ...gridProps
@@ -2493,7 +2508,7 @@ var Table = ({
         cell
       });
     }
-  )))))));
+  ))))));
 };
 Table.Body = import_table10.TableBody;
 Table.Cell = import_table10.Cell;
@@ -2523,7 +2538,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);
 };
 
@@ -2771,6 +2786,7 @@ Tooltip.Trigger = TooltipTrigger;
   Aside,
   Aspect,
   Badge,
+  Body,
   Box,
   Breakout,
   Button,
@@ -2781,7 +2797,6 @@ Tooltip.Trigger = TooltipTrigger;
   CheckboxGroupContext,
   Columns,
   Container,
-  Content,
   Dialog,
   Divider,
   Footer,
@@ -2815,6 +2830,7 @@ Tooltip.Trigger = TooltipTrigger;
   Tooltip,
   Underlay,
   VisuallyHidden,
+  extendTheme,
   useAsyncList,
   useCheckboxGroupContext,
   useListData,