@marigold/components 11.0.2 → 11.1.1

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { useAsyncList, useListData } from "@react-stately/data";
 
 // src/Accordion/Accordion.tsx
 import { DisclosureGroup } from "react-aria-components";
-import { useClassNames as useClassNames2 } from "@marigold/system";
+import { useClassNames } from "@marigold/system";
 
 // src/Accordion/AccordionContext.tsx
 import { createContext, useContext } from "react";
@@ -19,126 +19,30 @@ var useAccordionContext = () => {
   return ctx;
 };
 
-// src/Accordion/AccordionHeading.tsx
-import { Heading } from "react-aria-components";
-import { cn as cn2 } from "@marigold/system";
+// src/Accordion/AccordionHeader.tsx
+import { useContext as useContext2 } from "react";
+import { Button, DisclosureStateContext, Heading } from "react-aria-components";
+import { cn } from "@marigold/system";
 
-// src/Button/Button.tsx
+// src/icons/ChevronDown.tsx
 import { forwardRef } from "react";
-import { Button } from "react-aria-components";
-import { cn, useClassNames } from "@marigold/system";
-
-// src/ProgressCycle/ProgressCycle.tsx
-import { ProgressBar } from "react-aria-components";
 import { SVG } from "@marigold/system";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ProgressCycle = ({
-  size = "16",
-  ...props
-}) => {
-  let strokeWidth = 3;
-  if (size <= "24") {
-    strokeWidth = 2;
-  } else if (size >= "32") {
-    strokeWidth = 4;
-  }
-  const radius = `calc(50% - ${strokeWidth / 2}px)`;
-  return /* @__PURE__ */ jsx(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs(
-    SVG,
-    {
-      className: "animate-rotate-spinner origin-center fill-none",
-      size,
-      "aria-hidden": "true",
-      role: "img",
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50%",
-            cy: "50%",
-            r: radius,
-            strokeWidth,
-            className: "stroke-transparent"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50%",
-            cy: "50%",
-            r: radius,
-            strokeWidth,
-            pathLength: "100",
-            strokeDasharray: "100 200",
-            strokeDashoffset: "0",
-            strokeLinecap: "round",
-            className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
-          }
-        )
-      ]
-    }
-  ) });
-};
-
-// src/Button/Button.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var _Button = forwardRef(
-  ({
-    children,
-    variant,
-    size,
-    className,
-    disabled,
-    loading,
-    fullWidth,
-    ...props
-  }, ref) => {
-    const classNames2 = useClassNames({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    return /* @__PURE__ */ jsx2(
-      Button,
-      {
-        ...props,
-        ref,
-        className: cn(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0,
-          loading && "cursor-progress!"
-        ),
-        isPending: loading,
-        isDisabled: disabled,
-        children: loading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { className: "absolute", children: /* @__PURE__ */ jsx2(ProgressCycle, {}) }),
-          /* @__PURE__ */ jsx2("span", { className: "invisible flex gap-[inherit]", children })
-        ] }) : children
-      }
-    );
-  }
-);
-
-// src/icons/ChevronRight.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { SVG as SVG2 } from "@marigold/system";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ChevronRight = forwardRef2(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SVG2, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx3("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
+import { jsx } from "react/jsx-runtime";
+var ChevronDown = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
 );
 
-// src/Accordion/AccordionHeading.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+// src/Accordion/AccordionHeader.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var AccordionHeader = ({ children }) => {
   const { classNames: classNames2 } = useAccordionContext();
