@marigold/components 3.0.6 → 4.1.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { useAsyncList, useListData } from '@react-stately/data';
-import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, CSSObject, BoxOwnProps, StateAttrProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } from '@marigold/system';
+import { ThemeExtension, ThemeComponentProps, ResponsiveStyleValue, ThemeExtensionsWithParts, StateAttrProps, CSSObject, BoxOwnProps, Theme as Theme$1, ThemeProviderProps, GlobalProps, SVGProps } 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 React, { ReactNode, HTMLAttributes, LabelHTMLAttributes, Key, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, NonZeroPercentage } from '@marigold/types';
 import * as _react_types_shared from '@react-types/shared';
 import { PressEvents, CollectionElement } from '@react-types/shared';
@@ -148,6 +148,35 @@ interface DividerProps extends SeparatorProps {
 }
 declare const Divider: ({ variant, ...props }: DividerProps) => JSX.Element;
 
+interface LabelThemeExtension extends ThemeExtension<'Label'> {
+}
+interface LabelProps extends ComponentProps<'label'> {
+    as?: 'label' | 'span';
+    variant?: string;
+    size?: string;
+    required?: boolean;
+}
+declare const Label: ({ as, required, children, variant, size, ...props }: LabelProps) => JSX.Element;
+
+interface FieldBaseProps {
+    children?: ReactNode;
+    variant?: string;
+    size?: string;
+    width?: string;
+    disabled?: boolean;
+    required?: boolean;
+    label?: ReactNode;
+    labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
+    description?: ReactNode;
+    descriptionProps?: HTMLAttributes<HTMLElement>;
+    error?: boolean;
+    errorMessage?: ReactNode;
+    errorMessageProps?: HTMLAttributes<HTMLElement>;
+    stateProps?: StateAttrProps;
+}
+interface FieldThemeExtension extends ThemeExtension<'Field'> {
+}
+
 interface FooterThemeExtension extends ThemeExtension<'Footer'> {
 }
 interface FooterProps extends ThemeComponentProps, ComponentProps<'footer'> {
@@ -197,16 +226,6 @@ interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'size'>,
 }
 declare const Input: React.ForwardRefExoticComponent<InputOwnProps & React.RefAttributes<HTMLInputElement>>;
 
