@marigold/components 2.1.1 → 2.2.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, CSSObject, BoxOwnProps, StateAttrProps, Theme as Theme$1, ResponsiveStyleValue, ThemeProviderProps, GlobalProps } from '@marigold/system';
+import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, CSSObject, BoxOwnProps, StateAttrProps, Theme as Theme$1, ThemeProviderProps, GlobalProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
 import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, NonZeroPercentage } from '@marigold/types';
@@ -50,8 +50,15 @@ interface CardThemeExtension extends ThemeExtension<'Card'> {
 }
 interface CardProps extends ThemeComponentProps, ComponentProps<'div'> {
     children?: ReactNode;
+    p?: ResponsiveStyleValue<string>;
+    px?: ResponsiveStyleValue<string>;
+    py?: ResponsiveStyleValue<string>;
+    pt?: ResponsiveStyleValue<string>;
+    pb?: ResponsiveStyleValue<string>;
+    pl?: ResponsiveStyleValue<string>;
+    pr?: ResponsiveStyleValue<string>;
 }
-declare const Card: ({ children, variant, size, ...props }: CardProps) => JSX.Element;
+declare const Card: ({ children, variant, size, p, px, py, pt, pb, pl, pr, ...props }: CardProps) => JSX.Element;
 
 interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
     'container',
@@ -63,7 +70,7 @@ interface CheckboxThemeExtension extends ThemeExtensionsWithParts<'Checkbox', [
  * `react-aria` has a slightly different API for the above events.
  * Thus, we adjust our regular props to match them.
  */
-declare type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur';
+declare type CustomCheckboxProps = 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
 interface CheckboxProps extends ThemeComponentProps, Omit<ComponentProps<'input'>, 'size' | 'type' | 'defaultValue' | CustomCheckboxProps>, Pick<AriaCheckboxProps, CustomCheckboxProps> {
     children?: ReactNode;
     indeterminate?: boolean;
@@ -470,8 +477,8 @@ interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
  * `react-aria` has a slightly different API for the above events.
  * Thus, we adjust our regular props to match them.
  */
-declare type CustomTextAreEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onCopy' | 'onSelect' | 'onPaste' | 'onCut' | 'onCompositionStart' | 'onCompositionUpdate' | 'onCompositionEnd' | 'onBeforeInput' | 'onInput';
-interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'value' | 'defaultValue' | 'size' | CustomTextAreEvents>, Pick<AriaTextFieldProps, CustomTextAreEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+declare type CustomTextAreaEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onCopy' | 'onSelect' | 'onPaste' | 'onCut' | 'onCompositionStart' | 'onCompositionUpdate' | 'onCompositionEnd' | 'onBeforeInput' | 'onInput' | 'onKeyDown' | 'onKeyUp';
+interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'value' | 'defaultValue' | 'size' | CustomTextAreaEvents>, Pick<AriaTextFieldProps, CustomTextAreaEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
     width?: string;
@@ -553,9 +560,9 @@ interface ContainerProps extends ComponentProps<'div'> {
     contentType?: 'content' | 'header';
     size?: keyof typeof size.content | keyof typeof size.header;
     align?: 'left' | 'right' | 'center';
-    alignContainer?: 'left' | 'right' | 'center';
+    alignItems?: 'left' | 'right' | 'center' | 'none';
 }
-declare const Container: ({ contentType, size, align, alignContainer, children, ...props }: ContainerProps) => JSX.Element;
+declare const Container: ({ contentType, size, align, alignItems, children, ...props }: ContainerProps) => JSX.Element;
 
 declare const ALIGNMENT_X$1: {
     left: string;
@@ -603,12 +610,17 @@ interface StackProps {
 }
 declare const Stack: ({ children, space, alignX, alignY, stretch, ...props }: StackProps) => JSX.Element;
 
-interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'size' | 'width'>, 
+/**
+ * `react-aria` has a slightly different API for the above events.
+ * Thus, we adjust our regular props to match them.
+ */
+declare type CustomTextFieldEvents = 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';
+interface TextFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'size' | 'width' | CustomTextFieldEvents>, 
 /**
  * `react-aria` has a slightly different API for `onChange`, `onFocus`
  * and `onBlur` events. Thus, we adjust our regular props to match them.
  */
-Pick<AriaTextFieldProps, 'onChange' | 'onFocus' | 'onBlur'>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
+Pick<AriaTextFieldProps, CustomTextFieldEvents>, Pick<FieldBaseProps, 'label' | 'description' | 'error' | 'errorMessage'> {
     variant?: string;
     size?: string;
     width?: string;
@@ -624,4 +636,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, CustomTextAreEvents, 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, 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 };

package/dist/index.js

@@ -253,11 +253,23 @@ 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 }) => {
+var Card = ({
+  children,
+  variant,
+  size,
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  pl,
+  pr,
+  ...props
+}) => {
   const styles = (0, import_system4.useComponentStyles)("Card", { variant, size });
   return /* @__PURE__ */ import_react6.default.createElement(import_system4.Box, {
     ...props,
-    css: styles
+    css: [styles, { p, px, py, pt, pb, pl, pr }]
   }, children);
 };
 
@@ -522,63 +534,62 @@ var Columns = ({
       )}`
     );
   }
-  const getColumnWidths = columns.map((column, index) => {
-    return {
-      [`> :nth-of-type(${index + 1})`]: {
-        flexGrow: column
-      }
-    };
-  });
   return /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
     display: "flex",
-    css: Object.assign(
-      {
-        flexWrap: "wrap",
-        gap: space,
-        "> *": {
-          flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
-        }
-      },
-      ...getColumnWidths
-    ),
+    css: {
+      flexWrap: "wrap",
+      gap: space,
+      "> *": {
+        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
+      }
+    },
     ...props
-  }, children);
+  }, import_react11.Children.map(children, (child, idx) => /* @__PURE__ */ import_react11.default.createElement(import_system.Box, {
+    css: {
+      flexGrow: columns[idx]
+    }
+  }, (0, import_react11.isValidElement)(child) ? (0, import_react11.cloneElement)(child) : null)));
 };
 
 // src/Container/Container.tsx
 var import_react12 = __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: "undefined"
+};
+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, {
     display: "grid",
     css: {
-      gridTemplateColumns,
-      placeItems: ALIGNMENT[align],
+      gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
+      placeItems: ALIGN_ITEMS[alignItems],
       "> *": {
-        gridColumn
+        gridColumn: ALIGN[align](maxWidth).gridColumn
       }
     },
     ...props
@@ -994,13 +1005,14 @@ var Link = (0, import_react28.forwardRef)(
       linkRef
     );
     const styles = (0, import_system18.useComponentStyles)("Link", { variant, size });
-    return /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
+    return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, " ", /* @__PURE__ */ import_react28.default.createElement(import_system.Box, {
       as,
+      role: "link",
       css: styles,
       ref: linkRef,
       ...props,
       ...linkProps
-    }, children);
+    }, children), " ");
   }
 );
 
@@ -1790,14 +1802,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);
@@ -2184,7 +2196,7 @@ var import_utils15 = require("@react-aria/utils");
 var import_system40 = require("@marigold/system");
 var TableCell = ({ cell }) => {
   const ref = (0, import_react57.useRef)(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
     {
@@ -2193,13 +2205,18 @@ var TableCell = ({ cell }) => {
     state,
     ref
   );
+  const cellProps = interactive ? gridCellProps : {
+    ...gridCellProps,
+    onMouseDown: (e) => e.stopPropagation(),
+    onPointerDown: (e) => e.stopPropagation()
+  };
   const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
   const stateProps = (0, import_system40.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ import_react57.default.createElement(import_system40.Box, {
     as: "td",
     ref,
     css: styles.cell,
-    ...(0, import_utils15.mergeProps)(gridCellProps, focusProps),
+    ...(0, import_utils15.mergeProps)(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2305,6 +2322,7 @@ var TableColumnHeader = ({ column }) => {
     as: "th",
     colSpan: column.colspan,
     ref,
+    __baseCSS: { cursor: "default" },
     css: styles.header,
     ...(0, import_utils18.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
@@ -2346,7 +2364,7 @@ var import_utils19 = require("@react-aria/utils");
 var import_system43 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react62.useRef)(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const { rowProps, isPressed } = (0, import_table7.useTableRow)(
     {
       node: row
@@ -2357,7 +2375,9 @@ var TableRow = ({ children, row }) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
-  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({ isDisabled: disabled });
+  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({
+    isDisabled: disabled || !interactive
+  });
   const stateProps = (0, import_system43.useStateProps)({
     disabled,
     selected,
@@ -2368,6 +2388,9 @@ var TableRow = ({ children, row }) => {
   return /* @__PURE__ */ import_react62.default.createElement(import_system43.Box, {
     as: "tr",
     ref,
+    __baseCSS: {
+      cursor: !interactive ? "text" : disabled ? "default" : "pointer"
+    },
     css: styles.row,
     ...(0, import_utils19.mergeProps)(rowProps, focusProps, hoverProps),
     ...stateProps
@@ -2419,12 +2442,15 @@ var Table = ({
   variant,
   size,
   stretch,
+  selectionMode = "none",
   ...props
 }) => {
+  const interactive = selectionMode !== "none";
   const tableRef = (0, import_react64.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
-    showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
+    selectionMode,
+    showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
   const styles = (0, import_system45.useComponentStyles)(
@@ -2434,12 +2460,15 @@ var Table = ({
   );
   const { collection } = state;
   return /* @__PURE__ */ import_react64.default.createElement(TableContext.Provider, {
-    value: { state, styles }
+    value: { state, interactive, styles }
   }, /* @__PURE__ */ import_react64.default.createElement(import_system45.Box, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
+      display: "block",
       borderCollapse: "collapse",
+      overflow: "auto",
+      whiteSpace: "nowrap",
       width: stretch ? "100%" : void 0
     },
     css: styles.table,

package/dist/index.mjs

@@ -178,11 +178,23 @@ import {
   Box as Box3,
   useComponentStyles as useComponentStyles3
 } from "@marigold/system";
-var Card = ({ children, variant, size, ...props }) => {
+var Card = ({
+  children,
+  variant,
+  size,
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  pl,
+  pr,
+  ...props
+}) => {
   const styles = useComponentStyles3("Card", { variant, size });
   return /* @__PURE__ */ React6.createElement(Box3, {
     ...props,
-    css: styles
+    css: [styles, { p, px, py, pt, pb, pl, pr }]
   }, children);
 };
 
@@ -441,7 +453,11 @@ var Checkbox = forwardRef2(
 );
 
 // src/Columns/Columns.tsx
-import React11, { Children } from "react";
+import React11, {
+  Children,
+  cloneElement,
+  isValidElement
+} from "react";
 var Columns = ({
   space = "none",
   columns,
@@ -456,63 +472,62 @@ var Columns = ({
       )}`
     );
   }
