@marigold/components 2.1.3 → 3.0.0

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,27 +194,39 @@ 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, variant, size, ...props }) => {
-  const styles = useComponentStyles3("Card", { variant, size });
-  return /* @__PURE__ */ React6.createElement(Box3, {
+var Card = ({
+  children,
+  variant,
+  size,
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  pl,
+  pr,
+  ...props
+}) => {
+  const styles = useComponentStyles4("Card", { variant, size });
+  return /* @__PURE__ */ React7.createElement(Box4, {
     ...props,
-    css: styles
+    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",
@@ -208,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,
@@ -243,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"
@@ -280,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",
@@ -300,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,
@@ -337,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,
@@ -383,7 +416,7 @@ var Checkbox = forwardRef2(
       }),
       inputRef
     );
-    const styles = useComponentStyles6(
+    const styles = useComponentStyles7(
       "Checkbox",
       {
         variant: (groupState == null ? void 0 : groupState.variant) || variant,
@@ -402,7 +435,7 @@ var Checkbox = forwardRef2(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React10.createElement(Box6, {
+    return /* @__PURE__ */ React11.createElement(Box7, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -413,7 +446,7 @@ var Checkbox = forwardRef2(
       css: styles.container,
       ...hoverProps,
       ...stateProps
-    }, /* @__PURE__ */ React10.createElement(Box6, {
+    }, /* @__PURE__ */ React11.createElement(Box7, {
       as: "input",
       ref: inputRef,
       css: {
@@ -428,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));
@@ -441,11 +474,16 @@ var Checkbox = forwardRef2(
 );
 
 // src/Columns/Columns.tsx
-import React11, { Children } from "react";
+import React12, {
+  Children,
+  cloneElement,
+  isValidElement
+} from "react";
 var Columns = ({
   space = "none",
   columns,
-  collapseAt = "40em",
+  collapseAt = "0em",
+  stretch,
   children,
   ...props
 }) => {
@@ -456,89 +494,70 @@ var Columns = ({
       )}`
     );
   }
-  const getColumnWidths = columns.map((column, index) => {
-    return {
-      [`> :nth-of-type(${index + 1})`]: {
-        flexGrow: column
+  return /* @__PURE__ */ React12.createElement(Box, {
+    css: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "stretch",
+      height: stretch ? "100%" : void 0,
+      gap: space,
+      "> *": {
+        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
       }
-    };
-  });
-  return /* @__PURE__ */ React11.createElement(Box, {
-    display: "flex",
-    css: Object.assign(
-      {
-        flexWrap: "wrap",
-        gap: space,
-        "> *": {
-          flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
-        }
-      },
-      ...getColumnWidths
-    ),
+    },
     ...props
-  }, children);
+  }, Children.map(children, (child, idx) => /* @__PURE__ */ React12.createElement(Box, {
+    css: {
+      flexGrow: columns[idx]
+    }
+  }, isValidElement(child) ? cloneElement(child) : null)));
 };
 
 // src/Container/Container.tsx
-import React12 from "react";
+import React13 from "react";
 import { size as tokenSize } from "@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 = tokenSize[contentType][size];
-  let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
-  let gridColumn = 1;
-  if (alignContainer === "center") {
-    gridTemplateColumns = `1fr ${maxWidth} 1fr`;
-    gridColumn = 2;
-  }
-  if (alignContainer === "right") {
-    gridTemplateColumns = `1fr 1fr ${maxWidth}`;
-    gridColumn = 3;
-  }
-  return /* @__PURE__ */ React12.createElement(Box, {
+  return /* @__PURE__ */ React13.createElement(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
-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";
@@ -1630,7 +1649,7 @@ import React44, {
 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { FocusScope as FocusScope3, useFocusRing as useFocusRing6 } from "@react-aria/focus";
-import { useMessageFormatter } from "@react-aria/i18n";
+import { useLocalizedStringFormatter } from "@react-aria/i18n";
 import { DismissButton as DismissButton2, useOverlayPosition as useOverlayPosition2 } from "@react-aria/overlays";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSelectState } from "@react-stately/select";
@@ -1775,14 +1794,14 @@ var Chevron = ({ css }) => /* @__PURE__ */ React44.createElement(Box27, {
 }));
 var Select = forwardRef10(
   ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
-    const formatMessage = useMessageFormatter(messages);
+    const formatMessage = useLocalizedStringFormatter(messages);
     const buttonRef = useObjectRef8(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 = useSelectState(props);
@@ -2010,11 +2029,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"
@@ -2022,8 +2043,8 @@ var ALIGNMENT_Y2 = {
 var Stack = ({
   children,
   space = "none",
-  alignX = "left",
-  alignY = "top",
+  alignX = "none",
+  alignY = "none",
   stretch = false,
   ...props
 }) => /* @__PURE__ */ React48.createElement(Box, {
@@ -2034,7 +2055,7 @@ var Stack = ({
     gap: space,
     alignItems: ALIGNMENT_X2[alignX],
     justifyContent: ALIGNMENT_Y2[alignY],
-    blockSize: stretch ? "100%" : "auto"
+    blockSize: stretch ? "100%" : "initial"
   },
   ...props
 }, children);
@@ -2150,7 +2171,7 @@ import {
   Cell,
   Column,
   Row,
-  TableBody as Body,
+  TableBody as Body2,
   TableHeader as Header2,
   useTableState
 } from "@react-stately/table";
@@ -2450,18 +2471,15 @@ var Table = ({
   const { collection } = state;
   return /* @__PURE__ */ React58.createElement(TableContext.Provider, {
     value: { state, interactive, styles }
-  }, /* @__PURE__ */ React58.createElement(Box34, {
-    __baseCSS: {
-      overflow: ["scroll", "unset"],
-      whiteSpace: ["nowrap", "unset"]
-    }
   }, /* @__PURE__ */ React58.createElement(Box34, {
     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,9 +2511,9 @@ var Table = ({
         cell
       });
     }
-  )))))));
+  ))))));
 };
-Table.Body = Body;
+Table.Body = Body2;
 Table.Cell = Cell;
 Table.Column = Column;
 Table.Header = Header2;
@@ -2525,7 +2543,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);
 };
 
@@ -2779,6 +2797,7 @@ export {
   Aside,
   Aspect,
   Badge,
+  Body,
   Box,
   Breakout,
   Button,
@@ -2789,7 +2808,6 @@ export {
   CheckboxGroupContext,
   Columns,
   Container,
-  Content,
   Dialog,
   Divider,
   Footer,
@@ -2823,6 +2841,7 @@ export {
   Tooltip,
   Underlay,
   VisuallyHidden,
+  extendTheme,
   useAsyncList,
   useCheckboxGroupContext,
   useListData,