@marigold/components 7.5.3 → 7.5.4

package/dist/index.js

@@ -1514,7 +1514,7 @@ var import_system31 = require("@marigold/system");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = (0, import_system31.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components20.Separator, { className: classNames2, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components20.Separator, { className: (0, import_system31.cn)("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx

package/dist/index.mjs

@@ -1434,11 +1434,11 @@ _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { useClassNames as useClassNames19 } from "@marigold/system";
+import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = useClassNames19({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx36(Separator, { className: classNames2, ...props });
+  return /* @__PURE__ */ jsx36(Separator, { className: cn23("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx
@@ -1467,7 +1467,7 @@ var _Header = ({ variant, size, ...props }) => {
 
 // src/Image/Image.tsx
 import {
-  cn as cn23,
+  cn as cn24,
   objectFit,
   objectPosition,
   useClassNames as useClassNames22
@@ -1486,7 +1486,7 @@ var Image = ({
     {
       ...props,
       alt: props.alt,
-      className: cn23(
+      className: cn24(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1499,7 +1499,7 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn24,
+  cn as cn25,
   gapSpace as gapSpace5
 } from "@marigold/system";
 import { jsx as jsx40 } from "react/jsx-runtime";
@@ -1516,7 +1516,7 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: cn24(
+      className: cn25(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1537,7 +1537,7 @@ import { useClassNames as useClassNames23 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
-import { cn as cn25 } from "@marigold/system";
+import { cn as cn26 } from "@marigold/system";
 import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
   return /* @__PURE__ */ jsx41(
@@ -1553,7 +1553,7 @@ var _DateSegment = ({ segment, ...props }) => {
           "span",
           {
             "aria-hidden": "true",
-            className: cn25(
+            className: cn26(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1623,7 +1623,7 @@ var _DateField = forwardRef13(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn29, useClassNames as useClassNames28 } from "@marigold/system";
+import { cn as cn30, useClassNames as useClassNames28 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -1631,7 +1631,7 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn26, useClassNames as useClassNames25 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
@@ -1671,7 +1671,7 @@ var _CalendarGrid = () => {
       CalendarCell,
       {
         date,
-        className: cn26(
+        className: cn27(
           "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
           classNames2.calendarCell
         )
@@ -1684,7 +1684,7 @@ var _CalendarGrid = () => {
 import { useContext as useContext8 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
-import { cn as cn27, useClassNames as useClassNames26 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -1718,7 +1718,7 @@ function CalendarListBox({
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: cn27(buttonStyles, selectClassNames),
+      className: cn28(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
@@ -1731,7 +1731,7 @@ function CalendarListBox({
 // src/Calendar/MonthControls.tsx
 import { Button as Button3 } from "react-aria-components";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn28, useClassNames as useClassNames27 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames27 } from "@marigold/system";
 import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
 function MonthControls() {
   const classNames2 = useClassNames27({ component: "Calendar" });
@@ -1739,7 +1739,7 @@ function MonthControls() {
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: cn28(
+      className: cn29(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
         classNames2.calendarControllers
       ),
@@ -1747,7 +1747,7 @@ function MonthControls() {
         /* @__PURE__ */ jsx47(
           Button3,
           {
-            className: cn28(
+            className: cn29(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1758,7 +1758,7 @@ function MonthControls() {
         /* @__PURE__ */ jsx47(
           Button3,
           {
-            className: cn28(
+            className: cn29(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1907,7 +1907,7 @@ var _Calendar = ({
   return /* @__PURE__ */ jsx50(
     Calendar,
     {
-      className: cn29(
+      className: cn30(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
@@ -1998,7 +1998,7 @@ var _DatePicker = ({
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn30,
+  cn as cn31,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
@@ -2007,7 +2007,7 @@ import { jsx as jsx52 } from "react/jsx-runtime";
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
   "div",
   {
-    className: cn30(
+    className: cn31(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2126,7 +2126,7 @@ var ActionMenu = ({
 
 // src/Message/Message.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { cn as cn31, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames36 } from "@marigold/system";
 import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
 var icons = {
   success: () => /* @__PURE__ */ jsx60(
@@ -2201,25 +2201,25 @@ var Message = forwardRef15(
     return /* @__PURE__ */ jsxs24(
       "div",
       {
-        className: cn31(
+        className: cn32(
           "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
           classNames2.container
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx60("div", { className: cn31("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx60(Icon4, {}) }),
+          /* @__PURE__ */ jsx60("div", { className: cn32("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx60(Icon4, {}) }),
           /* @__PURE__ */ jsx60(
             "div",
             {
-              className: cn31(
+              className: cn32(
                 "col-start-2 row-start-1 self-center",
                 classNames2.title
               ),
               children: messageTitle
             }
           ),
-          /* @__PURE__ */ jsx60("div", { className: cn31("col-start-2", classNames2.content), children })
+          /* @__PURE__ */ jsx60("div", { className: cn32("col-start-2", classNames2.content), children })
         ]
       }
     );
@@ -2232,7 +2232,7 @@ import { useListData as useListData2 } from "@react-stately/data";
 
 // src/TagGroup/Tag.tsx
 import { Button as Button4, Tag } from "react-aria-components";
-import { cn as cn32, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn33, useClassNames as useClassNames38 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
@@ -2272,13 +2272,13 @@ var _Tag = ({ variant, size, children, ...props }) => {
     {
       textValue,
       ...props,
-      className: cn32("data-[selection-mode]:cursor-pointer", classNames2.tag),
+      className: cn33("data-[selection-mode]:cursor-pointer", classNames2.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
         children,
         allowsRemoving && /* @__PURE__ */ jsx62(
           CloseButton2,
           {
-            className: cn32("flex items-center", classNames2.closeButton)
+            className: cn33("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2357,11 +2357,11 @@ Multiselect.Item = Item2;
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef16 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn35, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button5 } from "react-aria-components";
-import { cn as cn33 } from "@marigold/system";
+import { cn as cn34 } from "@marigold/system";
 import { jsx as jsx64 } from "react/jsx-runtime";
 var Plus = () => /* @__PURE__ */ jsx64("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx64(
   "path",
@@ -2384,7 +2384,7 @@ var _StepButton = ({ direction, className, ...props }) => {
   return /* @__PURE__ */ jsx64(
     Button5,
     {
-      className: cn33(
+      className: cn34(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2423,7 +2423,7 @@ var _NumberField = forwardRef16(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx65(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn34("flex items-stretch", classNames2.group), children: [
+    return /* @__PURE__ */ jsx65(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn35("flex items-stretch", classNames2.group), children: [
       showStepper && /* @__PURE__ */ jsx65(
         _StepButton,
         {
@@ -2458,7 +2458,7 @@ import {
   forwardRef as forwardRef17
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn37, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext6, useContext as useContext12 } from "react";
@@ -2469,7 +2469,7 @@ var useRadioGroupContext = () => useContext12(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames40 } from "@marigold/system";
+import { cn as cn36, useClassNames as useClassNames40 } from "@marigold/system";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -2511,7 +2511,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn35(
+          className: cn36(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -2529,7 +2529,7 @@ var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /*
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
   "div",
   {
-    className: cn36(
+    className: cn37(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -2550,7 +2550,7 @@ var _Radio = forwardRef17(
       Radio,
       {
         ref,
-        className: cn36(
+        className: cn37(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2564,7 +2564,7 @@ var _Radio = forwardRef17(
             Icon3,
             {
               checked: isSelected,
-              className: cn36(
+              className: cn37(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
@@ -2608,7 +2608,7 @@ import {
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn37, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn38, useClassNames as useClassNames42 } from "@marigold/system";
 import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
 var _Select = forwardRef19(
   ({
@@ -2635,7 +2635,7 @@ var _Select = forwardRef19(
       /* @__PURE__ */ jsxs29(
         Button6,
         {
-          className: cn37(
+          className: cn38(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
@@ -2653,7 +2653,7 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn38, createVar as createVar10, width as twWidth2 } from "@marigold/system";
+import { cn as cn39, createVar as createVar10, width as twWidth2 } from "@marigold/system";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
@@ -2664,7 +2664,7 @@ var Scrollable = ({
   "div",
   {
     ...props,
-    className: cn38(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    className: cn39(["sticky h-[--height] overflow-auto", twWidth2[width]]),
     style: createVar10({ height }),
     children
   }
@@ -2679,7 +2679,7 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn39,
+  cn as cn40,
   width as twWidth3,
   useClassNames as useClassNames43
 } from "@marigold/system";
@@ -2705,7 +2705,7 @@ var _Slider = forwardRef20(
     return /* @__PURE__ */ jsxs30(
       Slider,
       {
-        className: cn39(
+        className: cn40(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -2714,15 +2714,15 @@ var _Slider = forwardRef20(
         ...props,
         children: [
           /* @__PURE__ */ jsx71(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx71(SliderOutput, { className: cn39("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx71(SliderOutput, { className: cn40("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ jsx71(
             SliderTrack,
             {
-              className: cn39("relative col-span-2 h-2 w-full", classNames2.track),
+              className: cn40("relative col-span-2 h-2 w-full", classNames2.track),
               children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx71(
                 SliderThumb,
                 {
-                  className: cn39("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn40("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2743,7 +2743,7 @@ var Split = (props) => /* @__PURE__ */ jsx72("div", { ...props, role: "separator
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn40,
+  cn as cn41,
   gapSpace as gapSpace6
 } from "@marigold/system";
 import { jsx as jsx73 } from "react/jsx-runtime";
@@ -2760,7 +2760,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx73(
     "div",
     {
-      className: cn40(
+      className: cn41(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -2777,7 +2777,7 @@ var Stack = ({
 import { forwardRef as forwardRef21 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn41,
+  cn as cn42,
   width as twWidth4,
   useClassNames as useClassNames44
 } from "@marigold/system";
@@ -2805,7 +2805,7 @@ var _Switch = forwardRef21(
       {
         ...props,
         ref,
-        className: cn41(
+        className: cn42(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
@@ -2816,14 +2816,14 @@ var _Switch = forwardRef21(
           /* @__PURE__ */ jsx74("div", { className: "relative", children: /* @__PURE__ */ jsx74(
             "div",
             {
-              className: cn41(
+              className: cn42(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
               children: /* @__PURE__ */ jsx74(
                 "div",
                 {
-                  className: cn41(
+                  className: cn42(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2852,7 +2852,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn47, useClassNames as useClassNames46 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames46 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext7, useContext as useContext13 } from "react";
@@ -2872,7 +2872,7 @@ import { useRef as useRef4 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn42, useStateProps as useStateProps2 } from "@marigold/system";
+import { cn as cn43, useStateProps as useStateProps2 } from "@marigold/system";
 import { jsx as jsx76 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef4(null);
@@ -2900,7 +2900,7 @@ var TableCell = ({ cell, align = "left" }) => {
     "td",
     {
       ref,
-      className: cn42(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn43(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -2914,7 +2914,7 @@ import { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn43, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn44, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2958,7 +2958,7 @@ var TableCheckboxCell = ({ cell }) => {
     "td",
     {
       ref,
-      className: cn43("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn44("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ jsx77(_Checkbox, { ...checkboxProps })
@@ -2973,7 +2973,7 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn44, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn45, useStateProps as useStateProps4 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
 import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
@@ -3002,7 +3002,7 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn44("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn45("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -3046,7 +3046,7 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn45, useClassNames as useClassNames45, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn46, useClassNames as useClassNames45, useStateProps as useStateProps5 } from "@marigold/system";
 import { jsx as jsx81 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
@@ -3081,7 +3081,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: cn45(
+      className: cn46(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3104,7 +3104,7 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn46,
+  cn as cn47,
   width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
@@ -3134,7 +3134,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn46(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn47(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -3176,7 +3176,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn47(
+          className: cn48(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3236,7 +3236,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn48,
+  cn as cn49,
   createVar as createVar11,
   cursorStyle,
   fontWeight,
@@ -3270,7 +3270,7 @@ var Text2 = ({
     "p",
     {
       ...props,
-      className: cn48(
+      className: cn49(
         "text-[--color] outline-[--outline]",
         classNames2,
         fontStyle && textStyle[fontStyle],
@@ -3346,7 +3346,7 @@ var _TextField = forwardRef23(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn49, createVar as createVar12, gapSpace as gapSpace7 } from "@marigold/system";
+import { cn as cn50, createVar as createVar12, gapSpace as gapSpace7 } from "@marigold/system";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -3364,7 +3364,7 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: cn49(
+      className: cn50(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3378,7 +3378,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn50, useClassNames as useClassNames49 } from "@marigold/system";
+import { cn as cn51, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -3412,7 +3412,7 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     Tooltip,
     {
       ...props,
-      className: cn50("group/tooltip", classNames2.container),
+      className: cn51("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
         /* @__PURE__ */ jsx89(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx89("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx89("path", { d: "M0 0 L4 4 L8 0" }) }) }),
@@ -3654,7 +3654,7 @@ var useTabContext = () => useContext14(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn51 } from "@marigold/system";
+import { cn as cn52 } from "@marigold/system";
 import { jsx as jsx91 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3662,7 +3662,7 @@ var _Tab = (props) => {
     Tab,
     {
       ...props,
-      className: cn51(
+      className: cn52(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3673,7 +3673,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn52, gapSpace as gapSpace8 } from "@marigold/system";
+import { cn as cn53, gapSpace as gapSpace8 } from "@marigold/system";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3681,7 +3681,7 @@ var _TabList = ({ space = 2, ...props }) => {
     TabList,
     {
       ...props,
-      className: cn52("flex", gapSpace8[space], classNames2.tabsList),
+      className: cn53("flex", gapSpace8[space], classNames2.tabsList),
       children: props.children
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "7.5.3",
+  "version": "7.5.4",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -43,8 +43,8 @@
     "@react-types/shared": "3.22.1",
     "@react-types/table": "3.9.3",
     "react-aria-components": "1.1.1",
-    "@marigold/icons": "1.2.43",
-    "@marigold/system": "7.5.3",
+    "@marigold/icons": "1.2.44",
+    "@marigold/system": "7.5.4",
     "@marigold/types": "1.1.0"
   },
   "peerDependencies": {