-  const getColumnWidths = columns.map((column, index) => {
-    return {
-      [`> :nth-of-type(${index + 1})`]: {
-        flexGrow: column
-      }
-    };
-  });
   return /* @__PURE__ */ React11.createElement(Box, {
     display: "flex",
-    css: Object.assign(
-      {
-        flexWrap: "wrap",
-        gap: space,
-        "> *": {
-          flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
-        }
-      },
-      ...getColumnWidths
-    ),
+    css: {
+      flexWrap: "wrap",
+      gap: space,
+      "> *": {
+        flexBasis: `calc(( ${collapseAt} - 100%) * 999)`
+      }
+    },
     ...props
-  }, children);
+  }, Children.map(children, (child, idx) => /* @__PURE__ */ React11.createElement(Box, {
+    css: {
+      flexGrow: columns[idx]
+    }
+  }, isValidElement(child) ? cloneElement(child) : null)));
 };
 
 // src/Container/Container.tsx
 import React12 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: "undefined"
+};
+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, {
     display: "grid",
     css: {
-      gridTemplateColumns,
-      placeItems: ALIGNMENT[align],
+      gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
+      placeItems: ALIGN_ITEMS[alignItems],
       "> *": {
-        gridColumn
+        gridColumn: ALIGN[align](maxWidth).gridColumn
       }
     },
     ...props
@@ -941,13 +956,14 @@ var Link = forwardRef6(
       linkRef
     );
     const styles = useComponentStyles16("Link", { variant, size });
-    return /* @__PURE__ */ React27.createElement(Box, {
+    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, " ", /* @__PURE__ */ React27.createElement(Box, {
       as,
+      role: "link",
       css: styles,
       ref: linkRef,
       ...props,
       ...linkProps
-    }, children);
+    }, children), " ");
   }
 );
 
@@ -1629,7 +1645,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";
@@ -1774,14 +1790,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);
@@ -2181,7 +2197,7 @@ import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { Box as Box29, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef10(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
     {
@@ -2190,13 +2206,18 @@ var TableCell = ({ cell }) => {
     state,
     ref
   );
+  const cellProps = interactive ? gridCellProps : {
+    ...gridCellProps,
+    onMouseDown: (e) => e.stopPropagation(),
+    onPointerDown: (e) => e.stopPropagation()
+  };
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ React51.createElement(Box29, {
     as: "td",
     ref,
     css: styles.cell,
-    ...mergeProps9(gridCellProps, focusProps),
+    ...mergeProps9(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2302,6 +2323,7 @@ var TableColumnHeader = ({ column }) => {
     as: "th",
     colSpan: column.colspan,
     ref,
+    __baseCSS: { cursor: "default" },
     css: styles.header,
     ...mergeProps11(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
@@ -2343,7 +2365,7 @@ import { mergeProps as mergeProps12 } from "@react-aria/utils";
 import { Box as Box32, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
-  const { state, styles } = useTableContext();
+  const { interactive, state, styles } = useTableContext();
   const { rowProps, isPressed } = useTableRow(
     {
       node: row
@@ -2354,7 +2376,9 @@ var TableRow = ({ children, row }) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = useFocusRing12({ within: true });
-  const { hoverProps, isHovered } = useHover7({ isDisabled: disabled });
+  const { hoverProps, isHovered } = useHover7({
+    isDisabled: disabled || !interactive
+  });
   const stateProps = useStateProps14({
     disabled,
     selected,
@@ -2365,6 +2389,9 @@ var TableRow = ({ children, row }) => {
   return /* @__PURE__ */ React56.createElement(Box32, {
     as: "tr",
     ref,
+    __baseCSS: {
+      cursor: !interactive ? "text" : disabled ? "default" : "pointer"
+    },
     css: styles.row,
     ...mergeProps12(rowProps, focusProps, hoverProps),
     ...stateProps
@@ -2419,12 +2446,15 @@ var Table = ({
   variant,
   size,
   stretch,
+  selectionMode = "none",
   ...props
 }) => {
+  const interactive = selectionMode !== "none";
   const tableRef = useRef16(null);
   const state = useTableState({
     ...props,
-    showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
+    selectionMode,
+    showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
   const styles = useComponentStyles28(
@@ -2434,12 +2464,15 @@ var Table = ({
   );
   const { collection } = state;
   return /* @__PURE__ */ React58.createElement(TableContext.Provider, {
-    value: { state, styles }
+    value: { state, interactive, styles }
   }, /* @__PURE__ */ React58.createElement(Box34, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
+      display: "block",
       borderCollapse: "collapse",
+      overflow: "auto",
+      whiteSpace: "nowrap",
       width: stretch ? "100%" : void 0
     },
     css: styles.table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,52 +23,52 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.0.2",
-    "@marigold/system": "2.1.1",
+    "@marigold/icons": "1.0.5",
+    "@marigold/system": "2.2.0",
     "@marigold/tokens": "3.1.0",
-    "@marigold/types": "0.5.2",
-    "@react-aria/button": "3.6.0",
-    "@react-aria/checkbox": "3.5.0",
-    "@react-aria/dialog": "3.3.0",
+    "@marigold/types": "0.5.3",
+    "@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/i18n": "3.5.1",
-    "@react-aria/interactions": "3.10.0",
-    "@react-aria/link": "3.3.2",
-    "@react-aria/listbox": "3.6.0",
-    "@react-aria/menu": "3.6.0",
-    "@react-aria/numberfield": "3.3.0",
-    "@react-aria/overlays": "3.10.0",
-    "@react-aria/radio": "3.3.0",
-    "@react-aria/select": "3.8.0",
-    "@react-aria/separator": "3.2.2",
-    "@react-aria/slider": "3.2.0",
+    "@react-aria/i18n": "3.6.0",
+    "@react-aria/interactions": "3.11.0",
+    "@react-aria/link": "3.3.3",
+    "@react-aria/listbox": "3.6.1",
+    "@react-aria/menu": "3.6.1",
+    "@react-aria/numberfield": "3.3.1",
+    "@react-aria/overlays": "3.10.1",
+    "@react-aria/radio": "3.3.1",
+    "@react-aria/select": "3.8.1",
+    "@react-aria/separator": "3.2.3",
+    "@react-aria/slider": "3.2.1",
     "@react-aria/ssr": "3.3.0",
-    "@react-aria/switch": "3.2.2",
-    "@react-aria/table": "3.4.0",
-    "@react-aria/textfield": "3.7.0",
-    "@react-aria/tooltip": "3.3.0",
-    "@react-aria/utils": "3.13.2",
-    "@react-aria/visually-hidden": "3.4.0",
-    "@react-stately/checkbox": "3.2.0",
-    "@react-stately/collections": "3.4.2",
+    "@react-aria/switch": "3.2.3",
+    "@react-aria/table": "3.4.1",
+    "@react-aria/textfield": "3.7.1",
+    "@react-aria/tooltip": "3.3.1",
+    "@react-aria/utils": "3.13.3",
+    "@react-aria/visually-hidden": "3.4.1",
+    "@react-stately/checkbox": "3.2.1",
+    "@react-stately/collections": "3.4.3",
     "@react-stately/data": "^3.6.0",
-    "@react-stately/list": "3.5.2",
-    "@react-stately/menu": "3.4.0",
-    "@react-stately/numberfield": "3.2.0",
-    "@react-stately/overlays": "3.4.0",
-    "@react-stately/radio": "3.5.0",
-    "@react-stately/select": "3.3.0",
-    "@react-stately/slider": "3.2.0",
-    "@react-stately/table": "3.3.0",
-    "@react-stately/toggle": "3.4.0",
-    "@react-stately/tooltip": "3.2.0",
-    "@react-stately/tree": "3.3.2",
-    "@react-types/checkbox": "3.3.2",
-    "@react-types/dialog": "3.4.2",
-    "@react-types/numberfield": "3.3.2",
-    "@react-types/radio": "3.2.2",
-    "@react-types/shared": "3.14.0",
-    "@react-types/tooltip": "3.2.2",
+    "@react-stately/list": "3.5.3",
+    "@react-stately/menu": "3.4.1",
+    "@react-stately/numberfield": "3.2.1",
+    "@react-stately/overlays": "3.4.1",
+    "@react-stately/radio": "3.5.1",
+    "@react-stately/select": "3.3.1",
+    "@react-stately/slider": "3.2.1",
+    "@react-stately/table": "3.4.0",
+    "@react-stately/toggle": "3.4.1",
+    "@react-stately/tooltip": "3.2.1",
+    "@react-stately/tree": "3.3.3",
+    "@react-types/checkbox": "3.3.3",
+    "@react-types/dialog": "3.4.3",
+    "@react-types/numberfield": "3.3.3",
+    "@react-types/radio": "3.2.3",
+    "@react-types/shared": "3.14.1",
+    "@react-types/tooltip": "3.2.3",
     "react-is": "18.2.0"
   },
   "peerDependencies": {
@@ -79,7 +79,7 @@
     "@marigold/tsconfig": "0.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "6.2.2"
+    "tsup": "6.2.3"
   },
   "scripts": {
     "build": "tsup src/index.ts",