-interface LabelThemeExtension extends ThemeExtension<'Label'> {
-}
-interface LabelProps extends ComponentProps<'label'> {
-    as?: 'label' | 'span';
-    variant?: string;
-    size?: string;
-    required?: boolean;
-}
-declare const Label: ({ as, required, children, variant, size, ...props }: LabelProps) => JSX.Element;
-
 interface LinkThemeExtension extends ThemeExtension<'Link'> {
 }
 interface LinkOwnProps extends PressEvents, BoxOwnProps {
@@ -278,23 +297,6 @@ interface MessageProps extends ComponentProps<'div'> {
 }
 declare const Message: ({ messageTitle, variant, size, children, ...props }: MessageProps) => JSX.Element;
 
-interface FieldBaseProps {
-    children?: ReactNode;
-    variant?: string;
-    size?: string;
-    width?: string;
-    disabled?: boolean;
-    required?: boolean;
-    label?: ReactNode;
-    labelProps?: LabelHTMLAttributes<HTMLLabelElement> & Pick<LabelProps, 'as'>;
-    description?: ReactNode;
-    descriptionProps?: HTMLAttributes<HTMLElement>;
-    error?: boolean;
-    errorMessage?: ReactNode;
-    errorMessageProps?: HTMLAttributes<HTMLElement>;
-    stateProps?: StateAttrProps;
-}
-
 interface NumberFieldThemeExtension extends ThemeExtensionsWithParts<'NumberField', ['group', 'stepper']> {
 }
 /**
@@ -468,10 +470,11 @@ interface TextProps extends ThemeComponentProps, ComponentProps<'p'>, Omit<BoxOw
     color?: string;
     cursor?: string;
     fontSize?: string;
+    fontWeight?: string;
     outline?: string;
     children?: React.ReactNode;
 }
-declare const Text: ({ variant, size, align, color, fontSize, cursor, outline, children, ...props }: TextProps) => JSX.Element;
+declare const Text: ({ variant, size, align, color, fontSize, fontWeight, cursor, outline, children, ...props }: TextProps) => JSX.Element;
 
 interface TextAreaThemeExtension extends ThemeExtension<'TextArea'> {
 }
@@ -507,7 +510,7 @@ declare const Tooltip: {
     Trigger: ({ disabled, open, delay, placement, children, ...rest }: TooltipTriggerProps) => JSX.Element;
 };
 
-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 ComponentStyles extends BadgeThemeExtension, ButtonThemeExtension, CardThemeExtension, CheckboxThemeExtension, CheckboxGroupThemeExtension, BodyThemeExtension, DialogThemeExtension, DividerThemeExtension, FieldThemeExtension, 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;
@@ -640,11 +643,12 @@ declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.
 
 interface TilesProps {
     children: ReactNode;
+    tilesWidth: string;
     space?: ResponsiveStyleValue<string>;
-    itemMinWidth?: ResponsiveStyleValue<string>;
-    gridAutoRows?: boolean;
+    stretch?: boolean;
+    equalHeight?: boolean;
 }
-declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => JSX.Element;
 
 declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
 

package/dist/index.js

@@ -346,7 +346,6 @@ var Label = ({
     ...props,
     as,
     "aria-required": required,
-    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles
   }, children, required && /* @__PURE__ */ import_react9.default.createElement(import_icons.Required, {
     role: "presentation",
@@ -424,6 +423,7 @@ var IndeterminateMark = () => /* @__PURE__ */ import_react11.default.createEleme
 var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
   "aria-hidden": "true",
   __baseCSS: {
+    flex: "0 0 16px",
     width: 16,
     height: 16,
     bg: "#fff",
@@ -572,7 +572,7 @@ var Columns = ({
     css: {
       flexGrow: columns[idx]
     }
-  }, (0, import_react12.isValidElement)(child) ? (0, import_react12.cloneElement)(child) : null)));
+  }, (0, import_react12.isValidElement)(child) ? (0, import_react12.cloneElement)(child) : child)));
 };
 
 // src/Container/Container.tsx
