@marigold/components 6.2.6 → 6.3.1

package/dist/index.js

@@ -140,8 +140,8 @@ var Button = (0, import_react.forwardRef)(
     onPressChange,
     onPressUp,
     fullWidth,
-    excludeFromTabOrder,
     className,
+    excludeFromTabOrder,
     ...props
   }, ref) => {
     const Component = as;
@@ -471,14 +471,20 @@ var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-  "div",
-  {
-    className: (0, import_system6.cn)("overflow-hidden", import_system6.aspect[ratio], "max-w-[var(--maxWidth)]"),
-    style: (0, import_system6.createVar)({ maxWidth }),
-    children
-  }
-);
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: (0, import_system6.cn)(
+        "overflow-hidden",
+        import_system6.aspect[ratio],
+        "max-w-[var(--maxWidth)]"
+      ),
+      style: (0, import_system6.createVar)({ maxWidth }),
+      children
+    }
+  );
+};
 
 // src/Autocomplete/Autocomplete.tsx
 var import_react17 = require("react");
@@ -496,7 +502,6 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 var HelpText = ({
   variant,
   size,
-  className,
   disabled,
   description,
   descriptionProps,
@@ -509,8 +514,7 @@ var HelpText = ({
   const classNames2 = (0, import_system7.useClassNames)({
     component: "HelpText",
     variant,
-    size,
-    className
+    size
   });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
@@ -645,20 +649,11 @@ var import_react8 = require("react");
 var import_system10 = require("@marigold/system");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var Input = (0, import_react8.forwardRef)(
-  ({
-    type = "text",
-    icon,
-    action,
-    variant,
-    size,
-    className,
-    ...props
-  }, ref) => {
+  ({ type = "text", icon, action, variant, size, ...props }, ref) => {
     const classNames2 = (0, import_system10.useClassNames)({
       component: "Input",
       variant,
-      size,
-      className
+      size
     });
     const inputIcon = icon ? (0, import_react8.cloneElement)(icon, {
       className: (0, import_system10.cn)(
@@ -693,8 +688,7 @@ var Input = (0, import_react8.forwardRef)(
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
                 "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0",
-                classNames2.input,
-                className
+                classNames2.input
               ),
               ref,
               type
@@ -1331,13 +1325,13 @@ var Center = ({
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
+      ...props,
       className: (0, import_system21.cn)(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         import_system21.gapSpace[space],
         "max-w-[--maxWidth]"
       ),
       style: (0, import_system21.createVar)({ maxWidth }),
-      ...props,
       children
     }
   );
@@ -1616,6 +1610,7 @@ var Container = ({
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
+      ...props,
       className: (0, import_system26.cn)(
         "grid",
         import_system26.placeItems[alignItems],
@@ -1623,7 +1618,6 @@ var Container = ({
         import_system26.gridColumn[align]
       ),
       style: (0, import_system26.createVar)({ maxWidth }),
-      ...props,
       children
     }
   );
@@ -1638,18 +1632,11 @@ var import_system29 = require("@marigold/system");
 // src/Header/Header.tsx
 var import_system27 = require("@marigold/system");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Header = ({
-  children,
-  variant,
-  size,
-  className,
-  ...props
-}) => {
+var Header = ({ children, variant, size, ...props }) => {
   const classNames2 = (0, import_system27.useClassNames)({
     component: "Header",
     variant,
-    size,
-    className
+    size
   });
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { ...props, className: (0, import_system27.cn)(classNames2), children });
 };
@@ -1888,13 +1875,13 @@ var Inline = ({
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
+      ...props,
       className: (0, import_system33.cn)(
         "flex flex-wrap",
         import_system33.gapSpace[space],
         alignX && ((_b2 = (_a2 = import_system33.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
         alignY && ((_d = (_c = import_system33.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
-      ...props,
       children
     }
   );
@@ -2278,7 +2265,7 @@ var Select = (0, import_react29.forwardRef)(
             "button",
             {
               className: (0, import_system37.cn)(
-                "flex w-full items-center justify-between gap-1",
+                "flex w-full items-center justify-between gap-1 overflow-hidden",
                 classNames2.select
               ),
               ref: buttonRef,
@@ -2581,7 +2568,6 @@ var Link = (0, import_react32.forwardRef)(
     disabled,
     onPress,
     onPressStart,
-    className,
     ...props
   }, ref) => {
     const linkRef = (0, import_utils17.useObjectRef)(ref);
@@ -2597,8 +2583,7 @@ var Link = (0, import_react32.forwardRef)(
     const classNames2 = (0, import_system41.useClassNames)({
       component: "Link",
       variant,
-      size,
-      className
+      size
     });
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Component,
@@ -3313,7 +3298,7 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
 // src/Slider/Slider.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var Slider = (0, import_react43.forwardRef)(
-  ({ variant, size, width = "100%", ...props }, ref) => {
+  ({ variant, size, width = "full", ...props }, ref) => {
     const { formatOptions } = props;
     const trackRef = (0, import_utils25.useObjectRef)(ref);
     const numberFormatter = (0, import_i18n11.useNumberFormatter)(formatOptions);
@@ -3337,8 +3322,7 @@ var Slider = (0, import_react43.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "div",
       {
-        className: "flex w-[var(--slideWidth)] touch-none flex-col",
-        style: (0, import_system56.createVar)({ slideWidth: width }),
+        className: (0, import_system56.cn)("flex touch-none flex-col", import_system56.width[width]),
         ...groupProps,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex self-stretch", children: [
@@ -3435,7 +3419,7 @@ var Switch = (0, import_react44.forwardRef)(
   ({
     variant,
     size,
-    width = "100%",
+    width = "full",
     selected,
     disabled,
     readOnly,
@@ -3465,10 +3449,9 @@ var Switch = (0, import_react44.forwardRef)(
       {
         className: (0, import_system58.cn)(
           "group/switch",
-          "w-[var(--switchWidth)]",
+          import_system58.width[width],
           "relative flex items-center justify-between gap-[1ch]"
         ),
-        style: (0, import_system58.createVar)({ switchWidth: width }),
         ...stateProps,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
@@ -4197,11 +4180,17 @@ var import_system72 = require("@marigold/system");
 
 // src/TagGroup/Tag.tsx
 var import_react57 = __toESM(require("react"));
+var import_button8 = require("@react-aria/button");
 var import_focus24 = require("@react-aria/focus");
 var import_tag = require("@react-aria/tag");
 var import_utils36 = require("@react-aria/utils");
 var import_system71 = require("@marigold/system");
 var import_jsx_runtime87 = require("react/jsx-runtime");
+var CloseButton2 = ({ className, ...props }) => {
+  const ref = (0, import_react57.useRef)(null);
+  const { buttonProps } = (0, import_button8.useButton)({ ...props }, ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+};
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
     item,
@@ -4227,12 +4216,10 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...gridCellProps, className: classNames2.gridCell, children: [
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: item.rendered }),
         allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-          Button,
+          CloseButton2,
           {
             ...removeButtonProps,
-            className: (0, import_system71.cn)("flex items-center", classNames2.closeButton),
-            role: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) })
+            className: (0, import_system71.cn)("flex items-center", classNames2.closeButton)
           }
         )
       ] })

package/dist/index.mjs

@@ -39,8 +39,8 @@ var Button = forwardRef(
     onPressChange,
     onPressUp,
     fullWidth,
-    excludeFromTabOrder,
     className,
+    excludeFromTabOrder,
     ...props
   }, ref) => {
     const Component = as;
@@ -370,14 +370,20 @@ var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ jsx7(
-  "div",
-  {
-    className: cn3("overflow-hidden", aspect[ratio], "max-w-[var(--maxWidth)]"),
-    style: createVar2({ maxWidth }),
-    children
-  }
-);
+}) => {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn3(
+        "overflow-hidden",
+        aspect[ratio],
+        "max-w-[var(--maxWidth)]"
+      ),
+      style: createVar2({ maxWidth }),
+      children
+    }
+  );
+};
 
 // src/Autocomplete/Autocomplete.tsx
 import { useRef as useRef7 } from "react";
@@ -399,7 +405,6 @@ import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var HelpText = ({
   variant,
   size,
-  className,
   disabled,
   description,
   descriptionProps,
@@ -412,8 +417,7 @@ var HelpText = ({
   const classNames2 = useClassNames3({
     component: "HelpText",
     variant,
-    size,
-    className
+    size
   });
   return /* @__PURE__ */ jsx8(
     "div",
@@ -551,20 +555,11 @@ import {
 import { cn as cn7, useClassNames as useClassNames6 } from "@marigold/system";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var Input = forwardRef4(
-  ({
-    type = "text",
-    icon,
-    action,
-    variant,
-    size,
-    className,
-    ...props
-  }, ref) => {
+  ({ type = "text", icon, action, variant, size, ...props }, ref) => {
     const classNames2 = useClassNames6({
       component: "Input",
       variant,
-      size,
-      className
+      size
     });
     const inputIcon = icon ? cloneElement2(icon, {
       className: cn7(
@@ -599,8 +594,7 @@ var Input = forwardRef4(
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
                 "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0",
-                classNames2.input,
-                className
+                classNames2.input
               ),
               ref,
               type
@@ -1256,13 +1250,13 @@ var Center = ({
   return /* @__PURE__ */ jsx28(
     "div",
     {
+      ...props,
       className: cn13(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-[--maxWidth]"
       ),
       style: createVar5({ maxWidth }),
-      ...props,
       children
     }
   );
@@ -1553,6 +1547,7 @@ var Container = ({
   return /* @__PURE__ */ jsx33(
     "div",
     {
+      ...props,
       className: cn16(
         "grid",
         placeItems[alignItems],
@@ -1560,7 +1555,6 @@ var Container = ({
         gridColumn[align]
       ),
       style: createVar8({ maxWidth }),
-      ...props,
       children
     }
   );
@@ -1580,18 +1574,11 @@ import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 // src/Header/Header.tsx
 import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
 import { jsx as jsx34 } from "react/jsx-runtime";
-var Header = ({
-  children,
-  variant,
-  size,
-  className,
-  ...props
-}) => {
+var Header = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames15({
     component: "Header",
     variant,
-    size,
-    className
+    size
   });
   return /* @__PURE__ */ jsx34("header", { ...props, className: cn17(classNames2), children });
 };
@@ -1846,13 +1833,13 @@ var Inline = ({
   return /* @__PURE__ */ jsx42(
     "div",
     {
+      ...props,
       className: cn21(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
-      ...props,
       children
     }
   );
@@ -2246,7 +2233,7 @@ var Select = forwardRef10(
             "button",
             {
               className: cn25(
-                "flex w-full items-center justify-between gap-1",
+                "flex w-full items-center justify-between gap-1 overflow-hidden",
                 classNames2.select
               ),
               ref: buttonRef,
@@ -2554,7 +2541,6 @@ var Link = forwardRef11(
     disabled,
     onPress,
     onPressStart,
-    className,
     ...props
   }, ref) => {
     const linkRef = useObjectRef7(ref);
@@ -2570,8 +2556,7 @@ var Link = forwardRef11(
     const classNames2 = useClassNames26({
       component: "Link",
       variant,
-      size,
-      className
+      size
     });
     return /* @__PURE__ */ jsx53(
       Component,
@@ -3251,7 +3236,12 @@ import { useNumberFormatter } from "@react-aria/i18n";
 import { useSlider } from "@react-aria/slider";
 import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import { useSliderState } from "@react-stately/slider";
-import { cn as cn35, createVar as createVar10, useClassNames as useClassNames33, useStateProps as useStateProps19 } from "@marigold/system";
+import {
+  cn as cn35,
+  width as twWidth2,
+  useClassNames as useClassNames33,
+  useStateProps as useStateProps19
+} from "@marigold/system";
 
 // src/Slider/Thumb.tsx
 import { useEffect as useEffect2, useRef as useRef20 } from "react";
@@ -3299,7 +3289,7 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
 // src/Slider/Slider.tsx
 import { jsx as jsx68, jsxs as jsxs29 } from "react/jsx-runtime";
 var Slider = forwardRef14(
-  ({ variant, size, width = "100%", ...props }, ref) => {
+  ({ variant, size, width = "full", ...props }, ref) => {
     const { formatOptions } = props;
     const trackRef = useObjectRef11(ref);
     const numberFormatter = useNumberFormatter(formatOptions);
@@ -3323,8 +3313,7 @@ var Slider = forwardRef14(
     return /* @__PURE__ */ jsxs29(
       "div",
       {
-        className: "flex w-[var(--slideWidth)] touch-none flex-col",
-        style: createVar10({ slideWidth: width }),
+        className: cn35("flex touch-none flex-col", twWidth2[width]),
         ...groupProps,
         children: [
           /* @__PURE__ */ jsxs29("div", { className: "flex self-stretch", children: [
@@ -3419,13 +3408,18 @@ import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
 import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
-import { cn as cn37, createVar as createVar11, useClassNames as useClassNames34, useStateProps as useStateProps20 } from "@marigold/system";
+import {
+  cn as cn37,
+  width as twWidth3,
+  useClassNames as useClassNames34,
+  useStateProps as useStateProps20
+} from "@marigold/system";
 import { Fragment as Fragment6, jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
 var Switch = forwardRef15(
   ({
     variant,
     size,
-    width = "100%",
+    width = "full",
     selected,
     disabled,
     readOnly,
@@ -3455,10 +3449,9 @@ var Switch = forwardRef15(
       {
         className: cn37(
           "group/switch",
-          "w-[var(--switchWidth)]",
+          twWidth3[width],
           "relative flex items-center justify-between gap-[1ch]"
         ),
-        style: createVar11({ switchWidth: width }),
         ...stateProps,
         children: [
           /* @__PURE__ */ jsx71(
@@ -3631,7 +3624,7 @@ import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps19 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
 import { cn as cn39, useStateProps as useStateProps23 } from "@marigold/system";
-import { width as twWidth2 } from "@marigold/system";
+import { width as twWidth4 } from "@marigold/system";
 import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
@@ -3658,7 +3651,7 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn39("cursor-default", twWidth2[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn39("cursor-default", twWidth4[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps19(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       children: [
@@ -3753,7 +3746,7 @@ import {
 import { mergeProps as mergeProps21 } from "@react-aria/utils";
 import {
   cn as cn41,
-  width as twWidth3,
+  width as twWidth5,
   useStateProps as useStateProps25
 } from "@marigold/system";
 import { jsx as jsx79 } from "react/jsx-runtime";
@@ -3782,7 +3775,7 @@ var TableSelectAllCell = ({
     {
       ref,
       className: cn41(
-        twWidth3[width],
+        twWidth5[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
@@ -3878,7 +3871,7 @@ Table.Row = Row;
 // src/Text/Text.tsx
 import {
   cn as cn43,
-  createVar as createVar12,
+  createVar as createVar10,
   cursorStyle,
   fontWeight,
   get as get2,
@@ -3920,7 +3913,7 @@ var Text = ({
         weight && fontWeight[weight],
         fontSize && textSize[fontSize]
       ),
-      style: createVar12({
+      style: createVar10({
         color: color && theme.colors && get2(
           theme.colors,
           color.replace("-", "."),
@@ -4071,7 +4064,7 @@ var TextField = forwardRef17(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn44, createVar as createVar13, gapSpace as gapSpace7 } from "@marigold/system";
+import { cn as cn44, createVar as createVar11, gapSpace as gapSpace7 } from "@marigold/system";
 import { jsx as jsx84 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -4095,7 +4088,7 @@ var Tiles = ({
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: createVar13({ column, tilesWidth }),
+      style: createVar11({ column, tilesWidth }),
       children
     }
   );
@@ -4205,18 +4198,24 @@ Tooltip.Trigger = TooltipTrigger;
 import { Item as Item6 } from "@react-stately/collections";
 
 // src/TagGroup/TagGroup.tsx
-import { useRef as useRef29 } from "react";
+import { useRef as useRef30 } from "react";
 import { useTagGroup } from "@react-aria/tag";
 import { useListState } from "@react-stately/list";
 import { useStateProps as useStateProps28 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
-import React2 from "react";
+import React2, { useRef as useRef29 } from "react";
+import { useButton as useButton8 } from "@react-aria/button";
 import { useFocusRing as useFocusRing20 } from "@react-aria/focus";
 import { useTag } from "@react-aria/tag";
 import { mergeProps as mergeProps23 } from "@react-aria/utils";
 import { cn as cn46, useClassNames as useClassNames40 } from "@marigold/system";
 import { jsx as jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
+var CloseButton2 = ({ className, ...props }) => {
+  const ref = useRef29(null);
+  const { buttonProps } = useButton8({ ...props }, ref);
+  return /* @__PURE__ */ jsx87("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+};
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
     item,
@@ -4242,12 +4241,10 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
       children: /* @__PURE__ */ jsxs35("div", { ...gridCellProps, className: classNames2.gridCell, children: [
         /* @__PURE__ */ jsx87("span", { children: item.rendered }),
         allowsRemoving && /* @__PURE__ */ jsx87(
-          Button,
+          CloseButton2,
           {
             ...removeButtonProps,
-            className: cn46("flex items-center", classNames2.closeButton),
-            role: "button",
-            children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) })
+            className: cn46("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -4270,7 +4267,7 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
   const stateProps = useStateProps28({
@@ -4536,7 +4533,7 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs36(
 ));
 
 // src/Tabs/Tabs.tsx
-import { useRef as useRef32 } from "react";
+import { useRef as useRef33 } from "react";
 import { useTabList } from "@react-aria/tabs";
 import { Item as Item7 } from "@react-stately/collections";
 import { useTabListState } from "@react-stately/tabs";
@@ -4548,7 +4545,7 @@ var TabContext = createContext10({});
 var useTabContext = () => useContext10(TabContext);
 
 // src/Tabs/Tab.tsx
-import { useRef as useRef30 } from "react";
+import { useRef as useRef31 } from "react";
 import { useFocus, useHover as useHover14 } from "@react-aria/interactions";
 import { useTab } from "@react-aria/tabs";
 import { mergeProps as mergeProps24 } from "@react-aria/utils";
@@ -4556,7 +4553,7 @@ import { cn as cn47, useStateProps as useStateProps29 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = useRef30(null);
+  const ref = useRef31(null);
   const { tabProps, isSelected } = useTab({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
   const { hoverProps, isHovered } = useHover14({
@@ -4580,13 +4577,13 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-import { useRef as useRef31 } from "react";
+import { useRef as useRef32 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
 import { cn as cn48 } from "@marigold/system";
 import { jsx as jsx91 } from "react/jsx-runtime";
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
@@ -4603,7 +4600,7 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = useRef32(null);
+  const ref = useRef33(null);
   const props = {
     isDisabled: disabled,
     ...rest