@marigold/components 15.0.2 → 15.1.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import { Orientation, RefObject, AriaLabelingProps as AriaLabelingProps$1 } from '@react-types/shared';
 export { Selection } from '@react-types/shared';
 export { useAsyncList, useListData } from '@react-stately/data';
-import { GapSpaceProp, AspectProp, WidthProp, PaddingSpaceProp, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PaddingSpacePropX, PaddingSpacePropY, PlaceItemsProp, MaxWidthProp, HeightProp, alignment, TextAlignProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp } from '@marigold/system';
+import { GapSpaceProp, AspectProp, WidthProp, PaddingSpaceProp, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PaddingSpacePropX, PaddingSpacePropY, PlaceItemsProp, MaxWidthProp, HeightProp, alignment, TextAlignProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, TextWrapProp } from '@marigold/system';
 export { DateFormat, NumericFormat, ThemeProvider, useTheme } from '@marigold/system';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import RAC, { ValidationResult, Key, DialogProps as DialogProps$1, DateValue, SlotProps, UNSTABLE_ToastQueue, TagListProps, ProgressBarProps, TimeValue, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components';
@@ -454,6 +454,10 @@ interface CheckboxProps extends Omit<RAC.CheckboxProps, RemovedProps$s> {
      *
      */
     label?: ReactNode;
+    /**
+     * A helpful text.
+     */
+    description?: ReactNode;
 }
 interface CheckboxComponent extends ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>> {
     /**
@@ -1799,7 +1803,7 @@ interface Table {
 }
 
 type RemovedProps$a = 'elementType' | keyof JSX.IntrinsicElements['div'] | keyof JSX.IntrinsicElements['span'] | keyof JSX.IntrinsicElements['p'];
-interface TextProps extends AriaLabelingProps, Omit<RAC.TextProps, RemovedProps$a>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp {
+interface TextProps extends AriaLabelingProps, Omit<RAC.TextProps, RemovedProps$a>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, TextWrapProp {
     /**
      * The children of the component
      */
@@ -1821,7 +1825,7 @@ interface TextProps extends AriaLabelingProps, Omit<RAC.TextProps, RemovedProps$
     variant?: 'default' | 'muted' | (string & {});
     size?: 'default' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | (string & {});
 }
-declare const _Text: ({ variant, size, color, align, cursor, weight, fontSize, fontStyle, children, as, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const _Text: ({ variant, size, color, align, cursor, weight, fontSize, fontStyle, wrap, children, as, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
 
 type RemovedProps$9 = 'className' | 'style' | 'children' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'value' | 'defaultValue';
 interface TextAreaProps extends Omit<RAC.TextFieldProps, RemovedProps$9>, Pick<RAC.TextAreaProps, 'rows'>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { Orientation, RefObject, AriaLabelingProps as AriaLabelingProps$1 } from '@react-types/shared';
 export { Selection } from '@react-types/shared';
 export { useAsyncList, useListData } from '@react-stately/data';
-import { GapSpaceProp, AspectProp, WidthProp, PaddingSpaceProp, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PaddingSpacePropX, PaddingSpacePropY, PlaceItemsProp, MaxWidthProp, HeightProp, alignment, TextAlignProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp } from '@marigold/system';
+import { GapSpaceProp, AspectProp, WidthProp, PaddingSpaceProp, PaddingRightProp, PaddingLeftProp, PaddingBottomProp, PaddingTopProp, PaddingSpacePropX, PaddingSpacePropY, PlaceItemsProp, MaxWidthProp, HeightProp, alignment, TextAlignProp, Theme, ThemeProviderProps, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, TextWrapProp } from '@marigold/system';
 export { DateFormat, NumericFormat, ThemeProvider, useTheme } from '@marigold/system';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import RAC, { ValidationResult, Key, DialogProps as DialogProps$1, DateValue, SlotProps, UNSTABLE_ToastQueue, TagListProps, ProgressBarProps, TimeValue, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components';
@@ -454,6 +454,10 @@ interface CheckboxProps extends Omit<RAC.CheckboxProps, RemovedProps$s> {
      *
      */
     label?: ReactNode;
+    /**
+     * A helpful text.
+     */
+    description?: ReactNode;
 }
 interface CheckboxComponent extends ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>> {
     /**
@@ -1799,7 +1803,7 @@ interface Table {
 }
 
 type RemovedProps$a = 'elementType' | keyof JSX.IntrinsicElements['div'] | keyof JSX.IntrinsicElements['span'] | keyof JSX.IntrinsicElements['p'];
-interface TextProps extends AriaLabelingProps, Omit<RAC.TextProps, RemovedProps$a>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp {
+interface TextProps extends AriaLabelingProps, Omit<RAC.TextProps, RemovedProps$a>, TextAlignProp, FontSizeProp, FontWeightProp, FontStyleProp, CursorProp, TextWrapProp {
     /**
      * The children of the component
      */
@@ -1821,7 +1825,7 @@ interface TextProps extends AriaLabelingProps, Omit<RAC.TextProps, RemovedProps$
     variant?: 'default' | 'muted' | (string & {});
     size?: 'default' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | (string & {});
 }
-declare const _Text: ({ variant, size, color, align, cursor, weight, fontSize, fontStyle, children, as, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const _Text: ({ variant, size, color, align, cursor, weight, fontSize, fontStyle, wrap, children, as, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
 
 type RemovedProps$9 = 'className' | 'style' | 'children' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'value' | 'defaultValue';
 interface TextAreaProps extends Omit<RAC.TextFieldProps, RemovedProps$9>, Pick<RAC.TextAreaProps, 'rows'>, Pick<FieldBaseProps<'label'>, 'label' | 'description' | 'errorMessage'> {

package/dist/index.js

@@ -1923,6 +1923,7 @@ var Card = ({
 // src/Checkbox/Checkbox.tsx
 var import_react24 = require("react");
 var import_react_aria_components23 = require("react-aria-components");
+var import_utils = require("@react-aria/utils");
 var import_system32 = require("@marigold/system");
 
 // src/Checkbox/CheckboxGroup.tsx
@@ -2119,6 +2120,29 @@ var _CheckboxGroup = ({
 
 // src/Checkbox/Checkbox.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
+var Field = ({
+  description,
+  children
+}) => {
+  const className = (0, import_system32.useClassNames)({
+    component: "Field"
+  });
+  const descriptionId = (0, import_utils.useId)();
+  if (!description) return children;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    import_react_aria_components23.Provider,
+    {
+      values: [
+        [import_react_aria_components23.CheckboxContext, { "aria-describedby": descriptionId }],
+        [import_react_aria_components23.TextContext, { id: descriptionId }]
+      ],
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HelpText, { description })
+      ]
+    }
+  ) });
+};
 var CheckMark2 = () => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   "path",
   {
@@ -2164,6 +2188,7 @@ var _Checkbox = (0, import_react24.forwardRef)(
     variant,
     size: size2,
     label,
+    description,
     ...rest
   }, ref) => {
     const props = {
@@ -2182,12 +2207,12 @@ var _Checkbox = (0, import_react24.forwardRef)(
       variant: variant || (group == null ? void 0 : group.variant),
       size: size2 || (group == null ? void 0 : group.size)
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Field, { description, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_react_aria_components23.Checkbox,
       {
         ref,
         className: (0, import_system32.cn)(
-          "group/checkbox flex items-center gap-[0.5rem]",
+          "group/checkbox flex items-center",
           "cursor-pointer data-disabled:cursor-not-allowed",
           classNames3.container
         ),
@@ -2204,7 +2229,7 @@ var _Checkbox = (0, import_react24.forwardRef)(
           label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: classNames3.label, children: label })
         ] })
       }
-    );
+    ) });
   }
 );
 _Checkbox.Group = _CheckboxGroup;
@@ -2498,7 +2523,7 @@ var import_react_stately = require("react-stately");
 var import_focus = require("@react-aria/focus");
 var import_overlays2 = require("@react-aria/overlays");
 var import_ssr = require("@react-aria/ssr");
-var import_utils = require("@react-aria/utils");
+var import_utils2 = require("@react-aria/utils");
 
 // src/utils/useRenderProps.tsx
 var import_react29 = require("react");
@@ -2573,7 +2598,7 @@ var import_jsx_runtime45 = require("react/jsx-runtime");
 var NonModalInner = ({ state, isExiting, ...props }) => {
   const { nonModalProps } = useNonModal(props, state);
   const ref = props.nonModalRef;
-  const isEntering = (0, import_utils.useEnterAnimation)(ref) || props.isEntering || false;
+  const isEntering = (0, import_utils2.useEnterAnimation)(ref) || props.isEntering || false;
   const renderProps = useRenderProps({
     ...props,
     defaultClassName: "react-aria-NonModalOverlay",
@@ -2583,7 +2608,7 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
       state
     }
   });
-  const viewport = (0, import_utils.useViewportSize)();
+  const viewport = (0, import_utils2.useViewportSize)();
   const style = {
     ...renderProps.style,
     "--visual-viewport-height": viewport.height + "px"
@@ -2591,7 +2616,7 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
   const overlay = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      ...(0, import_utils.mergeProps)((0, import_utils.filterDOMProps)(props), nonModalProps),
+      ...(0, import_utils2.mergeProps)((0, import_utils2.filterDOMProps)(props), nonModalProps),
       ...renderProps,
       tabIndex: -1,
       "aria-label": props["aria-label"],
@@ -2615,11 +2640,11 @@ var NonModal = (0, import_react30.forwardRef)(
       isOpen: open,
       ...rest
     };
-    ref = (0, import_utils.useObjectRef)(ref);
+    ref = (0, import_utils2.useObjectRef)(ref);
     const contextState = (0, import_react30.useContext)(import_react_aria_components28.OverlayTriggerStateContext);
     const localState = (0, import_react_stately.useOverlayTriggerState)(props);
     const state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-    const isExiting = (0, import_utils.useExitAnimation)(ref, state.isOpen) || props.isExiting || false;
+    const isExiting = (0, import_utils2.useExitAnimation)(ref, state.isOpen) || props.isExiting || false;
     const isSSR = (0, import_ssr.useIsSSR)();
     if (state && !state.isOpen && !isExiting || isSSR) {
       return null;
@@ -9323,7 +9348,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/Multiselect/Multiselect.tsx
 var import_label = require("@react-aria/label");
-var import_utils6 = require("@react-aria/utils");
+var import_utils7 = require("@react-aria/utils");
 var import_system72 = require("@marigold/system");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var propsToBeRemoved = [
@@ -9481,7 +9506,7 @@ var Multiselect = ({
                 inputId: fieldProps.id,
                 "aria-invalid": error,
                 isClearable: false,
-                instanceId: (0, import_utils6.useId)(),
+                instanceId: (0, import_utils7.useId)(),
                 isSearchable: !readOnly,
                 isMulti: true,
                 closeMenuOnSelect: false,
@@ -10387,24 +10412,25 @@ var TableBody = ({
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
   const { state, classNames: classNames3 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tbody", { className, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tbody", { className, "data-rac": true, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", "data-rac": true, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
         colSpan: state.collection.columnCount,
         role: "rowheader",
+        "data-rac": true,
         children: emptyState()
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tbody", { ...rowGroupProps, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tbody", { ...rowGroupProps, className, "data-rac": true, children });
 };
 
 // src/Table/TableCell.tsx
 var import_react71 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
-var import_utils7 = require("@react-aria/utils");
+var import_utils8 = require("@react-aria/utils");
 var import_system90 = require("@marigold/system");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var TableCell = ({
@@ -10438,10 +10464,11 @@ var TableCell = ({
     {
       ref,
       className: classNames3 == null ? void 0 : classNames3.cell,
-      ...(0, import_utils7.mergeProps)(cellProps, focusProps),
+      ...(0, import_utils8.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
       valign: alignY,
+      "data-rac": true,
       children: cell.rendered
     }
   );
@@ -10451,7 +10478,7 @@ var TableCell = ({
 var import_react72 = require("react");
 var import_focus4 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
-var import_utils8 = require("@react-aria/utils");
+var import_utils9 = require("@react-aria/utils");
 var import_system91 = require("@marigold/system");
 
 // src/Table/utils.ts
@@ -10500,9 +10527,10 @@ var TableCheckboxCell = ({
     {
       ref,
       className: (0, import_system91.cn)("leading-none", classNames3 == null ? void 0 : classNames3.cell),
-      ...(0, import_utils8.mergeProps)(gridCellProps, focusProps),
+      ...(0, import_utils9.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
       valign: alignY,
+      "data-rac": true,
       children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
@@ -10513,7 +10541,7 @@ var import_react73 = require("react");
 var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils10 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_system92 = require("@marigold/system");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var TableColumnHeader = ({
@@ -10543,9 +10571,10 @@ var TableColumnHeader = ({
       colSpan: column2.colspan,
       ref,
       className: (0, import_system92.cn)("cursor-default", import_system92.width[width], classNames3 == null ? void 0 : classNames3.header),
-      ...(0, import_utils10.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      ...(0, import_utils11.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
+      "data-rac": true,
       children: [
         column2.rendered,
         column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(SortDown, { className: "inline-block" }) }))
@@ -10570,6 +10599,7 @@ var TableHeader = ({ stickyHeader, children }) => {
         // for rui sticky is applied to thead
         stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""
       ),
+      "data-rac": true,
       children
     }
   );
@@ -10587,7 +10617,7 @@ var TableHeaderRow = ({
   const { state } = useTableContext();
   const ref = (0, import_react74.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("tr", { ...rowProps, className, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("tr", { ...rowProps, className, ref, "data-rac": true, children });
 };
 
 // src/Table/TableRow.tsx
@@ -10595,7 +10625,7 @@ var import_react75 = require("react");
 var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils11 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_system94 = require("@marigold/system");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
@@ -10637,8 +10667,9 @@ var TableRow = ({ children, row }) => {
         ],
         classNames3 == null ? void 0 : classNames3.row
       ),
-      ...(0, import_utils11.mergeProps)(rowProps, focusProps, hoverProps),
+      ...(0, import_utils12.mergeProps)(rowProps, focusProps, hoverProps),
       ...stateProps,
+      "data-rac": true,
       children
     }
   );
@@ -10649,7 +10680,7 @@ var import_react76 = require("react");
 var import_focus7 = require("@react-aria/focus");
 var import_interactions4 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils12 = require("@react-aria/utils");
+var import_utils13 = require("@react-aria/utils");
 var import_system95 = require("@marigold/system");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
@@ -10678,9 +10709,10 @@ var TableSelectAllCell = ({
     {
       ref,
       className: (0, import_system95.cn)(import_system95.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
-      ...(0, import_utils12.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      ...(0, import_utils13.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
+      "data-rac": true,
       children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
@@ -10725,6 +10757,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
+          "data-rac": true,
           className: (0, import_system96.cn)(
             "group/table border-collapse",
             /**
@@ -10816,6 +10849,7 @@ var _Text = ({
   weight,
   fontSize,
   fontStyle,
+  wrap,
   children,
   as = "div",
   ...props
@@ -10840,7 +10874,8 @@ var _Text = ({
         align && import_system97.textAlign[align],
         cursor2 && import_system97.cursorStyle[cursor2],
         weight && import_system97.fontWeight[weight],
-        fontSize && import_system97.textSize[fontSize]
+        fontSize && import_system97.textSize[fontSize],
+        wrap && import_system97.textWrap[wrap]
       ),
       style: { color: color && (0, import_system97.ensureCssVar)(color, "color") },
       children
@@ -11232,7 +11267,7 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
 var import_react_aria_components78 = require("react-aria-components");
-var import_utils14 = require("@react-aria/utils");
+var import_utils15 = require("@react-aria/utils");
 var import_system106 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
@@ -11476,7 +11511,7 @@ var BaseLoader = ({
 // src/XLoader/XLoader.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
 var LoaderFullScreen = (props) => {
-  const id = (0, import_utils14.useId)();
+  const id = (0, import_utils15.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react_aria_components78.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react_aria_components78.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {

package/dist/index.mjs

@@ -1844,7 +1844,13 @@ var Card = ({
 
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { Checkbox } from "react-aria-components";
+import {
+  Checkbox,
+  CheckboxContext,
+  Provider,
+  TextContext
+} from "react-aria-components";
+import { useId } from "@react-aria/utils";
 import { cn as cn21, useClassNames as useClassNames20 } from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
@@ -2044,6 +2050,29 @@ var _CheckboxGroup = ({
 
 // src/Checkbox/Checkbox.tsx
 import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+var Field = ({
+  description,
+  children
+}) => {
+  const className = useClassNames20({
+    component: "Field"
+  });
+  const descriptionId = useId();
+  if (!description) return children;
+  return /* @__PURE__ */ jsx37("div", { className, children: /* @__PURE__ */ jsxs16(
+    Provider,
+    {
+      values: [
+        [CheckboxContext, { "aria-describedby": descriptionId }],
+        [TextContext, { id: descriptionId }]
+      ],
+      children: [
+        children,
+        /* @__PURE__ */ jsx37(HelpText, { description })
+      ]
+    }
+  ) });
+};
 var CheckMark2 = () => /* @__PURE__ */ jsx37("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx37(
   "path",
   {
@@ -2089,6 +2118,7 @@ var _Checkbox = forwardRef14(
     variant,
     size: size2,
     label,
+    description,
     ...rest
   }, ref) => {
     const props = {
@@ -2107,12 +2137,12 @@ var _Checkbox = forwardRef14(
       variant: variant || (group == null ? void 0 : group.variant),
       size: size2 || (group == null ? void 0 : group.size)
     });
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx37(Field, { description, children: /* @__PURE__ */ jsx37(
       Checkbox,
       {
         ref,
         className: cn21(
-          "group/checkbox flex items-center gap-[0.5rem]",
+          "group/checkbox flex items-center",
           "cursor-pointer data-disabled:cursor-not-allowed",
           classNames3.container
         ),
@@ -2129,7 +2159,7 @@ var _Checkbox = forwardRef14(
           label && /* @__PURE__ */ jsx37("div", { className: classNames3.label, children: label })
         ] })
       }
-    );
+    ) });
   }
 );
 _Checkbox.Group = _CheckboxGroup;
@@ -2430,7 +2460,7 @@ var _Modal = forwardRef17(
 import { forwardRef as forwardRef18, useContext as useContext8 } from "react";
 import {
   OverlayTriggerStateContext,
-  Provider
+  Provider as Provider2
 } from "react-aria-components";
 import {
   useOverlayTriggerState
@@ -2554,7 +2584,7 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
       ]
     }
   );
-  return /* @__PURE__ */ jsx45(Overlay, { isExiting, disableFocusManagement: true, children: /* @__PURE__ */ jsx45(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx45(Provider, { values: [[OverlayTriggerStateContext, state]], children: overlay }) }) });
+  return /* @__PURE__ */ jsx45(Overlay, { isExiting, disableFocusManagement: true, children: /* @__PURE__ */ jsx45(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx45(Provider2, { values: [[OverlayTriggerStateContext, state]], children: overlay }) }) });
 };
 var NonModal = forwardRef18(
   ({ open, ...rest }, ref) => {
@@ -3850,7 +3880,7 @@ import {
   ButtonContext,
   FieldErrorContext as FieldErrorContext2,
   InputContext,
-  Provider as Provider2,
+  Provider as Provider3,
   Input as _Input2
 } from "react-aria-components";
 
@@ -9298,7 +9328,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/Multiselect/Multiselect.tsx
 import { useField } from "@react-aria/label";
-import { useId } from "@react-aria/utils";
+import { useId as useId2 } from "@react-aria/utils";
 import { cn as cn48, useClassNames as useClassNames48 } from "@marigold/system";
 import { jsx as jsx88, jsxs as jsxs32 } from "react/jsx-runtime";
 var propsToBeRemoved = [
@@ -9393,7 +9423,7 @@ var Multiselect = ({
     errorMessage
   });
   return /* @__PURE__ */ jsx88(
-    Provider2,
+    Provider3,
     {
       values: [
         [
@@ -9456,7 +9486,7 @@ var Multiselect = ({
                 inputId: fieldProps.id,
                 "aria-invalid": error,
                 isClearable: false,
-                instanceId: useId(),
+                instanceId: useId2(),
                 isSearchable: !readOnly,
                 isMulti: true,
                 closeMenuOnSelect: false,
@@ -10388,17 +10418,18 @@ var TableBody = ({
   const { rowGroupProps } = useTableRowGroup();
   const { state, classNames: classNames3 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ jsx108("tbody", { className, children: /* @__PURE__ */ jsx108("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ jsx108(
+    return /* @__PURE__ */ jsx108("tbody", { className, "data-rac": true, children: /* @__PURE__ */ jsx108("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", "data-rac": true, children: /* @__PURE__ */ jsx108(
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
         colSpan: state.collection.columnCount,
         role: "rowheader",
+        "data-rac": true,
         children: emptyState()
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx108("tbody", { ...rowGroupProps, className, children });
+  return /* @__PURE__ */ jsx108("tbody", { ...rowGroupProps, className, "data-rac": true, children });
 };
 
 // src/Table/TableCell.tsx
@@ -10443,6 +10474,7 @@ var TableCell = ({
       ...stateProps,
       align,
       valign: alignY,
+      "data-rac": true,
       children: cell.rendered
     }
   );
@@ -10504,6 +10536,7 @@ var TableCheckboxCell = ({
       ...mergeProps3(gridCellProps, focusProps),
       ...stateProps,
       valign: alignY,
+      "data-rac": true,
       children: /* @__PURE__ */ jsx110(_Checkbox, { ...checkboxProps })
     }
   );
@@ -10547,6 +10580,7 @@ var TableColumnHeader = ({
       ...mergeProps4(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
+      "data-rac": true,
       children: [
         column2.rendered,
         column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx111(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx111(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx111("span", { className: "hidden", children: /* @__PURE__ */ jsx111(SortDown, { className: "inline-block" }) }))
@@ -10571,6 +10605,7 @@ var TableHeader = ({ stickyHeader, children }) => {
         // for rui sticky is applied to thead
         stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""
       ),
+      "data-rac": true,
       children
     }
   );
@@ -10588,7 +10623,7 @@ var TableHeaderRow = ({
   const { state } = useTableContext();
   const ref = useRef12(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx113("tr", { ...rowProps, className, ref, children });
+  return /* @__PURE__ */ jsx113("tr", { ...rowProps, className, ref, "data-rac": true, children });
 };
 
 // src/Table/TableRow.tsx
@@ -10640,6 +10675,7 @@ var TableRow = ({ children, row }) => {
       ),
       ...mergeProps5(rowProps, focusProps, hoverProps),
       ...stateProps,
+      "data-rac": true,
       children
     }
   );
@@ -10689,6 +10725,7 @@ var TableSelectAllCell = ({
       ...mergeProps6(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
+      "data-rac": true,
       children: /* @__PURE__ */ jsx115(_Checkbox, { ...checkboxProps })
     }
   );
@@ -10733,6 +10770,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
+          "data-rac": true,
           className: cn66(
             "group/table border-collapse",
             /**
@@ -10821,6 +10859,7 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
+  textWrap,
   useClassNames as useClassNames62
 } from "@marigold/system";
 import { jsx as jsx117 } from "react/jsx-runtime";
@@ -10833,6 +10872,7 @@ var _Text = ({
   weight,
   fontSize,
   fontStyle,
+  wrap,
   children,
   as = "div",
   ...props
@@ -10857,7 +10897,8 @@ var _Text = ({
         align && textAlign2[align],
         cursor2 && cursorStyle[cursor2],
         weight && fontWeight[weight],
-        fontSize && textSize[fontSize]
+        fontSize && textSize[fontSize],
+        wrap && textWrap[wrap]
       ),
       style: { color: color && ensureCssVar2(color, "color") },
       children
@@ -11252,7 +11293,7 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
 import { Dialog as Dialog5, Modal as Modal3 } from "react-aria-components";
-import { useId as useId2 } from "@react-aria/utils";
+import { useId as useId3 } from "@react-aria/utils";
 import { useClassNames as useClassNames70 } from "@marigold/system";
 
 // src/XLoader/BaseLoader.tsx
@@ -11496,7 +11537,7 @@ var BaseLoader = ({
 // src/XLoader/XLoader.tsx
 import { jsx as jsx130 } from "react/jsx-runtime";
 var LoaderFullScreen = (props) => {
-  const id = useId2();
+  const id = useId3();
   return /* @__PURE__ */ jsx130(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx130(Modal3, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx130(Dialog5, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx130(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "15.0.2",
+  "version": "15.1.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -55,7 +55,7 @@
     "@react-types/table": "^3.13.3",
     "react-aria-components": "^1.12.1",
     "react-stately": "^3.41.0",
-    "@marigold/system": "15.0.2",
+    "@marigold/system": "15.1.0",
     "@marigold/types": "1.3.2"
   },
   "peerDependencies": {
@@ -67,8 +67,8 @@
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "tsup": "8.5.0",
-    "@marigold/icons": "1.3.20",
-    "@marigold/tsconfig": "0.4.1"
+    "@marigold/tsconfig": "0.4.1",
+    "@marigold/icons": "1.3.21"
   },
   "scripts": {
     "build": "tsup src/index.ts",