@marigold/components 2.0.0 → 2.1.0

package/dist/index.mjs

@@ -159,6 +159,7 @@ var Button = forwardRef(
       __baseCSS: {
         display: "inline-flex",
         alignItems: "center",
+        justifyContent: "center",
         gap: "0.5ch",
         cursor: disabled ? "not-allowed" : "pointer",
         width: fullWidth ? "100%" : void 0,
@@ -377,6 +378,7 @@ var Checkbox = forwardRef2(
       useToggleState({
         isSelected: checked,
         defaultSelected: defaultChecked,
+        isReadOnly: readOnly,
         ...props
       }),
       inputRef
@@ -846,13 +848,25 @@ var Footer = ({ children, variant, size, ...props }) => {
 
 // src/Image/Image.tsx
 import React24 from "react";
+import { Box as Box12 } from "@marigold/system";
 import { useComponentStyles as useComponentStyles14 } from "@marigold/system";
-var Image = ({ variant, ...props }) => {
-  const styles = useComponentStyles14("Image", { variant });
-  return /* @__PURE__ */ React24.createElement(Box, {
+var Image = ({
+  variant,
+  size,
+  fit,
+  position,
+  ...props
+}) => {
+  const styles = useComponentStyles14("Image", { variant, size });
+  const css = {
+    ...styles,
+    objectFit: fit,
+    objectPosition: position
+  };
+  return /* @__PURE__ */ React24.createElement(Box12, {
     ...props,
     as: "img",
-    css: styles
+    css
   });
 };
 
@@ -887,11 +901,11 @@ var Inline = ({
 
 // src/Input/Input.tsx
 import React26, { forwardRef as forwardRef5 } from "react";
-import { Box as Box12, useComponentStyles as useComponentStyles15 } from "@marigold/system";
+import { Box as Box13, useComponentStyles as useComponentStyles15 } from "@marigold/system";
 var Input = forwardRef5(
   ({ variant, size, type = "text", ...props }, ref) => {
     const styles = useComponentStyles15("Input", { variant, size });
-    return /* @__PURE__ */ React26.createElement(Box12, {
+    return /* @__PURE__ */ React26.createElement(Box13, {
       ...props,
       ref,
       as: "input",
@@ -940,7 +954,7 @@ var Link = forwardRef6(
 // src/List/List.tsx
 import React29 from "react";
 import {
-  Box as Box14,
+  Box as Box15,
   useComponentStyles as useComponentStyles17
 } from "@marigold/system";
 
@@ -951,10 +965,10 @@ var useListContext = () => useContext3(ListContext);
 
 // src/List/ListItem.tsx
 import React28 from "react";
-import { Box as Box13 } from "@marigold/system";
+import { Box as Box14 } from "@marigold/system";
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ React28.createElement(Box13, {
+  return /* @__PURE__ */ React28.createElement(Box14, {
     ...props,
     as: "li",
     css: styles
@@ -974,7 +988,7 @@ var List = ({
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ React29.createElement(Box14, {
+  return /* @__PURE__ */ React29.createElement(Box15, {
     ...props,
     as,
     css: styles[as]
@@ -992,7 +1006,7 @@ import { DismissButton } from "@react-aria/overlays";
 import { Item } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
 import {
-  Box as Box16,
+  Box as Box17,
   useComponentStyles as useComponentStyles18
 } from "@marigold/system";
 
@@ -1050,7 +1064,7 @@ import React31, { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { Box as Box15, useStateProps as useStateProps3 } from "@marigold/system";
+import { Box as Box16, useStateProps as useStateProps3 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = useRef5(null);
   const { onClose } = useMenuContext();
@@ -1067,7 +1081,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
   const stateProps = useStateProps3({
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ React31.createElement(Box15, {
+  return /* @__PURE__ */ React31.createElement(Box16, {
     as: "li",
     ref,
     __baseCSS: {
@@ -1097,7 +1111,7 @@ var Menu = ({ variant, size, ...props }) => {
     restoreFocus: true
   }, /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement(DismissButton, {
     onDismiss: ownProps.onClose
-  }), /* @__PURE__ */ React32.createElement(Box16, {
+  }), /* @__PURE__ */ React32.createElement(Box17, {
     as: "ul",
     ref,
     style: { width: triggerWidth },
@@ -1171,20 +1185,20 @@ import { useNumberField } from "@react-aria/numberfield";
 import { mergeProps as mergeProps6, useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
-  Box as Box20,
+  Box as Box21,
   useComponentStyles as useComponentStyles21,
   useStateProps as useStateProps5
 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
 import React35 from "react";
-import { Box as Box18 } from "@marigold/system";
+import { Box as Box19 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
 import React34 from "react";
 import { Exclamation as Exclamation2 } from "@marigold/icons";
 import {
-  Box as Box17,
+  Box as Box18,
   useComponentStyles as useComponentStyles20
 } from "@marigold/system";
 var HelpText = ({
@@ -1205,7 +1219,7 @@ var HelpText = ({
     { variant, size },
     { parts: ["container", "icon"] }
   );
-  return /* @__PURE__ */ React34.createElement(Box17, {
+  return /* @__PURE__ */ React34.createElement(Box18, {
     ...hasErrorMessage ? errorMessageProps : descriptionProps,
     ...props,
     __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
@@ -1234,7 +1248,7 @@ var FieldBase = ({
   stateProps
 }) => {
   const hasHelpText = !!description || errorMessage && error;
-  return /* @__PURE__ */ React35.createElement(Box18, {
+  return /* @__PURE__ */ React35.createElement(Box19, {
     css: { display: "flex", flexDirection: "column", width }
   }, label && /* @__PURE__ */ React35.createElement(Label, {
     required,
@@ -1260,8 +1274,8 @@ import React36, { useRef as useRef7 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { Box as Box19, useStateProps as useStateProps4 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React36.createElement(Box19, {
+import { Box as Box20, useStateProps as useStateProps4 } from "@marigold/system";
+var Plus = () => /* @__PURE__ */ React36.createElement(Box20, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
@@ -1271,7 +1285,7 @@ var Plus = () => /* @__PURE__ */ React36.createElement(Box19, {
   clipRule: "evenodd",
   d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
 }));
-var Minus = () => /* @__PURE__ */ React36.createElement(Box19, {
+var Minus = () => /* @__PURE__ */ React36.createElement(Box20, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
@@ -1294,7 +1308,7 @@ var StepButton = ({ direction, css, ...props }) => {
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React36.createElement(Box19, {
+  return /* @__PURE__ */ React36.createElement(Box20, {
     __baseCSS: {
       display: "flex",
       alignItems: "center",
@@ -1371,7 +1385,7 @@ var NumberField = forwardRef7(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React37.createElement(Box20, {
+    }, /* @__PURE__ */ React37.createElement(Box21, {
       "data-group": true,
       __baseCSS: {
         display: "flex",
@@ -1446,7 +1460,7 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
 import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
 import {
-  Box as Box22,
+  Box as Box23,
   useComponentStyles as useComponentStyles23,
   useStateProps as useStateProps6
 } from "@marigold/system";
@@ -1463,7 +1477,7 @@ import React39 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import {
-  Box as Box21,
+  Box as Box22,
   useComponentStyles as useComponentStyles22
 } from "@marigold/system";
 var RadioGroup = ({
@@ -1492,14 +1506,14 @@ var RadioGroup = ({
     { variant, size },
     { parts: ["container", "group"] }
   );
-  return /* @__PURE__ */ React39.createElement(Box21, {
+  return /* @__PURE__ */ React39.createElement(Box22, {
     ...radioGroupProps,
     css: styles.container
   }, props.label && /* @__PURE__ */ React39.createElement(Label, {
     as: "span",
     required,
     ...labelProps
-  }, props.label), /* @__PURE__ */ React39.createElement(Box21, {
+  }, props.label), /* @__PURE__ */ React39.createElement(Box22, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1523,7 +1537,7 @@ var Dot = () => /* @__PURE__ */ React40.createElement("svg", {
   cy: "3",
   r: "3"
 }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React40.createElement(Box22, {
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React40.createElement(Box23, {
   "aria-hidden": "true",
   __baseCSS: {
     width: 16,
@@ -1569,7 +1583,7 @@ var Radio = forwardRef8(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React40.createElement(Box22, {
+    return /* @__PURE__ */ React40.createElement(Box23, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -1581,7 +1595,7 @@ var Radio = forwardRef8(
       css: styles.container,
       ...hoverProps,
       ...stateProps
-    }, /* @__PURE__ */ React40.createElement(Box22, {
+    }, /* @__PURE__ */ React40.createElement(Box23, {
       as: "input",
       ref: inputRef,
       css: {
@@ -1600,7 +1614,7 @@ var Radio = forwardRef8(
       checked: inputProps.checked,
       css: styles.radio,
       ...stateProps
-    }), /* @__PURE__ */ React40.createElement(Box22, {
+    }), /* @__PURE__ */ React40.createElement(Box23, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -1622,7 +1636,7 @@ import { useSelectState } from "@react-stately/select";
 import { Item as Item2, Section } from "@react-stately/collections";
 import { mergeProps as mergeProps7, useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import {
-  Box as Box26,
+  Box as Box27,
   useComponentStyles as useComponentStyles25,
   useStateProps as useStateProps8
 } from "@marigold/system";
@@ -1631,7 +1645,7 @@ import {
 import React43, { forwardRef as forwardRef9 } from "react";
 import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
 import {
-  Box as Box25,
+  Box as Box26,
   useComponentStyles as useComponentStyles24
 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
@@ -1644,12 +1658,12 @@ var useListBoxContext = () => useContext6(ListBoxContext);
 // src/ListBox/ListBoxSection.tsx
 import React42 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
-import { Box as Box24 } from "@marigold/system";
+import { Box as Box25 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
 import React41, { useRef as useRef8 } from "react";
 import { useOption } from "@react-aria/listbox";
-import { Box as Box23, useStateProps as useStateProps7 } from "@marigold/system";
+import { Box as Box24, useStateProps as useStateProps7 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
   const ref = useRef8(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption(
@@ -1665,7 +1679,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React41.createElement(Box23, {
+  return /* @__PURE__ */ React41.createElement(Box24, {
     as: "li",
     ref,
     css: styles.option,
@@ -1681,14 +1695,14 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React42.createElement(Box24, {
+  return /* @__PURE__ */ React42.createElement(Box25, {
     as: "li",
     css: styles.section,
     ...itemProps
-  }, section.rendered && /* @__PURE__ */ React42.createElement(Box24, {
+  }, section.rendered && /* @__PURE__ */ React42.createElement(Box25, {
     css: styles.sectionTitle,
     ...headingProps
-  }, section.rendered), /* @__PURE__ */ React42.createElement(Box24, {
+  }, section.rendered), /* @__PURE__ */ React42.createElement(Box25, {
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list,
@@ -1712,9 +1726,9 @@ var ListBox = forwardRef9(
     );
     return /* @__PURE__ */ React43.createElement(ListBoxContext.Provider, {
       value: { styles }
-    }, /* @__PURE__ */ React43.createElement(Box25, {
+    }, /* @__PURE__ */ React43.createElement(Box26, {
       css: styles.container
-    }, /* @__PURE__ */ React43.createElement(Box25, {
+    }, /* @__PURE__ */ React43.createElement(Box26, {
       as: "ul",
       ref: innerRef,
       __baseCSS: { listStyle: "none", p: 0 },
@@ -1745,7 +1759,7 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React44.createElement(Box26, {
+var Chevron = ({ css }) => /* @__PURE__ */ React44.createElement(Box27, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   css,
@@ -1822,7 +1836,7 @@ var Select = forwardRef10(
       label: props.label,
       name: props.name,
       isDisabled: disabled
-    }), /* @__PURE__ */ React44.createElement(Box26, {
+    }), /* @__PURE__ */ React44.createElement(Box27, {
       as: "button",
       __baseCSS: {
         display: "flex",
@@ -1835,7 +1849,7 @@ var Select = forwardRef10(
       ref: buttonRef,
       ...mergeProps7(buttonProps, focusProps),
       ...stateProps
-    }, /* @__PURE__ */ React44.createElement(Box26, {
+    }, /* @__PURE__ */ React44.createElement(Box27, {
       css: {
         overflow: "hidden",
         whiteSpace: "nowrap"
@@ -1985,8 +1999,8 @@ var Slider = forwardRef11(
 
 // src/Split/Split.tsx
 import React47 from "react";
-import { Box as Box27 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React47.createElement(Box27, {
+import { Box as Box28 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React47.createElement(Box28, {
   ...props,
   role: "separator",
   css: { flexGrow: 1 }
@@ -2140,7 +2154,7 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box33,
+  Box as Box34,
   useComponentStyles as useComponentStyles28
 } from "@marigold/system";
 
@@ -2164,7 +2178,7 @@ import React51, { useRef as useRef10 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { Box as Box28, useStateProps as useStateProps11 } from "@marigold/system";
+import { Box as Box29, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef10(null);
   const { state, styles } = useTableContext();
@@ -2178,7 +2192,7 @@ var TableCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React51.createElement(Box28, {
+  return /* @__PURE__ */ React51.createElement(Box29, {
     as: "td",
     ref,
     css: styles.cell,
@@ -2192,7 +2206,7 @@ import React52, { useRef as useRef11 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { Box as Box29, useStateProps as useStateProps12 } from "@marigold/system";
+import { Box as Box30, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2231,7 +2245,7 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing10();
   const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React52.createElement(Box29, {
+  return /* @__PURE__ */ React52.createElement(Box30, {
     as: "td",
     ref,
     __baseCSS: {
@@ -2253,11 +2267,11 @@ import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { Box as Box30, useStateProps as useStateProps13 } from "@marigold/system";
+import { Box as Box31, useStateProps as useStateProps13 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React53.createElement(Box30, {
+}) => /* @__PURE__ */ React53.createElement(Box31, {
   as: "span",
   role: "presentation",
   "aria-hidden": "true",
@@ -2284,7 +2298,7 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React53.createElement(Box30, {
+  return /* @__PURE__ */ React53.createElement(Box31, {
     as: "th",
     colSpan: column.colspan,
     ref,
@@ -2326,7 +2340,7 @@ import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { Box as Box31, useStateProps as useStateProps14 } from "@marigold/system";
+import { Box as Box32, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
   const { state, styles } = useTableContext();
@@ -2348,7 +2362,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React56.createElement(Box31, {
+  return /* @__PURE__ */ React56.createElement(Box32, {
     as: "tr",
     ref,
     css: styles.row,
@@ -2366,7 +2380,7 @@ import {
   useTableSelectAllCheckbox
 } from "@react-aria/table";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system";
+import { Box as Box33, useStateProps as useStateProps15 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
   const ref = useRef15(null);
   const { state, styles } = useTableContext();
@@ -2384,7 +2398,7 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React57.createElement(Box32, {
+  return /* @__PURE__ */ React57.createElement(Box33, {
     as: "th",
     ref,
     __baseCSS: {
@@ -2421,7 +2435,7 @@ var Table = ({
   const { collection } = state;
   return /* @__PURE__ */ React58.createElement(TableContext.Provider, {
     value: { state, styles }
-  }, /* @__PURE__ */ React58.createElement(Box33, {
+  }, /* @__PURE__ */ React58.createElement(Box34, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
@@ -2471,7 +2485,7 @@ import React59 from "react";
 import {
   useComponentStyles as useComponentStyles29
 } from "@marigold/system";
-import { Box as Box34 } from "@marigold/system";
+import { Box as Box35 } from "@marigold/system";
 var Text = ({
   variant,
   size,
@@ -2487,7 +2501,7 @@ var Text = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React59.createElement(Box34, {
+  return /* @__PURE__ */ React59.createElement(Box35, {
     as: "p",
     ...props,
     css: { color, cursor, outline, fontSize, textAlign: align, ...styles }
@@ -2501,7 +2515,7 @@ import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import {
-  Box as Box35,
+  Box as Box36,
   useComponentStyles as useComponentStyles30,
   useStateProps as useStateProps16
 } from "@marigold/system";
@@ -2553,7 +2567,7 @@ var TextArea = forwardRef13(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React60.createElement(Box35, {
+    }, /* @__PURE__ */ React60.createElement(Box36, {
       as: "textarea",
       css: styles,
       ref: textAreaRef,
@@ -2642,7 +2656,7 @@ var Tiles = React62.forwardRef(
 import React64 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box36,
+  Box as Box37,
   useComponentStyles as useComponentStyles31
 } from "@marigold/system";
 
@@ -2719,13 +2733,13 @@ var Tooltip = ({ children, variant, size }) => {
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ React64.createElement(Box36, {
+  return /* @__PURE__ */ React64.createElement(Box37, {
     ...tooltipProps,
     ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }, /* @__PURE__ */ React64.createElement("div", null, children), /* @__PURE__ */ React64.createElement(Box36, {
+  }, /* @__PURE__ */ React64.createElement("div", null, children), /* @__PURE__ */ React64.createElement(Box37, {
     ...arrowProps,
     __baseCSS: {
       position: "absolute",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,8 +23,8 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.0.0",
-    "@marigold/system": "2.0.0",
+    "@marigold/icons": "1.0.1",
+    "@marigold/system": "2.1.0",
     "@marigold/tokens": "3.1.0",
     "@marigold/types": "0.5.2",
     "@react-aria/button": "3.6.0",