@marigold/components 7.1.0 → 7.3.0

package/dist/index.mjs

@@ -219,7 +219,15 @@ var Accordion = ({ children, ...props }) => {
     selectionMode: "single",
     ...ownProps
   });
-  const { accordionProps } = useAccordion({ ...ownProps }, state, ref);
+  const { accordionProps } = useAccordion(
+    /**
+     * Disable "cmd+a" (open all) hotkey for now, since it will not work
+     * with forms inside the accordion. (see DSTSUP-22)
+     */
+    { ...ownProps, disallowSelectAll: true },
+    state,
+    ref
+  );
   delete accordionProps.onKeyDownCapture;
   return /* @__PURE__ */ jsx4("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx4(
     AccordionItem,
@@ -312,45 +320,40 @@ import { cn as cn6, width as twWidth, useClassNames as useClassNames4 } from "@m
 import { FieldError, Text } from "react-aria-components";
 import { cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Icon = ({ className }) => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    className: cn4("h-4 w-4 shrink-0", className),
+    viewBox: "0 0 24 24",
+    role: "presentation",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx7("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 = ({
   variant,
   size,
   description,
-  error,
   errorMessage,
   ...props
 }) => {
-  const hasErrorMessage = errorMessage && error;
   const classNames2 = useClassNames2({
     component: "HelpText",
     variant,
     size
   });
-  if (!description && !errorMessage) {
-    return null;
-  }
   return /* @__PURE__ */ jsxs3("div", { className: cn4(classNames2.container), children: [
-    /* @__PURE__ */ jsxs3(
-      FieldError,
-      {
-        ...props,
-        className: "grid grid-flow-col items-center justify-start gap-1",
-        children: [
-          /* @__PURE__ */ jsx7(
-            "svg",
-            {
-              className: cn4("h-4 w-4", classNames2.icon),
-              viewBox: "0 0 24 24",
-              role: "presentation",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsx7("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" })
-            }
-          ),
-          errorMessage
-        ]
-      }
-    ),
-    !hasErrorMessage && /* @__PURE__ */ jsx7(Text, { slot: "description", children: description })
+    /* @__PURE__ */ jsx7(FieldError, { ...props, className: "peer/error flex flex-col", children: (validation) => {
+      const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
+      return Array.isArray(messages) ? messages.map((msg) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ jsx7(Icon, { className: classNames2.icon }),
+        msg
+      ] })) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ jsx7(Icon, { className: classNames2.icon }),
+        messages
+      ] });
+    } }),
+    /* @__PURE__ */ jsx7(Text, { slot: "description", className: "peer-first/error:hidden", children: description })
   ] });
 };
 
@@ -434,8 +437,7 @@ var _FieldBase = (props, ref) => {
             variant,
             size,
             description,
-            errorMessage,
-            error: props.isInvalid
+            errorMessage
           }
         )
       ]
@@ -563,12 +565,48 @@ _ListBox.Section = _Section;
 // src/Overlay/Popover.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { Popover } from "react-aria-components";
-import { cn as cn11, useClassNames as useClassNames8, useSmallScreen, useTheme } from "@marigold/system";
+import { cn as cn11, useClassNames as useClassNames8, useSmallScreen } from "@marigold/system";
+
+// src/Provider/OverlayContainerProvider.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { useIsSSR } from "@react-aria/ssr";
+var OverlayContainerContext = createContext3(void 0);
+var OverlayContainerProvider = OverlayContainerContext.Provider;
+var usePortalContainer = () => {
+  const portalContainer = useContext3(OverlayContainerContext);
+  const isSSR = useIsSSR();
+  const portal = isSSR ? null : portalContainer ? document.getElementById(portalContainer) : document.body;
+  return portal;
+};
 
 // src/Overlay/Underlay.tsx
 import { ModalOverlay } from "react-aria-components";
 import { cn as cn10, useClassNames as useClassNames7 } from "@marigold/system";
+
+// src/Provider/index.ts
+import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigold/system";
+import { I18nProvider } from "@react-aria/i18n";
+
+// src/Provider/MarigoldProvider.tsx
+import { OverlayProvider } from "@react-aria/overlays";
+import {
+  ThemeProvider,
+  defaultTheme,
+  useTheme
+} from "@marigold/system";
 import { jsx as jsx15 } from "react/jsx-runtime";
+function MarigoldProvider({
+  children,
+  theme,
+  portalContainer
+}) {
+  const outerTheme = useTheme();
+  const isTopLevel = outerTheme === defaultTheme;
+  return /* @__PURE__ */ jsx15(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx15(OverlayContainerProvider, { value: portalContainer, children: /* @__PURE__ */ jsx15(OverlayProvider, { children }) }) : children });
+}
+
+// src/Overlay/Underlay.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Underlay = ({
   size,
   variant,
