@marigold/components 11.0.2 → 11.1.1

package/dist/index.js

@@ -95,7 +95,7 @@ __export(index_exports, {
   Text: () => _Text,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
-  ThemeProvider: () => import_system16.ThemeProvider,
+  ThemeProvider: () => import_system14.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => _Tooltip,
   Underlay: () => Underlay,
@@ -108,7 +108,7 @@ __export(index_exports, {
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
   usePortalContainer: () => usePortalContainer,
-  useTheme: () => import_system16.useTheme
+  useTheme: () => import_system14.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -116,8 +116,8 @@ module.exports = __toCommonJS(index_exports);
 var import_data = require("@react-stately/data");
 
 // src/Accordion/Accordion.tsx
-var import_react_aria_components6 = require("react-aria-components");
-var import_system5 = require("@marigold/system");
+var import_react_aria_components4 = require("react-aria-components");
+var import_system3 = require("@marigold/system");
 
 // src/Accordion/AccordionContext.tsx
 var import_react = require("react");
@@ -133,134 +133,38 @@ var useAccordionContext = () => {
   return ctx;
 };
 
-// src/Accordion/AccordionHeading.tsx
-var import_react_aria_components3 = require("react-aria-components");
-var import_system4 = require("@marigold/system");
-
-// src/Button/Button.tsx
-var import_react2 = require("react");
-var import_react_aria_components2 = require("react-aria-components");
+// src/Accordion/AccordionHeader.tsx
+var import_react3 = require("react");
+var import_react_aria_components = require("react-aria-components");
 var import_system2 = require("@marigold/system");
 
-// src/ProgressCycle/ProgressCycle.tsx
-var import_react_aria_components = require("react-aria-components");
+// src/icons/ChevronDown.tsx
+var import_react2 = require("react");
 var import_system = require("@marigold/system");
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_system.SVG,
-    {
-      className: "animate-rotate-spinner origin-center fill-none",
-      size,
-      "aria-hidden": "true",
-      role: "img",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "circle",
-          {
-            cx: "50%",
-            cy: "50%",
-            r: radius,
-            strokeWidth,
-            className: "stroke-transparent"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.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
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var _Button = (0, import_react2.forwardRef)(
-  ({
-    children,
-    variant,
-    size,
-    className,
-    disabled,
-    loading,
-    fullWidth,
-    ...props
-  }, ref) => {
-    const classNames2 = (0, import_system2.useClassNames)({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_aria_components2.Button,
-      {
-        ...props,
-        ref,
-        className: (0, import_system2.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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProgressCycle, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "invisible flex gap-[inherit]", children })
-        ] }) : children
-      }
-    );
-  }
-);
-
-// src/icons/ChevronRight.tsx
-var import_react3 = require("react");
-var import_system3 = require("@marigold/system");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ChevronRight = (0, import_react3.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_system3.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
+var ChevronDown = (0, import_react2.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime.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
-var import_jsx_runtime4 = require("react/jsx-runtime");
+// src/Accordion/AccordionHeader.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var AccordionHeader = ({ children }) => {
   const { classNames: classNames2 } = useAccordionContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components3.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(_Button, { slot: "trigger", className: (0, import_system4.cn)("group", classNames2.header), children: [
+  const { isExpanded } = (0, import_react3.useContext)(import_react_aria_components.DisclosureStateContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components.Button, { slot: "trigger", className: classNames2.header, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      ChevronRight,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ChevronDown,
       {
-        className: (0, import_system4.cn)(classNames2.icon, "group-aria-expanded:rotate-90")
+        className: (0, import_system2.cn)(classNames2.icon, isExpanded && "rotate-180")
       }
     )
   ] }) });
 };
 
 // src/Accordion/AccordionItem.tsx
-var import_react_aria_components4 = require("react-aria-components");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react_aria_components2 = require("react-aria-components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var AccordionItem = ({
   children,
   disabled,
@@ -268,8 +172,8 @@ var AccordionItem = ({
   ...props
 }) => {
   const { classNames: classNames2 } = useAccordionContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react_aria_components4.Disclosure,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_aria_components2.Disclosure,
     {
       isDisabled: disabled,
       isExpanded: expanded,
@@ -281,15 +185,15 @@ var AccordionItem = ({
 };
 
 // src/Accordion/AccordionPanel.tsx
-var import_react_aria_components5 = require("react-aria-components");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react_aria_components3 = require("react-aria-components");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var AccordionPanel = ({ children }) => {
   const { classNames: classNames2 } = useAccordionContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components5.DisclosurePanel, { className: classNames2.content, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components3.DisclosurePanel, { className: classNames2.content, children });
 };
 
 // src/Accordion/Accordion.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Accordion = ({
   children,
   disabled,
@@ -297,9 +201,9 @@ var Accordion = ({
   size,
   ...props
 }) => {
-  const classNames2 = (0, import_system5.useClassNames)({ component: "Accordion", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccordionProvider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react_aria_components6.DisclosureGroup,
+  const classNames2 = (0, import_system3.useClassNames)({ component: "Accordion", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionProvider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_aria_components4.DisclosureGroup,
     {
       ...props,
       isDisabled: disabled,
@@ -314,8 +218,8 @@ Accordion.Item = AccordionItem;
 
 // src/Aside/Aside.tsx
 var import_react4 = require("react");
-var import_system6 = require("@marigold/system");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_system4 = require("@marigold/system");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var classNames = {
   aside: "grow basis-(--sideWidth)",
   content: "basis-0 grow-999 [min-inline-size:var(--wrap)]"
@@ -329,11 +233,11 @@ var Aside = ({
 }) => {
   const [left, right] = import_react4.Children.toArray(children);
   const vars = {
-    aside: (0, import_system6.createVar)({ sideWidth }),
-    content: (0, import_system6.createVar)({ wrap })
+    aside: (0, import_system4.createVar)({ sideWidth }),
+    content: (0, import_system4.createVar)({ wrap })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_system6.cn)("flex flex-wrap", import_system6.gapSpace[space]), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_system4.cn)("flex flex-wrap", import_system4.gapSpace[space]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         className: classNames[side === "left" ? "aside" : "content"],
@@ -341,7 +245,7 @@ var Aside = ({
         children: left
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         className: classNames[side === "right" ? "aside" : "content"],
@@ -353,22 +257,22 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-var import_system7 = require("@marigold/system");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_system5 = require("@marigold/system");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      className: (0, import_system7.cn)(
+      className: (0, import_system5.cn)(
         "overflow-hidden",
-        import_system7.aspect[ratio],
+        import_system5.aspect[ratio],
         "max-w-[var(--maxWidth)]"
       ),
-      style: (0, import_system7.createVar)({ maxWidth }),
+      style: (0, import_system5.createVar)({ maxWidth }),
       children
     }
   );
@@ -376,26 +280,26 @@ var Aspect = ({
 
 // src/Autocomplete/Autocomplete.tsx
 var import_react14 = __toESM(require("react"));
-var import_react_aria_components16 = require("react-aria-components");
-var import_system19 = require("@marigold/system");
+var import_react_aria_components14 = require("react-aria-components");
+var import_system17 = require("@marigold/system");
 
 // src/FieldBase/FieldBase.tsx
 var import_react7 = require("react");
-var import_system10 = require("@marigold/system");
+var import_system8 = require("@marigold/system");
 
 // src/HelpText/HelpText.tsx
 var import_react5 = require("react");
-var import_react_aria_components7 = require("react-aria-components");
-var import_system8 = require("@marigold/system");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Icon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var import_react_aria_components5 = require("react-aria-components");
+var import_system6 = require("@marigold/system");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Icon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "svg",
   {
-    className: (0, import_system8.cn)("h-4 w-4 shrink-0", className),
+    className: (0, import_system6.cn)("h-4 w-4 shrink-0", className),
     viewBox: "0 0 24 24",
     role: "presentation",
     fill: "currentColor",
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("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 = ({
@@ -405,64 +309,64 @@ var HelpText = ({
   errorMessage,
   ...props
 }) => {
-  const classNames2 = (0, import_system8.useClassNames)({
+  const classNames2 = (0, import_system6.useClassNames)({
     component: "HelpText",
     variant,
     size
   });
-  const ctx = (0, import_react5.useContext)(import_react_aria_components7.FieldErrorContext);
+  const ctx = (0, import_react5.useContext)(import_react_aria_components5.FieldErrorContext);
   if (!description && ctx && !ctx.isInvalid) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_system8.cn)(classNames2.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components7.FieldError, { ...props, className: "flex flex-col", children: (validation) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_system6.cn)(classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components5.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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: classNames2.icon }),
+      return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: classNames2.icon }),
         msg
-      ] }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: classNames2.icon }),
+      ] }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: classNames2.icon }),
         messages
       ] });
     } }),
-    ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components7.Text, { slot: "description", children: description })
+    ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components5.Text, { slot: "description", children: description })
   ] });
 };
 
 // src/Label/Label.tsx
