@marigold/components 6.0.0 → 6.1.0

package/dist/index.js

@@ -87,7 +87,7 @@ __export(src_exports, {
   Text: () => Text,
   TextArea: () => TextArea,
   TextField: () => TextField,
-  ThemeProvider: () => import_system51.ThemeProvider,
+  ThemeProvider: () => import_system52.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => Tooltip,
   Tray: () => Tray,
@@ -99,7 +99,7 @@ __export(src_exports, {
   useCheckboxGroupContext: () => useCheckboxGroupContext,
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
-  useTheme: () => import_system51.useTheme
+  useTheme: () => import_system52.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -826,6 +826,7 @@ var Overlay = ({ children, container, open }) => {
 var import_react21 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_focus4 = require("@react-aria/focus");
+var import_system15 = require("@marigold/system");
 var Popover = (0, import_react21.forwardRef)(
   (props, ref) => {
     const fallbackRef = (0, import_react21.useRef)(null);
@@ -852,11 +853,15 @@ var PopoverWrapper = (0, import_react21.forwardRef)(
       },
       state
     );
+    const classNames2 = (0, import_system15.useClassNames)({
+      component: "Popover",
+      variant: placement
+    });
     return /* @__PURE__ */ import_react21.default.createElement(import_focus4.FocusScope, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ import_react21.default.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ import_react21.default.createElement(
       "div",
       {
         ...popoverProps,
-        className: placement === "top" ? "mb-0.5" : "mt-0.5",
+        className: classNames2,
         style: {
           ...popoverProps.style,
           minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
@@ -914,7 +919,7 @@ var import_interactions2 = require("@react-aria/interactions");
 var import_focus6 = require("@react-aria/focus");
 var import_button3 = require("@react-aria/button");
 var import_utils10 = require("@react-aria/utils");
-var import_system15 = require("@marigold/system");
+var import_system16 = require("@marigold/system");
 var ClearButton = ({
   preventFocus,
   disabled,
@@ -952,7 +957,7 @@ var ClearButton = ({
   if (preventFocus) {
     delete buttonProps.tabIndex;
   }
-  const stateProps = (0, import_system15.useStateProps)({
+  const stateProps = (0, import_system16.useStateProps)({
     active: isPressed,
     focusVisible: isFocusVisible,
     hover: isHovered
@@ -963,7 +968,7 @@ var ClearButton = ({
       ...(0, import_utils10.mergeProps)(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       ref: buttonRef,
-      className: (0, import_system15.cn)(
+      className: (0, import_system16.cn)(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       )
@@ -1178,15 +1183,15 @@ ComboBox.Item = import_collections3.Item;
 
 // src/Badge/Badge.tsx
 var import_react27 = __toESM(require("react"));
-var import_system16 = require("@marigold/system");
+var import_system17 = require("@marigold/system");
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = (0, import_system16.useClassNames)({ component: "Badge", variant, size });
+  const classNames2 = (0, import_system17.useClassNames)({ component: "Badge", variant, size });
   return /* @__PURE__ */ import_react27.default.createElement("div", { ...props, className: classNames2 }, children);
 };
 
 // src/Breakout/Breakout.tsx
 var import_react28 = __toESM(require("react"));
-var import_system17 = require("@marigold/system");
+var import_system18 = require("@marigold/system");
 var Breakout = ({
   height,
   children,
@@ -1199,14 +1204,14 @@ var Breakout = ({
   return /* @__PURE__ */ import_react28.default.createElement(
     "div",
     {
-      className: (0, import_system17.cn)(
+      className: (0, import_system18.cn)(
         "col-start-[1_!important] col-end-[-1_!important] w-full",
-        alignX && ((_b = (_a = import_system17.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system17.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
+        alignX && ((_b = (_a = import_system18.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system18.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
         alignX || alignY ? "flex" : "block",
         "h-[--height]"
       ),
-      style: (0, import_system17.createVar)({ height }),
+      style: (0, import_system18.createVar)({ height }),
       ...props
     },
     children
@@ -1215,15 +1220,15 @@ var Breakout = ({
 
 // src/Body/Body.tsx
 var import_react29 = __toESM(require("react"));
-var import_system18 = require("@marigold/system");
+var import_system19 = require("@marigold/system");
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system18.useClassNames)({ component: "Body", variant, size });
+  const classNames2 = (0, import_system19.useClassNames)({ component: "Body", variant, size });
   return /* @__PURE__ */ import_react29.default.createElement("section", { ...props, className: classNames2 }, children);
 };
 
 // src/Card/Card.tsx
 var import_react30 = __toESM(require("react"));
-var import_system19 = require("@marigold/system");
+var import_system20 = require("@marigold/system");
 var Card = ({
   children,
   variant,
@@ -1238,22 +1243,22 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = (0, import_system19.useClassNames)({ component: "Card", variant, size });
+  const classNames2 = (0, import_system20.useClassNames)({ component: "Card", variant, size });
   return /* @__PURE__ */ import_react30.default.createElement(
     "div",
     {
       ...props,
-      className: (0, import_system19.cn)(
+      className: (0, import_system20.cn)(
         "flex flex-col",
         classNames2,
-        import_system19.gapSpace[space],
-        import_system19.paddingSpace !== void 0 && import_system19.paddingSpace[p],
-        import_system19.paddingSpaceX !== void 0 && import_system19.paddingSpaceX[px],
-        import_system19.paddingSpaceY !== void 0 && import_system19.paddingSpaceY[py],
-        import_system19.paddingRight !== void 0 && import_system19.paddingRight[pr],
-        import_system19.paddingLeft !== void 0 && import_system19.paddingLeft[pl],
-        import_system19.paddingBottom !== void 0 && import_system19.paddingBottom[pb],
-        import_system19.paddingTop !== void 0 && import_system19.paddingTop[pt]
+        import_system20.gapSpace[space],
+        import_system20.paddingSpace !== void 0 && import_system20.paddingSpace[p],
+        import_system20.paddingSpaceX !== void 0 && import_system20.paddingSpaceX[px],
+        import_system20.paddingSpaceY !== void 0 && import_system20.paddingSpaceY[py],
+        import_system20.paddingRight !== void 0 && import_system20.paddingRight[pr],
+        import_system20.paddingLeft !== void 0 && import_system20.paddingLeft[pl],
+        import_system20.paddingBottom !== void 0 && import_system20.paddingBottom[pb],
+        import_system20.paddingTop !== void 0 && import_system20.paddingTop[pt]
       )
     },
     children
@@ -1262,7 +1267,7 @@ var Card = ({
 
 // src/Center/Center.tsx
 var import_react31 = __toESM(require("react"));
-var import_system20 = require("@marigold/system");
+var import_system21 = require("@marigold/system");
 var Center = ({
   maxWidth = "100%",
   space = 0,
@@ -1272,12 +1277,12 @@ var Center = ({
   return /* @__PURE__ */ import_react31.default.createElement(
     "div",
     {
-      className: (0, import_system20.cn)(
+      className: (0, import_system21.cn)(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
-        import_system20.gapSpace[space],
+        import_system21.gapSpace[space],
         "max-w-[--maxWidth]"
       ),
-      style: (0, import_system20.createVar)({ maxWidth }),
+      style: (0, import_system21.createVar)({ maxWidth }),
       ...props
     },
     children
@@ -1291,13 +1296,20 @@ var import_focus7 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_utils11 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
+var import_system24 = require("@marigold/system");
+
+// src/Checkbox/CheckboxField.tsx
 var import_system22 = require("@marigold/system");
+var CheckboxField = ({ children, labelWidth }) => {
+  const classNames2 = (0, import_system22.useClassNames)({ component: "Field" });
+  return /* @__PURE__ */ React.createElement("div", { className: classNames2 }, /* @__PURE__ */ React.createElement("div", { className: "w-[--labelWidth]", style: (0, import_system22.createVar)({ labelWidth }) }), children);
+};
 
 // src/Checkbox/CheckboxGroup.tsx
 var import_react32 = __toESM(require("react"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_checkbox2 = require("@react-stately/checkbox");
-var import_system21 = require("@marigold/system");
+var import_system23 = require("@marigold/system");
 var CheckboxGroupContext = (0, import_react32.createContext)(
   null
 );
@@ -1320,7 +1332,7 @@ var CheckboxGroup = ({
   };
   const state = (0, import_checkbox2.useCheckboxGroupState)(props);
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
-  const stateProps = (0, import_system21.useStateProps)({
+  const stateProps = (0, import_system23.useStateProps)({
     disabled,
     readOnly,
     error
@@ -1345,7 +1357,6 @@ var CheckboxGroup = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_system23 = require("@marigold/system");
 var CheckMark = () => /* @__PURE__ */ import_react33.default.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ import_react33.default.createElement(
   "path",
   {
@@ -1367,7 +1378,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
     "div",
     {
       "aria-hidden": "true",
-      className: (0, import_system23.cn)(
+      className: (0, import_system24.cn)(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1428,12 +1439,13 @@ var Checkbox = (0, import_react33.forwardRef)(
       }),
       inputRef
     );
-    const classNames2 = (0, import_system23.useClassNames)({ component: "Checkbox", variant, size });
+    const classNames2 = (0, import_system24.useClassNames)({ component: "Checkbox", variant, size });
     const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
       isDisabled: inputProps.disabled
     });
+    const { labelWidth } = useFieldGroupContext();
     const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
-    const stateProps = (0, import_system22.useStateProps)({
+    const stateProps = (0, import_system24.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1442,10 +1454,10 @@ var Checkbox = (0, import_react33.forwardRef)(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ import_react33.default.createElement(
+    const component = /* @__PURE__ */ import_react33.default.createElement(
       "label",
       {
-        className: (0, import_system23.cn)(
+        className: (0, import_system24.cn)(
           "group/checkbox relative flex items-center gap-[1ch]",
           classNames2.container
         ),
@@ -1471,12 +1483,13 @@ var Checkbox = (0, import_react33.forwardRef)(
       ),
       props.children && /* @__PURE__ */ import_react33.default.createElement("div", { className: classNames2.label }, props.children)
     );
+    return !groupState && labelWidth ? /* @__PURE__ */ import_react33.default.createElement(CheckboxField, { labelWidth }, component) : component;
   }
 );
 
 // src/Columns/Columns.tsx
 var import_react34 = __toESM(require("react"));
-var import_system24 = require("@marigold/system");
+var import_system25 = require("@marigold/system");
 var Columns = ({
   space = 0,
   columns,
@@ -1495,20 +1508,20 @@ var Columns = ({
   return /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
-      className: (0, import_system24.cn)(
+      className: (0, import_system25.cn)(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
-        import_system24.gapSpace[space]
+        import_system25.gapSpace[space]
       ),
       ...props
     },
     import_react34.Children.map(children, (child, idx) => /* @__PURE__ */ import_react34.default.createElement(
       "div",
       {
-        className: (0, import_system24.cn)(
+        className: (0, import_system25.cn)(
           "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
         ),
-        style: (0, import_system24.createVar)({ collapseAt, columnSize: columns[idx] })
+        style: (0, import_system25.createVar)({ collapseAt, columnSize: columns[idx] })
       },
       (0, import_react34.isValidElement)(child) ? (0, import_react34.cloneElement)(child) : child
     ))
@@ -1517,7 +1530,7 @@ var Columns = ({
 
 // src/Container/Container.tsx
 var import_react35 = __toESM(require("react"));
-var import_system25 = require("@marigold/system");
+var import_system26 = require("@marigold/system");
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1540,13 +1553,13 @@ var Container = ({
   return /* @__PURE__ */ import_react35.default.createElement(
     "div",
     {
-      className: (0, import_system25.cn)(
+      className: (0, import_system26.cn)(
         "grid",
-        import_system25.placeItems[alignItems],
-        import_system25.gridColsAlign[align],
-        import_system25.gridColumn[align]
+        import_system26.placeItems[alignItems],
+        import_system26.gridColsAlign[align],
+        import_system26.gridColumn[align]
       ),
-      style: (0, import_system25.createVar)({ maxWidth }),
+      style: (0, import_system26.createVar)({ maxWidth }),
       ...props
     },
     children
@@ -1557,11 +1570,11 @@ var Container = ({
 var import_react41 = __toESM(require("react"));
 var import_button5 = require("@react-aria/button");
 var import_dialog = require("@react-aria/dialog");
-var import_system28 = require("@marigold/system");
+var import_system29 = require("@marigold/system");
 
 // src/Header/Header.tsx
 var import_react36 = __toESM(require("react"));
-var import_system26 = require("@marigold/system");
+var import_system27 = require("@marigold/system");
 var Header = ({
   children,
   variant,
@@ -1569,18 +1582,18 @@ var Header = ({
   className,
   ...props
 }) => {
-  const classNames2 = (0, import_system26.useClassNames)({
+  const classNames2 = (0, import_system27.useClassNames)({
     component: "Header",
     variant,
     size,
     className
   });
-  return /* @__PURE__ */ import_react36.default.createElement("header", { ...props, className: (0, import_system26.cn)(classNames2) }, children);
+  return /* @__PURE__ */ import_react36.default.createElement("header", { ...props, className: (0, import_system27.cn)(classNames2) }, children);
 };
 
 // src/Headline/Headline.tsx
 var import_react37 = __toESM(require("react"));
-var import_system27 = require("@marigold/system");
+var import_system28 = require("@marigold/system");
 var Headline = ({
   children,
   variant,
@@ -1591,8 +1604,8 @@ var Headline = ({
   as = `h${level}`,
   ...props
 }) => {
-  const theme = (0, import_system27.useTheme)();
-  const classNames2 = (0, import_system27.useClassNames)({
+  const theme = (0, import_system28.useTheme)();
+  const classNames2 = (0, import_system28.useClassNames)({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
@@ -1602,9 +1615,9 @@ var Headline = ({
     Component,
     {
       ...props,
-      className: (0, import_system27.cn)(classNames2, "text-[--color]", import_system27.textAlign[align]),
-      style: (0, import_system27.createVar)({
-        color: color && theme.colors && (0, import_system27.get)(
+      className: (0, import_system28.cn)(classNames2, "text-[--color]", import_system28.textAlign[align]),
+      style: (0, import_system28.createVar)({
+        color: color && theme.colors && (0, import_system28.get)(
           theme.colors,
           color.replace("-", "."),
           color
@@ -1694,7 +1707,7 @@ var CloseButton = ({ className }) => {
   return /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ import_react41.default.createElement(
     "button",
     {
-      className: (0, import_system28.cn)(
+      className: (0, import_system29.cn)(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
@@ -1739,7 +1752,7 @@ var Dialog = ({
   const ref = (0, import_react41.useRef)(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
-  const classNames2 = (0, import_system28.useClassNames)({ component: "Dialog", variant, size });
+  const classNames2 = (0, import_system29.useClassNames)({ component: "Dialog", variant, size });
   return /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames2.container, ...dialogProps }, closeButton && /* @__PURE__ */ import_react41.default.createElement(CloseButton, { className: classNames2.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
@@ -1748,24 +1761,24 @@ Dialog.Controller = DialogController;
 // src/Divider/Divider.tsx
 var import_react42 = __toESM(require("react"));
 var import_separator = require("@react-aria/separator");
-var import_system29 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = (0, import_separator.useSeparator)(props);
-  const classNames2 = (0, import_system29.useClassNames)({ component: "Divider", variant });
+  const classNames2 = (0, import_system30.useClassNames)({ component: "Divider", variant });
   return /* @__PURE__ */ import_react42.default.createElement("div", { className: classNames2, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
 var import_react43 = __toESM(require("react"));
-var import_system30 = require("@marigold/system");
+var import_system31 = require("@marigold/system");
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system30.useClassNames)({ component: "Footer", variant, size });
+  const classNames2 = (0, import_system31.useClassNames)({ component: "Footer", variant, size });
   return /* @__PURE__ */ import_react43.default.createElement("footer", { ...props, className: classNames2 }, children);
 };
 
 // src/Image/Image.tsx
 var import_react44 = __toESM(require("react"));
-var import_system31 = require("@marigold/system");
+var import_system32 = require("@marigold/system");
 var Image = ({
   variant,
   size,
@@ -1773,17 +1786,17 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = (0, import_system31.useClassNames)({ component: "Image", variant, size });
+  const classNames2 = (0, import_system32.useClassNames)({ component: "Image", variant, size });
   return /* @__PURE__ */ import_react44.default.createElement(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system31.cn)(
+      className: (0, import_system32.cn)(
         fit !== "none" && "h-full w-full",
         classNames2,
-        import_system31.objectFit[fit],
-        import_system31.objectPosition[position]
+        import_system32.objectFit[fit],
+        import_system32.objectPosition[position]
       )
     }
   );
@@ -1791,7 +1804,7 @@ var Image = ({
 
 // src/Inline/Inline.tsx
 var import_react45 = __toESM(require("react"));
-var import_system32 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 var Inline = ({
   space = 0,
   orientation,
@@ -1804,11 +1817,11 @@ var Inline = ({
   return /* @__PURE__ */ import_react45.default.createElement(
     "div",
     {
-      className: (0, import_system32.cn)(
+      className: (0, import_system33.cn)(
         "flex flex-wrap",
-        import_system32.gapSpace[space],
-        alignX && ((_b2 = (_a2 = import_system32.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system32.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        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
     },
@@ -1822,11 +1835,11 @@ var import_i18n3 = require("@react-aria/i18n");
 var import_datepicker2 = require("@react-stately/datepicker");
 var import_datepicker3 = require("@react-aria/datepicker");
 var import_date = require("@internationalized/date");
-var import_system34 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
 var import_react46 = __toESM(require("react"));
-var import_system33 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 var import_datepicker = require("@react-aria/datepicker");
 var import_focus8 = require("@react-aria/focus");
 var import_utils12 = require("@react-aria/utils");
@@ -1842,7 +1855,7 @@ var DateSegment = ({
     within: true,
     isTextInput: true
   });
-  const stateProps = (0, import_system33.useStateProps)({
+  const stateProps = (0, import_system34.useStateProps)({
     disabled: state.isDisabled,
     focusVisible: isFocused
   });
@@ -1852,7 +1865,7 @@ var DateSegment = ({
     {
       ...(0, import_utils12.mergeProps)(segmentProps, stateProps, focusProps),
       ref,
-      className: (0, import_system33.cn)(
+      className: (0, import_system34.cn)(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1867,7 +1880,7 @@ var DateSegment = ({
       "span",
       {
         "aria-hidden": "true",
-        className: (0, import_system33.cn)(
+        className: (0, import_system34.cn)(
           isPlaceholder ? "visible block" : "invisible hidden",
           "pointer-events-none w-full text-center"
         )
@@ -1916,14 +1929,14 @@ var DateField = ({
     state,
     ref
   );
-  const classNames2 = (0, import_system34.useClassNames)({ component: "DateField", variant, size });
+  const classNames2 = (0, import_system35.useClassNames)({ component: "DateField", variant, size });
   const { focusProps, isFocused } = (0, import_focus9.useFocusRing)({
     within: true,
     isTextInput: true,
     autoFocus: props.autoFocus
   });
   const { hoverProps, isHovered } = (0, import_interactions5.useHover)({ isDisabled: disabled });
-  const stateProps = (0, import_system34.useStateProps)({
+  const stateProps = (0, import_system35.useStateProps)({
     hover: isHovered,
     error,
     readOnly,
@@ -1951,7 +1964,7 @@ var DateField = ({
       "div",
       {
         ...(0, import_utils13.mergeProps)(fieldProps, focusProps, stateProps, hoverProps),
-        className: (0, import_system34.cn)(
+        className: (0, import_system35.cn)(
           "relative flex flex-row flex-nowrap",
           "cursor-text aria-disabled:cursor-not-allowed",
           classNames2.field
@@ -1976,7 +1989,7 @@ var DateField = ({
         "svg",
         {
           "data-testid": "action",
-          className: (0, import_system34.cn)(classNames2.action),
+          className: (0, import_system35.cn)(classNames2.action),
           viewBox: "0 0 24 24",
           width: 24,
           height: 24
@@ -2005,20 +2018,20 @@ var import_date2 = require("@internationalized/date");
 var import_react48 = __toESM(require("react"));
 var import_calendar = require("@react-aria/calendar");
 var import_utils14 = require("@react-aria/utils");
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var import_interactions6 = require("@react-aria/interactions");
 var CalendarCell = (props) => {
   const ref = (0, import_react48.useRef)(null);
   const { state } = props;
   let { cellProps, buttonProps, formattedDate, isOutsideVisibleRange } = (0, import_calendar.useCalendarCell)(props, state, ref);
-  const classNames2 = (0, import_system35.useClassNames)({
+  const classNames2 = (0, import_system36.useClassNames)({
     component: "Calendar"
   });
   const isDisabled = cellProps["aria-disabled"];
   const { hoverProps, isHovered } = (0, import_interactions6.useHover)({
     isDisabled: isDisabled || cellProps["aria-selected"]
   });
-  const stateProps = (0, import_system35.useStateProps)({
+  const stateProps = (0, import_system36.useStateProps)({
     disabled: isDisabled,
     hover: isHovered,
     selected: cellProps["aria-selected"]
@@ -2026,7 +2039,7 @@ var CalendarCell = (props) => {
   return /* @__PURE__ */ import_react48.default.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
-      className: (0, import_system35.cn)(
+      className: (0, import_system36.cn)(
         "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
       ),
@@ -2082,7 +2095,7 @@ var CalendarGrid = ({ state, ...props }) => {
 
 // src/Calendar/Calendar.tsx
 var import_icons = require("@marigold/icons");
-var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 
 // src/Calendar/MonthDropdown.tsx
 var import_react52 = __toESM(require("react"));
@@ -2097,7 +2110,7 @@ var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
 var import_collections4 = require("@react-stately/collections");
 var import_utils15 = require("@react-aria/utils");
-var import_system36 = require("@marigold/system");
+var import_system37 = require("@marigold/system");
 
 // src/Select/intl.ts
 var messages = {
@@ -2148,9 +2161,9 @@ var Select = (0, import_react51.forwardRef)(
       buttonRef
     );
     const { focusProps, isFocusVisible } = (0, import_focus10.useFocusRing)();
-    const classNames2 = (0, import_system36.useClassNames)({ component: "Select", variant, size });
-    const isSmallScreen = (0, import_system36.useSmallScreen)();
-    const stateProps = (0, import_system36.useStateProps)({
+    const classNames2 = (0, import_system37.useClassNames)({ component: "Select", variant, size });
+    const isSmallScreen = (0, import_system37.useSmallScreen)();
+    const stateProps = (0, import_system37.useStateProps)({
       disabled,
       error,
       focusVisible: isFocusVisible,
@@ -2186,7 +2199,7 @@ var Select = (0, import_react51.forwardRef)(
       /* @__PURE__ */ import_react51.default.createElement(
         "button",
         {
-          className: (0, import_system36.cn)(
+          className: (0, import_system37.cn)(
             "flex w-full items-center justify-between gap-1",
             classNames2.select
           ),
@@ -2314,15 +2327,15 @@ var Calendar = ({
   );
   const { isDisabled: prevIsDisabled, ...prevPropsRest } = prevButtonProps;
   const { isDisabled: nextIsDisabled, ...nextPropsRest } = nextButtonProps;
-  const calendarState = (0, import_system37.useStateProps)({
+  const calendarState = (0, import_system38.useStateProps)({
     disabled: state.isDisabled
   });
-  const classNames2 = (0, import_system37.useClassNames)({ component: "Calendar" });
+  const classNames2 = (0, import_system38.useClassNames)({ component: "Calendar" });
   return /* @__PURE__ */ import_react54.default.createElement(
     "div",
     {
       tabIndex: -1,
-      className: (0, import_system37.cn)(
+      className: (0, import_system38.cn)(
         "flex w-[360px] flex-col rounded-sm p-4 shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
@@ -2355,7 +2368,7 @@ var Calendar = ({
 var import_react55 = __toESM(require("react"));
 var import_datepicker4 = require("@react-stately/datepicker");
 var import_datepicker5 = require("@react-aria/datepicker");
-var import_system38 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
 var import_utils16 = require("@react-aria/utils");
 var DatePicker = ({
   disabled,
@@ -2380,7 +2393,7 @@ var DatePicker = ({
     ...props
   });
   const ref = (0, import_react55.useRef)(null);
-  const stateProps = (0, import_system38.useStateProps)({
+  const stateProps = (0, import_system39.useStateProps)({
     focus: state.isOpen
   });
   const { groupProps, fieldProps, buttonProps, calendarProps } = (0, import_datepicker5.useDatePicker)(
@@ -2389,7 +2402,7 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = (0, import_system38.useClassNames)({
+  const classNames2 = (0, import_system39.useClassNames)({
     component: "DatePicker",
     size,
     variant
@@ -2410,7 +2423,7 @@ var DatePicker = ({
         Button,
         {
           ...(0, import_utils16.mergeProps)(buttonProps, stateProps),
-          className: (0, import_system38.cn)("absolute right-0 top-0", classNames2.button),
+          className: (0, import_system39.cn)("absolute right-0 top-0", classNames2.button),
           disabled: isDisabled
         },
         /* @__PURE__ */ import_react55.default.createElement(
@@ -2430,7 +2443,7 @@ var DatePicker = ({
 
 // src/Inset/Inset.tsx
 var import_react56 = __toESM(require("react"));
-var import_system39 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 var Inset = ({
   space = 0,
   spaceX = 0,
@@ -2439,9 +2452,9 @@ var Inset = ({
 }) => /* @__PURE__ */ import_react56.default.createElement(
   "div",
   {
-    className: (0, import_system39.cn)(
-      space ? import_system39.paddingSpace[space] : import_system39.paddingSpaceX[spaceX],
-      import_system39.paddingSpaceY[spaceY]
+    className: (0, import_system40.cn)(
+      space ? import_system40.paddingSpace[space] : import_system40.paddingSpaceX[spaceX],
+      import_system40.paddingSpaceY[spaceY]
     )
   },
   children
@@ -2450,7 +2463,7 @@ var Inset = ({
 // src/Link/Link.tsx
 var import_react57 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
-var import_system40 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 var import_utils17 = require("@react-aria/utils");
 var Link = (0, import_react57.forwardRef)(
   ({
@@ -2474,7 +2487,7 @@ var Link = (0, import_react57.forwardRef)(
       linkRef
     );
     const Component = as;
-    const classNames2 = (0, import_system40.useClassNames)({
+    const classNames2 = (0, import_system41.useClassNames)({
       component: "Link",
       variant,
       size,
@@ -2496,7 +2509,7 @@ var Link = (0, import_react57.forwardRef)(
 
 // src/List/List.tsx
 var import_react60 = __toESM(require("react"));
-var import_system41 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 
 // src/List/Context.ts
 var import_react58 = require("react");
@@ -2519,7 +2532,7 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = (0, import_system41.useClassNames)({ component: "List", variant, size });
+  const classNames2 = (0, import_system42.useClassNames)({ component: "List", variant, size });
   return /* @__PURE__ */ import_react60.default.createElement(Component, { ...props, className: classNames2[as] }, /* @__PURE__ */ import_react60.default.createElement(ListContext.Provider, { value: { classNames: classNames2.item } }, children));
 };
 List.Item = ListItem;
@@ -2530,7 +2543,7 @@ var import_menu5 = require("@react-aria/menu");
 var import_collections5 = require("@react-stately/collections");
 var import_tree2 = require("@react-stately/tree");
 var import_utils20 = require("@react-aria/utils");
-var import_system45 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 
 // src/Menu/Context.ts
 var import_react61 = require("react");
@@ -2543,7 +2556,7 @@ var import_menu = require("@react-stately/menu");
 var import_interactions7 = require("@react-aria/interactions");
 var import_menu2 = require("@react-aria/menu");
 var import_utils18 = require("@react-aria/utils");
-var import_system42 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 var MenuTrigger = ({
   disabled,
   open,
@@ -2569,7 +2582,7 @@ var MenuTrigger = ({
     onClose: state.close,
     autoFocus: state.focusStrategy
   };
-  const isSmallScreen = (0, import_system42.useSmallScreen)();
+  const isSmallScreen = (0, import_system43.useSmallScreen)();
   return /* @__PURE__ */ import_react62.default.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ import_react62.default.createElement(
     import_interactions7.PressResponder,
     {
@@ -2586,7 +2599,7 @@ var import_react63 = __toESM(require("react"));
 var import_focus11 = require("@react-aria/focus");
 var import_menu3 = require("@react-aria/menu");
 var import_utils19 = require("@react-aria/utils");
-var import_system43 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 var MenuItem = ({
   item,
   state,
@@ -2605,7 +2618,7 @@ var MenuItem = ({
     ref
   );
   const { isFocusVisible, focusProps } = (0, import_focus11.useFocusRing)();
-  const stateProps = (0, import_system43.useStateProps)({
+  const stateProps = (0, import_system44.useStateProps)({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
@@ -2628,13 +2641,13 @@ var MenuItem = ({
 // src/Menu/MenuSection.tsx
 var import_react64 = __toESM(require("react"));
 var import_menu4 = require("@react-aria/menu");
-var import_system44 = require("@marigold/system");
+var import_system45 = require("@marigold/system");
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = (0, import_menu4.useMenuSection)({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
-  const className = (0, import_system44.useClassNames)({ component: "Menu" });
+  const className = (0, import_system45.useClassNames)({ component: "Menu" });
   return /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ import_react64.default.createElement("li", null, /* @__PURE__ */ import_react64.default.createElement(Divider, { variant: "section" })), /* @__PURE__ */ import_react64.default.createElement("ul", { ...itemProps }, item.rendered && /* @__PURE__ */ import_react64.default.createElement("span", { ...headingProps, className: className.section }, item.rendered), /* @__PURE__ */ import_react64.default.createElement("li", { ...groupProps, className: "pb-1" }, [...item.props.children].map((node) => /* @__PURE__ */ import_react64.default.createElement(
     MenuItem,
     {
@@ -2656,7 +2669,7 @@ var Menu = ({ variant, size, ...props }) => {
   const state = (0, import_tree2.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu5.useMenu)(ownProps, state, ref);
   (0, import_utils20.useSyncRef)({ ref: scrollRef }, ref);
-  const classNames2 = (0, import_system45.useClassNames)({ component: "Menu", variant, size });
+  const classNames2 = (0, import_system46.useClassNames)({ component: "Menu", variant, size });
   return /* @__PURE__ */ import_react65.default.createElement("ul", { ref, className: classNames2.container, ...menuProps }, [...state.collection].map((item) => {
     if (item.type === "section") {
       return /* @__PURE__ */ import_react65.default.createElement(
@@ -2687,14 +2700,14 @@ Menu.Section = import_collections5.Section;
 
 // src/Menu/ActionMenu.tsx
 var import_react66 = __toESM(require("react"));
-var import_system46 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ import_react66.default.createElement(Menu.Trigger, null, /* @__PURE__ */ import_react66.default.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ import_react66.default.createElement(import_system46.SVG, { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react66.default.createElement("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }))), /* @__PURE__ */ import_react66.default.createElement(Menu, { ...props }));
+  return /* @__PURE__ */ import_react66.default.createElement(Menu.Trigger, null, /* @__PURE__ */ import_react66.default.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ import_react66.default.createElement(import_system47.SVG, { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react66.default.createElement("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }))), /* @__PURE__ */ import_react66.default.createElement(Menu, { ...props }));
 };
 
 // src/Message/Message.tsx
 var import_react67 = __toESM(require("react"));
-var import_system47 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 var icons = {
   info: () => /* @__PURE__ */ import_react67.default.createElement(
     "svg",
@@ -2752,26 +2765,26 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = (0, import_system47.useClassNames)({ component: "Message", variant, size });
+  const classNames2 = (0, import_system48.useClassNames)({ component: "Message", variant, size });
   const Icon3 = icons[variant];
   return /* @__PURE__ */ import_react67.default.createElement(
     "div",
     {
-      className: (0, import_system47.cn)(
+      className: (0, import_system48.cn)(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props
     },
-    /* @__PURE__ */ import_react67.default.createElement("div", { className: (0, import_system47.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ import_react67.default.createElement(Icon3, null)),
+    /* @__PURE__ */ import_react67.default.createElement("div", { className: (0, import_system48.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ import_react67.default.createElement(Icon3, null)),
     /* @__PURE__ */ import_react67.default.createElement(
       "div",
       {
-        className: (0, import_system47.cn)("col-start-2 row-start-1 self-center", classNames2.title)
+        className: (0, import_system48.cn)("col-start-2 row-start-1 self-center", classNames2.title)
       },
       messageTitle
     ),
-    /* @__PURE__ */ import_react67.default.createElement("div", { className: (0, import_system47.cn)("col-start-2", classNames2.content) }, children)
+    /* @__PURE__ */ import_react67.default.createElement("div", { className: (0, import_system48.cn)("col-start-2", classNames2.content) }, children)
   );
 };
 
@@ -2783,14 +2796,14 @@ var import_i18n10 = require("@react-aria/i18n");
 var import_numberfield = require("@react-aria/numberfield");
 var import_utils22 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
-var import_system49 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
 var import_react68 = __toESM(require("react"));
 var import_button7 = require("@react-aria/button");
 var import_interactions8 = require("@react-aria/interactions");
 var import_utils21 = require("@react-aria/utils");
-var import_system48 = require("@marigold/system");
+var import_system49 = require("@marigold/system");
 var Plus = () => /* @__PURE__ */ import_react68.default.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react68.default.createElement(
   "path",
   {
@@ -2818,7 +2831,7 @@ var StepButton = ({
     ref
   );
   const { hoverProps, isHovered } = (0, import_interactions8.useHover)(props);
-  const stateProps = (0, import_system48.useStateProps)({
+  const stateProps = (0, import_system49.useStateProps)({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
@@ -2827,7 +2840,7 @@ var StepButton = ({
   return /* @__PURE__ */ import_react68.default.createElement(
     "div",
     {
-      className: (0, import_system48.cn)(
+      className: (0, import_system49.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2880,7 +2893,7 @@ var NumberField = (0, import_react69.forwardRef)(
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const stateProps = (0, import_system49.useStateProps)({
+    const stateProps = (0, import_system50.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -2888,7 +2901,7 @@ var NumberField = (0, import_react69.forwardRef)(
       readOnly,
       required
     });
-    const classNames2 = (0, import_system49.useClassNames)({
+    const classNames2 = (0, import_system50.useClassNames)({
       component: "NumberField",
       size,
       variant
@@ -2912,7 +2925,7 @@ var NumberField = (0, import_react69.forwardRef)(
         "div",
         {
           "data-group": true,
-          className: (0, import_system49.cn)("flex items-stretch", classNames2.group),
+          className: (0, import_system50.cn)("flex items-stretch", classNames2.group),
           "data-testid": "number-field-container",
           ...(0, import_utils22.mergeProps)(groupProps, focusProps, hoverProps),
           ...stateProps
@@ -2952,19 +2965,19 @@ var NumberField = (0, import_react69.forwardRef)(
 );
 
 // src/Provider/index.ts
-var import_system51 = require("@marigold/system");
+var import_system52 = require("@marigold/system");
 
 // src/Provider/MarigoldProvider.tsx
 var import_react70 = __toESM(require("react"));
 var import_overlays7 = require("@react-aria/overlays");
-var import_system50 = require("@marigold/system");
+var import_system51 = require("@marigold/system");
 function MarigoldProvider({
   children,
   theme
 }) {
-  const outerTheme = (0, import_system50.useTheme)();
-  const isTopLevel = outerTheme === import_system50.defaultTheme;
-  return /* @__PURE__ */ import_react70.default.createElement(import_system50.ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ import_react70.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
+  const outerTheme = (0, import_system51.useTheme)();
+  const isTopLevel = outerTheme === import_system51.defaultTheme;
+  return /* @__PURE__ */ import_react70.default.createElement(import_system51.ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ import_react70.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
@@ -2973,7 +2986,7 @@ var import_interactions10 = require("@react-aria/interactions");
 var import_focus13 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
 var import_utils23 = require("@react-aria/utils");
-var import_system53 = require("@marigold/system");
+var import_system54 = require("@marigold/system");
 
 // src/Radio/Context.ts
 var import_react71 = require("react");
@@ -2986,7 +2999,7 @@ var useRadioGroupContext = () => (0, import_react71.useContext)(RadioGroupContex
 var import_react72 = __toESM(require("react"));
 var import_radio = require("@react-aria/radio");
 var import_radio2 = require("@react-stately/radio");
-var import_system52 = require("@marigold/system");
+var import_system53 = require("@marigold/system");
 var RadioGroup = ({
   children,
   orientation = "vertical",
@@ -3006,7 +3019,7 @@ var RadioGroup = ({
   };
   const state = (0, import_radio2.useRadioGroupState)(props);
   const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = (0, import_radio.useRadioGroup)(props, state);
-  const stateProps = (0, import_system52.useStateProps)({
+  const stateProps = (0, import_system53.useStateProps)({
     disabled,
     readOnly,
     error,
@@ -3032,7 +3045,7 @@ var RadioGroup = ({
       {
         role: "presentation",
         "data-orientation": orientation,
-        className: (0, import_system52.cn)(
+        className: (0, import_system53.cn)(
           "flex items-start",
           orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
         )
@@ -3047,7 +3060,7 @@ var Dot = () => /* @__PURE__ */ import_react73.default.createElement("svg", { vi
 var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ import_react73.default.createElement(
   "div",
   {
-    className: (0, import_system53.cn)(
+    className: (0, import_system54.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -3071,14 +3084,14 @@ var Radio = (0, import_react73.forwardRef)(
       state,
       inputRef
     );
-    const classNames2 = (0, import_system53.useClassNames)({
+    const classNames2 = (0, import_system54.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
     const { hoverProps, isHovered } = (0, import_interactions10.useHover)({ isDisabled: disabled });
     const { isFocusVisible, focusProps } = (0, import_focus13.useFocusRing)();
-    const stateProps = (0, import_system53.useStateProps)({
+    const stateProps = (0, import_system54.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -3089,7 +3102,7 @@ var Radio = (0, import_react73.forwardRef)(
     return /* @__PURE__ */ import_react73.default.createElement(
       "label",
       {
-        className: (0, import_system53.cn)(
+        className: (0, import_system54.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3101,7 +3114,7 @@ var Radio = (0, import_react73.forwardRef)(
         "input",
         {
           ref: inputRef,
-          className: (0, import_system53.cn)(
+          className: (0, import_system54.cn)(
             "absolute left-0 top-0 z-[1] h-full w-full opacity-[0.0001]",
             inputProps.disabled ? "cursor-not-allowed" : "cursor-pointer"
           ),
@@ -3121,13 +3134,13 @@ var import_slider2 = require("@react-aria/slider");
 var import_slider3 = require("@react-stately/slider");
 var import_i18n11 = require("@react-aria/i18n");
 var import_utils25 = require("@react-aria/utils");
-var import_system55 = require("@marigold/system");
+var import_system56 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
 var import_react74 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
 var import_utils24 = require("@react-aria/utils");
-var import_system54 = require("@marigold/system");
+var import_system55 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
@@ -3139,7 +3152,7 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
   const inputRef = import_react74.default.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = (0, import_focus14.useFocusRing)();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = (0, import_system54.useStateProps)({
+  const stateProps = (0, import_system55.useStateProps)({
     focus: focused,
     disabled
   });
@@ -3155,7 +3168,7 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
   (0, import_react74.useEffect)(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ import_react74.default.createElement("div", { className: (0, import_system54.cn)("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ import_react74.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react74.default.createElement(
+  return /* @__PURE__ */ import_react74.default.createElement("div", { className: (0, import_system55.cn)("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ import_react74.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react74.default.createElement(
     "input",
     {
       type: "range",
@@ -3180,25 +3193,25 @@ var Slider = (0, import_react75.forwardRef)(
       state,
       trackRef
     );
-    const classNames2 = (0, import_system55.useClassNames)({
+    const classNames2 = (0, import_system56.useClassNames)({
       component: "Slider",
       variant,
       size
     });
-    const sliderState = (0, import_system55.useStateProps)({
+    const sliderState = (0, import_system56.useStateProps)({
       disabled: props.disabled
     });
     return /* @__PURE__ */ import_react75.default.createElement(
       "div",
       {
         className: "flex w-[var(--slideWidth)] touch-none flex-col",
-        style: (0, import_system55.createVar)({ slideWidth: width }),
+        style: (0, import_system56.createVar)({ slideWidth: width }),
         ...groupProps
       },
       /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex self-stretch" }, props.children && /* @__PURE__ */ import_react75.default.createElement("label", { className: classNames2.label, ...labelProps }, props.children), /* @__PURE__ */ import_react75.default.createElement(
         "output",
         {
-          className: (0, import_system55.cn)(
+          className: (0, import_system56.cn)(
             "flex flex-shrink-0 flex-grow basis-auto",
             classNames2.output
           ),
@@ -3217,7 +3230,7 @@ var Slider = (0, import_react75.forwardRef)(
         /* @__PURE__ */ import_react75.default.createElement(
           "div",
           {
-            className: (0, import_system55.cn)(
+            className: (0, import_system56.cn)(
               "absolute top-2/4 h-2 w-full -translate-y-1/2",
               classNames2.track
             )
@@ -3243,7 +3256,7 @@ var Split = (props) => /* @__PURE__ */ import_react76.default.createElement("div
 
 // src/Stack/Stack.tsx
 var import_react77 = __toESM(require("react"));
-var import_system56 = require("@marigold/system");
+var import_system57 = require("@marigold/system");
 var Stack = ({
   children,
   space = 0,
@@ -3257,11 +3270,11 @@ var Stack = ({
   return /* @__PURE__ */ import_react77.default.createElement(
     "div",
     {
-      className: (0, import_system56.cn)(
+      className: (0, import_system57.cn)(
         "flex flex-col",
-        import_system56.gapSpace[space],
-        alignX && ((_b = (_a = import_system56.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system56.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system57.gapSpace[space],
+        alignX && ((_b = (_a = import_system57.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system57.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props
@@ -3276,7 +3289,7 @@ var import_focus15 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
 var import_utils26 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system57 = require("@marigold/system");
+var import_system58 = require("@marigold/system");
 var Switch = (0, import_react78.forwardRef)(
   ({
     variant,
@@ -3299,22 +3312,22 @@ var Switch = (0, import_react78.forwardRef)(
     const state = (0, import_toggle2.useToggleState)(props);
     const { inputProps } = (0, import_switch.useSwitch)(props, state, inputRef);
     const { isFocusVisible, focusProps } = (0, import_focus15.useFocusRing)();
-    const stateProps = (0, import_system57.useStateProps)({
+    const stateProps = (0, import_system58.useStateProps)({
       selected: state.isSelected,
       disabled,
       readOnly,
       focus: isFocusVisible
     });
-    const classNames2 = (0, import_system57.useClassNames)({ component: "Switch", size, variant });
+    const classNames2 = (0, import_system58.useClassNames)({ component: "Switch", size, variant });
     return /* @__PURE__ */ import_react78.default.createElement(
       "label",
       {
-        className: (0, import_system57.cn)(
+        className: (0, import_system58.cn)(
           "group/switch",
           "w-[var(--switchWidth)]",
           "relative flex items-center justify-between gap-[1ch]"
         ),
-        style: (0, import_system57.createVar)({ switchWidth: width }),
+        style: (0, import_system58.createVar)({ switchWidth: width }),
         ...stateProps
       },
       /* @__PURE__ */ import_react78.default.createElement(
@@ -3330,7 +3343,7 @@ var Switch = (0, import_react78.forwardRef)(
       /* @__PURE__ */ import_react78.default.createElement(
         "div",
         {
-          className: (0, import_system57.cn)(
+          className: (0, import_system58.cn)(
             "relative h-6 flex-shrink-0 flex-grow-0 basis-12 rounded-3xl",
             classNames2.track
           )
@@ -3338,7 +3351,7 @@ var Switch = (0, import_react78.forwardRef)(
         /* @__PURE__ */ import_react78.default.createElement(
           "div",
           {
-            className: (0, import_system57.cn)(
+            className: (0, import_system58.cn)(
               "h-[22px] w-[22px]",
               "cubic-bezier(.7,0,.3,1)",
               "absolute left-0 top-px",
@@ -3357,7 +3370,7 @@ var Switch = (0, import_react78.forwardRef)(
 var import_react88 = __toESM(require("react"));
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system63 = require("@marigold/system");
+var import_system65 = require("@marigold/system");
 
 // src/Table/Context.tsx
 var import_react79 = require("react");
@@ -3377,7 +3390,7 @@ var import_react81 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
 var import_focus16 = require("@react-aria/focus");
 var import_utils27 = require("@react-aria/utils");
-var import_system58 = require("@marigold/system");
+var import_system59 = require("@marigold/system");
 var TableCell = ({ cell }) => {
   const ref = (0, import_react81.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -3399,7 +3412,7 @@ var TableCell = ({ cell }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-  const stateProps = (0, import_system58.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system59.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ import_react81.default.createElement(
     "td",
     {
@@ -3417,7 +3430,7 @@ var import_react82 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var import_focus17 = require("@react-aria/focus");
 var import_utils28 = require("@react-aria/utils");
-var import_system59 = require("@marigold/system");
+var import_system60 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3455,12 +3468,12 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)();
-  const stateProps = (0, import_system59.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system60.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ import_react82.default.createElement(
     "td",
     {
       ref,
-      className: (0, import_system59.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system60.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils28.mergeProps)(gridCellProps, focusProps),
       ...stateProps
     },
@@ -3474,7 +3487,8 @@ var import_focus18 = require("@react-aria/focus");
 var import_interactions11 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils30 = require("@react-aria/utils");
-var import_system60 = require("@marigold/system");
+var import_system61 = require("@marigold/system");
+var import_system62 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
   visible
@@ -3484,7 +3498,7 @@ var SortIndicator = ({
     {
       role: "presentation",
       "aria-hidden": "true",
-      className: (0, import_system60.cn)(
+      className: (0, import_system61.cn)(
         "ps-[0.5ch] text-current",
         visible ? "visible" : "invisible"
       )
@@ -3492,7 +3506,10 @@ var SortIndicator = ({
     direction === "ascending" ? "\u25B2" : "\u25BC"
   );
 };
-var TableColumnHeader = ({ column }) => {
+var TableColumnHeader = ({
+  column,
+  width = "auto"
+}) => {
   var _a, _b;
   const ref = (0, import_react83.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3505,7 +3522,7 @@ var TableColumnHeader = ({ column }) => {
   );
   const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus18.useFocusRing)();
-  const stateProps = (0, import_system60.useStateProps)({
+  const stateProps = (0, import_system61.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3514,7 +3531,7 @@ var TableColumnHeader = ({ column }) => {
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system60.cn)("cursor-default", classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system61.cn)("cursor-default", import_system62.width[width], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils30.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
@@ -3553,12 +3570,12 @@ var import_focus19 = require("@react-aria/focus");
 var import_interactions12 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils31 = require("@react-aria/utils");
-var import_system61 = require("@marigold/system");
+var import_system63 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react86.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system61.useClassNames)({
+  const classNames2 = (0, import_system63.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3576,7 +3593,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions12.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system61.useStateProps)({
+  const stateProps = (0, import_system63.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
@@ -3587,7 +3604,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: (0, import_system61.cn)(
+      className: (0, import_system63.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3606,8 +3623,11 @@ var import_focus20 = require("@react-aria/focus");
 var import_interactions13 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils32 = require("@react-aria/utils");
-var import_system62 = require("@marigold/system");
-var TableSelectAllCell = ({ column }) => {
+var import_system64 = require("@marigold/system");
+var TableSelectAllCell = ({
+  column,
+  width = "auto"
+}) => {
   const ref = (0, import_react87.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
@@ -3620,7 +3640,7 @@ var TableSelectAllCell = ({ column }) => {
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions13.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus20.useFocusRing)();
-  const stateProps = (0, import_system62.useStateProps)({
+  const stateProps = (0, import_system64.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3628,7 +3648,8 @@ var TableSelectAllCell = ({ column }) => {
     "th",
     {
       ref,
-      className: (0, import_system62.cn)(
+      className: (0, import_system64.cn)(
+        import_system64.width[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
@@ -3656,7 +3677,7 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system63.useClassNames)({
+  const classNames2 = (0, import_system65.useClassNames)({
     component: "Table",
     variant,
     size
@@ -3671,7 +3692,7 @@ var Table = ({
       "table",
       {
         ref: tableRef,
-        className: (0, import_system63.cn)(
+        className: (0, import_system65.cn)(
           "border-collapse overflow-auto whitespace-nowrap",
           stretch ? "table w-full" : "block",
           classNames2.table
@@ -3680,8 +3701,22 @@ var Table = ({
       },
       /* @__PURE__ */ import_react88.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react88.default.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...collection.getChildren(headerRow.key)].map(
         (column) => {
-          var _a;
-          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react88.default.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ import_react88.default.createElement(TableColumnHeader, { key: column.key, column });
+          var _a, _b, _c;
+          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react88.default.createElement(
+            TableSelectAllCell,
+            {
+              width: (_b = column.props) == null ? void 0 : _b.width,
+              key: column.key,
+              column
+            }
+          ) : /* @__PURE__ */ import_react88.default.createElement(
+            TableColumnHeader,
+            {
+              width: (_c = column.props) == null ? void 0 : _c.width,
+              key: column.key,
+              column
+            }
+          );
         }
       )))),
       /* @__PURE__ */ import_react88.default.createElement(TableBody, null, ...collection.rows.map(
@@ -3703,7 +3738,7 @@ Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
 var import_react89 = __toESM(require("react"));
-var import_system64 = require("@marigold/system");
+var import_system66 = require("@marigold/system");
 var Text = ({
   variant,
   size,
@@ -3716,8 +3751,8 @@ var Text = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system64.useTheme)();
-  const classNames2 = (0, import_system64.useClassNames)({
+  const theme = (0, import_system66.useTheme)();
+  const classNames2 = (0, import_system66.useClassNames)({
     component: "Text",
     variant,
     size
@@ -3726,17 +3761,17 @@ var Text = ({
     "p",
     {
       ...props,
-      className: (0, import_system64.cn)(
+      className: (0, import_system66.cn)(
         classNames2,
         "text-[--color] outline-[--outline]",
-        fontStyle && import_system64.textStyle[fontStyle],
-        align && import_system64.textAlign[align],
-        cursor && import_system64.cursorStyle[cursor],
-        weight && import_system64.fontWeight[weight],
-        fontSize && import_system64.textSize[fontSize]
+        fontStyle && import_system66.textStyle[fontStyle],
+        align && import_system66.textAlign[align],
+        cursor && import_system66.cursorStyle[cursor],
+        weight && import_system66.fontWeight[weight],
+        fontSize && import_system66.textSize[fontSize]
       ),
-      style: (0, import_system64.createVar)({
-        color: color && theme.colors && (0, import_system64.get)(
+      style: (0, import_system66.createVar)({
+        color: color && theme.colors && (0, import_system66.get)(
           theme.colors,
           color.replace("-", "."),
           color
@@ -3754,7 +3789,7 @@ var import_interactions14 = require("@react-aria/interactions");
 var import_focus21 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
 var import_utils34 = require("@react-aria/utils");
-var import_system65 = require("@marigold/system");
+var import_system67 = require("@marigold/system");
 var TextArea = (0, import_react90.forwardRef)(
   ({
     variant,
@@ -3782,7 +3817,7 @@ var TextArea = (0, import_react90.forwardRef)(
     );
     const { hoverProps, isHovered } = (0, import_interactions14.useHover)({});
     const { focusProps, isFocusVisible } = (0, import_focus21.useFocusRing)();
-    const stateProps = (0, import_system65.useStateProps)({
+    const stateProps = (0, import_system67.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
@@ -3790,7 +3825,7 @@ var TextArea = (0, import_react90.forwardRef)(
       required,
       error
     });
-    const classNames2 = (0, import_system65.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system67.useClassNames)({ component: "TextArea", variant, size });
     return /* @__PURE__ */ import_react90.default.createElement(
       FieldBase,
       {
@@ -3827,7 +3862,7 @@ var import_interactions15 = require("@react-aria/interactions");
 var import_focus22 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
 var import_utils35 = require("@react-aria/utils");
-var import_system66 = require("@marigold/system");
+var import_system68 = require("@marigold/system");
 var TextField = (0, import_react91.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
@@ -3847,7 +3882,7 @@ var TextField = (0, import_react91.forwardRef)(
       isTextInput: true,
       autoFocus
     });
-    const stateProps = (0, import_system66.useStateProps)({
+    const stateProps = (0, import_system68.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -3885,7 +3920,7 @@ var TextField = (0, import_react91.forwardRef)(
 
 // src/Tiles/Tiles.tsx
 var import_react92 = __toESM(require("react"));
-var import_system67 = require("@marigold/system");
+var import_system69 = require("@marigold/system");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3902,13 +3937,13 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: (0, import_system67.cn)(
+      className: (0, import_system69.cn)(
         "grid",
-        import_system67.gapSpace[space],
+        import_system69.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system67.createVar)({ column, tilesWidth })
+      style: (0, import_system69.createVar)({ column, tilesWidth })
     },
     children
   );
@@ -3917,7 +3952,7 @@ var Tiles = ({
 // src/Tooltip/Tooltip.tsx
 var import_react95 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system68 = require("@marigold/system");
+var import_system70 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
 var import_react93 = require("react");
@@ -3986,14 +4021,14 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const classNames2 = (0, import_system68.useClassNames)({ component: "Tooltip", variant, size });
+  const classNames2 = (0, import_system70.useClassNames)({ component: "Tooltip", variant, size });
   return /* @__PURE__ */ import_react95.default.createElement(
     "div",
     {
       ...tooltipProps,
       ...rest,
       ref: overlayRef,
-      className: (0, import_system68.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system70.cn)("group/tooltip", classNames2.container),
       "data-placement": placement
     },
     /* @__PURE__ */ import_react95.default.createElement("div", null, children),
@@ -4001,7 +4036,7 @@ var Tooltip = ({ children, variant, size }) => {
       "div",
       {
         ...arrowProps,
-        className: (0, import_system68.cn)("absolute h-0 w-0", classNames2.arrow)
+        className: (0, import_system70.cn)("absolute h-0 w-0", classNames2.arrow)
       }
     )
   );
@@ -4015,13 +4050,13 @@ var import_collections6 = require("@react-stately/collections");
 var import_react97 = __toESM(require("react"));
 var import_tag2 = require("@react-aria/tag");
 var import_list = require("@react-stately/list");
-var import_system70 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 
 // src/TagGroup/Tag.tsx
 var import_react96 = __toESM(require("react"));
 var import_tag = require("@react-aria/tag");
 var import_focus24 = require("@react-aria/focus");
-var import_system69 = require("@marigold/system");
+var import_system71 = require("@marigold/system");
 var import_utils36 = require("@react-aria/utils");
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
@@ -4038,7 +4073,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = (0, import_system69.useClassNames)({ component: "Tag", variant, size });
+  const classNames2 = (0, import_system71.useClassNames)({ component: "Tag", variant, size });
   return /* @__PURE__ */ import_react96.default.createElement(
     "span",
     {
@@ -4050,7 +4085,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
       Button,
       {
         ...removeButtonProps,
-        className: (0, import_system69.cn)("flex items-center", classNames2.closeButton),
+        className: (0, import_system71.cn)("flex items-center", classNames2.closeButton),
         role: "button"
       },
       /* @__PURE__ */ import_react96.default.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ import_react96.default.createElement("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" }))
@@ -4074,7 +4109,7 @@ var TagGroup = ({
   const inputRef = (0, import_react97.useRef)(null);
   const state = (0, import_list.useListState)(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = (0, import_tag2.useTagGroup)(props, state, inputRef);
-  const stateProps = (0, import_system70.useStateProps)({
+  const stateProps = (0, import_system72.useStateProps)({
     error,
     required
   });
@@ -4120,10 +4155,10 @@ var Tag2 = import_collections6.Item;
 Tag2.Group = TagGroup;
 
 // src/XLoader/XLoader.tsx
-var import_system71 = require("@marigold/system");
+var import_system73 = require("@marigold/system");
 var import_react98 = __toESM(require("react"));
 var XLoader = (0, import_react98.forwardRef)((props, ref) => /* @__PURE__ */ import_react98.default.createElement(
-  import_system71.SVG,
+  import_system73.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4335,18 +4370,11 @@ var XLoader = (0, import_react98.forwardRef)((props, ref) => /* @__PURE__ */ imp
 
 // src/Tabs/Tabs.tsx
 var import_react104 = __toESM(require("react"));
+var import_react105 = require("react");
 var import_tabs3 = require("@react-aria/tabs");
-var import_system73 = require("@marigold/system");
+var import_collections7 = require("@react-stately/collections");
 var import_tabs4 = require("@react-stately/tabs");
-var import_react105 = require("react");
-
-// src/Tabs/Tab.tsx
-var import_react100 = __toESM(require("react"));
-var import_react101 = require("react");
-var import_system72 = require("@marigold/system");
-var import_tabs = require("@react-aria/tabs");
-var import_interactions16 = require("@react-aria/interactions");
-var import_utils37 = require("@react-aria/utils");
+var import_system76 = require("@marigold/system");
 
 // src/Tabs/Context.ts
 var import_react99 = require("react");
@@ -4354,6 +4382,12 @@ var TabContext = (0, import_react99.createContext)({});
 var useTabContext = () => (0, import_react99.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
+var import_react100 = __toESM(require("react"));
+var import_react101 = require("react");
+var import_system74 = require("@marigold/system");
+var import_tabs = require("@react-aria/tabs");
+var import_interactions16 = require("@react-aria/interactions");
+var import_utils37 = require("@react-aria/utils");
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
   const ref = (0, import_react101.useRef)(null);
@@ -4363,12 +4397,12 @@ var Tab = ({ item, state }) => {
     isDisabled: disabled || isSelected
   });
   const { focusProps } = (0, import_interactions16.useFocus)({});
-  const stateProps = (0, import_system72.useStateProps)({ active: isSelected, hover: isHovered });
+  const stateProps = (0, import_system74.useStateProps)({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ import_react100.default.createElement(
     "div",
     {
-      className: (0, import_system72.cn)(
+      className: (0, import_system74.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4383,15 +4417,17 @@ var Tab = ({ item, state }) => {
 var import_react102 = __toESM(require("react"));
 var import_react103 = require("react");
 var import_tabs2 = require("@react-aria/tabs");
+var import_system75 = require("@marigold/system");
 var TabPanel = ({ state, ...props }) => {
   var _a;
   const ref = (0, import_react103.useRef)(null);
   const { tabPanelProps } = (0, import_tabs2.useTabPanel)(props, state, ref);
-  return /* @__PURE__ */ import_react102.default.createElement("div", { ...tabPanelProps, ref }, (_a = state.selectedItem) == null ? void 0 : _a.props.children);
+  const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
+  const { classNames: classNames2 } = useTabContext();
+  return /* @__PURE__ */ import_react102.default.createElement("div", { className: (0, import_system75.cn)(classNames2.tabpanel), ref, ...tabPanelProps }, selectedItemProps == null ? void 0 : selectedItemProps.children);
 };
 
 // src/Tabs/Tabs.tsx
-var import_collections7 = require("@react-stately/collections");
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4407,22 +4443,22 @@ var Tabs = ({
   };
   const state = (0, import_tabs4.useTabListState)(props);
   const { tabListProps } = (0, import_tabs3.useTabList)(props, state, ref);
-  const classNames2 = (0, import_system73.useClassNames)({
+  const classNames2 = (0, import_system76.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ import_react104.default.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ import_react104.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ import_react104.default.createElement("div", { className: (0, import_system76.cn)(classNames2.container) }, /* @__PURE__ */ import_react104.default.createElement(
     "div",
     {
-      className: (0, import_system73.cn)("flex", import_system73.gapSpace[space], classNames2.tabs),
+      className: (0, import_system76.cn)("flex", import_system76.gapSpace[space], classNames2.tabs),
       ...tabListProps,
       ref
     },
     [...state.collection].map((item) => {
       return /* @__PURE__ */ import_react104.default.createElement(Tab, { key: item.key, item, state });
     })
-  ), /* @__PURE__ */ import_react104.default.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state }));
+  ), /* @__PURE__ */ import_react104.default.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state })));
 };
 Tabs.Item = import_collections7.Item;
 // Annotate the CommonJS export names for ESM import in node: