@marigold/components 11.2.2 → 11.2.3

package/dist/index.js

@@ -2337,7 +2337,7 @@ var _DialogTrigger = ({
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var CloseButton = ({ className }) => {
   const ctx = (0, import_react26.useContext)(import_react_aria_components25.OverlayTriggerStateContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "button",
     {
       className: (0, import_system40.cn)(
@@ -2355,7 +2355,7 @@ var CloseButton = ({ className }) => {
         }
       ) })
     }
-  ) });
+  );
 };
 var _Dialog = ({
   variant,
@@ -3114,36 +3114,64 @@ var icons = {
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z",
+          clipRule: "evenodd"
+        }
+      )
     }
   ),
   info: () => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
     }
   ),
   warning: () => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "m40-120 440-760 440 760H40Zm440-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
     }
   ),
   error: () => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm-40-361h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
     }
   )
 };
@@ -3181,7 +3209,7 @@ var SectionMessage = ({
       className: (0, import_system63.cn)("grid auto-rows-min", classNames3.container),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: (0, import_system63.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon4, {}) }),
-        closeButton && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "h-6 w-6 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        closeButton && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           "button",
           {
             ...buttonProps,
@@ -3198,7 +3226,7 @@ var SectionMessage = ({
               }
             ) })
           }
-        ) }),
+        ),
         children
       ]
     }
@@ -8957,34 +8985,42 @@ var _NumberField = (0, import_react47.forwardRef)(
       isRequired: required,
       ...rest
     };
-    const showStepper = !hideStepper;
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(FieldBase, { as: import_react_aria_components46.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_react_aria_components46.Group, { className: (0, import_system66.cn)("flex items-stretch", classNames3.group), children: [
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-        _StepButton,
-        {
-          className: classNames3.stepper,
-          direction: "down",
-          slot: "decrement"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-        _Input,
-        {
-          ref,
-          variant,
-          size: size2,
-          className: classNames3.input
-        }
-      ) }),
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-        _StepButton,
-        {
-          className: classNames3.stepper,
-          direction: "up",
-          slot: "increment"
-        }
-      )
-    ] }) });
+    const showStepper = !hideStepper && !readOnly;
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      FieldBase,
+      {
+        as: import_react_aria_components46.NumberField,
+        ...props,
+        "data-readonly": readOnly ? "true" : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_react_aria_components46.Group, { className: (0, import_system66.cn)("flex items-stretch", classNames3.group), children: [
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            _StepButton,
+            {
+              className: classNames3.stepper,
+              direction: "down",
+              slot: "decrement"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            _Input,
+            {
+              ref,
+              variant,
+              size: size2,
+              className: classNames3.input
+            }
+          ) }),
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            _StepButton,
+            {
+              className: classNames3.stepper,
+              direction: "up",
+              slot: "increment"
+            }
+          )
+        ] })
+      }
+    );
   }
 );
 
@@ -9764,7 +9800,7 @@ var _Switch = (0, import_react60.forwardRef)(
 var import_react68 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system84 = require("@marigold/system");
+var import_system85 = require("@marigold/system");
 
 // src/Table/Context.tsx
 var import_react61 = require("react");
@@ -9942,14 +9978,21 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
+var import_system82 = require("@marigold/system");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
+  const { classNames: classNames3 } = useTableContext();
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     "thead",
     {
       ...rowGroupProps,
-      className: stickyHeader ? "[&_th]:sticky [&_th]:top-0" : "",
+      className: (0, import_system82.cn)(
+        classNames3 == null ? void 0 : classNames3.thead,
+        // for sticky header &th needs to be sticky for b2b and core theme
+        // for rui sticky is applied to thead
+        stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""
+      ),
       children
     }
   );
@@ -9976,13 +10019,13 @@ var import_focus4 = 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_system82 = require("@marigold/system");
+var import_system83 = require("@marigold/system");
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react66.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = (0, import_system82.useClassNames)({
+  const classNames3 = (0, import_system83.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10000,7 +10043,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system82.useStateProps)({
+  const stateProps = (0, import_system83.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
@@ -10011,7 +10054,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: (0, import_system82.cn)(
+      className: (0, import_system83.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10030,7 +10073,7 @@ var import_focus5 = 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_system83 = require("@marigold/system");
+var import_system84 = require("@marigold/system");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column: column2,
@@ -10049,7 +10092,7 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
-  const stateProps = (0, import_system83.useStateProps)({
+  const stateProps = (0, import_system84.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -10057,7 +10100,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: (0, import_system83.cn)(import_system83.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system84.cn)(import_system84.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils12.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10090,7 +10133,7 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames3 = (0, import_system84.useClassNames)({
+  const classNames3 = (0, import_system85.useClassNames)({
     component: "Table",
     variant,
     size: size2
@@ -10104,7 +10147,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: (0, import_system84.cn)(
+          className: (0, import_system85.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10172,7 +10215,7 @@ Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
 var import_react_aria_components55 = require("react-aria-components");
-var import_system85 = require("@marigold/system");
+var import_system86 = require("@marigold/system");
 var import_jsx_runtime102 = require("react/jsx-runtime");
 var _Text = ({
   variant,
@@ -10187,7 +10230,7 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = (0, import_system85.useClassNames)({
+  const classNames3 = (0, import_system86.useClassNames)({
     component: "Text",
     variant,
     size: size2
@@ -10199,17 +10242,17 @@ var _Text = ({
     {
       ...props,
       ...elementType,
-      className: (0, import_system85.cn)(
+      className: (0, import_system86.cn)(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
-        fontStyle && import_system85.textStyle[fontStyle],
-        align && import_system85.textAlign[align],
-        cursor2 && import_system85.cursorStyle[cursor2],
-        weight && import_system85.fontWeight[weight],
-        fontSize && import_system85.textSize[fontSize]
+        fontStyle && import_system86.textStyle[fontStyle],
+        align && import_system86.textAlign[align],
+        cursor2 && import_system86.cursorStyle[cursor2],
+        weight && import_system86.fontWeight[weight],
+        fontSize && import_system86.textSize[fontSize]
       ),
-      style: { color: color && (0, import_system85.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system86.ensureCssVar)(color, "color") },
       children
     }
   );
@@ -10218,7 +10261,7 @@ var _Text = ({
 // src/TextArea/TextArea.tsx
 var import_react69 = require("react");
 var import_react_aria_components56 = require("react-aria-components");
-var import_system86 = require("@marigold/system");
+var import_system87 = require("@marigold/system");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var _TextArea = (0, import_react69.forwardRef)(
   ({
@@ -10231,7 +10274,7 @@ var _TextArea = (0, import_react69.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system86.useClassNames)({ component: "TextArea", variant, size: size2 });
+    const classNames3 = (0, import_system87.useClassNames)({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10261,7 +10304,7 @@ var _TextField = (0, import_react70.forwardRef)(
 );
 
 // src/Tiles/Tiles.tsx
-var import_system87 = require("@marigold/system");
+var import_system88 = require("@marigold/system");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
@@ -10279,13 +10322,13 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: (0, import_system87.cn)(
+      className: (0, import_system88.cn)(
         "grid",
-        import_system87.gapSpace[space],
+        import_system88.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system87.createVar)({ column: column2, tilesWidth }),
+      style: (0, import_system88.createVar)({ column: column2, tilesWidth }),
       children
     }
   );
@@ -10293,7 +10336,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_react_aria_components59 = require("react-aria-components");
-var import_system88 = require("@marigold/system");
+var import_system89 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react_aria_components58 = require("react-aria-components");
@@ -10321,13 +10364,13 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames3 = (0, import_system88.useClassNames)({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = (0, import_system89.useClassNames)({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
     import_react_aria_components59.Tooltip,
     {
       ...props,
-      className: (0, import_system88.cn)("group/tooltip", classNames3.container),
+      className: (0, import_system89.cn)("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react_aria_components59.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
@@ -10340,11 +10383,11 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 var import_react_aria_components61 = require("react-aria-components");
-var import_system90 = require("@marigold/system");
+var import_system91 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
 var import_react_aria_components60 = require("react-aria-components");
-var import_system89 = require("@marigold/system");
+var import_system90 = require("@marigold/system");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
@@ -10355,7 +10398,7 @@ var _TagGroup = ({
   size: size2,
   ...rest
 }) => {
-  const classNames3 = (0, import_system89.useClassNames)({ component: "Tag", variant, size: size2 });
+  const classNames3 = (0, import_system90.useClassNames)({ component: "Tag", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(FieldBase, { as: import_react_aria_components60.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     import_react_aria_components60.TagList,
     {
@@ -10374,7 +10417,7 @@ var CloseButton2 = ({ className }) => {
 };
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = (0, import_system90.useClassNames)({ component: "Tag", variant, size: size2 });
+  const classNames3 = (0, import_system91.useClassNames)({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
@@ -10384,13 +10427,13 @@ var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
     {
       textValue,
       ...props,
-      className: (0, import_system90.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
+      className: (0, import_system91.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
         children,
         allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
           CloseButton2,
           {
-            className: (0, import_system90.cn)("flex items-center", classNames3.closeButton)
+            className: (0, import_system91.cn)("flex items-center", classNames3.closeButton)
           }
         )
       ] })
@@ -10405,12 +10448,12 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
 // src/XLoader/XLoader.tsx
 var import_react_aria_components63 = require("react-aria-components");
 var import_utils14 = require("@react-aria/utils");
-var import_system92 = require("@marigold/system");
+var import_system93 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
 var import_react_aria_components62 = require("react-aria-components");
 var import_i18n6 = require("@react-aria/i18n");
-var import_system91 = require("@marigold/system");
+var import_system92 = require("@marigold/system");
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10432,7 +10475,7 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = (0, import_i18n6.useLocalizedStringFormatter)(intlMessages2, "marigold");
-  const className = (0, import_system91.useClassNames)({ component: "XLoader", variant, size: size2 });
+  const className = (0, import_system92.useClassNames)({ component: "XLoader", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
     import_react_aria_components62.ProgressBar,
     {
@@ -10664,7 +10707,7 @@ var LoaderFullScreen = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_react_aria_components63.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_react_aria_components63.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = (0, import_system92.useClassNames)({
+  const className = (0, import_system93.useClassNames)({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
@@ -10675,7 +10718,7 @@ var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PUR
 
 // src/Tabs/Tabs.tsx
 var import_react_aria_components67 = require("react-aria-components");
-var import_system95 = require("@marigold/system");
+var import_system96 = require("@marigold/system");
 
 // src/Tabs/Context.ts
 var import_react71 = require("react");
@@ -10684,7 +10727,7 @@ var useTabContext = () => (0, import_react71.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
 var import_react_aria_components64 = require("react-aria-components");
-var import_system93 = require("@marigold/system");
+var import_system94 = require("@marigold/system");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
@@ -10692,7 +10735,7 @@ var _Tab = (props) => {
     import_react_aria_components64.Tab,
     {
       ...props,
-      className: (0, import_system93.cn)(
+      className: (0, import_system94.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -10703,7 +10746,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 var import_react_aria_components65 = require("react-aria-components");
-var import_system94 = require("@marigold/system");
+var import_system95 = require("@marigold/system");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
@@ -10711,7 +10754,7 @@ var _TabList = ({ space = 2, ...props }) => {
     import_react_aria_components65.TabList,
     {
       ...props,
-      className: (0, import_system94.cn)("flex", import_system94.gapSpace[space], classNames3.tabsList),
+      className: (0, import_system95.cn)("flex", import_system95.gapSpace[space], classNames3.tabsList),
       children: props.children
     }
   );
@@ -10732,7 +10775,7 @@ var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = (0, import_system95.useClassNames)({
+  const classNames3 = (0, import_system96.useClassNames)({
     component: "Tabs",
     size: size2,
     variant

package/dist/index.mjs

@@ -2266,7 +2266,7 @@ var _DialogTrigger = ({
 import { jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
   const ctx = useContext8(OverlayTriggerStateContext);
-  return /* @__PURE__ */ jsx46("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx46(
     "button",
     {
       className: cn27(
@@ -2284,7 +2284,7 @@ var CloseButton = ({ className }) => {
         }
       ) })
     }
-  ) });
+  );
 };
 var _Dialog = ({
   variant,
@@ -3061,36 +3061,64 @@ var icons = {
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74("path", { d: "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" })
+      children: /* @__PURE__ */ jsx74(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z",
+          clipRule: "evenodd"
+        }
+      )
     }
   ),
   info: () => /* @__PURE__ */ jsx74(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74("path", { d: "M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" })
+      children: /* @__PURE__ */ jsx74(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
     }
   ),
   warning: () => /* @__PURE__ */ jsx74(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74("path", { d: "m40-120 440-760 440 760H40Zm440-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Z" })
+      children: /* @__PURE__ */ jsx74(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
     }
   ),
   error: () => /* @__PURE__ */ jsx74(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 -960 960 960",
+      viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74("path", { d: "M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm-40-361h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Z" })
+      children: /* @__PURE__ */ jsx74(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
     }
   )
 };
@@ -3128,7 +3156,7 @@ var SectionMessage = ({
       className: cn40("grid auto-rows-min", classNames3.container),
       children: [
         /* @__PURE__ */ jsx74("div", { className: cn40("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx74(Icon4, {}) }),
-        closeButton && /* @__PURE__ */ jsx74("div", { className: "h-6 w-6 text-center", children: /* @__PURE__ */ jsx74(
+        closeButton && /* @__PURE__ */ jsx74(
           "button",
           {
             ...buttonProps,
@@ -3145,7 +3173,7 @@ var SectionMessage = ({
               }
             ) })
           }
-        ) }),
+        ),
         children
       ]
     }
@@ -8909,34 +8937,42 @@ var _NumberField = forwardRef21(
       isRequired: required,
       ...rest
     };
-    const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx79(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs29(Group4, { className: cn43("flex items-stretch", classNames3.group), children: [
-      showStepper && /* @__PURE__ */ jsx79(
-        _StepButton,
-        {
-          className: classNames3.stepper,
-          direction: "down",
-          slot: "decrement"
-        }
-      ),
-      /* @__PURE__ */ jsx79("div", { className: "flex-1", children: /* @__PURE__ */ jsx79(
-        _Input,
-        {
-          ref,
-          variant,
-          size: size2,
-          className: classNames3.input
-        }
-      ) }),
-      showStepper && /* @__PURE__ */ jsx79(
-        _StepButton,
-        {
-          className: classNames3.stepper,
-          direction: "up",
-          slot: "increment"
-        }
-      )
-    ] }) });
+    const showStepper = !hideStepper && !readOnly;
+    return /* @__PURE__ */ jsx79(
+      FieldBase,
+      {
+        as: NumberField,
+        ...props,
+        "data-readonly": readOnly ? "true" : void 0,
+        children: /* @__PURE__ */ jsxs29(Group4, { className: cn43("flex items-stretch", classNames3.group), children: [
+          showStepper && /* @__PURE__ */ jsx79(
+            _StepButton,
+            {
+              className: classNames3.stepper,
+              direction: "down",
+              slot: "decrement"
+            }
+          ),
+          /* @__PURE__ */ jsx79("div", { className: "flex-1", children: /* @__PURE__ */ jsx79(
+            _Input,
+            {
+              ref,
+              variant,
+              size: size2,
+              className: classNames3.input
+            }
+          ) }),
+          showStepper && /* @__PURE__ */ jsx79(
+            _StepButton,
+            {
+              className: classNames3.stepper,
+              direction: "up",
+              slot: "increment"
+            }
+          )
+        ] })
+      }
+    );
   }
 );
 
@@ -9740,7 +9776,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn60, useClassNames as useClassNames55 } from "@marigold/system";
+import { cn as cn61, useClassNames as useClassNames55 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext12, useContext as useContext21 } from "react";
@@ -9918,14 +9954,21 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
+import { cn as cn58 } from "@marigold/system";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
+  const { classNames: classNames3 } = useTableContext();
   return /* @__PURE__ */ jsx98(
     "thead",
     {
       ...rowGroupProps,
-      className: stickyHeader ? "[&_th]:sticky [&_th]:top-0" : "",
+      className: cn58(
+        classNames3 == null ? void 0 : classNames3.thead,
+        // for sticky header &th needs to be sticky for b2b and core theme
+        // for rui sticky is applied to thead
+        stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""
+      ),
       children
     }
   );
@@ -9952,7 +9995,7 @@ import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn58, useClassNames as useClassNames54, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn59, useClassNames as useClassNames54, useStateProps as useStateProps4 } from "@marigold/system";
 import { jsx as jsx100 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef13(null);
@@ -9987,7 +10030,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: cn58(
+      className: cn59(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10010,7 +10053,7 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import {
-  cn as cn59,
+  cn as cn60,
   width as twWidth6,
   useStateProps as useStateProps5
 } from "@marigold/system";
@@ -10040,7 +10083,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn59(twWidth6[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: cn60(twWidth6[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10087,7 +10130,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn60(
+          className: cn61(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10156,7 +10199,7 @@ Table.Row = Row;
 // src/Text/Text.tsx
 import { Text as Text2 } from "react-aria-components";
 import {
-  cn as cn61,
+  cn as cn62,
   cursorStyle,
   ensureCssVar as ensureCssVar2,
   fontWeight,
@@ -10191,7 +10234,7 @@ var _Text = ({
     {
       ...props,
       ...elementType,
-      className: cn61(
+      className: cn62(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
@@ -10253,7 +10296,7 @@ var _TextField = forwardRef30(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn62, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
+import { cn as cn63, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
 import { jsx as jsx106 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -10271,7 +10314,7 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: cn62(
+      className: cn63(
         "grid",
         gapSpace9[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -10285,7 +10328,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn63, useClassNames as useClassNames58 } from "@marigold/system";
+import { cn as cn64, useClassNames as useClassNames58 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -10319,7 +10362,7 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
     Tooltip,
     {
       ...props,
-      className: cn63("group/tooltip", classNames3.container),
+      className: cn64("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
         /* @__PURE__ */ jsx108(OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ jsx108("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx108("path", { d: "M0 0 L4 4 L8 0" }) }) }),
@@ -10332,7 +10375,7 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 import { Button as Button7, Tag } from "react-aria-components";
-import { cn as cn64, useClassNames as useClassNames60 } from "@marigold/system";
+import { cn as cn65, useClassNames as useClassNames60 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
@@ -10376,13 +10419,13 @@ var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
     {
       textValue,
       ...props,
-      className: cn64("data-selection-mode:cursor-pointer", classNames3.tag),
+      className: cn65("data-selection-mode:cursor-pointer", classNames3.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs40(Fragment11, { children: [
         children,
         allowsRemoving && /* @__PURE__ */ jsx110(
           CloseButton2,
           {
-            className: cn64("flex items-center", classNames3.closeButton)
+            className: cn65("flex items-center", classNames3.closeButton)
           }
         )
       ] })
@@ -10676,7 +10719,7 @@ var useTabContext = () => useContext22(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn65 } from "@marigold/system";
+import { cn as cn66 } from "@marigold/system";
 import { jsx as jsx113 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
@@ -10684,7 +10727,7 @@ var _Tab = (props) => {
     Tab,
     {
       ...props,
-      className: cn65(
+      className: cn66(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -10695,7 +10738,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn66, gapSpace as gapSpace10 } from "@marigold/system";
+import { cn as cn67, gapSpace as gapSpace10 } from "@marigold/system";
 import { jsx as jsx114 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
@@ -10703,7 +10746,7 @@ var _TabList = ({ space = 2, ...props }) => {
     TabList,
     {
       ...props,
-      className: cn66("flex", gapSpace10[space], classNames3.tabsList),
+      className: cn67("flex", gapSpace10[space], classNames3.tabsList),
       children: props.children
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "11.2.2",
+  "version": "11.2.3",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -42,7 +42,7 @@
     "@react-types/shared": "3.28.0",
     "@react-types/table": "3.11.0",
     "react-aria-components": "1.7.0",
-    "@marigold/system": "11.2.2",
+    "@marigold/system": "11.2.3",
     "@marigold/types": "1.3.0"
   },
   "peerDependencies": {
@@ -54,7 +54,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "tsup": "8.3.6",
-    "@marigold/icons": "1.3.2",
+    "@marigold/icons": "1.3.3",
     "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {