@marigold/components 4.0.0 → 4.1.1

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;

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",
@@ -573,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
@@ -653,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}`,
@@ -1104,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
@@ -1125,6 +1124,7 @@ var MenuTrigger = ({ disabled, children }) => {
     dismissable: true,
     shouldCloseOnBlur: true,
     ref: overlayRef,
+    minWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0,
     ...positionProps
   }, menu));
 };
@@ -1167,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" });
@@ -1184,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,
@@ -1235,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
@@ -1311,15 +1311,19 @@ 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: { display: "flex", flexDirection: "column", 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(import_system25.Box, {
+    __baseCSS: { display: "flex", flexDirection: "column" }
+  }, children, hasHelpText && /* @__PURE__ */ import_react38.default.createElement(HelpText, {
     ...stateProps,
     variant,
     size,
@@ -1329,7 +1333,7 @@ var FieldBase = ({
     error,
     errorMessage,
     errorMessageProps
-  }));
+  })));
 };
 
 // src/NumberField/StepButton.tsx
@@ -2153,7 +2157,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
@@ -2532,6 +2537,7 @@ var Text = ({
   align,
   color,
   fontSize,
+  fontWeight,
   cursor,
   outline,
   children,
@@ -2544,7 +2550,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);
 };
 

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",
@@ -512,7 +511,7 @@ var Columns = ({
     css: {
       flexGrow: columns[idx]
     }
-  }, isValidElement(child) ? cloneElement(child) : null)));
+  }, isValidElement(child) ? cloneElement(child) : child)));
 };
 
 // src/Container/Container.tsx
@@ -600,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}`,
@@ -1059,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
@@ -1080,6 +1079,7 @@ var MenuTrigger = ({ disabled, children }) => {
     dismissable: true,
     shouldCloseOnBlur: true,
     ref: overlayRef,
+    minWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0,
     ...positionProps
   }, menu));
 };
@@ -1122,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" });
@@ -1139,7 +1139,6 @@ var Menu = ({ variant, size, ...props }) => {
   }), /* @__PURE__ */ React32.createElement(Box17, {
     as: "ul",
     ref,
-    style: { width: triggerWidth },
     __baseCSS: {
       listStyle: "none",
       p: 0,
@@ -1190,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
@@ -1211,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";
@@ -1273,15 +1276,19 @@ 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: { display: "flex", flexDirection: "column", width },
+    css: style
   }, label && /* @__PURE__ */ React35.createElement(Label, {
     required,
     variant,
     size,
     ...labelProps,
     ...stateProps
-  }, label), children, hasHelpText && /* @__PURE__ */ React35.createElement(HelpText, {
+  }, label), /* @__PURE__ */ React35.createElement(Box19, {
+    __baseCSS: { display: "flex", flexDirection: "column" }
+  }, children, hasHelpText && /* @__PURE__ */ React35.createElement(HelpText, {
     ...stateProps,
     variant,
     size,
@@ -1291,7 +1298,7 @@ var FieldBase = ({
     error,
     errorMessage,
     errorMessageProps
-  }));
+  })));
 };
 
 // src/NumberField/StepButton.tsx
@@ -1385,7 +1392,7 @@ var NumberField = forwardRef7(
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = useComponentStyles21(
+    const styles = useComponentStyles22(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
@@ -1487,7 +1494,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";
 
@@ -1504,7 +1511,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,
@@ -1527,7 +1534,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"] }
@@ -1594,7 +1601,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"] }
@@ -1663,7 +1670,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";
 
@@ -1672,7 +1679,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";
 
@@ -1745,7 +1752,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"] }
@@ -1830,7 +1837,7 @@ var Select = forwardRef10(
       isOpen: state.isOpen,
       placement: "bottom left"
     });
-    const styles = useComponentStyles25(
+    const styles = useComponentStyles26(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
@@ -1913,7 +1920,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";
@@ -1975,7 +1982,7 @@ var Slider = forwardRef11(
       state,
       trackRef
     );
-    const styles = useComponentStyles26(
+    const styles = useComponentStyles27(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
@@ -2072,7 +2079,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(
@@ -2103,7 +2110,7 @@ var Switch = forwardRef12(
       readOnly,
       focus: isFocusVisible
     });
-    const styles = useComponentStyles27(
+    const styles = useComponentStyles28(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
@@ -2142,7 +2149,8 @@ var Switch = forwardRef12(
         width: 48,
         height: 24,
         bg: "#dee2e6",
-        borderRadius: 20
+        borderRadius: 20,
+        flex: "0 0 48px"
       },
       css: styles.track,
       ...stateProps
@@ -2182,7 +2190,7 @@ import {
 } from "@react-stately/table";
 import {
   Box as Box34,
-  useComponentStyles as useComponentStyles28
+  useComponentStyles as useComponentStyles29
 } from "@marigold/system";
 
 // src/Table/Context.tsx
@@ -2468,7 +2476,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"] }
@@ -2527,7 +2535,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 = ({
@@ -2536,19 +2544,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);
 };
 
@@ -2560,7 +2572,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(
@@ -2597,7 +2609,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,
@@ -2715,7 +2727,7 @@ 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
@@ -2786,7 +2798,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"] }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,52 +23,52 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.1.7",
-    "@marigold/system": "4.0.0",
+    "@marigold/icons": "1.1.9",
+    "@marigold/system": "4.1.1",
     "@marigold/tokens": "3.1.0",
-    "@marigold/types": "0.5.5",
-    "@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",