-var import_react_aria_components8 = require("react-aria-components");
-var import_system9 = require("@marigold/system");
+var import_react_aria_components6 = require("react-aria-components");
+var import_system7 = require("@marigold/system");
 
 // src/FieldBase/FieldGroup.tsx
 var import_react6 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FieldGroupContext = (0, import_react6.createContext)({});
 var useFieldGroupContext = () => (0, import_react6.useContext)(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldGroupContext.Provider, { value: { labelWidth }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FieldGroupContext.Provider, { value: { labelWidth }, children });
 };
 
 // src/Label/Label.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var _Label = ({ size, variant, children, ...props }) => {
-  const classNames2 = (0, import_system9.useClassNames)({ component: "Label", size, variant });
+  const classNames2 = (0, import_system7.useClassNames)({ component: "Label", size, variant });
   const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react_aria_components8.Label,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_react_aria_components6.Label,
     {
       ...props,
-      className: (0, import_system9.cn)(classNames2.container, "flex w-[var(--labelWidth)]"),
-      style: (0, import_system9.createVar)({ labelWidth }),
+      className: (0, import_system7.cn)(classNames2.container, "flex w-[var(--labelWidth)]"),
+      style: (0, import_system7.createVar)({ labelWidth }),
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_system9.SVG,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_system7.SVG,
           {
             viewBox: "0 0 24 24",
             role: "presentation",
             size: 16,
-            className: (0, import_system9.cn)("hidden", classNames2.indicator),
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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: (0, import_system7.cn)("hidden", classNames2.indicator),
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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" })
           }
         )
       ]
@@ -471,7 +375,7 @@ var _Label = ({ size, variant, children, ...props }) => {
 };
 
 // src/FieldBase/FieldBase.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var fixedForwardRef = import_react7.forwardRef;
 var _FieldBase = (props, ref) => {
   const {
@@ -487,18 +391,18 @@ var _FieldBase = (props, ref) => {
     stateProps,
     ...rest
   } = props;
-  const classNames2 = (0, import_system10.useClassNames)({
+  const classNames2 = (0, import_system8.useClassNames)({
     component: "Field",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     Component,
     {
       ref,
-      className: (0, import_system10.cn)(
+      className: (0, import_system8.cn)(
         "group/field",
-        import_system10.width[width],
+        import_system8.width[width],
         classNames2,
         className,
         !label && `gap-x-0`
@@ -507,9 +411,9 @@ var _FieldBase = (props, ref) => {
       "data-error": props.isInvalid ? true : void 0,
       ...rest,
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           HelpText,
           {
             variant,
@@ -526,25 +430,25 @@ var FieldBase = fixedForwardRef(_FieldBase);
 
 // src/Input/SearchInput.tsx
 var import_react9 = require("react");
-var import_react_aria_components10 = require("react-aria-components");
+var import_react_aria_components8 = require("react-aria-components");
 var import_i18n = require("@react-aria/i18n");
-var import_system12 = require("@marigold/system");
+var import_system10 = require("@marigold/system");
 
 // src/Input/Input.tsx
 var import_react8 = require("react");
-var import_react_aria_components9 = require("react-aria-components");
-var import_system11 = require("@marigold/system");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react_aria_components7 = require("react-aria-components");
+var import_system9 = require("@marigold/system");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var _Input = (0, import_react8.forwardRef)(
   ({ type, icon, action, variant, size, className, ...props }, ref) => {
-    const classNames2 = (0, import_system11.useClassNames)({
+    const classNames2 = (0, import_system9.useClassNames)({
       component: "Input",
       variant,
       size
     });
     const inputIcon = icon ? (0, import_react8.cloneElement)(icon, {
       ...icon.props,
-      className: (0, import_system11.cn)(
+      className: (0, import_system9.cn)(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
@@ -552,13 +456,13 @@ var _Input = (0, import_react8.forwardRef)(
     }) : null;
     const inputAction = action && !props.readOnly ? (0, import_react8.cloneElement)(action, {
       ...action.props,
-      className: (0, import_system11.cn)(
+      className: (0, import_system9.cn)(
         "absolute right-0",
         classNames2.action,
         action.props.className
       )
     }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         className: "group/input relative flex items-center",
@@ -566,11 +470,11 @@ var _Input = (0, import_react8.forwardRef)(
         "data-action": action && "",
         children: [
           inputIcon,
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_react_aria_components9.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react_aria_components7.Input,
             {
               ...props,
-              className: (0, import_system11.cn)(
+              className: (0, import_system9.cn)(
                 "w-full flex-1",
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
@@ -590,7 +494,7 @@ var _Input = (0, import_react8.forwardRef)(
 );
 
 // src/Input/SearchInput.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var intlMessages = {
   "de-DE": {
     "Clear search": "Suche zur\xFCcksetzen"
@@ -602,7 +506,7 @@ var intlMessages = {
     "Clear search": "Effacer la recherche"
   }
 };
-var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -611,31 +515,31 @@ var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("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 = (0, import_react9.forwardRef)(
   ({ className, onClear, ...props }, ref) => {
     const stringFormatter = (0, import_i18n.useLocalizedStringFormatter)(intlMessages);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       _Input,
       {
         type: "search",
-        className: (0, import_system12.cn)(
+        className: (0, import_system10.cn)(
           "[&::-webkit-search-cancel-button]:hidden",
           className == null ? void 0 : className.input
         ),
         ref,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SearchIcon, {}),
-        action: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_react_aria_components10.Button,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SearchIcon, {}),
+        action: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_aria_components8.Button,
           {
             className: className == null ? void 0 : className.action,
             onPress: () => onClear == null ? void 0 : onClear(),
             "aria-label": stringFormatter.format("Clear search"),
             excludeFromTabOrder: true,
             preventFocusOnPress: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -643,7 +547,7 @@ var SearchInput = (0, import_react9.forwardRef)(
                 fill: "currentColor",
                 width: 20,
                 height: 20,
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("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" })
               }
             )
           }
@@ -656,8 +560,8 @@ var SearchInput = (0, import_react9.forwardRef)(
 
 // src/ListBox/ListBox.tsx
 var import_react11 = require("react");
-var import_react_aria_components13 = require("react-aria-components");
-var import_system14 = require("@marigold/system");
+var import_react_aria_components11 = require("react-aria-components");
+var import_system12 = require("@marigold/system");
 
 // src/ListBox/Context.ts
 var import_react10 = require("react");
@@ -665,26 +569,26 @@ var ListBoxContext = (0, import_react10.createContext)({});
 var useListBoxContext = () => (0, import_react10.useContext)(ListBoxContext);
 
 // src/ListBox/ListBoxItem.tsx
-var import_react_aria_components11 = require("react-aria-components");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react_aria_components9 = require("react-aria-components");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var _ListBoxItem = ({ ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.ListBoxItem, { ...props, className: classNames2.option });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components9.ListBoxItem, { ...props, className: classNames2.option });
 };
 
 // src/ListBox/ListBoxSection.tsx
-var import_react_aria_components12 = require("react-aria-components");
-var import_system13 = require("@marigold/system");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react_aria_components10 = require("react-aria-components");
+var import_system11 = require("@marigold/system");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var _Section = ({ header, children, ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_react_aria_components12.ListBoxSection,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_react_aria_components10.ListBoxSection,
     {
       ...props,
-      className: (0, import_system13.cn)(classNames2.section, classNames2.header),
+      className: (0, import_system11.cn)(classNames2.section, classNames2.header),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Header, { children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.Header, { children: header }),
         children
       ]
     }
@@ -692,16 +596,16 @@ var _Section = ({ header, children, ...props }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var _ListBox = (0, import_react11.forwardRef)(
   ({ variant, size, ...props }, ref) => {
-    const classNames2 = (0, import_system14.useClassNames)({ component: "ListBox", variant, size });
+    const classNames2 = (0, import_system12.useClassNames)({ component: "ListBox", variant, size });
     const listBoxProps = { shouldSelectOnPressUp: false };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_react_aria_components13.ListBox,
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_react_aria_components11.ListBox,
       {
         ...props,
-        className: (0, import_system14.cn)(
+        className: (0, import_system12.cn)(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -717,8 +621,8 @@ _ListBox.Section = _Section;
 
 // src/Overlay/Popover.tsx
 var import_react13 = require("react");
-var import_react_aria_components15 = require("react-aria-components");
-var import_system18 = require("@marigold/system");
+var import_react_aria_components13 = require("react-aria-components");
+var import_system16 = require("@marigold/system");
 
 // src/Provider/OverlayContainerProvider.tsx
 var import_react12 = require("react");
@@ -733,26 +637,26 @@ var usePortalContainer = () => {
 };
 
 // src/Overlay/Underlay.tsx
-var import_react_aria_components14 = require("react-aria-components");
-var import_system17 = require("@marigold/system");
+var import_react_aria_components12 = require("react-aria-components");
+var import_system15 = require("@marigold/system");
 
 // src/Provider/index.ts
-var import_system16 = require("@marigold/system");
+var import_system14 = require("@marigold/system");
 var import_i18n2 = require("@react-aria/i18n");
 
 // src/Provider/MarigoldProvider.tsx
-var import_system15 = require("@marigold/system");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_system13 = require("@marigold/system");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
   className,
   theme
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_system15.ThemeProvider, { theme, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_system13.ThemeProvider, { theme, className, children });
 }
 
 // src/Overlay/Underlay.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Underlay = ({
   size,
   variant,
@@ -761,7 +665,7 @@ var Underlay = ({
   keyboardDismissable,
   ...rest
 }) => {
-  const classNames2 = (0, import_system17.useClassNames)({ component: "Underlay", size, variant });
+  const classNames2 = (0, import_system15.useClassNames)({ component: "Underlay", size, variant });
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -769,10 +673,10 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_aria_components14.ModalOverlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_aria_components12.ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => (0, import_system17.cn)(
+      className: ({ isEntering, isExiting }) => (0, import_system15.cn)(
         "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" : "",
@@ -787,7 +691,7 @@ var Underlay = ({
 };
 
 // src/Overlay/Popover.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var _Popover = (0, import_react13.forwardRef)(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
@@ -796,31 +700,31 @@ var _Popover = (0, import_react13.forwardRef)(
       placement,
       ...rest
     };
-    const classNames2 = (0, import_system18.useClassNames)({
+    const classNames2 = (0, import_system16.useClassNames)({
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
       className: "min-w-(--trigger-width)"
     });
-    const isSmallScreen = (0, import_system18.useSmallScreen)();
+    const isSmallScreen = (0, import_system16.useSmallScreen)();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      import_react_aria_components15.Popover,
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      import_react_aria_components13.Popover,
       {
         ref,
         ...props,
-        className: (0, import_system18.cn)(
+        className: (0, import_system16.cn)(
           "fixed! top-auto! bottom-0! left-0! max-h-fit! w-full",
           classNames2
         ),
         UNSTABLE_portalContainer: portal,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Underlay, { open, variant: "modal" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Underlay, { open, variant: "modal" })
         ]
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_react_aria_components15.Popover,
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_react_aria_components13.Popover,
       {
         ref,
         ...props,
@@ -835,20 +739,20 @@ var _Popover = (0, import_react13.forwardRef)(
 );
 
 // src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var AutocompleteInput = ({
   onSubmit,
   onClear,
   ref
 }) => {
-  const state = import_react14.default.useContext(import_react_aria_components16.ComboBoxStateContext);
-  const classNames2 = (0, import_system19.useClassNames)({ component: "ComboBox" });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const state = import_react14.default.useContext(import_react_aria_components14.ComboBoxStateContext);
+  const classNames2 = (0, import_system17.useClassNames)({ component: "ComboBox" });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     SearchInput,
     {
       ref,
       className: {
-        action: (0, import_system19.cn)(
+        action: (0, import_system17.cn)(
           (state == null ? void 0 : state.inputValue) === "" ? "invisible" : "visible",
           classNames2
         )
@@ -897,9 +801,9 @@ var _Autocomplete = (0, import_react14.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(FieldBase, { as: import_react_aria_components16.ComboBox, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AutocompleteInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(_ListBox, { children }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FieldBase, { as: import_react_aria_components14.ComboBox, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(_ListBox, { children }) })
     ] });
   }
 );
@@ -907,41 +811,139 @@ _Autocomplete.Option = _ListBox.Item;
 _Autocomplete.Section = _ListBox.Section;
 
 // src/ComboBox/ComboBox.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_aria_components17 = require("react-aria-components");
 var import_system24 = require("@marigold/system");
 
-// src/icons/ChevronDown.tsx
+// src/Button/Button.tsx
 var import_react15 = require("react");
+var import_react_aria_components16 = require("react-aria-components");
+var import_system19 = require("@marigold/system");
+
+// src/ProgressCycle/ProgressCycle.tsx
+var import_react_aria_components15 = require("react-aria-components");
+var import_system18 = require("@marigold/system");
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components15.ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_system18.SVG,
+    {
+      className: "animate-rotate-spinner origin-center fill-none",
+      size,
+      "aria-hidden": "true",
+      role: "img",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "circle",
+          {
+            cx: "50%",
+            cy: "50%",
+            r: radius,
+            strokeWidth,
+            className: "stroke-transparent"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.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
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var _Button = (0, import_react15.forwardRef)(
+  ({
+    children,
+    variant,
+    size,
+    className,
+    disabled,
+    loading,
+    fullWidth,
+    ...props
+  }, ref) => {
+    const classNames2 = (0, import_system19.useClassNames)({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_react_aria_components16.Button,
+      {
+        ...props,
+        ref,
+        className: (0, import_system19.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__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "absolute", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ProgressCycle, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "invisible flex gap-[inherit]", children })
+        ] }) : children
+      }
+    );
+  }
+);
+
+// src/icons/ChevronRight.tsx
+var import_react16 = require("react");
 var import_system20 = require("@marigold/system");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var ChevronDown = (0, import_react15.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_system20.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
+var ChevronRight = (0, import_react16.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_system20.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_system21 = require("@marigold/system");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var ChevronLeft = (0, import_react16.forwardRef)(
+var ChevronLeft = (0, import_react17.forwardRef)(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_system21.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
 );
 
 // src/icons/SortDown.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_system22 = require("@marigold/system");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var SortDown = (0, import_react17.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_system22.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
+var SortDown = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_system22.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
 
 // src/icons/SortUp.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_system23 = require("@marigold/system");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SortUp = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_system23.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
+var SortUp = (0, import_react19.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_system23.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
 
 // src/ComboBox/ComboBox.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var _ComboBox = (0, import_react19.forwardRef)(
+var _ComboBox = (0, import_react20.forwardRef)(
   ({
     variant,
     size,
@@ -1066,7 +1068,7 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_aria_components19 = require("react-aria-components");
 var import_system31 = require("@marigold/system");
 
@@ -1086,9 +1088,9 @@ var import_react_aria_components18 = require("react-aria-components");
 var import_system30 = require("@marigold/system");
 
 // src/Checkbox/Context.tsx
-var import_react20 = require("react");
-var CheckboxGroupContext = (0, import_react20.createContext)(null);
-var useCheckboxGroupContext = () => (0, import_react20.useContext)(CheckboxGroupContext);
+var import_react21 = require("react");
+var CheckboxGroupContext = (0, import_react21.createContext)(null);
+var useCheckboxGroupContext = () => (0, import_react21.useContext)(CheckboxGroupContext);
 
 // src/Checkbox/CheckboxGroup.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -1168,7 +1170,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     }
   );
 };
-var _Checkbox = (0, import_react21.forwardRef)(
+var _Checkbox = (0, import_react22.forwardRef)(
   ({
     error,
     disabled,
@@ -1228,7 +1230,7 @@ var _Checkbox = (0, import_react21.forwardRef)(
 _Checkbox.Group = _CheckboxGroup;
 
 // src/Columns/Columns.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_system32 = require("@marigold/system");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var Columns = ({
@@ -1239,9 +1241,9 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (import_react22.Children.count(children) !== columns.length) {
+  if (import_react23.Children.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${import_react22.Children.count(
+      `Columns: expected ${columns.length} children, got ${import_react23.Children.count(
         children
       )}`
     );
@@ -1255,7 +1257,7 @@ var Columns = ({
         import_system32.gapSpace[space]
       ),
       ...props,
-      children: import_react22.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: import_react23.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "div",
         {
           className: (0, import_system32.cn)(
@@ -1323,7 +1325,7 @@ var Container = ({
 );
 
 // src/Dialog/Dialog.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_aria_components24 = require("react-aria-components");
 var import_system39 = require("@marigold/system");
 
@@ -1392,7 +1394,7 @@ var _Headline = ({
         // possibly set by a <Container>
         import_system37.textAlign[align]
       ),
-      style: { color: color && `var(--color-${color})` },
+      style: { color: (0, import_system37.ensureCssVar)(color) },
       children
     }
   );
@@ -1411,14 +1413,14 @@ var DialogTitle = ({
 };
 
 // src/Dialog/DialogTrigger.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_aria_components23 = require("react-aria-components");
 
 // src/Overlay/Modal.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_aria_components22 = require("react-aria-components");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var _Modal = (0, import_react23.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var _Modal = (0, import_react24.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -1458,7 +1460,7 @@ var _DialogTrigger = ({
     isOpen: open,
     ...rest
   };
-  const children = import_react24.Children.toArray(props.children);
+  const children = import_react25.Children.toArray(props.children);
   const [dialogTrigger, dialog] = children;
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
@@ -1480,7 +1482,7 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var CloseButton = ({ className }) => {
-  const ctx = (0, import_react25.useContext)(import_react_aria_components24.OverlayTriggerStateContext);
+  const ctx = (0, import_react26.useContext)(import_react_aria_components24.OverlayTriggerStateContext);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "button",
     {
@@ -1510,7 +1512,7 @@ var _Dialog = ({
 }) => {
   var _a;
   const classNames2 = (0, import_system39.useClassNames)({ component: "Dialog", variant, size });
-  const state = (0, import_react25.useContext)(import_react_aria_components24.OverlayTriggerStateContext);
+  const state = (0, import_react26.useContext)(import_react_aria_components24.OverlayTriggerStateContext);
   const children = typeof props.children === "function" ? props.children({
     close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
     }
@@ -1645,7 +1647,7 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_aria_components29 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
@@ -1705,7 +1707,7 @@ var _DateInput = ({ variant, size, action, ...props }) => {
 
 // src/DateField/DateField.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var _DateField = (0, import_react26.forwardRef)(
+var _DateField = (0, import_react27.forwardRef)(
   ({
     variant,
     size,
@@ -1738,7 +1740,7 @@ var _DateField = (0, import_react26.forwardRef)(
 );
 
 // src/Calendar/Calendar.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_aria_components36 = require("react-aria-components");
 var import_system51 = require("@marigold/system");
 
@@ -1748,21 +1750,21 @@ var import_system48 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
 var import_system47 = require("@marigold/system");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
-  const state = (0, import_react27.useContext)(import_react_aria_components30.CalendarStateContext);
+  const state = (0, import_react28.useContext)(import_react_aria_components30.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
   const { locale } = (0, import_i18n3.useLocale)();
   const dayFormatter = (0, import_i18n3.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
-  const weekDays = (0, import_react27.useMemo)(() => {
+  const weekDays = (0, import_react28.useMemo)(() => {
     const weekStart = (0, import_date.startOfWeek)((0, import_date.today)(state.timeZone), locale);
     return [...new Array(7).keys()].map((index) => {
       const date = weekStart.add({ days: index });
@@ -1794,7 +1796,7 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_aria_components32 = require("react-aria-components");
 var import_system49 = require("@marigold/system");
 
@@ -1821,7 +1823,7 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react28.useContext)(import_react_aria_components32.CalendarStateContext);
+  const state = (0, import_react29.useContext)(import_react_aria_components32.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = (0, import_system49.useClassNames)({ component: "Select" });
@@ -1884,11 +1886,11 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_aria_components34 = require("react-aria-components");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react29.useContext)(import_react_aria_components34.CalendarStateContext);
+  const state = (0, import_react30.useContext)(import_react_aria_components34.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
@@ -1922,12 +1924,12 @@ var MonthListBox = ({ setSelectedDropdown }) => {
 var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_aria_components35 = require("react-aria-components");
 var import_i18n5 = require("@react-aria/i18n");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react30.useContext)(import_react_aria_components35.CalendarStateContext);
+  const state = (0, import_react31.useContext)(import_react_aria_components35.CalendarStateContext);
   const years = [];
   let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
@@ -1940,8 +1942,8 @@ var YearListBox = ({ setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useEffect)(() => {
+  const activeButtonRef = (0, import_react31.useRef)(null);
+  (0, import_react31.useEffect)(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
       activeButton == null ? void 0 : activeButton.scrollIntoView({
@@ -2008,7 +2010,7 @@ var _Calendar = ({
     ...rest
   };
   const classNames2 = (0, import_system51.useClassNames)({ component: "Calendar" });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react31.useState)();
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react32.useState)();
   const ViewMap = {
     month: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MonthListBox_default, { setSelectedDropdown }),
     year: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(YearListBox_default, { setSelectedDropdown })
@@ -2050,11 +2052,11 @@ var _Calendar = ({
 };
 
 // src/DatePicker/DatePicker.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_react_aria_components37 = require("react-aria-components");
 var import_system52 = require("@marigold/system");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var _DatePicker = import_react32.default.forwardRef(
+var _DatePicker = import_react33.default.forwardRef(
   ({
     dateUnavailable,
     disabled,
@@ -2138,11 +2140,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 );
 
 // src/Link/Link.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_react_aria_components38 = require("react-aria-components");
 var import_system54 = require("@marigold/system");
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var _Link = (0, import_react33.forwardRef)(
+var _Link = (0, import_react34.forwardRef)(
   ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = (0, import_system54.useClassNames)({
       component: "Link",
@@ -2157,9 +2159,9 @@ var _Link = (0, import_react33.forwardRef)(
 var import_system55 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react34 = require("react");
-var ListContext = (0, import_react34.createContext)({});
-var useListContext = () => (0, import_react34.useContext)(ListContext);
+var import_react35 = require("react");
+var ListContext = (0, import_react35.createContext)({});
+var useListContext = () => (0, import_react35.useContext)(ListContext);
 
 // src/List/ListItem.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
@@ -2248,14 +2250,14 @@ var ActionMenu = ({
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_button = require("@react-aria/button");
 var import_system62 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
-var import_react35 = require("react");
-var SectionMessageContext = (0, import_react35.createContext)({});
-var useSectionMessageContext = () => (0, import_react35.useContext)(SectionMessageContext);
+var import_react36 = require("react");
+var SectionMessageContext = (0, import_react36.createContext)({});
+var useSectionMessageContext = () => (0, import_react36.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
 var import_system60 = require("@marigold/system");
@@ -2352,14 +2354,14 @@ var SectionMessage = ({
   onCloseChange,
   ...props
 }) => {
-  const buttonRef = (0, import_react36.useRef)(null);
+  const buttonRef = (0, import_react37.useRef)(null);
   const classNames2 = (0, import_system62.useClassNames)({
     component: "SectionMessage",
     variant,
     size
   });
   const Icon4 = icons[variant];
-  const [internalVisible, setInternalVisible] = (0, import_react36.useState)(true);
+  const [internalVisible, setInternalVisible] = (0, import_react37.useState)(true);
   const isCurrentlyVisible = close != null ? close : internalVisible;
   const { buttonProps } = (0, import_button.useButton)(props, buttonRef);
   const handleClose = () => {
@@ -2413,7 +2415,7 @@ SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_data2 = require("@react-stately/data");
 
 // src/TagGroup/Tag.tsx
@@ -2481,7 +2483,7 @@ var Multiselect = ({
   children,
   ...props
 }) => {
-  const items = import_react37.Children.map(children, ({ props: props2 }) => props2);
+  const items = import_react38.Children.map(children, ({ props: props2 }) => props2);
   const list = (0, import_data2.useListData)({
     initialItems: items,
     initialSelectedKeys: props.defaultSelectedKeys,
@@ -2500,7 +2502,7 @@ var Multiselect = ({
     }
     list.setSelectedKeys(next);
   };
-  const [value, setValue] = (0, import_react37.useState)("");
+  const [value, setValue] = (0, import_react38.useState)("");
   const selectItem = (key) => {
     if (list.selectedKeys !== "all") {
       const next = list.selectedKeys.add(key);
@@ -2541,7 +2543,7 @@ var Multiselect = ({
 Multiselect.Item = Item;
 
 // src/NumberField/NumberField.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_aria_components46 = require("react-aria-components");
 var import_system66 = require("@marigold/system");
 
@@ -2585,7 +2587,7 @@ var _StepButton = ({ direction, className, ...props }) => {
 
 // src/NumberField/NumberField.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
-var _NumberField = (0, import_react38.forwardRef)(
+var _NumberField = (0, import_react39.forwardRef)(
   ({
     variant,
     size,
@@ -2640,7 +2642,7 @@ var _NumberField = (0, import_react38.forwardRef)(
 );
 
 // src/Pagination/Pagination.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/Pagination/Ellipsis.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
@@ -2656,12 +2658,12 @@ var Ellipsis = () => {
 };
 
 // src/Pagination/NavigationButton.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_button2 = require("@react-aria/button");
 var import_system67 = require("@marigold/system");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var NavigationButton = (props) => {
-  const ref = import_react39.default.useRef(null);
+  const ref = import_react40.default.useRef(null);
   const classNames2 = (0, import_system67.useClassNames)({
     component: "Pagination"
   });
@@ -2675,7 +2677,7 @@ var NavigationButton = (props) => {
     position,
     ...rest
   } = props;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (registerRef) {
       registerRef(ref.current);
       return () => registerRef(null);
@@ -2700,18 +2702,18 @@ var NavigationButton = (props) => {
 };
 
 // src/Pagination/PageButton.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_button3 = require("@react-aria/button");
 var import_system68 = require("@marigold/system");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var PageButton = (props) => {
-  const ref = (0, import_react40.useRef)(null);
+  const ref = (0, import_react41.useRef)(null);
   const classNames2 = (0, import_system68.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button3.useButton)(props, ref);
   let { page, selected, registerRef, isDisabled } = props;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (registerRef) {
       registerRef(ref.current);
       return () => registerRef(null);
@@ -2734,7 +2736,7 @@ var PageButton = (props) => {
 };
 
 // src/Pagination/useKeyboardNavigation.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_interactions = require("@react-aria/interactions");
 var NavigationTypes = {
   Prev: "prev",
@@ -2748,14 +2750,14 @@ var useKeyboardNavigation = ({
   onChange = () => {
   }
 }) => {
-  const containerRef = (0, import_react41.useRef)(null);
-  const [focusedItem, setFocusedItem] = (0, import_react41.useState)({
+  const containerRef = (0, import_react42.useRef)(null);
+  const [focusedItem, setFocusedItem] = (0, import_react42.useState)({
     type: "page",
     value: page
   });
-  const navigationItems = (0, import_react41.useRef)([]);
-  const buttonRefs = (0, import_react41.useRef)(/* @__PURE__ */ new Map());
-  const isItemDisabled = (0, import_react41.useCallback)(
+  const navigationItems = (0, import_react42.useRef)([]);
+  const buttonRefs = (0, import_react42.useRef)(/* @__PURE__ */ new Map());
+  const isItemDisabled = (0, import_react42.useCallback)(
     (item) => {
       if (item.type === NavigationTypes.Prev) return page <= 1;
       if (item.type === NavigationTypes.Next) return page >= totalPages;
@@ -2763,7 +2765,7 @@ var useKeyboardNavigation = ({
     },
     [page, totalPages]
   );
-  const findNextFocusableItem = (0, import_react41.useCallback)(
+  const findNextFocusableItem = (0, import_react42.useCallback)(
     (current, direction) => {
       const items = navigationItems.current.filter(
         (item) => !isItemDisabled(item)
@@ -2779,7 +2781,7 @@ var useKeyboardNavigation = ({
     },
     [isItemDisabled, page]
   );
-  const focusItem = (0, import_react41.useCallback)(
+  const focusItem = (0, import_react42.useCallback)(
     (item) => {
       if (isItemDisabled(item)) return;
       const key = `${item.type}-${item.value}`;
@@ -2826,7 +2828,7 @@ var useKeyboardNavigation = ({
       }
     }
   });
-  const registerRef = (0, import_react41.useCallback)(
+  const registerRef = (0, import_react42.useCallback)(
     (type, value, ref) => {
       const key = `${type}-${value}`;
       if (ref) {
@@ -2837,7 +2839,7 @@ var useKeyboardNavigation = ({
     },
     []
   );
-  const setNavigationItems = (0, import_react41.useCallback)((items) => {
+  const setNavigationItems = (0, import_react42.useCallback)((items) => {
     navigationItems.current = items;
   }, []);
   return {
@@ -2890,10 +2892,10 @@ var _Pagination = ({
   },
   controlLabels
 }) => {
-  const [currentPage, setCurrentPage] = (0, import_react42.useState)(page != null ? page : defaultPage);
+  const [currentPage, setCurrentPage] = (0, import_react43.useState)(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
-  const isFirstRender = (0, import_react42.useRef)(true);
-  (0, import_react42.useEffect)(() => {
+  const isFirstRender = (0, import_react43.useRef)(true);
+  (0, import_react43.useEffect)(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -2910,7 +2912,7 @@ var _Pagination = ({
     onChange: handlePageChange
   });
   const pageRange = usePageRange({ currentPage, totalPages });
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const items = [
       { type: NavigationTypes.Prev, value: currentPage - 1 },
       ...pageRange.map((value) => ({
@@ -2921,7 +2923,7 @@ var _Pagination = ({
     ];
     setNavigationItems(items);
   }, [pageRange, currentPage, setNavigationItems]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     setFocusedItem({ type: NavigationTypes.Page, value: currentPage });
   }, [currentPage, setFocusedItem]);
   const isFirstPage = currentPage === 1;
@@ -2975,16 +2977,16 @@ var _Pagination = ({
 };
 
 // src/Radio/Radio.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_react_aria_components48 = require("react-aria-components");
 var import_system70 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react43 = require("react");
-var RadioGroupContext = (0, import_react43.createContext)(
+var import_react44 = require("react");
+var RadioGroupContext = (0, import_react44.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react43.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react44.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 var import_react_aria_components47 = require("react-aria-components");
@@ -3057,7 +3059,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx
     children: checked ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react44.forwardRef)(
+var _Radio = (0, import_react45.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
     const classNames2 = (0, import_system70.useClassNames)({
@@ -3098,10 +3100,10 @@ var _Radio = (0, import_react44.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_react_aria_components49 = require("react-aria-components");
 var import_jsx_runtime85 = require("react/jsx-runtime");
-var _SearchField = (0, import_react45.forwardRef)(
+var _SearchField = (0, import_react46.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -3121,11 +3123,11 @@ var _SearchField = (0, import_react45.forwardRef)(
 );
 
 // src/Select/Select.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_react_aria_components50 = require("react-aria-components");
 var import_system71 = require("@marigold/system");
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var _Select = (0, import_react46.forwardRef)(
+var _Select = (0, import_react47.forwardRef)(
   ({
     disabled,
     required,
@@ -3168,23 +3170,23 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_react_aria_components52 = require("react-aria-components");
 var import_system73 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react47 = require("react");
-var SelectListContext = (0, import_react47.createContext)(
+var import_react48 = require("react");
+var SelectListContext = (0, import_react48.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react47.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react48.useContext)(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_react_aria_components51 = require("react-aria-components");
 var import_system72 = require("@marigold/system");
 var import_jsx_runtime87 = require("react/jsx-runtime");
-var _SelectListItem = (0, import_react48.forwardRef)(
+var _SelectListItem = (0, import_react49.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
@@ -3209,7 +3211,7 @@ var _SelectListItem = (0, import_react48.forwardRef)(
 
 // src/SelectList/SelectList.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
-var _SelectList = (0, import_react49.forwardRef)(
+var _SelectList = (0, import_react50.forwardRef)(
   ({ onChange, ...rest }, ref) => {
     const classNames2 = (0, import_system73.useClassNames)({ component: "ListBox" });
     const props = {
@@ -3252,11 +3254,11 @@ var Scrollable = ({
 );
 
 // src/Slider/Slider.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_react_aria_components53 = require("react-aria-components");
 var import_system75 = require("@marigold/system");
 var import_jsx_runtime90 = require("react/jsx-runtime");
-var _Slider = (0, import_react50.forwardRef)(
+var _Slider = (0, import_react51.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -3368,11 +3370,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_react_aria_components54 = require("react-aria-components");
 var import_system77 = require("@marigold/system");
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var _Switch = (0, import_react51.forwardRef)(
+var _Switch = (0, import_react52.forwardRef)(
   ({
     variant,
     size,
@@ -3432,24 +3434,28 @@ var _Switch = (0, import_react51.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
 var import_system83 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react52 = require("react");
-var TableContext = (0, import_react52.createContext)({});
-var useTableContext = () => (0, import_react52.useContext)(TableContext);
+var import_react53 = require("react");
+var TableContext = (0, import_react53.createContext)({});
+var useTableContext = () => (0, import_react53.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
 var import_jsx_runtime94 = require("react/jsx-runtime");
-var TableBody = ({ children, emptyState }) => {
+var TableBody = ({
+  children,
+  className,
+  emptyState
+}) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
   const { state, classNames: classNames2 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tbody", { className, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       "td",
       {
         className: classNames2 == null ? void 0 : classNames2.cell,
@@ -3459,18 +3465,18 @@ var TableBody = ({ children, emptyState }) => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tbody", { ...rowGroupProps, className, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_focus = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils = require("@react-aria/utils");
 var import_system78 = require("@marigold/system");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react53.useRef)(null);
+  const ref = (0, import_react54.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3505,7 +3511,7 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_focus2 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils2 = require("@react-aria/utils");
@@ -3534,7 +3540,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react54.useRef)(null);
+  const ref = (0, import_react55.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3562,7 +3568,7 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
@@ -3575,7 +3581,7 @@ var TableColumnHeader = ({
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react55.useRef)(null);
+  const ref = (0, import_react56.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3623,18 +3629,22 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_table6 = require("@react-aria/table");
 var import_jsx_runtime99 = require("react/jsx-runtime");
-var TableHeaderRow = ({ item, children }) => {
+var TableHeaderRow = ({
+  item,
+  className,
+  children
+}) => {
   const { state } = useTableContext();
-  const ref = (0, import_react56.useRef)(null);
+  const ref = (0, import_react57.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_focus4 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
@@ -3642,7 +3652,7 @@ var import_utils5 = require("@react-aria/utils");
 var import_system81 = require("@marigold/system");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react57.useRef)(null);
+  const ref = (0, import_react58.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
   const classNames2 = (0, import_system81.useClassNames)({
@@ -3688,7 +3698,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_focus5 = require("@react-aria/focus");
 var import_interactions4 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
@@ -3700,7 +3710,7 @@ var TableSelectAllCell = ({
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react58.useRef)(null);
+  const ref = (0, import_react59.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3742,7 +3752,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react59.useRef)(null);
+  const tableRef = (0, import_react60.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3775,29 +3785,37 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(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__ */ (0, import_jsx_runtime102.jsx)(
-                  TableSelectAllCell,
-                  {
-                    width: (_b = column.props) == null ? void 0 : _b.width,
-                    column,
-                    align: (_c = column.props) == null ? void 0 : _c.align
-                  },
-                  column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-                  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__ */ (0, import_jsx_runtime102.jsxs)(TableBody, { emptyState, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+              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__ */ (0, import_jsx_runtime102.jsx)(
+                      TableSelectAllCell,
+                      {
+                        width: (_b = column.props) == null ? void 0 : _b.width,
+                        column,
+                        align: (_c = column.props) == null ? void 0 : _c.align
+                      },
+                      column.key
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                      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__ */ (0, import_jsx_runtime102.jsxs)(TableBody, { className: classNames2.body, emptyState, children: [
               ...collection.rows.map(
                 (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
@@ -3864,18 +3882,18 @@ var _Text = ({
         weight && import_system84.fontWeight[weight],
         fontSize && import_system84.textSize[fontSize]
       ),
-      style: { color: color && `var(--color-${color})` },
+      style: { color: (0, import_system84.ensureCssVar)(color) },
       children
     }
   );
 };
 
 // src/TextArea/TextArea.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_react_aria_components56 = require("react-aria-components");
 var import_system85 = require("@marigold/system");
 var import_jsx_runtime104 = require("react/jsx-runtime");
-var _TextArea = (0, import_react60.forwardRef)(
+var _TextArea = (0, import_react61.forwardRef)(
   ({
     variant,
     size,
@@ -3899,10 +3917,10 @@ var _TextArea = (0, import_react60.forwardRef)(
 );
 
 // src/TextField/TextField.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_react_aria_components57 = require("react-aria-components");
 var import_jsx_runtime105 = require("react/jsx-runtime");
-var _TextField = (0, import_react61.forwardRef)(
+var _TextField = (0, import_react62.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -3997,7 +4015,7 @@ _Tooltip.Trigger = _TooltipTrigger;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_react_aria_components61 = require("react-aria-components");
 var import_system89 = require("@marigold/system");
 
@@ -4254,7 +4272,7 @@ var BaseLoader = ({
 // src/XLoader/XLoader.tsx
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var LoaderFullScreen = (props) => {
-  const id = (0, import_react62.useId)();
+  const id = (0, import_react63.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_react_aria_components61.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_react_aria_components61.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
@@ -4272,9 +4290,9 @@ var import_react_aria_components65 = require("react-aria-components");
 var import_system92 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react63 = require("react");
-var TabContext = (0, import_react63.createContext)({});
-var useTabContext = () => (0, import_react63.useContext)(TabContext);
+var import_react64 = require("react");
+var TabContext = (0, import_react64.createContext)({});
+var useTabContext = () => (0, import_react64.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
 var import_react_aria_components62 = require("react-aria-components");