@@ -652,7 +652,7 @@ var Headline = ({
 }) => {
   const styles = (0, import_system10.useComponentStyles)("Headline", {
     variant,
-    size: size ?? `level-${level}`
+    size: size != null ? size : `level-${level}`
   });
   return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, {
     as: `h${level}`,
@@ -1103,14 +1103,14 @@ var MenuTrigger = ({ disabled, children }) => {
   const { overlayProps: positionProps } = (0, import_overlays5.useOverlayPosition)({
     targetRef: menuTriggerRef,
     overlayRef,
-    isOpen: state.isOpen
+    isOpen: state.isOpen,
+    placement: "bottom left"
   });
   const menuContext = {
     ...menuProps,
     open: state.isOpen,
     onClose: state.close,
-    autoFocus: state.focusStrategy,
-    triggerWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0
+    autoFocus: state.focusStrategy
   };
   return /* @__PURE__ */ import_react33.default.createElement(MenuContext.Provider, {
     value: menuContext
@@ -1124,6 +1124,7 @@ var MenuTrigger = ({ disabled, children }) => {
     dismissable: true,
     shouldCloseOnBlur: true,
     ref: overlayRef,
+    minWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0,
     ...positionProps
   }, menu));
 };
@@ -1166,7 +1167,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
 
 // src/Menu/Menu.tsx
 var Menu = ({ variant, size, ...props }) => {
-  const { triggerWidth, ...menuContext } = useMenuContext();
+  const menuContext = useMenuContext();
   const ownProps = { ...props, ...menuContext };
   const ref = (0, import_react35.useRef)(null);
   const state = (0, import_tree.useTreeState)({ ...ownProps, selectionMode: "none" });
@@ -1183,7 +1184,6 @@ var Menu = ({ variant, size, ...props }) => {
   }), /* @__PURE__ */ import_react35.default.createElement(import_system22.Box, {
     as: "ul",
     ref,
-    style: { width: triggerWidth },
     __baseCSS: {
       listStyle: "none",
       p: 0,
@@ -1234,9 +1234,10 @@ var Message = ({
     css: styles.container,
     ...props
   }, /* @__PURE__ */ import_react36.default.createElement(import_system.Box, {
-    __baseCSS: { display: "flex", alignItems: "center", gap: 4 }
+    __baseCSS: { display: "flex", alignItems: "top", gap: 4 }
   }, /* @__PURE__ */ import_react36.default.createElement(import_system.Box, {
     role: "presentation",
+    __baseCSS: { flex: "0 0 16px" },
     css: styles.icon
   }, icon), /* @__PURE__ */ import_react36.default.createElement(import_system.Box, {
     css: styles.title
@@ -1310,15 +1311,17 @@ var FieldBase = ({
   stateProps
 }) => {
   const hasHelpText = !!description || errorMessage && error;
+  const style = (0, import_system25.useComponentStyles)("Field", { variant, size });
   return /* @__PURE__ */ import_react38.default.createElement(import_system25.Box, {
-    css: { display: "flex", flexDirection: "column", width }
+    __baseCSS: { width },
+    css: style
   }, label && /* @__PURE__ */ import_react38.default.createElement(Label, {
     required,
     variant,
     size,
     ...labelProps,
     ...stateProps
-  }, label), children, hasHelpText && /* @__PURE__ */ import_react38.default.createElement(HelpText, {
+  }, label), /* @__PURE__ */ import_react38.default.createElement("div", null, children, hasHelpText && /* @__PURE__ */ import_react38.default.createElement(HelpText, {
     ...stateProps,
     variant,
     size,
@@ -1328,7 +1331,7 @@ var FieldBase = ({
     error,
     errorMessage,
     errorMessageProps
-  }));
+  })));
 };
 
 // src/NumberField/StepButton.tsx
@@ -2152,7 +2155,8 @@ var Switch = (0, import_react54.forwardRef)(
         width: 48,
         height: 24,
         bg: "#dee2e6",
-        borderRadius: 20
+        borderRadius: 20,
+        flex: "0 0 48px"
       },
       css: styles.track,
       ...stateProps
@@ -2531,6 +2535,7 @@ var Text = ({
   align,
   color,
   fontSize,
+  fontWeight,
   cursor,
   outline,
   children,
@@ -2543,7 +2548,10 @@ var Text = ({
   return /* @__PURE__ */ import_react65.default.createElement(import_system47.Box, {
     as: "p",
     ...props,
-    css: [styles, { color, cursor, outline, fontSize, textAlign: align }]
+    css: [
+      styles,
+      { color, cursor, outline, fontSize, fontWeight, textAlign: align }
+    ]
   }, children);
 };
 
@@ -2675,29 +2683,36 @@ var TextField = (0, import_react67.forwardRef)(
 
 // src/Tiles/Tiles.tsx
 var import_react68 = __toESM(require("react"));
-var Tiles = import_react68.default.forwardRef(
-  ({
-    space = "none",
-    itemMinWidth = "250px",
-    gridAutoRows,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ import_react68.default.createElement(import_system.Box, {
-    ref,
-    display: "grid",
-    __baseCSS: {
+var import_system50 = require("@marigold/system");
+var Tiles = ({
+  space = "none",
+  stretch = false,
+  equalHeight = false,
+  tilesWidth,
+  children,
+  ...props
+}) => {
+  const { css } = (0, import_system50.useTheme)();
+  const { width } = css({ width: tilesWidth });
+  let column = `min(${typeof width === "number" ? `${width}px` : width}, 100%)`;
+  if (stretch) {
+    column = `minmax(${column}, 1fr)`;
+  }
+  return /* @__PURE__ */ import_react68.default.createElement(import_system.Box, {
+    ...props,
+    css: {
+      display: "grid",
       gap: space,
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`,
-      gridAutoRows: gridAutoRows ? "1fr" : "none"
-    },
-    ...props
-  }, children)
-);
+      gridTemplateColumns: `repeat(auto-fit, ${column})`,
+      gridAutoRows: equalHeight ? "1fr" : void 0
+    }
+  }, children);
+};
 
 // src/Tooltip/Tooltip.tsx
 var import_react71 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system50 = require("@marigold/system");
+var import_system51 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
 var import_react69 = require("react");
@@ -2767,18 +2782,18 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const styles = (0, import_system50.useComponentStyles)(
+  const styles = (0, import_system51.useComponentStyles)(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ import_react71.default.createElement(import_system50.Box, {
+  return /* @__PURE__ */ import_react71.default.createElement(import_system51.Box, {
     ...tooltipProps,
     ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }, /* @__PURE__ */ import_react71.default.createElement("div", null, children), /* @__PURE__ */ import_react71.default.createElement(import_system50.Box, {
+  }, /* @__PURE__ */ import_react71.default.createElement("div", null, children), /* @__PURE__ */ import_react71.default.createElement(import_system51.Box, {
     ...arrowProps,
     __baseCSS: {
       position: "absolute",
@@ -2795,9 +2810,9 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-var import_system51 = require("@marigold/system");
+var import_system52 = require("@marigold/system");
 var import_react72 = __toESM(require("react"));
-var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ import_react72.default.createElement(import_system51.SVG, {
+var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ import_react72.default.createElement(import_system52.SVG, {
   id: "XLoader",
   xmlns: "http://www.w3.org/2000/svg",
   size: 150,
@@ -2814,7 +2829,7 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "1.1s",
+  begin: "1.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 })), /* @__PURE__ */ import_react72.default.createElement("path", {
@@ -2843,7 +2858,7 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
 }, /* @__PURE__ */ import_react72.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
-  values: "1; .01; 1; 1;",
+  values: "1; .01; 1; 1; 1;",
   begin: "0.7s",
   dur: "2.5s",
   repeatCount: "indefinite"
@@ -2914,7 +2929,7 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "0.1s",
+  begin: "0.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 }))));

package/dist/index.mjs

@@ -281,7 +281,6 @@ var Label = ({
     ...props,
     as,
     "aria-required": required,
-    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
     css: styles
   }, children, required && /* @__PURE__ */ React9.createElement(Required, {
     role: "presentation",
@@ -359,6 +358,7 @@ var IndeterminateMark = () => /* @__PURE__ */ React11.createElement("svg", {
 var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React11.createElement(Box7, {
   "aria-hidden": "true",
   __baseCSS: {
+    flex: "0 0 16px",
     width: 16,
     height: 16,
     bg: "#fff",
@@ -511,7 +511,7 @@ var Columns = ({
     css: {
       flexGrow: columns[idx]
     }
-  }, isValidElement(child) ? cloneElement(child) : null)));
+  }, isValidElement(child) ? cloneElement(child) : child)));
 };
 
 // src/Container/Container.tsx
@@ -599,7 +599,7 @@ var Headline = ({
 }) => {
   const styles = useComponentStyles9("Headline", {
     variant,
-    size: size ?? `level-${level}`
+    size: size != null ? size : `level-${level}`
   });
   return /* @__PURE__ */ React15.createElement(Box8, {
     as: `h${level}`,
@@ -1058,14 +1058,14 @@ var MenuTrigger = ({ disabled, children }) => {
   const { overlayProps: positionProps } = useOverlayPosition({
     targetRef: menuTriggerRef,
     overlayRef,
-    isOpen: state.isOpen
+    isOpen: state.isOpen,
+    placement: "bottom left"
   });
   const menuContext = {
     ...menuProps,
     open: state.isOpen,
     onClose: state.close,
-    autoFocus: state.focusStrategy,
-    triggerWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0
+    autoFocus: state.focusStrategy
   };
   return /* @__PURE__ */ React30.createElement(MenuContext.Provider, {
     value: menuContext
@@ -1079,6 +1079,7 @@ var MenuTrigger = ({ disabled, children }) => {
     dismissable: true,
     shouldCloseOnBlur: true,
     ref: overlayRef,
+    minWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0,
     ...positionProps
   }, menu));
 };
@@ -1121,7 +1122,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
 
 // src/Menu/Menu.tsx
 var Menu = ({ variant, size, ...props }) => {
-  const { triggerWidth, ...menuContext } = useMenuContext();
+  const menuContext = useMenuContext();
   const ownProps = { ...props, ...menuContext };
   const ref = useRef6(null);
   const state = useTreeState({ ...ownProps, selectionMode: "none" });
@@ -1138,7 +1139,6 @@ var Menu = ({ variant, size, ...props }) => {
   }), /* @__PURE__ */ React32.createElement(Box17, {
     as: "ul",
     ref,
-    style: { width: triggerWidth },
     __baseCSS: {
       listStyle: "none",
       p: 0,
@@ -1189,9 +1189,10 @@ var Message = ({
     css: styles.container,
     ...props
   }, /* @__PURE__ */ React33.createElement(Box, {
-    __baseCSS: { display: "flex", alignItems: "center", gap: 4 }
+    __baseCSS: { display: "flex", alignItems: "top", gap: 4 }
   }, /* @__PURE__ */ React33.createElement(Box, {
     role: "presentation",
+    __baseCSS: { flex: "0 0 16px" },
     css: styles.icon
   }, icon), /* @__PURE__ */ React33.createElement(Box, {
     css: styles.title
@@ -1210,13 +1211,16 @@ import { mergeProps as mergeProps6, useObjectRef as useObjectRef5 } from "@react
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
   Box as Box21,
-  useComponentStyles as useComponentStyles21,
+  useComponentStyles as useComponentStyles22,
   useStateProps as useStateProps5
 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
 import React35 from "react";
-import { Box as Box19 } from "@marigold/system";
+import {
+  Box as Box19,
+  useComponentStyles as useComponentStyles21
+} from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
 import React34 from "react";
@@ -1272,15 +1276,17 @@ var FieldBase = ({
   stateProps
 }) => {
   const hasHelpText = !!description || errorMessage && error;
+  const style = useComponentStyles21("Field", { variant, size });
   return /* @__PURE__ */ React35.createElement(Box19, {
-    css: { display: "flex", flexDirection: "column", width }
+    __baseCSS: { width },
+    css: style
   }, label && /* @__PURE__ */ React35.createElement(Label, {
     required,
     variant,
     size,
     ...labelProps,
     ...stateProps
-  }, label), children, hasHelpText && /* @__PURE__ */ React35.createElement(HelpText, {
+  }, label), /* @__PURE__ */ React35.createElement("div", null, children, hasHelpText && /* @__PURE__ */ React35.createElement(HelpText, {
     ...stateProps,
     variant,
     size,
@@ -1290,7 +1296,7 @@ var FieldBase = ({
     error,
     errorMessage,
     errorMessageProps
-  }));
+  })));
 };
 
 // src/NumberField/StepButton.tsx
@@ -1384,7 +1390,7 @@ var NumberField = forwardRef7(
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = useComponentStyles21(
+    const styles = useComponentStyles22(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
@@ -1486,7 +1492,7 @@ import { useRadio } from "@react-aria/radio";
 import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
 import {
   Box as Box23,
-  useComponentStyles as useComponentStyles23,
+  useComponentStyles as useComponentStyles24,
   useStateProps as useStateProps6
 } from "@marigold/system";
 
@@ -1503,7 +1509,7 @@ import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import {
   Box as Box22,
-  useComponentStyles as useComponentStyles22
+  useComponentStyles as useComponentStyles23
 } from "@marigold/system";
 var RadioGroup = ({
   children,
@@ -1526,7 +1532,7 @@ var RadioGroup = ({
   };
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps } = useRadioGroup(props, state);
-  const styles = useComponentStyles22(
+  const styles = useComponentStyles23(
     "RadioGroup",
     { variant, size },
     { parts: ["container", "group"] }
@@ -1593,7 +1599,7 @@ var Radio = forwardRef8(
       state,
       inputRef
     );
-    const styles = useComponentStyles23(
+    const styles = useComponentStyles24(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
@@ -1662,7 +1668,7 @@ import { Item as Item2, Section } from "@react-stately/collections";
 import { mergeProps as mergeProps7, useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import {
   Box as Box27,
-  useComponentStyles as useComponentStyles25,
+  useComponentStyles as useComponentStyles26,
   useStateProps as useStateProps8
 } from "@marigold/system";
 
@@ -1671,7 +1677,7 @@ import React43, { forwardRef as forwardRef9 } from "react";
 import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
 import {
   Box as Box26,
-  useComponentStyles as useComponentStyles24
+  useComponentStyles as useComponentStyles25
 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
 
@@ -1744,7 +1750,7 @@ var ListBox = forwardRef9(
   ({ state, variant, size, ...props }, ref) => {
     const innerRef = useObjectRef7(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
-    const styles = useComponentStyles24(
+    const styles = useComponentStyles25(
       "ListBox",
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
@@ -1829,7 +1835,7 @@ var Select = forwardRef10(
       isOpen: state.isOpen,
       placement: "bottom left"
     });
-    const styles = useComponentStyles25(
+    const styles = useComponentStyles26(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
@@ -1912,7 +1918,7 @@ import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
 import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
-import { useComponentStyles as useComponentStyles26 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles27 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
 import React45, { useEffect } from "react";
@@ -1974,7 +1980,7 @@ var Slider = forwardRef11(
       state,
       trackRef
     );
-    const styles = useComponentStyles26(
+    const styles = useComponentStyles27(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
@@ -2071,7 +2077,7 @@ import { useSwitch } from "@react-aria/switch";
 import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
-  useComponentStyles as useComponentStyles27,
+  useComponentStyles as useComponentStyles28,
   useStateProps as useStateProps10
 } from "@marigold/system";
 var Switch = forwardRef12(
@@ -2102,7 +2108,7 @@ var Switch = forwardRef12(
       readOnly,
       focus: isFocusVisible
     });
-    const styles = useComponentStyles27(
+    const styles = useComponentStyles28(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
@@ -2141,7 +2147,8 @@ var Switch = forwardRef12(
         width: 48,
         height: 24,
         bg: "#dee2e6",
-        borderRadius: 20
+        borderRadius: 20,
+        flex: "0 0 48px"
       },
       css: styles.track,
       ...stateProps
@@ -2181,7 +2188,7 @@ import {
 } from "@react-stately/table";
 import {
   Box as Box34,
-  useComponentStyles as useComponentStyles28
+  useComponentStyles as useComponentStyles29
 } from "@marigold/system";
 
 // src/Table/Context.tsx
@@ -2467,7 +2474,7 @@ var Table = ({
     showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const styles = useComponentStyles28(
+  const styles = useComponentStyles29(
     "Table",
     { variant, size },
     { parts: ["table", "header", "row", "cell"] }
@@ -2526,7 +2533,7 @@ Table.Row = Row;
 // src/Text/Text.tsx
 import React59 from "react";
 import {
-  useComponentStyles as useComponentStyles29
+  useComponentStyles as useComponentStyles30
 } from "@marigold/system";
 import { Box as Box35 } from "@marigold/system";
 var Text = ({
@@ -2535,19 +2542,23 @@ var Text = ({
   align,
   color,
   fontSize,
+  fontWeight,
   cursor,
   outline,
   children,
   ...props
 }) => {
-  const styles = useComponentStyles29("Text", {
+  const styles = useComponentStyles30("Text", {
     variant,
     size
   });
   return /* @__PURE__ */ React59.createElement(Box35, {
     as: "p",
     ...props,
-    css: [styles, { color, cursor, outline, fontSize, textAlign: align }]
+    css: [
+      styles,
+      { color, cursor, outline, fontSize, fontWeight, textAlign: align }
+    ]
   }, children);
 };
 
@@ -2559,7 +2570,7 @@ import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import {
   Box as Box36,
-  useComponentStyles as useComponentStyles30,
+  useComponentStyles as useComponentStyles31,
   useStateProps as useStateProps16
 } from "@marigold/system";
 var TextArea = forwardRef13(
@@ -2596,7 +2607,7 @@ var TextArea = forwardRef13(
       readOnly,
       error
     });
-    const styles = useComponentStyles30("TextArea", { variant, size });
+    const styles = useComponentStyles31("TextArea", { variant, size });
     return /* @__PURE__ */ React60.createElement(FieldBase, {
       label,
       labelProps,
@@ -2683,31 +2694,38 @@ var TextField = forwardRef14(
 
 // src/Tiles/Tiles.tsx
 import React62 from "react";
-var Tiles = React62.forwardRef(
-  ({
-    space = "none",
-    itemMinWidth = "250px",
-    gridAutoRows,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ React62.createElement(Box, {
-    ref,
-    display: "grid",
-    __baseCSS: {
+import { useTheme as useTheme3 } from "@marigold/system";
+var Tiles = ({
+  space = "none",
+  stretch = false,
+  equalHeight = false,
+  tilesWidth,
+  children,
+  ...props
+}) => {
+  const { css } = useTheme3();
+  const { width } = css({ width: tilesWidth });
+  let column = `min(${typeof width === "number" ? `${width}px` : width}, 100%)`;
+  if (stretch) {
+    column = `minmax(${column}, 1fr)`;
+  }
+  return /* @__PURE__ */ React62.createElement(Box, {
+    ...props,
+    css: {
+      display: "grid",
       gap: space,
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`,
-      gridAutoRows: gridAutoRows ? "1fr" : "none"
-    },
-    ...props
-  }, children)
-);
+      gridTemplateColumns: `repeat(auto-fit, ${column})`,
+      gridAutoRows: equalHeight ? "1fr" : void 0
+    }
+  }, children);
+};
 
 // src/Tooltip/Tooltip.tsx
 import React64 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
   Box as Box37,
-  useComponentStyles as useComponentStyles31
+  useComponentStyles as useComponentStyles32
 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
@@ -2778,7 +2796,7 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const styles = useComponentStyles31(
+  const styles = useComponentStyles32(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
@@ -2825,7 +2843,7 @@ var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "1.1s",
+  begin: "1.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 })), /* @__PURE__ */ React65.createElement("path", {
@@ -2854,7 +2872,7 @@ var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement
 }, /* @__PURE__ */ React65.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
-  values: "1; .01; 1; 1;",
+  values: "1; .01; 1; 1; 1;",
   begin: "0.7s",
   dur: "2.5s",
   repeatCount: "indefinite"
@@ -2925,7 +2943,7 @@ var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "0.1s",
+  begin: "0.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 }))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "3.0.6",
+  "version": "4.1.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,52 +23,52 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.1.6",
-    "@marigold/system": "3.0.6",
+    "@marigold/icons": "1.1.8",
+    "@marigold/system": "4.1.0",
     "@marigold/tokens": "3.1.0",
-    "@marigold/types": "0.5.4",
-    "@react-aria/button": "3.6.2",
-    "@react-aria/checkbox": "3.6.0",
-    "@react-aria/dialog": "3.4.0",
-    "@react-aria/focus": "3.9.0",
-    "@react-aria/i18n": "3.6.1",
-    "@react-aria/interactions": "3.12.0",
-    "@react-aria/link": "3.3.4",
-    "@react-aria/listbox": "3.7.0",
-    "@react-aria/menu": "3.6.2",
-    "@react-aria/numberfield": "3.3.2",
-    "@react-aria/overlays": "3.11.0",
-    "@react-aria/radio": "3.4.0",
-    "@react-aria/select": "3.8.2",
-    "@react-aria/separator": "3.2.4",
-    "@react-aria/slider": "3.2.2",
-    "@react-aria/ssr": "3.3.0",
-    "@react-aria/switch": "3.2.4",
-    "@react-aria/table": "3.5.0",
-    "@react-aria/textfield": "3.7.2",
-    "@react-aria/tooltip": "3.3.2",
-    "@react-aria/utils": "3.14.0",
-    "@react-aria/visually-hidden": "3.5.0",
-    "@react-stately/checkbox": "3.3.0",
-    "@react-stately/collections": "3.4.4",
+    "@marigold/types": "0.5.6",
+    "@react-aria/button": "3.6.3",
+    "@react-aria/checkbox": "3.7.0",
+    "@react-aria/dialog": "3.4.1",
+    "@react-aria/focus": "3.10.0",
+    "@react-aria/i18n": "3.6.2",
+    "@react-aria/interactions": "3.13.0",
+    "@react-aria/link": "3.3.5",
+    "@react-aria/listbox": "3.7.1",
+    "@react-aria/menu": "3.7.0",
+    "@react-aria/numberfield": "3.3.3",
+    "@react-aria/overlays": "3.12.0",
+    "@react-aria/radio": "3.4.1",
+    "@react-aria/select": "3.8.3",
+    "@react-aria/separator": "3.2.5",
+    "@react-aria/slider": "3.2.3",
+    "@react-aria/ssr": "3.4.0",
+    "@react-aria/switch": "3.3.0",
+    "@react-aria/table": "3.6.0",
+    "@react-aria/textfield": "3.8.0",
+    "@react-aria/tooltip": "3.3.3",
+    "@react-aria/utils": "3.14.1",
+    "@react-aria/visually-hidden": "3.6.0",
+    "@react-stately/checkbox": "3.3.1",
+    "@react-stately/collections": "3.5.0",
     "@react-stately/data": "^3.6.0",
-    "@react-stately/list": "3.5.4",
-    "@react-stately/menu": "3.4.2",
-    "@react-stately/numberfield": "3.2.2",
-    "@react-stately/overlays": "3.4.2",
-    "@react-stately/radio": "3.6.0",
-    "@react-stately/select": "3.3.2",
-    "@react-stately/slider": "3.2.2",
-    "@react-stately/table": "3.5.0",
-    "@react-stately/toggle": "3.4.2",
-    "@react-stately/tooltip": "3.2.2",
-    "@react-stately/tree": "3.3.4",
-    "@react-types/checkbox": "3.4.0",
-    "@react-types/dialog": "3.4.4",
-    "@react-types/numberfield": "3.3.4",
-    "@react-types/radio": "3.3.0",
-    "@react-types/shared": "3.15.0",
-    "@react-types/tooltip": "3.2.4",
+    "@react-stately/list": "3.6.0",
+    "@react-stately/menu": "3.4.3",
+    "@react-stately/numberfield": "3.3.0",
+    "@react-stately/overlays": "3.4.3",
+    "@react-stately/radio": "3.6.1",
+    "@react-stately/select": "3.3.3",
+    "@react-stately/slider": "3.2.3",
+    "@react-stately/table": "3.6.0",
+    "@react-stately/toggle": "3.4.3",
+    "@react-stately/tooltip": "3.2.3",
+    "@react-stately/tree": "3.4.0",
+    "@react-types/checkbox": "3.4.1",
+    "@react-types/dialog": "3.4.5",
+    "@react-types/numberfield": "3.3.5",
+    "@react-types/radio": "3.3.1",
+    "@react-types/shared": "3.16.0",
+    "@react-types/tooltip": "3.2.5",
     "deepmerge": "^4.2.2",
     "react-is": "18.2.0"
   },
@@ -80,7 +80,7 @@
     "@marigold/tsconfig": "0.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "6.3.0"
+    "tsup": "6.4.0"
   },
   "scripts": {
     "build": "tsup src/index.ts",