@@ -584,7 +622,8 @@ var Underlay = ({
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx15(
+  const portal = usePortalContainer();
+  return /* @__PURE__ */ jsx16(
     ModalOverlay,
     {
       className: ({ isEntering, isExiting }) => cn10(
@@ -595,15 +634,16 @@ var Underlay = ({
       ),
       ...props,
       "data-testid": "underlay-id",
+      UNSTABLE_portalContainer: portal,
       children: props.children
     }
   );
 };
 
 // src/Overlay/Popover.tsx
-import { Fragment, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var _Popover = forwardRef6(
-  ({ keyboardDismissDisabled, placement, open, children, ...rest }, ref) => {
+  ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
       isKeyboardDismissDisabled: keyboardDismissDisabled,
       isOpen: open,
@@ -614,13 +654,13 @@ var _Popover = forwardRef6(
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
-      className: "w-[--trigger-width]"
+      className: "min-w-[--trigger-width]"
     });
     const isSmallScreen = useSmallScreen();
-    const theme = useTheme();
-    return /* @__PURE__ */ jsx16(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-      /* @__PURE__ */ jsx16(Underlay, { open, variant: "modal" }),
-      /* @__PURE__ */ jsx16(
+    const portal = usePortalContainer();
+    return /* @__PURE__ */ jsx17(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx17(Underlay, { open, variant: "modal" }),
+      /* @__PURE__ */ jsx17(
         Popover,
         {
           ref,
@@ -628,18 +668,18 @@ var _Popover = forwardRef6(
           className: cn11(
             "!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col"
           ),
-          "data-theme": theme.name,
+          UNSTABLE_portalContainer: portal,
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx16(
+    ] }) : /* @__PURE__ */ jsx17(
       Popover,
       {
         ref,
         ...props,
         className: classNames2,
         offset: 0,
-        "data-theme": theme.name,
+        UNSTABLE_portalContainer: portal,
         children
       }
     ) });
@@ -655,7 +695,7 @@ import { cn as cn13 } from "@marigold/system";
 import { forwardRef as forwardRef7 } from "react";
 import { Button } from "react-aria-components";
 import { cn as cn12, useClassNames as useClassNames9 } from "@marigold/system";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var _Button = forwardRef7(
   ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
     const classNames2 = useClassNames9({
@@ -664,7 +704,7 @@ var _Button = forwardRef7(
       size,
       className
     });
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       Button,
       {
         ...props,
@@ -682,20 +722,27 @@ var _Button = forwardRef7(
 );
 
 // src/Autocomplete/ClearButton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var AutocompleteClearButton = ({ className }) => {
+import { jsx as jsx19 } from "react/jsx-runtime";
+var AutocompleteClearButton = ({
+  className,
+  onClear
+}) => {
   let state = React.useContext(ComboBoxStateContext);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     _Button,
     {
       "aria-label": "Clear",
-      onPress: () => state == null ? void 0 : state.setInputValue(""),
+      "data-testid": "clear-button",
+      onPress: () => {
+        state == null ? void 0 : state.setInputValue("");
+        onClear == null ? void 0 : onClear();
+      },
       variant: "icon",
       className: cn13(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       ),
-      children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ jsx19(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -703,7 +750,7 @@ var AutocompleteClearButton = ({ className }) => {
           fill: "currentColor",
           width: 20,
           height: 20,
-          children: /* @__PURE__ */ jsx18("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__ */ jsx19("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" })
         }
       )
     }
@@ -711,15 +758,15 @@ var AutocompleteClearButton = ({ className }) => {
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
-var SearchInput = ({ onSubmit, ref }) => {
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+var SearchInput = ({ onSubmit, onClear, ref }) => {
   const state = React2.useContext(ComboBoxStateContext2);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     _Input,
     {
       ref,
-      icon: /* @__PURE__ */ jsx19(SearchIcon, {}),
-      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ jsx19(AutocompleteClearButton, {}) : void 0,
+      icon: /* @__PURE__ */ jsx20(SearchIcon, {}),
+      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ jsx20(AutocompleteClearButton, { onClear }) : void 0,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === "Escape") {
           e.preventDefault();
@@ -733,7 +780,7 @@ var SearchInput = ({ onSubmit, ref }) => {
     }
   );
 };
-var SearchIcon = (props) => /* @__PURE__ */ jsx19(
+var SearchIcon = (props) => /* @__PURE__ */ jsx20(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -742,7 +789,7 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx19(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx19("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__ */ jsx20("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 _Autocomplete = forwardRef8(
@@ -751,6 +798,7 @@ var _Autocomplete = forwardRef8(
     defaultValue,
     value,
     onChange,
+    onClear,
     onSubmit,
     disabled,
     error,
@@ -770,9 +818,9 @@ var _Autocomplete = forwardRef8(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx19(Fragment2, { children: /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ...props, children: [
-      /* @__PURE__ */ jsx19(SearchInput, { onSubmit, ref }),
-      /* @__PURE__ */ jsx19(_Popover, { children: /* @__PURE__ */ jsx19(_ListBox, { children }) })
+    return /* @__PURE__ */ jsx20(Fragment2, { children: /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ...props, children: [
+      /* @__PURE__ */ jsx20(SearchInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ jsx20(_Popover, { children: /* @__PURE__ */ jsx20(_ListBox, { children }) })
     ] }) });
   }
 );
@@ -781,7 +829,7 @@ _Autocomplete.Item = _ListBox.Item;
 // src/ComboBox/ComboBox.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { ComboBox as ComboBox2 } from "react-aria-components";
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var _ComboBox = forwardRef9(
   ({
     variant,
@@ -807,13 +855,13 @@ var _ComboBox = forwardRef9(
       ...rest
     };
     return /* @__PURE__ */ jsxs9(FieldBase, { as: ComboBox2, ref, ...props, children: [
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21(
         _Input,
         {
-          action: /* @__PURE__ */ jsx20(_Button, { className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0", children: /* @__PURE__ */ jsx20(ChevronDown, { className: "h-4 w-4" }) })
+          action: /* @__PURE__ */ jsx21(_Button, { className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0", children: /* @__PURE__ */ jsx21(ChevronDown, { className: "h-4 w-4" }) })
         }
       ),
-      /* @__PURE__ */ jsx20(_Popover, { children: /* @__PURE__ */ jsx20(_ListBox, { children }) })
+      /* @__PURE__ */ jsx21(_Popover, { children: /* @__PURE__ */ jsx21(_ListBox, { children }) })
     ] });
   }
 );
@@ -821,15 +869,15 @@ _ComboBox.Item = _ListBox.Item;
 
 // src/Badge/Badge.tsx
 import { useClassNames as useClassNames10 } from "@marigold/system";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = useClassNames10({ component: "Badge", variant, size });
-  return /* @__PURE__ */ jsx21("div", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx22("div", { ...props, className: classNames2, children });
 };
 
 // src/Breakout/Breakout.tsx
 import { alignment, cn as cn14, createVar as createVar4 } from "@marigold/system";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Breakout = ({
   height,
   children,
@@ -839,7 +887,7 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn14(
@@ -858,10 +906,10 @@ var Breakout = ({
 
 // src/Body/Body.tsx
 import { useClassNames as useClassNames11 } from "@marigold/system";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames11({ component: "Body", variant, size });
-  return /* @__PURE__ */ jsx23("section", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx24("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
@@ -877,7 +925,7 @@ import {
   paddingTop,
   useClassNames as useClassNames12
 } from "@marigold/system";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Card = ({
   children,
   variant,
@@ -893,7 +941,7 @@ var Card = ({
   ...props
 }) => {
   const classNames2 = useClassNames12({ component: "Card", variant, size });
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...props,
@@ -916,14 +964,14 @@ var Card = ({
 
 // src/Center/Center.tsx
 import { cn as cn16, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       ...props,
@@ -942,8 +990,8 @@ var Center = ({
 import { forwardRef as forwardRef10 } from "react";
 import { Checkbox } from "react-aria-components";
 import { cn as cn17, useClassNames as useClassNames13 } from "@marigold/system";
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
-var CheckMark = () => /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx26(
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+var CheckMark = () => /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx27(
   "path",
   {
     fill: "currentColor",
@@ -951,7 +999,7 @@ var CheckMark = () => /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 12 10", child
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ) });
-var IndeterminateMark = () => /* @__PURE__ */ jsx26("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx26(
+var IndeterminateMark = () => /* @__PURE__ */ jsx27("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx27(
   "path",
   {
     fill: "currentColor",
@@ -959,8 +1007,8 @@ var IndeterminateMark = () => /* @__PURE__ */ jsx26("svg", { width: "12", height
     d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
   }
 ) });
-var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ jsx26(
+var Icon2 = ({ className, checked, indeterminate, ...props }) => {
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       "aria-hidden": "true",
@@ -972,7 +1020,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ jsx26(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx26(CheckMark, {}) : null
+      children: indeterminate ? /* @__PURE__ */ jsx27(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx27(CheckMark, {}) : null
     }
   );
 };
@@ -1002,7 +1050,7 @@ var _Checkbox = forwardRef10(
       ...rest
     };
     const classNames2 = useClassNames13({ component: "Checkbox", variant, size });
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       Checkbox,
       {
         ref,
@@ -1013,15 +1061,15 @@ var _Checkbox = forwardRef10(
         ),
         ...props,
         children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
-          /* @__PURE__ */ jsx26(
-            Icon,
+          /* @__PURE__ */ jsx27(
+            Icon2,
             {
               checked: isSelected,
               indeterminate: isIndeterminate,
               className: classNames2.checkbox
             }
           ),
-          /* @__PURE__ */ jsx26("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx27("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -1031,7 +1079,7 @@ var _Checkbox = forwardRef10(
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
 import { useClassNames as useClassNames14 } from "@marigold/system";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1056,13 +1104,13 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx27(FieldBase, { as: CheckboxGroup, ...props, children });
+  return /* @__PURE__ */ jsx28(FieldBase, { as: CheckboxGroup, ...props, children });
 };
 
 // src/Columns/Columns.tsx
 import { Children as Children3 } from "react";
 import { cn as cn18, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1078,7 +1126,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       className: cn18(
@@ -1087,7 +1135,7 @@ var Columns = ({
         gapSpace4[space]
       ),
       ...props,
-      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx28(
+      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx29(
         "div",
         {
           className: cn18(
@@ -1109,7 +1157,7 @@ import {
   gridColumn,
   placeItems
 } from "@marigold/system";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1129,7 +1177,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       ...props,
@@ -1146,7 +1194,7 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { useContext as useContext3 } from "react";
+import { useContext as useContext4 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
 import { cn as cn21, useClassNames as useClassNames16 } from "@marigold/system";
 
@@ -1155,12 +1203,12 @@ import { Heading } from "react-aria-components";
 import {
   cn as cn20,
   createVar as createVar8,
-  get,
+  getColor,
   textAlign,
   useClassNames as useClassNames15,
-  useTheme as useTheme2
+  useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
   size,
@@ -1170,22 +1218,22 @@ var _Headline = ({
   level = 1,
   ...props
 }) => {
-  const theme = useTheme2();
+  const theme = useTheme3();
   const classNames2 = useClassNames15({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Heading,
     {
       level: Number(level),
       ...props,
       className: cn20(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
-        color: color && theme.colors && get(
-          theme.colors,
-          color.replace("-", "."),
+        color: color && getColor(
+          theme,
+          color,
           color
           /* fallback */
         )
@@ -1202,30 +1250,28 @@ import { DialogTrigger } from "react-aria-components";
 // src/Overlay/Modal.tsx
 import { forwardRef as forwardRef11 } from "react";
 import { Modal } from "react-aria-components";
-import { useTheme as useTheme3 } from "@marigold/system";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var _Modal = forwardRef11(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
-  const theme = useTheme3();
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ jsx31(Modal, { ref, "data-theme": theme.name, ...props, children: props.children })
+      children: /* @__PURE__ */ jsx32(Modal, { ref, ...props, children: props.children })
     }
   );
 });
 
 // src/Dialog/DialogTrigger.tsx
-import { jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -1242,10 +1288,10 @@ var _DialogTrigger = ({
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
   if (isNonModal)
-    return /* @__PURE__ */ jsx32(DialogTrigger, { ...props, children: props.children });
+    return /* @__PURE__ */ jsx33(DialogTrigger, { ...props, children: props.children });
   return /* @__PURE__ */ jsxs11(DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       _Modal,
       {
         dismissable,
@@ -1257,10 +1303,10 @@ var _DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs12 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
-  const { close } = useContext3(OverlayTriggerStateContext);
-  return /* @__PURE__ */ jsx33("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx33(
+  const { close } = useContext4(OverlayTriggerStateContext);
+  return /* @__PURE__ */ jsx34("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx34(
     "button",
     {
       className: cn21(
@@ -1268,7 +1314,7 @@ var CloseButton = ({ className }) => {
         className
       ),
       onClick: close,
-      children: /* @__PURE__ */ jsx33("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx34(
         "path",
         {
           fillRule: "evenodd",
@@ -1279,7 +1325,7 @@ var CloseButton = ({ className }) => {
     }
   ) });
 };
-var DialogHeadline = ({ children }) => /* @__PURE__ */ jsx33(_Headline, { slot: "title", children });
+var DialogHeadline = ({ children }) => /* @__PURE__ */ jsx34(_Headline, { slot: "title", children });
 var _Dialog = ({
   variant,
   size,
@@ -1288,7 +1334,7 @@ var _Dialog = ({
   ...props
 }) => {
   const classNames2 = useClassNames16({ component: "Dialog", variant, size });
-  let state = useContext3(OverlayTriggerStateContext);
+  let state = useContext4(OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
     children = children({
@@ -1296,13 +1342,13 @@ var _Dialog = ({
       })
     });
   }
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Dialog,
     {
       ...props,
       className: cn21("relative outline-none", classNames2.container),
       children: /* @__PURE__ */ jsxs12(Fragment4, { children: [
-        closeButton && /* @__PURE__ */ jsx33(CloseButton, { className: classNames2.closeButton }),
+        closeButton && /* @__PURE__ */ jsx34(CloseButton, { className: classNames2.closeButton }),
         children
       ] })
     }
@@ -1314,18 +1360,18 @@ _Dialog.Headline = DialogHeadline;
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
 import { useClassNames as useClassNames17 } from "@marigold/system";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = useClassNames17({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx34(Separator, { className: classNames2, ...props });
+  return /* @__PURE__ */ jsx35(Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
 import { useClassNames as useClassNames18 } from "@marigold/system";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames18({ component: "Footer", variant, size });
-  return /* @__PURE__ */ jsx35("footer", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx36("footer", { ...props, className: classNames2, children });
 };
 
 // src/Form/Form.tsx
@@ -1334,14 +1380,14 @@ import { Form } from "react-aria-components";
 // src/Header/Header.tsx
 import { Header } from "react-aria-components";
 import { useClassNames as useClassNames19 } from "@marigold/system";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
   const classNames2 = useClassNames19({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx36(Header, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ jsx37(Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Image/Image.tsx
@@ -1351,7 +1397,7 @@ import {
   objectPosition,
   useClassNames as useClassNames20
 } from "@marigold/system";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1360,7 +1406,7 @@ var Image = ({
   ...props
 }) => {
   const classNames2 = useClassNames20({ component: "Image", variant, size });
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "img",
     {
       ...props,
@@ -1381,7 +1427,7 @@ import {
   cn as cn23,
   gapSpace as gapSpace5
 } from "@marigold/system";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   orientation,
@@ -1391,7 +1437,7 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       ...props,
@@ -1417,9 +1463,9 @@ import { useClassNames as useClassNames21 } from "@marigold/system";
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
 import { cn as cn24 } from "@marigold/system";
-import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     DateSegment,
     {
       ...props,
@@ -1428,7 +1474,7 @@ var _DateSegment = ({ segment, ...props }) => {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
       children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs13(Fragment5, { children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "span",
           {
             "aria-hidden": "true",
@@ -1439,19 +1485,19 @@ var _DateSegment = ({ segment, ...props }) => {
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx39("span", { children: isPlaceholder ? "" : (segment.type === "month" || segment.type === "day") && Number(segment.text) < 10 ? "0" + segment.text : text })
+        /* @__PURE__ */ jsx40("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-import { jsx as jsx40, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size, action, ...props }) => {
   const classNames2 = useClassNames21({ component: "DateField", variant, size });
   return /* @__PURE__ */ jsxs14(Group, { className: classNames2.field, children: [
-    /* @__PURE__ */ jsx40(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx40(_DateSegment, { className: classNames2.segment, segment }) }),
-    action ? action : /* @__PURE__ */ jsx40("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx41(_DateSegment, { className: classNames2.segment, segment }) }),
+    action ? action : /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx41(
       "svg",
       {
         "data-testid": "action",
@@ -1459,14 +1505,14 @@ var _DateInput = ({ variant, size, action, ...props }) => {
         viewBox: "0 0 24 24",
         width: 24,
         height: 24,
-        children: /* @__PURE__ */ jsx40("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+        children: /* @__PURE__ */ jsx41("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
       }
     ) })
   ] });
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var _DateField = forwardRef12(
   ({
     variant,
@@ -1485,7 +1531,7 @@ var _DateField = forwardRef12(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       FieldBase,
       {
         as: DateField,
@@ -1493,7 +1539,7 @@ var _DateField = forwardRef12(
         size,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx41(_DateInput, { action })
+        children: /* @__PURE__ */ jsx42(_DateInput, { action })
       }
     );
   }
@@ -1514,14 +1560,14 @@ import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
-import { useContext as useContext4, useMemo } from "react";
+import { useContext as useContext5, 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 useClassNames22 } from "@marigold/system";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
-  const state = useContext4(CalendarStateContext);
+  const state = useContext5(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
   const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
@@ -1537,16 +1583,16 @@ function CalendarGridHeader(props) {
     });
   }, [locale, state.timeZone, dayFormatter]);
   const classNames2 = useClassNames22({ component: "Calendar" });
-  return /* @__PURE__ */ jsx42("thead", { ...headerProps, children: /* @__PURE__ */ jsx42("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx42("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
+  return /* @__PURE__ */ jsx43("thead", { ...headerProps, children: /* @__PURE__ */ jsx43("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx43("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx43, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
   const classNames2 = useClassNames23({ component: "Calendar" });
   return /* @__PURE__ */ jsxs15(CalendarGrid, { className: classNames2.calendarGrid, children: [
-    /* @__PURE__ */ jsx43(CalendarGridHeader, {}),
-    /* @__PURE__ */ jsx43(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx44(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx44(
       CalendarCell,
       {
         date,
@@ -1560,7 +1606,7 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext5 } from "react";
+import { useContext as useContext6 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
 import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
@@ -1582,13 +1628,13 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-import { jsx as jsx44, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext5(CalendarStateContext2);
+  const state = useContext6(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = useClassNames24({ component: "Select" });
@@ -1601,7 +1647,7 @@ function CalendarListBox({
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ jsx44(ChevronDown2, {})
+        /* @__PURE__ */ jsx45(ChevronDown2, {})
       ]
     }
   );
@@ -1611,7 +1657,7 @@ function CalendarListBox({
 import { Button as Button2 } from "react-aria-components";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
 import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
-import { jsx as jsx45, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
 function MonthControls() {
   const classNames2 = useClassNames25({ component: "Calendar" });
   const buttonClassNames = useClassNames25({ component: "Button" });
@@ -1623,7 +1669,7 @@ function MonthControls() {
         classNames2.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           Button2,
           {
             className: cn27(
@@ -1631,10 +1677,10 @@ function MonthControls() {
               buttonClassNames
             ),
             slot: "previous",
-            children: /* @__PURE__ */ jsx45(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx46(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           Button2,
           {
             className: cn27(
@@ -1642,7 +1688,7 @@ function MonthControls() {
               buttonClassNames
             ),
             slot: "next",
-            children: /* @__PURE__ */ jsx45(ChevronRight, {})
+            children: /* @__PURE__ */ jsx46(ChevronRight, {})
           }
         )
       ]
@@ -1652,24 +1698,24 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext6(CalendarStateContext3);
+  const state = useContext7(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     "ul",
     {
       "data-testid": "monthOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: months.map((month, index) => {
-        return /* @__PURE__ */ jsx46("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx46(
+        return /* @__PURE__ */ jsx47("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx47(
           _Button,
           {
             slot: "previous",
@@ -1691,15 +1737,15 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext7,
+  useContext as useContext8,
   useEffect as useEffect2,
   useRef as useRef3
 } from "react";
 import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext7(CalendarStateContext4);
+  const state = useContext8(CalendarStateContext4);
   const years = [];
   let formatter = useDateFormatter3({
     year: "numeric",
@@ -1727,19 +1773,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "ul",
     {
       "data-testid": "yearOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: years.map((year, index) => {
         const isActive = +year.formatted === state.focusedDate.year;
-        return /* @__PURE__ */ jsx47("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx47(
+        return /* @__PURE__ */ jsx48("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx48(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx47(
+            children: /* @__PURE__ */ jsx48(
               _Button,
               {
                 slot: "previous",
@@ -1764,7 +1810,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -1780,21 +1826,21 @@ var _Calendar = ({
   const classNames2 = useClassNames26({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
-    month: /* @__PURE__ */ jsx48(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ jsx48(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ jsx49(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx49(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     Calendar,
     {
       className: cn28(
-        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
+        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
       ...props,
       children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs18(Fragment6, { children: [
         /* @__PURE__ */ jsxs18("div", { className: "mb-4 flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs18("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx49(
               CalendarListBox,
               {
                 type: "month",
@@ -1802,7 +1848,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx49(
               CalendarListBox,
               {
                 type: "year",
@@ -1811,9 +1857,9 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx48(MonthControls_default, {})
+          /* @__PURE__ */ jsx49(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ jsx48(_CalendarGrid, {})
+        /* @__PURE__ */ jsx49(_CalendarGrid, {})
       ] })
     }
   );
@@ -1822,7 +1868,7 @@ var _Calendar = ({
 // src/DatePicker/DatePicker.tsx
 import { DatePicker } from "react-aria-components";
 import { useClassNames as useClassNames27 } from "@marigold/system";
-import { jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
 var _DatePicker = ({
   disabled,
   required,
@@ -1847,16 +1893,16 @@ var _DatePicker = ({
     variant
   });
   return /* @__PURE__ */ jsxs19(FieldBase, { as: DatePicker, variant, size, ...props, children: [
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(
       _DateInput,
       {
-        action: /* @__PURE__ */ jsx49("div", { className: classNames2.container, children: /* @__PURE__ */ jsx49(
+        action: /* @__PURE__ */ jsx50("div", { className: classNames2.container, children: /* @__PURE__ */ jsx50(
           _Button,
           {
             size: "small",
             disabled,
             className: classNames2.button,
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx50(
               "svg",
               {
                 "data-testid": "action",
@@ -1864,14 +1910,14 @@ var _DatePicker = ({
                 width: 24,
                 height: 24,
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx49("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                children: /* @__PURE__ */ jsx50("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
               }
             )
           }
         ) })
       }
     ),
-    /* @__PURE__ */ jsx49(_Popover, { children: /* @__PURE__ */ jsx49(_Calendar, { disabled }) })
+    /* @__PURE__ */ jsx50(_Popover, { children: /* @__PURE__ */ jsx50(_Calendar, { disabled }) })
   ] });
 };
 
@@ -1882,8 +1928,8 @@ import {
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx50(
+import { jsx as jsx51 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx51(
   "div",
   {
     className: cn29(
@@ -1899,7 +1945,7 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx50(
 import { forwardRef as forwardRef13 } from "react";
 import { Link } from "react-aria-components";
 import { useClassNames as useClassNames28 } from "@marigold/system";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var _Link = forwardRef13(
   ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = useClassNames28({
@@ -1907,7 +1953,7 @@ var _Link = forwardRef13(
       variant,
       size
     });
-    return /* @__PURE__ */ jsx51(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx52(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
@@ -1915,19 +1961,19 @@ var _Link = forwardRef13(
 import { useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext3, useContext as useContext8 } from "react";
-var ListContext = createContext3({});
-var useListContext = () => useContext8(ListContext);
+import { createContext as createContext4, useContext as useContext9 } from "react";
+var ListContext = createContext4({});
+var useListContext = () => useContext9(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx52("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx53("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -1937,7 +1983,7 @@ var List = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames29({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx53(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx53(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  return /* @__PURE__ */ jsx54(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx54(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -1948,26 +1994,26 @@ import { useClassNames as useClassNames32 } from "@marigold/system";
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
 import { useClassNames as useClassNames30 } from "@marigold/system";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
   const classNames2 = useClassNames30({ component: "Menu" });
-  return /* @__PURE__ */ jsx54(MenuItem, { ...props, className: classNames2.item, children });
+  return /* @__PURE__ */ jsx55(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { Section as Section2 } from "react-aria-components";
 import { useClassNames as useClassNames31 } from "@marigold/system";
-import { jsx as jsx55, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs20 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
   const className = useClassNames31({ component: "Menu" });
   return /* @__PURE__ */ jsxs20(Section2, { ...props, children: [
-    /* @__PURE__ */ jsx55(_Header, { className: className.section, children: title }),
+    /* @__PURE__ */ jsx56(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx56, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs21 } from "react/jsx-runtime";
 var _Menu = ({
   children,
   label,
@@ -1979,8 +2025,8 @@ var _Menu = ({
 }) => {
   const classNames2 = useClassNames32({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs21(MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ jsx56(_Button, { variant: "menu", disabled, children: label }),
-    /* @__PURE__ */ jsx56(_Popover, { open, children: /* @__PURE__ */ jsx56(Menu, { ...props, className: classNames2.container, children }) })
+    /* @__PURE__ */ jsx57(_Button, { variant: "menu", disabled, children: label }),
+    /* @__PURE__ */ jsx57(_Popover, { open, children: /* @__PURE__ */ jsx57(Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -1989,26 +2035,31 @@ _Menu.Section = _MenuSection;
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
 import { SVG as SVG4, useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
-var ActionMenu = ({ variant, size, ...props }) => {
+import { jsx as jsx58, jsxs as jsxs22 } from "react/jsx-runtime";
+var ActionMenu = ({
+  variant,
+  size,
+  disabled,
+  ...props
+}) => {
   const classNames2 = useClassNames33({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs22(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx57(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx57(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
-    /* @__PURE__ */ jsx57(_Popover, { children: /* @__PURE__ */ jsx57(Menu2, { ...props, className: classNames2.container, children: props.children }) })
+    /* @__PURE__ */ jsx58(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx58(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
+    /* @__PURE__ */ jsx58(_Popover, { children: /* @__PURE__ */ jsx58(Menu2, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/Message/Message.tsx
 import { cn as cn30, useClassNames as useClassNames34 } from "@marigold/system";
-import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs23 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx58(
+  success: () => /* @__PURE__ */ jsx59(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx58(
+      children: /* @__PURE__ */ jsx59(
         "path",
         {
           fillRule: "evenodd",
@@ -2018,13 +2069,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx58(
+  info: () => /* @__PURE__ */ jsx59(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx58(
+      children: /* @__PURE__ */ jsx59(
         "path",
         {
           fillRule: "evenodd",
@@ -2034,13 +2085,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx58(
+  warning: () => /* @__PURE__ */ jsx59(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx58(
+      children: /* @__PURE__ */ jsx59(
         "path",
         {
           fillRule: "evenodd",
@@ -2050,13 +2101,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx58(
+  error: () => /* @__PURE__ */ jsx59(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx58(
+      children: /* @__PURE__ */ jsx59(
         "path",
         {
           fillRule: "evenodd",
@@ -2075,7 +2126,7 @@ var Message = ({
   ...props
 }) => {
   const classNames2 = useClassNames34({ component: "Message", variant, size });
-  const Icon3 = icons[variant];
+  const Icon4 = icons[variant];
   return /* @__PURE__ */ jsxs23(
     "div",
     {
@@ -2085,15 +2136,15 @@ var Message = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx58("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx58(Icon3, {}) }),
-        /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx59("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx59(Icon4, {}) }),
+        /* @__PURE__ */ jsx59(
           "div",
           {
             className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx58("div", { className: cn30("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx59("div", { className: cn30("col-start-2", classNames2.content), children })
       ]
     }
   );
@@ -2107,8 +2158,8 @@ import { cn as cn32, useClassNames as useClassNames35 } from "@marigold/system";
 // src/NumberField/StepButton.tsx
 import { Button as Button3 } from "react-aria-components";
 import { cn as cn31 } from "@marigold/system";
-import { jsx as jsx59 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx59("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx59(
+import { jsx as jsx60 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx60(
   "path",
   {
     fillRule: "evenodd",
@@ -2116,7 +2167,7 @@ var Plus = () => /* @__PURE__ */ jsx59("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx59("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx59(
+var Minus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx60(
   "path",
   {
     fillRule: "evenodd",
@@ -2125,8 +2176,8 @@ var Minus = () => /* @__PURE__ */ jsx59("svg", { width: 16, height: 16, viewBox:
   }
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
-  const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx59(
+  const Icon4 = direction === "up" ? Plus : Minus;
+  return /* @__PURE__ */ jsx60(
     Button3,
     {
       className: cn31(
@@ -2137,13 +2188,13 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx59(Icon3, {})
+      children: /* @__PURE__ */ jsx60(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs24 } from "react/jsx-runtime";
 var _NumberField = forwardRef14(
   ({
     variant,
@@ -2168,8 +2219,8 @@ var _NumberField = forwardRef14(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx60(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs24(Group2, { className: cn32("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx61(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs24(Group2, { className: cn32("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx61(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2177,7 +2228,7 @@ var _NumberField = forwardRef14(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ jsx60("div", { className: "flex-1", children: /* @__PURE__ */ jsx60(
+      /* @__PURE__ */ jsx61("div", { className: "flex-1", children: /* @__PURE__ */ jsx61(
         _Input,
         {
           ref,
@@ -2186,7 +2237,7 @@ var _NumberField = forwardRef14(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ jsx60(
+      showStepper && /* @__PURE__ */ jsx61(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2198,26 +2249,6 @@ var _NumberField = forwardRef14(
   }
 );
 
-// src/Provider/index.ts
-import { useTheme as useTheme5, ThemeProvider as ThemeProvider2 } from "@marigold/system";
-
-// src/Provider/MarigoldProvider.tsx
-import { OverlayProvider } from "@react-aria/overlays";
-import {
-  ThemeProvider,
-  defaultTheme,
-  useTheme as useTheme4
-} from "@marigold/system";
-import { jsx as jsx61 } from "react/jsx-runtime";
-function MarigoldProvider({
-  children,
-  theme
-}) {
-  const outerTheme = useTheme4();
-  const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx61(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx61(OverlayProvider, { children }) : children });
-}
-
 // src/Radio/Radio.tsx
 import {
   forwardRef as forwardRef15
@@ -2226,11 +2257,11 @@ import { Radio } from "react-aria-components";
 import { cn as cn34, useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext4, useContext as useContext9 } from "react";
-var RadioGroupContext = createContext4(
+import { createContext as createContext5, useContext as useContext10 } from "react";
+var RadioGroupContext = createContext5(
   null
 );
-var useRadioGroupContext = () => useContext9(RadioGroupContext);
+var useRadioGroupContext = () => useContext10(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
@@ -2291,7 +2322,7 @@ var _RadioGroup = ({
 // src/Radio/Radio.tsx
 import { Fragment as Fragment7, jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
 var Dot = () => /* @__PURE__ */ jsx63("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx63("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx63(
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx63(
   "div",
   {
     className: cn34(
@@ -2326,7 +2357,7 @@ var _Radio = forwardRef15(
         ...props,
         children: ({ isSelected }) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
           /* @__PURE__ */ jsx63(
-            Icon2,
+            Icon3,
             {
               checked: isSelected,
               className: cn34(
@@ -2424,6 +2455,24 @@ var _Select = forwardRef17(
 _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
+// src/Scrollable/Scrollable.tsx
+import { cn as cn36, createVar as createVar9, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var Scrollable = ({
+  children,
+  width = "full",
+  height,
+  ...props
+}) => /* @__PURE__ */ jsx66(
+  "div",
+  {
+    ...props,
+    className: cn36(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    style: createVar9({ height }),
+    children
+  }
+);
+
 // src/Slider/Slider.tsx
 import { forwardRef as forwardRef18 } from "react";
 import {
@@ -2433,11 +2482,11 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn36,
-  width as twWidth2,
+  cn as cn37,
+  width as twWidth3,
   useClassNames as useClassNames39
 } from "@marigold/system";
-import { jsx as jsx66, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
 var _Slider = forwardRef18(
   ({
     thumbLabels,
@@ -2459,24 +2508,24 @@ var _Slider = forwardRef18(
     return /* @__PURE__ */ jsxs27(
       Slider,
       {
-        className: cn36(
+        className: cn37(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          twWidth2[width]
+          twWidth3[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx66(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx66(SliderOutput, { className: cn36("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx67(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx67(
             SliderTrack,
             {
-              className: cn36("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx66(
+              className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx67(
                 SliderThumb,
                 {
-                  className: cn36("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2491,16 +2540,16 @@ var _Slider = forwardRef18(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx67("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx68 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx68("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn37,
+  cn as cn38,
   gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -2511,10 +2560,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
-      className: cn37(
+      className: cn38(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -2531,11 +2580,11 @@ var Stack = ({
 import { forwardRef as forwardRef19 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn38,
-  width as twWidth3,
+  cn as cn39,
+  width as twWidth4,
   useClassNames as useClassNames40
 } from "@marigold/system";
-import { jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
 var _Switch = forwardRef19(
   ({
     variant,
@@ -2559,25 +2608,25 @@ var _Switch = forwardRef19(
       {
         ...props,
         ref,
-        className: cn38(
-          twWidth3[width],
+        className: cn39(
+          twWidth4[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx69(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx69("div", { className: "relative", children: /* @__PURE__ */ jsx69(
+          /* @__PURE__ */ jsx70(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx70("div", { className: "relative", children: /* @__PURE__ */ jsx70(
             "div",
             {
-              className: cn38(
+              className: cn39(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx69(
+              children: /* @__PURE__ */ jsx70(
                 "div",
                 {
-                  className: cn38(
+                  className: cn39(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2606,19 +2655,19 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn43, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn45, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext5, useContext as useContext10 } from "react";
-var TableContext = createContext5({});
-var useTableContext = () => useContext10(TableContext);
+import { createContext as createContext6, useContext as useContext11 } from "react";
+var TableContext = createContext6({});
+var useTableContext = () => useContext11(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx70("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx71("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -2626,9 +2675,9 @@ import { useRef as useRef4 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { useStateProps as useStateProps2 } from "@marigold/system";
-import { jsx as jsx71 } from "react/jsx-runtime";
-var TableCell = ({ cell, align }) => {
+import { cn as cn40, useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx72 } from "react/jsx-runtime";
+var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef4(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
@@ -2650,11 +2699,11 @@ var TableCell = ({ cell, align }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     "td",
     {
       ref,
-      className: classNames2 == null ? void 0 : classNames2.cell,
+      className: cn40(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -2668,7 +2717,7 @@ import { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn39, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn41, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2691,8 +2740,8 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
-var TableCheckboxCell = ({ cell, align }) => {
+import { jsx as jsx73 } from "react/jsx-runtime";
+var TableCheckboxCell = ({ cell }) => {
   const ref = useRef5(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
@@ -2708,15 +2757,14 @@ var TableCheckboxCell = ({ cell, align }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing3();
   const stateProps = useStateProps3({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     "td",
     {
       ref,
-      className: cn39("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      align,
+      className: cn41("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx72(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx73(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -2728,13 +2776,13 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn40, useStateProps as useStateProps4 } from "@marigold/system";
-import { width as twWidth4 } from "@marigold/system";
-import { jsx as jsx73, jsxs as jsxs29 } from "react/jsx-runtime";
+import { cn as cn42, useStateProps as useStateProps4 } from "@marigold/system";
+import { width as twWidth5 } from "@marigold/system";
+import { jsx as jsx74, jsxs as jsxs29 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto",
-  align
+  align = "left"
 }) => {
   var _a, _b;
   const ref = useRef6(null);
@@ -2757,13 +2805,13 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn40("cursor-default", twWidth4[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn42("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx73(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx73(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx73(SortDown, { className: "inline-block" }))
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx74(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx74(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx74(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -2771,21 +2819,28 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx74 } from "react/jsx-runtime";
-var TableHeader = ({ children }) => {
+import { jsx as jsx75 } from "react/jsx-runtime";
+var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx74("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx75(
+    "thead",
+    {
+      ...rowGroupProps,
+      className: stickyHeader ? "[&_th]:sticky [&_th]:top-0" : "",
+      children
+    }
+  );
 };
 
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef7 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef7(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx75("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx76("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -2794,8 +2849,8 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn41, useClassNames as useClassNames41, useStateProps as useStateProps5 } from "@marigold/system";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { cn as cn43, useClassNames as useClassNames41, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
@@ -2825,11 +2880,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(
     "tr",
     {
       ref,
-      className: cn41(
+      className: cn43(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -2852,15 +2907,15 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn42,
-  width as twWidth5,
+  cn as cn44,
+  width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto",
-  align
+  align = "left"
 }) => {
   const ref = useRef9(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -2878,30 +2933,27 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "th",
     {
       ref,
-      className: cn42(
-        twWidth5[width],
-        ["text-center align-middle leading-none"],
-        classNames2 == null ? void 0 : classNames2.header
-      ),
-      align,
+      className: cn44(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx77(_Checkbox, { ...checkboxProps })
+      align,
+      children: /* @__PURE__ */ jsx78(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx78, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs30 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
   stretch,
   selectionMode = "none",
+  stickyHeader,
   ...props
 }) => {
   const interactive = selectionMode !== "none";
@@ -2919,7 +2971,7 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
@@ -2927,30 +2979,31 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn43(
+          className: cn45(
             "group/table",
-            "border-collapse overflow-auto whitespace-nowrap",
+            "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
             classNames2.table
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx78(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx78(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx79(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx79(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
-                var _a, _b, _c, _d;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx78(
+                var _a, _b, _c, _d, _e;
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx79(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
-                    column
+                    column,
+                    align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx78(
+                ) : /* @__PURE__ */ jsx79(
                   TableColumnHeader,
                   {
-                    width: (_c = column.props) == null ? void 0 : _c.width,
+                    width: (_d = column.props) == null ? void 0 : _d.width,
                     column,
-                    align: (_d = column.props) == null ? void 0 : _d.align
+                    align: (_e = column.props) == null ? void 0 : _e.align
                   },
                   column.key
                 );
@@ -2958,20 +3011,13 @@ var Table = ({
             ) }, headerRow.key)) }),
             /* @__PURE__ */ jsxs30(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx78(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
-                  var _a, _b, _c;
+                (row) => row.type === "item" && /* @__PURE__ */ jsx79(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                  var _a, _b;
                   const currentColumn = collection.columns[index];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx78(
-                    TableCheckboxCell,
-                    {
-                      align: (_b = currentColumn.props) == null ? void 0 : _b.align,
-                      cell
-                    },
-                    cell.key
-                  ) : /* @__PURE__ */ jsx78(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx79(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx79(
                     TableCell,
                     {
-                      align: (_c = currentColumn.props) == null ? void 0 : _c.align,
+                      align: (_b = currentColumn.props) == null ? void 0 : _b.align,
                       cell
                     },
                     cell.key
@@ -2993,18 +3039,18 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn44,
-  createVar as createVar9,
+  cn as cn46,
+  createVar as createVar10,
   cursorStyle,
   fontWeight,
-  get as get2,
+  getColor as getColor2,
   textAlign as textAlign2,
   textSize,
   textStyle,
   useClassNames as useClassNames43,
-  useTheme as useTheme6
+  useTheme as useTheme4
 } from "@marigold/system";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3017,17 +3063,17 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = useTheme6();
+  const theme = useTheme4();
   const classNames2 = useClassNames43({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     "p",
     {
       ...props,
-      className: cn44(
+      className: cn46(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3036,10 +3082,10 @@ var Text2 = ({
         weight && fontWeight[weight],
         fontSize && textSize[fontSize]
       ),
-      style: createVar9({
-        color: color && theme.colors && get2(
-          theme.colors,
-          color.replace("-", "."),
+      style: createVar10({
+        color: color && getColor2(
+          theme,
+          color,
           color
           /* fallback */
         )
@@ -3053,7 +3099,7 @@ var Text2 = ({
 import { forwardRef as forwardRef20 } from "react";
 import { TextArea, TextField } from "react-aria-components";
 import { useClassNames as useClassNames44 } from "@marigold/system";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var _TextArea = forwardRef20(
   ({
     variant,
@@ -3073,14 +3119,14 @@ var _TextArea = forwardRef20(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx80(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx80(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx81(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx81(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 import { forwardRef as forwardRef21 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var _TextField = forwardRef21(
   ({
     variant,
@@ -3098,13 +3144,13 @@ var _TextField = forwardRef21(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx81(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx81(_Input, { ref }) });
+    return /* @__PURE__ */ jsx82(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx82(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn45, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { cn as cn47, createVar as createVar11, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3117,17 +3163,17 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     "div",
     {
       ...props,
-      className: cn45(
+      className: cn47(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: createVar10({ column, tilesWidth }),
+      style: createVar11({ column, tilesWidth }),
       children
     }
   );
@@ -3135,11 +3181,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn46, useClassNames as useClassNames45 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames45 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3153,19 +3199,19 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx83(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx84(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx84, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs31 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
   const classNames2 = useClassNames45({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ jsxs31(Tooltip, { ...props, className: cn46("group/tooltip", classNames2.container), children: [
-    /* @__PURE__ */ jsx84(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx84("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx84("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+  return /* @__PURE__ */ jsxs31(Tooltip, { ...props, className: cn48("group/tooltip", classNames2.container), children: [
+    /* @__PURE__ */ jsx85(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx85("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx85("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 };
@@ -3173,12 +3219,12 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 import { Button as Button5, Tag } from "react-aria-components";
-import { cn as cn47, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn49, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
 import { useClassNames as useClassNames46 } from "@marigold/system";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -3188,23 +3234,23 @@ var _TagGroup = ({
   ...rest
 }) => {
   const classNames2 = useClassNames46({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx85(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx85(TagList, { items, className: classNames2.listItems, children }) });
+  return /* @__PURE__ */ jsx86(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx86(TagList, { items, className: classNames2.listItems, children }) });
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment8, jsx as jsx86, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx87, jsxs as jsxs32 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx86(Button5, { slot: "remove", className, children: /* @__PURE__ */ jsx86("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx86("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__ */ jsx87(Button5, { slot: "remove", className, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
   const classNames2 = useClassNames47({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx86(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs32(Fragment8, { children: [
+  return /* @__PURE__ */ jsx87(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs32(Fragment8, { children: [
     children,
-    allowsRemoving && /* @__PURE__ */ jsx86(
+    allowsRemoving && /* @__PURE__ */ jsx87(
       CloseButton2,
       {
-        className: cn47("flex items-center", classNames2.closeButton)
+        className: cn49("flex items-center", classNames2.closeButton)
       }
     )
   ] }) });
@@ -3217,7 +3263,7 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 // src/XLoader/XLoader.tsx
 import { forwardRef as forwardRef22 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx87, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs33 } from "react/jsx-runtime";
 var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
   SVG5,
   {
@@ -3228,13 +3274,13 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx87("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_5_",
           d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3247,12 +3293,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_18_",
           d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3265,12 +3311,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_19_",
           d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3283,12 +3329,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_20_",
           d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3301,12 +3347,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_21_",
           d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3319,12 +3365,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_22_",
           d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3337,12 +3383,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_23_",
           d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3355,12 +3401,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_24_",
           d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3373,12 +3419,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_25_",
           d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3391,12 +3437,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_26_",
           d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3409,12 +3455,12 @@ var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88(
         "path",
         {
           id: "XMLID_27_",
           d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx87(
+          children: /* @__PURE__ */ jsx88(
             "animate",
             {
               attributeName: "opacity",
@@ -3436,21 +3482,21 @@ import { Tabs } from "react-aria-components";
 import { useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext6, useContext as useContext11 } from "react";
-var TabContext = createContext6({});
-var useTabContext = () => useContext11(TabContext);
+import { createContext as createContext7, useContext as useContext12 } from "react";
+var TabContext = createContext7({});
+var useTabContext = () => useContext12(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn48 } from "@marigold/system";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { cn as cn50 } from "@marigold/system";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89(
     Tab,
     {
       ...props,
-      className: cn48(
+      className: cn50(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3461,15 +3507,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn49, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { cn as cn51, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     TabList,
     {
       ...props,
-      className: cn49("flex", gapSpace8[space], classNames2.tabsList),
+      className: cn51("flex", gapSpace8[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3477,14 +3523,14 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx90(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx91(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
@@ -3495,7 +3541,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     size,
     variant
   });
-  return /* @__PURE__ */ jsx91(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx91(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx92(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -3531,6 +3577,7 @@ export {
   Form,
   _Header as Header,
   _Headline as Headline,
+  I18nProvider,
   Image,
   Inline,
   _Input as Input,
@@ -3543,9 +3590,11 @@ export {
   Message,
   _Modal as Modal,
   _NumberField as NumberField,
+  OverlayContainerProvider,
   _Popover as Popover,
   _Radio as Radio,
   _RadioGroup as RadioGroup,
+  Scrollable,
   _SearchField as SearchField,
   _Select as Select,
   _Slider as Slider,
@@ -3568,5 +3617,6 @@ export {
   useAsyncList,
   useFieldGroupContext,
   useListData,
-  useTheme5 as useTheme
+  usePortalContainer,
+  useTheme2 as useTheme
 };