-  return /* @__PURE__ */ jsx4(Heading, { children: /* @__PURE__ */ jsxs3(_Button, { slot: "trigger", className: cn2("group", classNames2.header), children: [
+  const { isExpanded } = useContext2(DisclosureStateContext);
+  return /* @__PURE__ */ jsx2(Heading, { children: /* @__PURE__ */ jsxs(Button, { slot: "trigger", className: classNames2.header, children: [
     children,
-    /* @__PURE__ */ jsx4(
-      ChevronRight,
+    /* @__PURE__ */ jsx2(
+      ChevronDown,
       {
-        className: cn2(classNames2.icon, "group-aria-expanded:rotate-90")
+        className: cn(classNames2.icon, isExpanded && "rotate-180")
       }
     )
   ] }) });
@@ -146,7 +50,7 @@ var AccordionHeader = ({ children }) => {
 
 // src/Accordion/AccordionItem.tsx
 import { Disclosure } from "react-aria-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var AccordionItem = ({
   children,
   disabled,
@@ -154,7 +58,7 @@ var AccordionItem = ({
   ...props
 }) => {
   const { classNames: classNames2 } = useAccordionContext();
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx3(
     Disclosure,
     {
       isDisabled: disabled,
@@ -168,14 +72,14 @@ var AccordionItem = ({
 
 // src/Accordion/AccordionPanel.tsx
 import { DisclosurePanel } from "react-aria-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var AccordionPanel = ({ children }) => {
   const { classNames: classNames2 } = useAccordionContext();
-  return /* @__PURE__ */ jsx6(DisclosurePanel, { className: classNames2.content, children });
+  return /* @__PURE__ */ jsx4(DisclosurePanel, { className: classNames2.content, children });
 };
 
 // src/Accordion/Accordion.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Accordion = ({
   children,
   disabled,
@@ -183,8 +87,8 @@ var Accordion = ({
   size,
   ...props
 }) => {
-  const classNames2 = useClassNames2({ component: "Accordion", variant, size });
-  return /* @__PURE__ */ jsx7(AccordionProvider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx7(
+  const classNames2 = useClassNames({ component: "Accordion", variant, size });
+  return /* @__PURE__ */ jsx5(AccordionProvider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx5(
     DisclosureGroup,
     {
       ...props,
@@ -200,8 +104,8 @@ Accordion.Item = AccordionItem;
 
 // src/Aside/Aside.tsx
 import { Children } from "react";
-import { cn as cn3, createVar, gapSpace } from "@marigold/system";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { cn as cn2, createVar, gapSpace } from "@marigold/system";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var classNames = {
   aside: "grow basis-(--sideWidth)",
   content: "basis-0 grow-999 [min-inline-size:var(--wrap)]"
@@ -218,8 +122,8 @@ var Aside = ({
     aside: createVar({ sideWidth }),
     content: createVar({ wrap })
   };
-  return /* @__PURE__ */ jsxs4("div", { className: cn3("flex flex-wrap", gapSpace[space]), children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs2("div", { className: cn2("flex flex-wrap", gapSpace[space]), children: [
+    /* @__PURE__ */ jsx6(
       "div",
       {
         className: classNames[side === "left" ? "aside" : "content"],
@@ -227,7 +131,7 @@ var Aside = ({
         children: left
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         className: classNames[side === "right" ? "aside" : "content"],
@@ -239,17 +143,17 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-import { aspect, cn as cn4, createVar as createVar2 } from "@marigold/system";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { aspect, cn as cn3, createVar as createVar2 } from "@marigold/system";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
 }) => {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
-      className: cn4(
+      className: cn3(
         "overflow-hidden",
         aspect[ratio],
         "max-w-[var(--maxWidth)]"
@@ -262,28 +166,28 @@ var Aspect = ({
 
 // src/Autocomplete/Autocomplete.tsx
 import React, {
-  forwardRef as forwardRef8
+  forwardRef as forwardRef7
 } from "react";
 import { ComboBox, ComboBoxStateContext } from "react-aria-components";
-import { cn as cn14, useClassNames as useClassNames10 } from "@marigold/system";
+import { cn as cn13, useClassNames as useClassNames9 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { cn as cn7, width as twWidth, useClassNames as useClassNames5 } from "@marigold/system";
+import { forwardRef as forwardRef2 } from "react";
+import { cn as cn6, width as twWidth, useClassNames as useClassNames4 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
-import { useContext as useContext2 } from "react";
+import { useContext as useContext3 } from "react";
 import { FieldError, FieldErrorContext, Text } from "react-aria-components";
-import { cn as cn5, useClassNames as useClassNames3 } from "@marigold/system";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var Icon = ({ className }) => /* @__PURE__ */ jsx10(
+import { cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var Icon = ({ className }) => /* @__PURE__ */ jsx8(
   "svg",
   {
-    className: cn5("h-4 w-4 shrink-0", className),
+    className: cn4("h-4 w-4 shrink-0", className),
     viewBox: "0 0 24 24",
     role: "presentation",
     fill: "currentColor",
-    children: /* @__PURE__ */ jsx10("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+    children: /* @__PURE__ */ jsx8("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
   }
 );
 var HelpText = ({
@@ -293,64 +197,64 @@ var HelpText = ({
   errorMessage,
   ...props
 }) => {
-  const classNames2 = useClassNames3({
+  const classNames2 = useClassNames2({
     component: "HelpText",
     variant,
     size
   });
-  const ctx = useContext2(FieldErrorContext);
+  const ctx = useContext3(FieldErrorContext);
   if (!description && ctx && !ctx.isInvalid) {
     return null;
   }
-  return /* @__PURE__ */ jsxs5("div", { className: cn5(classNames2.container), children: [
-    /* @__PURE__ */ jsx10(FieldError, { ...props, className: "flex flex-col", children: (validation) => {
+  return /* @__PURE__ */ jsxs3("div", { className: cn4(classNames2.container), children: [
+    /* @__PURE__ */ jsx8(FieldError, { ...props, className: "flex flex-col", children: (validation) => {
       const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
-      return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ jsx10(Icon, { className: classNames2.icon }),
+      return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ jsx8(Icon, { className: classNames2.icon }),
         msg
-      ] }, idx)) : /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ jsx10(Icon, { className: classNames2.icon }),
+      ] }, idx)) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ jsx8(Icon, { className: classNames2.icon }),
         messages
       ] });
     } }),
-    ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx10(Text, { slot: "description", children: description })
+    ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx8(Text, { slot: "description", children: description })
   ] });
 };
 
 // src/Label/Label.tsx
 import { Label } from "react-aria-components";
-import { SVG as SVG3, cn as cn6, createVar as createVar3, useClassNames as useClassNames4 } from "@marigold/system";
+import { SVG as SVG2, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
 
 // src/FieldBase/FieldGroup.tsx
-import { createContext as createContext2, useContext as useContext3 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext4 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var FieldGroupContext = createContext2({});
-var useFieldGroupContext = () => useContext3(FieldGroupContext);
+var useFieldGroupContext = () => useContext4(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ jsx11(FieldGroupContext.Provider, { value: { labelWidth }, children });
+  return /* @__PURE__ */ jsx9(FieldGroupContext.Provider, { value: { labelWidth }, children });
 };
 
 // src/Label/Label.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var _Label = ({ size, variant, children, ...props }) => {
-  const classNames2 = useClassNames4({ component: "Label", size, variant });
+  const classNames2 = useClassNames3({ component: "Label", size, variant });
   const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs4(
     Label,
     {
       ...props,
-      className: cn6(classNames2.container, "flex w-[var(--labelWidth)]"),
+      className: cn5(classNames2.container, "flex w-[var(--labelWidth)]"),
       style: createVar3({ labelWidth }),
       children: [
         children,
-        /* @__PURE__ */ jsx12(
-          SVG3,
+        /* @__PURE__ */ jsx10(
+          SVG2,
           {
             viewBox: "0 0 24 24",
             role: "presentation",
             size: 16,
-            className: cn6("hidden", classNames2.indicator),
-            children: /* @__PURE__ */ jsx12("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
+            className: cn5("hidden", classNames2.indicator),
+            children: /* @__PURE__ */ jsx10("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
           }
         )
       ]
@@ -359,8 +263,8 @@ var _Label = ({ size, variant, children, ...props }) => {
 };
 
 // src/FieldBase/FieldBase.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var fixedForwardRef = forwardRef3;
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var fixedForwardRef = forwardRef2;
 var _FieldBase = (props, ref) => {
   const {
     as: Component = "div",
@@ -375,16 +279,16 @@ var _FieldBase = (props, ref) => {
     stateProps,
     ...rest
   } = props;
-  const classNames2 = useClassNames5({
+  const classNames2 = useClassNames4({
     component: "Field",
     variant,
     size
   });
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs5(
     Component,
     {
       ref,
-      className: cn7(
+      className: cn6(
         "group/field",
         twWidth[width],
         classNames2,
@@ -395,9 +299,9 @@ var _FieldBase = (props, ref) => {
       "data-error": props.isInvalid ? true : void 0,
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsx13(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx13("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ jsx11(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx11("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx11(
           HelpText,
           {
             variant,
@@ -413,26 +317,26 @@ var _FieldBase = (props, ref) => {
 var FieldBase = fixedForwardRef(_FieldBase);
 
 // src/Input/SearchInput.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import { Button as Button2 } from "react-aria-components";
 import { useLocalizedStringFormatter } from "@react-aria/i18n";
-import { cn as cn9 } from "@marigold/system";
+import { cn as cn8 } from "@marigold/system";
 
 // src/Input/Input.tsx
-import { cloneElement, forwardRef as forwardRef4 } from "react";
+import { cloneElement, forwardRef as forwardRef3 } from "react";
 import { Input } from "react-aria-components";
-import { cn as cn8, useClassNames as useClassNames6 } from "@marigold/system";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var _Input = forwardRef4(
+import { cn as cn7, useClassNames as useClassNames5 } from "@marigold/system";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var _Input = forwardRef3(
   ({ type, icon, action, variant, size, className, ...props }, ref) => {
-    const classNames2 = useClassNames6({
+    const classNames2 = useClassNames5({
       component: "Input",
       variant,
       size
     });
     const inputIcon = icon ? cloneElement(icon, {
       ...icon.props,
-      className: cn8(
+      className: cn7(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
@@ -440,13 +344,13 @@ var _Input = forwardRef4(
     }) : null;
     const inputAction = action && !props.readOnly ? cloneElement(action, {
       ...action.props,
-      className: cn8(
+      className: cn7(
         "absolute right-0",
         classNames2.action,
         action.props.className
       )
     }) : null;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "group/input relative flex items-center",
@@ -454,11 +358,11 @@ var _Input = forwardRef4(
         "data-action": action && "",
         children: [
           inputIcon,
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx12(
             Input,
             {
               ...props,
-              className: cn8(
+              className: cn7(
                 "w-full flex-1",
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
@@ -478,7 +382,7 @@ var _Input = forwardRef4(
 );
 
 // src/Input/SearchInput.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var intlMessages = {
   "de-DE": {
     "Clear search": "Suche zur\xFCcksetzen"
@@ -490,7 +394,7 @@ var intlMessages = {
     "Clear search": "Effacer la recherche"
   }
 };
-var SearchIcon = (props) => /* @__PURE__ */ jsx15(
+var SearchIcon = (props) => /* @__PURE__ */ jsx13(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -499,23 +403,23 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx15(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx15("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    children: /* @__PURE__ */ jsx13("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
   }
 );
-var SearchInput = forwardRef5(
+var SearchInput = forwardRef4(
   ({ className, onClear, ...props }, ref) => {
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx13(
       _Input,
       {
         type: "search",
-        className: cn9(
+        className: cn8(
           "[&::-webkit-search-cancel-button]:hidden",
           className == null ? void 0 : className.input
         ),
         ref,
-        icon: /* @__PURE__ */ jsx15(SearchIcon, {}),
-        action: /* @__PURE__ */ jsx15(
+        icon: /* @__PURE__ */ jsx13(SearchIcon, {}),
+        action: /* @__PURE__ */ jsx13(
           Button2,
           {
             className: className == null ? void 0 : className.action,
@@ -523,7 +427,7 @@ var SearchInput = forwardRef5(
             "aria-label": stringFormatter.format("Clear search"),
             excludeFromTabOrder: true,
             preventFocusOnPress: true,
-            children: /* @__PURE__ */ jsx15(
+            children: /* @__PURE__ */ jsx13(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -531,7 +435,7 @@ var SearchInput = forwardRef5(
                 fill: "currentColor",
                 width: 20,
                 height: 20,
-                children: /* @__PURE__ */ jsx15("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+                children: /* @__PURE__ */ jsx13("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
               }
             )
           }
@@ -544,37 +448,37 @@ var SearchInput = forwardRef5(
 
 // src/ListBox/ListBox.tsx
 import {
-  forwardRef as forwardRef6
+  forwardRef as forwardRef5
 } from "react";
 import { ListBox } from "react-aria-components";
-import { cn as cn11, useClassNames as useClassNames7 } from "@marigold/system";
+import { cn as cn10, useClassNames as useClassNames6 } from "@marigold/system";
 
 // src/ListBox/Context.ts
-import { createContext as createContext3, useContext as useContext4 } from "react";
+import { createContext as createContext3, useContext as useContext5 } from "react";
 var ListBoxContext = createContext3({});
-var useListBoxContext = () => useContext4(ListBoxContext);
+var useListBoxContext = () => useContext5(ListBoxContext);
 
 // src/ListBox/ListBoxItem.tsx
 import { ListBoxItem } from "react-aria-components";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var _ListBoxItem = ({ ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ jsx16(ListBoxItem, { ...props, className: classNames2.option });
+  return /* @__PURE__ */ jsx14(ListBoxItem, { ...props, className: classNames2.option });
 };
 
 // src/ListBox/ListBoxSection.tsx
 import { Header, ListBoxSection } from "react-aria-components";
-import { cn as cn10 } from "@marigold/system";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { cn as cn9 } from "@marigold/system";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var _Section = ({ header, children, ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs7(
     ListBoxSection,
     {
       ...props,
-      className: cn10(classNames2.section, classNames2.header),
+      className: cn9(classNames2.section, classNames2.header),
       children: [
-        /* @__PURE__ */ jsx17(Header, { children: header }),
+        /* @__PURE__ */ jsx15(Header, { children: header }),
         children
       ]
     }
@@ -582,16 +486,16 @@ var _Section = ({ header, children, ...props }) => {
 };
 
 // src/ListBox/ListBox.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var _ListBox = forwardRef6(
+import { jsx as jsx16 } from "react/jsx-runtime";
+var _ListBox = forwardRef5(
   ({ variant, size, ...props }, ref) => {
-    const classNames2 = useClassNames7({ component: "ListBox", variant, size });
+    const classNames2 = useClassNames6({ component: "ListBox", variant, size });
     const listBoxProps = { shouldSelectOnPressUp: false };
-    return /* @__PURE__ */ jsx18(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx18("div", { className: classNames2.container, children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx16(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx16("div", { className: classNames2.container, children: /* @__PURE__ */ jsx16(
       ListBox,
       {
         ...props,
-        className: cn11(
+        className: cn10(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -606,17 +510,17 @@ _ListBox.Item = _ListBoxItem;
 _ListBox.Section = _Section;
 
 // src/Overlay/Popover.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 import { Popover } from "react-aria-components";
-import { cn as cn13, useClassNames as useClassNames9, useSmallScreen } from "@marigold/system";
+import { cn as cn12, useClassNames as useClassNames8, useSmallScreen } from "@marigold/system";
 
 // src/Provider/OverlayContainerProvider.tsx
-import { createContext as createContext4, useContext as useContext5 } from "react";
+import { createContext as createContext4, useContext as useContext6 } from "react";
 import { useIsSSR } from "@react-aria/ssr";
 var OverlayContainerContext = createContext4(void 0);
 var OverlayContainerProvider = OverlayContainerContext.Provider;
 var usePortalContainer = () => {
-  const portalContainer = useContext5(OverlayContainerContext);
+  const portalContainer = useContext6(OverlayContainerContext);
   const isSSR = useIsSSR();
   const portal = isSSR ? null : portalContainer ? document.getElementById(portalContainer) : document.body;
   return portal;
@@ -624,7 +528,7 @@ var usePortalContainer = () => {
 
 // src/Overlay/Underlay.tsx
 import { ModalOverlay } from "react-aria-components";
-import { cn as cn12, useClassNames as useClassNames8 } from "@marigold/system";
+import { cn as cn11, useClassNames as useClassNames7 } from "@marigold/system";
 
 // src/Provider/index.ts
 import { useTheme, ThemeProvider as ThemeProvider2 } from "@marigold/system";
@@ -632,17 +536,17 @@ import { I18nProvider } from "@react-aria/i18n";
 
 // src/Provider/MarigoldProvider.tsx
 import { ThemeProvider } from "@marigold/system";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   className,
   theme
 }) {
-  return /* @__PURE__ */ jsx19(ThemeProvider, { theme, className, children });
+  return /* @__PURE__ */ jsx17(ThemeProvider, { theme, className, children });
 }
 
 // src/Overlay/Underlay.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Underlay = ({
   size,
   variant,
@@ -651,7 +555,7 @@ var Underlay = ({
   keyboardDismissable,
   ...rest
 }) => {
-  const classNames2 = useClassNames8({ component: "Underlay", size, variant });
+  const classNames2 = useClassNames7({ component: "Underlay", size, variant });
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -659,10 +563,10 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx18(
     ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => cn12(
+      className: ({ isEntering, isExiting }) => cn11(
         "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur-xs",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
@@ -677,8 +581,8 @@ var Underlay = ({
 };
 
 // src/Overlay/Popover.tsx
-import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
-var _Popover = forwardRef7(
+import { Fragment, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+var _Popover = forwardRef6(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
       isKeyboardDismissDisabled: keyboardDismissDisabled,
@@ -686,7 +590,7 @@ var _Popover = forwardRef7(
       placement,
       ...rest
     };
-    const classNames2 = useClassNames9({
+    const classNames2 = useClassNames8({
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
@@ -694,22 +598,22 @@ var _Popover = forwardRef7(
     });
     const isSmallScreen = useSmallScreen();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ jsx21(Fragment2, { children: isSmallScreen ? /* @__PURE__ */ jsx21(Fragment2, { children: /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsx19(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsx19(Fragment, { children: /* @__PURE__ */ jsxs8(
       Popover,
       {
         ref,
         ...props,
-        className: cn13(
+        className: cn12(
           "fixed! top-auto! bottom-0! left-0! max-h-fit! w-full",
           classNames2
         ),
         UNSTABLE_portalContainer: portal,
         children: [
           children,
-          /* @__PURE__ */ jsx21(Underlay, { open, variant: "modal" })
+          /* @__PURE__ */ jsx19(Underlay, { open, variant: "modal" })
         ]
       }
-    ) }) : /* @__PURE__ */ jsx21(
+    ) }) : /* @__PURE__ */ jsx19(
       Popover,
       {
         ref,
@@ -725,20 +629,20 @@ var _Popover = forwardRef7(
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onSubmit,
   onClear,
   ref
 }) => {
   const state = React.useContext(ComboBoxStateContext);
-  const classNames2 = useClassNames10({ component: "ComboBox" });
-  return /* @__PURE__ */ jsx22(
+  const classNames2 = useClassNames9({ component: "ComboBox" });
+  return /* @__PURE__ */ jsx20(
     SearchInput,
     {
       ref,
       className: {
-        action: cn14(
+        action: cn13(
           (state == null ? void 0 : state.inputValue) === "" ? "invisible" : "visible",
           classNames2
         )
@@ -761,7 +665,7 @@ var AutocompleteInput = ({
     }
   );
 };
-var _Autocomplete = forwardRef8(
+var _Autocomplete = forwardRef7(
   ({
     children,
     defaultValue,
@@ -787,9 +691,9 @@ var _Autocomplete = forwardRef8(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsxs11(FieldBase, { as: ComboBox, ref, ...props, children: [
-      /* @__PURE__ */ jsx22(AutocompleteInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ jsx22(_Popover, { children: /* @__PURE__ */ jsx22(_ListBox, { children }) })
+    return /* @__PURE__ */ jsxs9(FieldBase, { as: ComboBox, ref, ...props, children: [
+      /* @__PURE__ */ jsx20(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ jsx20(_Popover, { children: /* @__PURE__ */ jsx20(_ListBox, { children }) })
     ] });
   }
 );
@@ -801,12 +705,110 @@ import { forwardRef as forwardRef13 } from "react";
 import { ComboBox as ComboBox2 } from "react-aria-components";
 import { useClassNames as useClassNames11 } from "@marigold/system";
 
-// src/icons/ChevronDown.tsx
+// src/Button/Button.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { Button as Button3 } from "react-aria-components";
+import { cn as cn14, useClassNames as useClassNames10 } from "@marigold/system";
+
+// src/ProgressCycle/ProgressCycle.tsx
+import { ProgressBar } from "react-aria-components";
+import { SVG as SVG3 } from "@marigold/system";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var ProgressCycle = ({
+  size = "16",
+  ...props
+}) => {
+  let strokeWidth = 3;
+  if (size <= "24") {
+    strokeWidth = 2;
+  } else if (size >= "32") {
+    strokeWidth = 4;
+  }
+  const radius = `calc(50% - ${strokeWidth / 2}px)`;
+  return /* @__PURE__ */ jsx21(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs10(
+    SVG3,
+    {
+      className: "animate-rotate-spinner origin-center fill-none",
+      size,
+      "aria-hidden": "true",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx21(
+          "circle",
+          {
+            cx: "50%",
+            cy: "50%",
+            r: radius,
+            strokeWidth,
+            className: "stroke-transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "circle",
+          {
+            cx: "50%",
+            cy: "50%",
+            r: radius,
+            strokeWidth,
+            pathLength: "100",
+            strokeDasharray: "100 200",
+            strokeDashoffset: "0",
+            strokeLinecap: "round",
+            className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/Button/Button.tsx
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var _Button = forwardRef8(
+  ({
+    children,
+    variant,
+    size,
+    className,
+    disabled,
+    loading,
+    fullWidth,
+    ...props
+  }, ref) => {
+    const classNames2 = useClassNames10({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    return /* @__PURE__ */ jsx22(
+      Button3,
+      {
+        ...props,
+        ref,
+        className: cn14(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0,
+          loading && "cursor-progress!"
+        ),
+        isPending: loading,
+        isDisabled: disabled,
+        children: loading ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          /* @__PURE__ */ jsx22("span", { className: "absolute", children: /* @__PURE__ */ jsx22(ProgressCycle, {}) }),
+          /* @__PURE__ */ jsx22("span", { className: "invisible flex gap-[inherit]", children })
+        ] }) : children
+      }
+    );
+  }
+);
+
+// src/icons/ChevronRight.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { SVG as SVG4 } from "@marigold/system";
 import { jsx as jsx23 } from "react/jsx-runtime";
-var ChevronDown = forwardRef9(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx23("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
+var ChevronRight = forwardRef9(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx23("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
 );
 
 // src/icons/ChevronLeft.tsx
@@ -987,9 +989,9 @@ import { CheckboxGroup } from "react-aria-components";
 import { cn as cn17, useClassNames as useClassNames16 } from "@marigold/system";
 
 // src/Checkbox/Context.tsx
-import { createContext as createContext5, useContext as useContext6 } from "react";
+import { createContext as createContext5, useContext as useContext7 } from "react";
 var CheckboxGroupContext = createContext5(null);
-var useCheckboxGroupContext = () => useContext6(CheckboxGroupContext);
+var useCheckboxGroupContext = () => useContext7(CheckboxGroupContext);
 
 // src/Checkbox/CheckboxGroup.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -1224,7 +1226,7 @@ var Container = ({
 );
 
 // src/Dialog/Dialog.tsx
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
 import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
 
@@ -1266,7 +1268,12 @@ var _Header = ({ variant, size, ...props }) => {
 
 // src/Headline/Headline.tsx
 import { Heading as Heading2 } from "react-aria-components";
-import { cn as cn23, textAlign, useClassNames as useClassNames21 } from "@marigold/system";
+import {
+  cn as cn23,
+  ensureCssVar,
+  textAlign,
+  useClassNames as useClassNames21
+} from "@marigold/system";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
@@ -1293,7 +1300,7 @@ var _Headline = ({
         // possibly set by a <Container>
         textAlign[align]
       ),
-      style: { color: color && `var(--color-${color})` },
+      style: { color: ensureCssVar(color) },
       children
     }
   );
@@ -1381,7 +1388,7 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
-  const ctx = useContext7(OverlayTriggerStateContext);
+  const ctx = useContext8(OverlayTriggerStateContext);
   return /* @__PURE__ */ jsx45("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ jsx45(
     "button",
     {
@@ -1411,7 +1418,7 @@ var _Dialog = ({
 }) => {
   var _a;
   const classNames2 = useClassNames23({ component: "Dialog", variant, size });
-  const state = useContext7(OverlayTriggerStateContext);
+  const state = useContext8(OverlayTriggerStateContext);
   const children = typeof props.children === "function" ? props.children({
     close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
     }
@@ -1658,14 +1665,14 @@ import { cn as cn31, useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
-import { useContext as useContext8, useMemo } from "react";
+import { useContext as useContext9, useMemo } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
 import { useClassNames as useClassNames28 } from "@marigold/system";
 import { jsx as jsx55 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
-  const state = useContext8(CalendarStateContext);
+  const state = useContext9(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
   const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
@@ -1704,7 +1711,7 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext9 } from "react";
+import { useContext as useContext10 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { cn as cn32, useClassNames as useClassNames30 } from "@marigold/system";
 
@@ -1731,7 +1738,7 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext9(CalendarStateContext2);
+  const state = useContext10(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = useClassNames30({ component: "Select" });
@@ -1751,7 +1758,7 @@ function CalendarListBox({
 }
 
 // src/Calendar/MonthControls.tsx
-import { Button as Button3 } from "react-aria-components";
+import { Button as Button4 } from "react-aria-components";
 import { cn as cn33, useClassNames as useClassNames31 } from "@marigold/system";
 import { jsx as jsx58, jsxs as jsxs21 } from "react/jsx-runtime";
 function MonthControls() {
@@ -1766,7 +1773,7 @@ function MonthControls() {
       ),
       children: [
         /* @__PURE__ */ jsx58(
-          Button3,
+          Button4,
           {
             className: cn33(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1777,7 +1784,7 @@ function MonthControls() {
           }
         ),
         /* @__PURE__ */ jsx58(
-          Button3,
+          Button4,
           {
             className: cn33(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1794,11 +1801,11 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext10(CalendarStateContext3);
+  const state = useContext11(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
@@ -1833,7 +1840,7 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext11,
+  useContext as useContext12,
   useEffect,
   useRef
 } from "react";
@@ -1841,7 +1848,7 @@ import { CalendarStateContext as CalendarStateContext4 } from "react-aria-compon
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext11(CalendarStateContext4);
+  const state = useContext12(CalendarStateContext4);
   const years = [];
   let formatter = useDateFormatter3({
     year: "numeric",
@@ -2076,9 +2083,9 @@ var _Link = forwardRef17(
 import { useClassNames as useClassNames35 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext6, useContext as useContext12 } from "react";
+import { createContext as createContext6, useContext as useContext13 } from "react";
 var ListContext = createContext6({});
-var useListContext = () => useContext12(ListContext);
+var useListContext = () => useContext13(ListContext);
 
 // src/List/ListItem.tsx
 import { jsx as jsx65 } from "react/jsx-runtime";
@@ -2172,9 +2179,9 @@ import { useButton } from "@react-aria/button";
 import { cn as cn38, useClassNames as useClassNames40 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
-import { createContext as createContext7, useContext as useContext13 } from "react";
+import { createContext as createContext7, useContext as useContext14 } from "react";
 var SectionMessageContext = createContext7({});
-var useSectionMessageContext = () => useContext13(SectionMessageContext);
+var useSectionMessageContext = () => useContext14(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
 import { cn as cn36 } from "@marigold/system";
@@ -2336,7 +2343,7 @@ import { Children as Children4, useState as useState3 } from "react";
 import { useListData as useListData2 } from "@react-stately/data";
 
 // src/TagGroup/Tag.tsx
-import { Button as Button4, Tag } from "react-aria-components";
+import { Button as Button5, Tag } from "react-aria-components";
 import { cn as cn39, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
@@ -2367,7 +2374,7 @@ var _TagGroup = ({
 // src/TagGroup/Tag.tsx
 import { Fragment as Fragment6, jsx as jsx75, jsxs as jsxs28 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx75(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx75("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx75("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" }) }) });
+  return /* @__PURE__ */ jsx75(Button5, { slot: "remove", className, children: /* @__PURE__ */ jsx75("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx75("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, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
@@ -2465,7 +2472,7 @@ import { Group as Group2, NumberField } from "react-aria-components";
 import { cn as cn41, useClassNames as useClassNames43 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import { Button as Button5 } from "react-aria-components";
+import { Button as Button6 } from "react-aria-components";
 import { cn as cn40 } from "@marigold/system";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var Plus = () => /* @__PURE__ */ jsx77("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx77(
@@ -2487,7 +2494,7 @@ var Minus = () => /* @__PURE__ */ jsx77("svg", { width: 16, height: 16, viewBox:
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
   return /* @__PURE__ */ jsx77(
-    Button5,
+    Button6,
     {
       className: cn40(
         [
@@ -2901,11 +2908,11 @@ import { Radio } from "react-aria-components";
 import { cn as cn44, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext8, useContext as useContext14 } from "react";
+import { createContext as createContext8, useContext as useContext15 } from "react";
 var RadioGroupContext = createContext8(
   null
 );
-var useRadioGroupContext = () => useContext14(RadioGroupContext);
+var useRadioGroupContext = () => useContext15(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
@@ -3044,7 +3051,7 @@ var _SearchField = forwardRef20(
 // src/Select/Select.tsx
 import { forwardRef as forwardRef21 } from "react";
 import {
-  Button as Button6,
+  Button as Button7,
   Select,
   SelectValue
 } from "react-aria-components";
@@ -3073,7 +3080,7 @@ var _Select = forwardRef21(
     const classNames2 = useClassNames48({ component: "Select", variant, size });
     return /* @__PURE__ */ jsxs34(FieldBase, { as: Select, ref, variant, size, ...props, children: [
       /* @__PURE__ */ jsxs34(
-        Button6,
+        Button7,
         {
           className: cn45(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
@@ -3100,11 +3107,11 @@ import { GridList as SelectList } from "react-aria-components";
 import { cn as cn47, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext9, useContext as useContext15 } from "react";
+import { createContext as createContext9, useContext as useContext16 } from "react";
 var SelectListContext = createContext9(
   {}
 );
-var useSelectListContext = () => useContext15(SelectListContext);
+var useSelectListContext = () => useContext16(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
 import { forwardRef as forwardRef22 } from "react";
@@ -3385,18 +3392,22 @@ import {
 import { cn as cn57, useClassNames as useClassNames53 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext10, useContext as useContext16 } from "react";
+import { createContext as createContext10, useContext as useContext17 } from "react";
 var TableContext = createContext10({});
-var useTableContext = () => useContext16(TableContext);
+var useTableContext = () => useContext17(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
 import { jsx as jsx93 } from "react/jsx-runtime";
-var TableBody = ({ children, emptyState }) => {
+var TableBody = ({
+  children,
+  className,
+  emptyState
+}) => {
   const { rowGroupProps } = useTableRowGroup();
   const { state, classNames: classNames2 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ jsx93("tbody", { children: /* @__PURE__ */ jsx93("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx93(
+    return /* @__PURE__ */ jsx93("tbody", { className, children: /* @__PURE__ */ jsx93("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx93(
       "td",
       {
         className: classNames2 == null ? void 0 : classNames2.cell,
@@ -3406,7 +3417,7 @@ var TableBody = ({ children, emptyState }) => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx93("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx93("tbody", { ...rowGroupProps, className, children });
 };
 
 // src/Table/TableCell.tsx
@@ -3573,11 +3584,15 @@ var TableHeader = ({ stickyHeader, children }) => {
 import { useRef as useRef9 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 import { jsx as jsx98 } from "react/jsx-runtime";
-var TableHeaderRow = ({ item, children }) => {
+var TableHeaderRow = ({
+  item,
+  className,
+  children
+}) => {
   const { state } = useTableContext();
   const ref = useRef9(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx98("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx98("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3729,29 +3744,37 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx101(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx101(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
-              (column) => {
-                var _a, _b, _c, _d, _e;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx101(
-                  TableSelectAllCell,
-                  {
-                    width: (_b = column.props) == null ? void 0 : _b.width,
-                    column,
-                    align: (_c = column.props) == null ? void 0 : _c.align
-                  },
-                  column.key
-                ) : /* @__PURE__ */ jsx101(
-                  TableColumnHeader,
-                  {
-                    width: (_d = column.props) == null ? void 0 : _d.width,
-                    column,
-                    align: (_e = column.props) == null ? void 0 : _e.align
-                  },
-                  column.key
-                );
-              }
-            ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs39(TableBody, { emptyState, children: [
+            /* @__PURE__ */ jsx101(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx101(
+              TableHeaderRow,
+              {
+                item: headerRow,
+                className: classNames2.headerRow,
+                children: [...collection.getChildren(headerRow.key)].map(
+                  (column) => {
+                    var _a, _b, _c, _d, _e;
+                    return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx101(
+                      TableSelectAllCell,
+                      {
+                        width: (_b = column.props) == null ? void 0 : _b.width,
+                        column,
+                        align: (_c = column.props) == null ? void 0 : _c.align
+                      },
+                      column.key
+                    ) : /* @__PURE__ */ jsx101(
+                      TableColumnHeader,
+                      {
+                        width: (_d = column.props) == null ? void 0 : _d.width,
+                        column,
+                        align: (_e = column.props) == null ? void 0 : _e.align
+                      },
+                      column.key
+                    );
+                  }
+                )
+              },
+              headerRow.key
+            )) }),
+            /* @__PURE__ */ jsxs39(TableBody, { className: classNames2.body, emptyState, children: [
               ...collection.rows.map(
                 (row) => row.type === "item" && /* @__PURE__ */ jsx101(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
@@ -3784,6 +3807,7 @@ import { Text as Text2 } from "react-aria-components";
 import {
   cn as cn58,
   cursorStyle,
+  ensureCssVar as ensureCssVar2,
   fontWeight,
   textAlign as textAlign2,
   textSize,
@@ -3826,7 +3850,7 @@ var _Text = ({
         weight && fontWeight[weight],
         fontSize && textSize[fontSize]
       ),
-      style: { color: color && `var(--color-${color})` },
+      style: { color: ensureCssVar2(color) },
       children
     }
   );
@@ -4234,9 +4258,9 @@ import { Tabs } from "react-aria-components";
 import { useClassNames as useClassNames59 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext11, useContext as useContext17 } from "react";
+import { createContext as createContext11, useContext as useContext18 } from "react";
 var TabContext = createContext11({});
-var useTabContext = () => useContext17(TabContext);
+var useTabContext = () => useContext18(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";