@marigold/components 10.2.0 → 11.0.0

package/dist/index.js

@@ -57,7 +57,7 @@ __export(index_exports, {
   FieldGroup: () => FieldGroup,
   FieldGroupContext: () => FieldGroupContext,
   Footer: () => Footer,
-  Form: () => import_react_aria_components22.Form,
+  Form: () => import_react_aria_components26.Form,
   Grid: () => Grid,
   Header: () => _Header,
   Headline: () => _Headline,
@@ -79,7 +79,7 @@ __export(index_exports, {
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components62.RouterProvider,
+  RouterProvider: () => import_react_aria_components66.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -95,18 +95,20 @@ __export(index_exports, {
   Text: () => _Text,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
-  ThemeProvider: () => import_system18.ThemeProvider,
+  ThemeProvider: () => import_system16.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => _Tooltip,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   XLoader: () => XLoader,
   _Calendar: () => _Calendar,
+  gridColsAlign: () => gridColsAlign,
+  gridColumn: () => gridColumn,
   useAsyncList: () => import_data.useAsyncList,
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
   usePortalContainer: () => usePortalContainer,
-  useTheme: () => import_system18.useTheme
+  useTheme: () => import_system16.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -114,31 +116,123 @@ module.exports = __toCommonJS(index_exports);
 var import_data = require("@react-stately/data");
 
 // src/Accordion/Accordion.tsx
-var import_react8 = require("react");
-var import_accordion = require("@react-aria/accordion");
-var import_collections = require("@react-stately/collections");
-var import_tree = require("@react-stately/tree");
-
-// src/Accordion/AccordionItem.tsx
-var import_react7 = require("react");
-var import_focus = require("@react-aria/focus");
-var import_utils2 = require("@react-aria/utils");
-var import_system7 = require("@marigold/system");
+var import_react_aria_components6 = require("react-aria-components");
+var import_system5 = require("@marigold/system");
 
-// src/icons/ChevronUp.tsx
+// src/Accordion/AccordionContext.tsx
 var import_react = require("react");
-var import_system = require("@marigold/system");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ChevronUp = (0, import_react.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }) })
-);
+var Context = (0, import_react.createContext)(null);
+var AccordionProvider = Context.Provider;
+var useAccordionContext = () => {
+  const ctx = (0, import_react.useContext)(Context);
+  if (ctx === null) {
+    throw Error(
+      'You can only use "useAccordionContext" within the <Accordion> component.'
+    );
+  }
+  return ctx;
+};
 
-// src/icons/ChevronDown.tsx
+// src/Accordion/AccordionHeading.tsx
+var import_react_aria_components3 = require("react-aria-components");
+var import_system4 = require("@marigold/system");
+
+// src/Button/Button.tsx
 var import_react2 = require("react");
+var import_react_aria_components2 = require("react-aria-components");
 var import_system2 = require("@marigold/system");
+
+// src/ProgressCycle/ProgressCycle.tsx
+var import_react_aria_components = require("react-aria-components");
+var import_system = require("@marigold/system");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ProgressCycle = ({
+  size = "16",
+  ...props
+}) => {
+  let strokeWidth = 3;
+  if (size <= "24") {
+    strokeWidth = 2;
+  } else if (size >= "32") {
+    strokeWidth = 4;
+  }
+  const radius = `calc(50% - ${strokeWidth / 2}px)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_system.SVG,
+    {
+      className: "animate-rotate-spinner origin-center fill-none",
+      size,
+      "aria-hidden": "true",
+      role: "img",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: "50%",
+            cy: "50%",
+            r: radius,
+            strokeWidth,
+            className: "stroke-transparent"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: "50%",
+            cy: "50%",
+            r: radius,
+            strokeWidth,
+            pathLength: "100",
+            strokeDasharray: "100 200",
+            strokeDashoffset: "0",
+            strokeLinecap: "round",
+            className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChevronDown = (0, import_react2.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_system2.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
+var _Button = (0, import_react2.forwardRef)(
+  ({
+    children,
+    variant,
+    size,
+    className,
+    disabled,
+    loading,
+    fullWidth,
+    ...props
+  }, ref) => {
+    const classNames2 = (0, import_system2.useClassNames)({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_aria_components2.Button,
+      {
+        ...props,
+        ref,
+        className: (0, import_system2.cn)(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0,
+          loading && "cursor-progress!"
+        ),
+        isPending: loading,
+        isDisabled: disabled,
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProgressCycle, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "invisible flex gap-[inherit]", children })
+        ] }) : children
+      }
+    );
+  }
 );
 
 // src/icons/ChevronRight.tsx
@@ -149,242 +243,82 @@ var ChevronRight = (0, import_react3.forwardRef)(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_system3.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
 );
 
-// src/icons/ChevronLeft.tsx
-var import_react4 = require("react");
-var import_system4 = require("@marigold/system");
+// src/Accordion/AccordionHeading.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ChevronLeft = (0, import_react4.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_system4.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
-);
-
-// src/icons/SortDown.tsx
-var import_react5 = require("react");
-var import_system5 = require("@marigold/system");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SortDown = (0, import_react5.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_system5.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
-
-// src/icons/SortUp.tsx
-var import_react6 = require("react");
-var import_system6 = require("@marigold/system");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var SortUp = (0, import_react6.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_system6.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
-
-// src/Accordion/useAccordionItem.ts
-var import_button = require("@react-aria/button");
-var import_selection = require("@react-aria/selection");
-var import_utils = require("@react-aria/utils");
-function isNonContiguousSelectionModifier(e) {
-  return (0, import_utils.isAppleDevice)() ? e.altKey : e.ctrlKey;
-}
-function isCtrlKeyPressed(e) {
-  if ((0, import_utils.isMac)()) {
-    return e.metaKey;
-  }
-  return e.ctrlKey;
-}
-function useAccordionItem(props, state, ref) {
-  let { item } = props;
-  let key = item.key;
-  let manager = state.selectionManager;
-  let buttonId = (0, import_utils.useId)();
-  let regionId = (0, import_utils.useId)();
-  let isDisabled = state.disabledKeys.has(item.key);
-  let { itemProps } = (0, import_selection.useSelectableItem)({
-    selectionManager: manager,
-    key,
-    ref
-  });
-  const isDefaultExpanded = state.expandedKeys.has(item.key);
-  let onSelect = (e) => {
-    if (e.pointerType === "keyboard" && isNonContiguousSelectionModifier(e)) {
-      if (isDefaultExpanded) {
-        state.expandedKeys.clear();
-      }
-      manager.toggleSelection(key);
-    } else {
-      if (manager.selectionMode === "none") {
-        return;
-      }
-      if (manager.selectionMode === "single") {
-        if (manager.isSelected(key) && !manager.disallowEmptySelection) {
-          if (isDefaultExpanded) {
-            state.expandedKeys.clear();
-          }
-          manager.toggleSelection(key);
-        } else {
-          if (isDefaultExpanded) {
-            state.expandedKeys.clear();
-          }
-          manager.replaceSelection(key);
-        }
-      } else if (e && e.shiftKey) {
-        if (isDefaultExpanded) {
-          state.expandedKeys.clear();
-        }
-        manager.extendSelection(key);
-      } else if (manager.selectionBehavior === "toggle" || e && (isCtrlKeyPressed(e) || e.pointerType === "touch" || e.pointerType === "virtual")) {
-        if (isDefaultExpanded) {
-          state.expandedKeys.clear();
-          manager.toggleSelection(key);
-        }
-        manager.toggleSelection(key);
-      } else {
-        if (isDefaultExpanded) {
-          state.expandedKeys.clear();
-        }
-        manager.replaceSelection(key);
+var AccordionHeader = ({ children }) => {
+  const { classNames: classNames2 } = useAccordionContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components3.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(_Button, { slot: "trigger", className: (0, import_system4.cn)("group", classNames2.header), children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChevronRight,
+      {
+        className: (0, import_system4.cn)(classNames2.icon, "group-aria-expanded:rotate-90")
       }
-    }
-  };
-  let { buttonProps } = (0, import_button.useButton)(
-    (0, import_utils.mergeProps)(itemProps, {
-      id: buttonId,
-      elementType: "button",
-      isDisabled,
-      // if remove than everything click
-      onPress: onSelect
-    }),
-    ref
-  );
-  return {
-    buttonProps: {
-      ...buttonProps,
-      role: "button",
-      "aria-expanded": manager.isSelected(key) || isDefaultExpanded,
-      "aria-controls": manager.isSelected(key) || isDefaultExpanded ? regionId : void 0
-    },
-    regionProps: {
-      id: regionId,
-      role: "region",
-      "aria-labelledby": buttonId
-    }
-  };
-}
+    )
+  ] }) });
+};
 
 // src/Accordion/AccordionItem.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react_aria_components4 = require("react-aria-components");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var AccordionItem = ({
-  item,
-  state,
-  title,
-  variant,
-  size,
+  children,
+  disabled,
+  expanded,
   ...props
 }) => {
-  const ref = (0, import_react7.useRef)(null);
-  const defaultExpanded = Array.from(state.expandedKeys).some((key) => {
-    return key.toString() === item.key.toString().replace(".$", "");
-  });
-  const expanded = state.selectionManager.isSelected(item.key);
-  (0, import_react7.useEffect)(() => {
-    if (defaultExpanded) {
-      if (state.selectionManager.selectionMode === "multiple") {
-        state.selectionManager.setSelectedKeys([
-          ...state.selectionManager.selectedKeys,
-          item.key
-        ]);
-      } else {
-        state.expandedKeys.clear();
-        state.selectionManager.toggleSelection(item.key);
-      }
-    }
-  }, [defaultExpanded, item.key, state.expandedKeys, state.selectionManager]);
-  const { buttonProps, regionProps } = useAccordionItem(
+  const { classNames: classNames2 } = useAccordionContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_aria_components4.Disclosure,
     {
-      item
-    },
-    state,
-    ref
+      isDisabled: disabled,
+      isExpanded: expanded,
+      className: classNames2.item,
+      ...props,
+      children
+    }
   );
-  const { isFocusVisible, focusProps } = (0, import_focus.useFocusRing)();
-  const stateProps = (0, import_system7.useStateProps)({
-    focus: isFocusVisible,
-    expanded: defaultExpanded || expanded
-  });
-  const classNames2 = (0, import_system7.useClassNames)({ component: "Accordion", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "button",
-      {
-        className: (0, import_system7.cn)(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2.button
-        ),
-        ...(0, import_utils2.mergeProps)(buttonProps, stateProps, props),
-        ref,
-        "aria-label": item.textValue,
-        children: [
-          title,
-          expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDown, { className: "h3 w-6" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "div",
-      {
-        ...(0, import_utils2.mergeProps)(regionProps, focusProps, stateProps),
-        className: expanded || defaultExpanded ? classNames2.item : (0, import_system7.cn)(classNames2.item, "hidden"),
-        children: item.props.children
-      }
-    )
-  ] });
+};
+
+// src/Accordion/AccordionPanel.tsx
+var import_react_aria_components5 = require("react-aria-components");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AccordionPanel = ({ children }) => {
+  const { classNames: classNames2 } = useAccordionContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components5.DisclosurePanel, { className: classNames2.content, children });
 };
 
 // src/Accordion/Accordion.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Accordion = ({ children, ...props }) => {
-  const ownProps = {
-    ...props,
-    // we have to do this because JSX childs are not supported
-    children: []
-  };
-  import_react8.Children.forEach(children, (child) => {
-    var _a;
-    if ((0, import_react8.isValidElement)(child) && typeof ((_a = child.props) == null ? void 0 : _a.children) !== "string") {
-      const clone = (0, import_react8.cloneElement)(child, {
-        hasChildItems: false
-      });
-      ownProps.children.push(clone);
-      return;
-    }
-    ownProps.children.push(child);
-  });
-  const ref = (0, import_react8.useRef)(null);
-  const state = (0, import_tree.useTreeState)({
-    selectionMode: "single",
-    ...ownProps
-  });
-  const { accordionProps } = (0, import_accordion.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__ */ (0, import_jsx_runtime8.jsx)("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    AccordionItem,
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Accordion = ({
+  children,
+  disabled,
+  variant,
+  size,
+  ...props
+}) => {
+  const classNames2 = (0, import_system5.useClassNames)({ component: "Accordion", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccordionProvider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_aria_components6.DisclosureGroup,
     {
-      title: item.props.title,
-      item,
-      state,
-      variant: item.props.variant,
-      size: item.props.size
-    },
-    item.key
-  )) });
+      ...props,
+      isDisabled: disabled,
+      className: classNames2.container,
+      children
+    }
+  ) });
 };
-Accordion.Item = import_collections.Item;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionPanel;
+Accordion.Item = AccordionItem;
 
 // src/Aside/Aside.tsx
-var import_react9 = require("react");
-var import_system8 = require("@marigold/system");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_system6 = require("@marigold/system");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var classNames = {
-  aside: "grow basis-[--sideWidth]",
-  content: "basis-0 grow-[999] [min-inline-size:--wrap]"
+  aside: "grow basis-(--sideWidth)",
+  content: "basis-0 grow-999 [min-inline-size:var(--wrap)]"
 };
 var Aside = ({
   children,
@@ -393,13 +327,13 @@ var Aside = ({
   side = "left",
   wrap = "50%"
 }) => {
-  const [left, right] = import_react9.Children.toArray(children);
+  const [left, right] = import_react4.Children.toArray(children);
   const vars = {
-    aside: (0, import_system8.createVar)({ sideWidth }),
-    content: (0, import_system8.createVar)({ wrap })
+    aside: (0, import_system6.createVar)({ sideWidth }),
+    content: (0, import_system6.createVar)({ wrap })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_system8.cn)("flex flex-wrap", import_system8.gapSpace[space]), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_system6.cn)("flex flex-wrap", import_system6.gapSpace[space]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: classNames[side === "left" ? "aside" : "content"],
@@ -407,7 +341,7 @@ var Aside = ({
         children: left
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: classNames[side === "right" ? "aside" : "content"],
@@ -419,49 +353,49 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-var import_system9 = require("@marigold/system");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_system7 = require("@marigold/system");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
-      className: (0, import_system9.cn)(
+      className: (0, import_system7.cn)(
         "overflow-hidden",
-        import_system9.aspect[ratio],
+        import_system7.aspect[ratio],
         "max-w-[var(--maxWidth)]"
       ),
-      style: (0, import_system9.createVar)({ maxWidth }),
+      style: (0, import_system7.createVar)({ maxWidth }),
       children
     }
   );
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react19 = __toESM(require("react"));
-var import_react_aria_components10 = require("react-aria-components");
-var import_system21 = require("@marigold/system");
+var import_react14 = __toESM(require("react"));
+var import_react_aria_components16 = require("react-aria-components");
+var import_system19 = require("@marigold/system");
 
 // src/FieldBase/FieldBase.tsx
-var import_react12 = require("react");
-var import_system12 = require("@marigold/system");
+var import_react7 = require("react");
+var import_system10 = require("@marigold/system");
 
 // src/HelpText/HelpText.tsx
-var import_react10 = require("react");
-var import_react_aria_components = require("react-aria-components");
-var import_system10 = require("@marigold/system");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Icon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var import_react5 = require("react");
+var import_react_aria_components7 = require("react-aria-components");
+var import_system8 = require("@marigold/system");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Icon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "svg",
   {
-    className: (0, import_system10.cn)("h-4 w-4 shrink-0", className),
+    className: (0, import_system8.cn)("h-4 w-4 shrink-0", className),
     viewBox: "0 0 24 24",
     role: "presentation",
     fill: "currentColor",
-    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
   }
 );
 var HelpText = ({
@@ -471,64 +405,64 @@ var HelpText = ({
   errorMessage,
   ...props
 }) => {
-  const classNames2 = (0, import_system10.useClassNames)({
+  const classNames2 = (0, import_system8.useClassNames)({
     component: "HelpText",
     variant,
     size
   });
-  const ctx = (0, import_react10.useContext)(import_react_aria_components.FieldErrorContext);
+  const ctx = (0, import_react5.useContext)(import_react_aria_components7.FieldErrorContext);
   if (!description && ctx && !ctx.isInvalid) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_system10.cn)(classNames2.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components.FieldError, { ...props, className: "flex flex-col", children: (validation) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_system8.cn)(classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components7.FieldError, { ...props, className: "flex flex-col", children: (validation) => {
       const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
-      return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: classNames2.icon }),
+      return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: classNames2.icon }),
         msg
-      ] }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: classNames2.icon }),
+      ] }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: classNames2.icon }),
         messages
       ] });
     } }),
-    ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components.Text, { slot: "description", children: description })
+    ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components7.Text, { slot: "description", children: description })
   ] });
 };
 
 // src/Label/Label.tsx
-var import_react_aria_components2 = require("react-aria-components");
-var import_system11 = require("@marigold/system");
+var import_react_aria_components8 = require("react-aria-components");
+var import_system9 = require("@marigold/system");
 
 // src/FieldBase/FieldGroup.tsx
-var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FieldGroupContext = (0, import_react11.createContext)({});
-var useFieldGroupContext = () => (0, import_react11.useContext)(FieldGroupContext);
+var import_react6 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FieldGroupContext = (0, import_react6.createContext)({});
+var useFieldGroupContext = () => (0, import_react6.useContext)(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldGroupContext.Provider, { value: { labelWidth }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FieldGroupContext.Provider, { value: { labelWidth }, children });
 };
 
 // src/Label/Label.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var _Label = ({ size, variant, children, ...props }) => {
-  const classNames2 = (0, import_system11.useClassNames)({ component: "Label", size, variant });
+  const classNames2 = (0, import_system9.useClassNames)({ component: "Label", size, variant });
   const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    import_react_aria_components2.Label,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react_aria_components8.Label,
     {
       ...props,
-      className: (0, import_system11.cn)(classNames2.container, "flex w-[var(--labelWidth)]"),
-      style: (0, import_system11.createVar)({ labelWidth }),
+      className: (0, import_system9.cn)(classNames2.container, "flex w-[var(--labelWidth)]"),
+      style: (0, import_system9.createVar)({ labelWidth }),
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_system11.SVG,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_system9.SVG,
           {
             viewBox: "0 0 24 24",
             role: "presentation",
             size: 16,
-            className: (0, import_system11.cn)("hidden", classNames2.indicator),
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
+            className: (0, import_system9.cn)("hidden", classNames2.indicator),
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
           }
         )
       ]
@@ -537,8 +471,8 @@ var _Label = ({ size, variant, children, ...props }) => {
 };
 
 // src/FieldBase/FieldBase.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var fixedForwardRef = import_react12.forwardRef;
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var fixedForwardRef = import_react7.forwardRef;
 var _FieldBase = (props, ref) => {
   const {
     as: Component = "div",
@@ -553,18 +487,18 @@ var _FieldBase = (props, ref) => {
     stateProps,
     ...rest
   } = props;
-  const classNames2 = (0, import_system12.useClassNames)({
+  const classNames2 = (0, import_system10.useClassNames)({
     component: "Field",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     Component,
     {
       ref,
-      className: (0, import_system12.cn)(
+      className: (0, import_system10.cn)(
         "group/field",
-        import_system12.width[width],
+        import_system10.width[width],
         classNames2,
         className,
         !label && `gap-x-0`
@@ -573,9 +507,9 @@ var _FieldBase = (props, ref) => {
       "data-error": props.isInvalid ? true : void 0,
       ...rest,
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           HelpText,
           {
             variant,
@@ -591,40 +525,40 @@ var _FieldBase = (props, ref) => {
 var FieldBase = fixedForwardRef(_FieldBase);
 
 // src/Input/SearchInput.tsx
-var import_react14 = require("react");
-var import_react_aria_components4 = require("react-aria-components");
+var import_react9 = require("react");
+var import_react_aria_components10 = require("react-aria-components");
 var import_i18n = require("@react-aria/i18n");
-var import_system14 = require("@marigold/system");
+var import_system12 = require("@marigold/system");
 
 // src/Input/Input.tsx
-var import_react13 = require("react");
-var import_react_aria_components3 = require("react-aria-components");
-var import_system13 = require("@marigold/system");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var _Input = (0, import_react13.forwardRef)(
+var import_react8 = require("react");
+var import_react_aria_components9 = require("react-aria-components");
+var import_system11 = require("@marigold/system");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var _Input = (0, import_react8.forwardRef)(
   ({ type, icon, action, variant, size, className, ...props }, ref) => {
-    const classNames2 = (0, import_system13.useClassNames)({
+    const classNames2 = (0, import_system11.useClassNames)({
       component: "Input",
       variant,
       size
     });
-    const inputIcon = icon ? (0, import_react13.cloneElement)(icon, {
+    const inputIcon = icon ? (0, import_react8.cloneElement)(icon, {
       ...icon.props,
-      className: (0, import_system13.cn)(
+      className: (0, import_system11.cn)(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
       )
     }) : null;
-    const inputAction = action && !props.readOnly ? (0, import_react13.cloneElement)(action, {
+    const inputAction = action && !props.readOnly ? (0, import_react8.cloneElement)(action, {
       ...action.props,
-      className: (0, import_system13.cn)(
+      className: (0, import_system11.cn)(
         "absolute right-0",
         classNames2.action,
         action.props.className
       )
     }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className: "group/input relative flex items-center",
@@ -632,11 +566,11 @@ var _Input = (0, import_react13.forwardRef)(
         "data-action": action && "",
         children: [
           inputIcon,
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_react_aria_components3.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_aria_components9.Input,
             {
               ...props,
-              className: (0, import_system13.cn)(
+              className: (0, import_system11.cn)(
                 "w-full flex-1",
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
@@ -656,7 +590,7 @@ var _Input = (0, import_react13.forwardRef)(
 );
 
 // src/Input/SearchInput.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var intlMessages = {
   "de-DE": {
     "Clear search": "Suche zur\xFCcksetzen"
@@ -668,7 +602,7 @@ var intlMessages = {
     "Clear search": "Effacer la recherche"
   }
 };
-var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -677,31 +611,31 @@ var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
   }
 );
-var SearchInput = (0, import_react14.forwardRef)(
+var SearchInput = (0, import_react9.forwardRef)(
   ({ className, onClear, ...props }, ref) => {
     const stringFormatter = (0, import_i18n.useLocalizedStringFormatter)(intlMessages);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       _Input,
       {
         type: "search",
-        className: (0, import_system14.cn)(
+        className: (0, import_system12.cn)(
           "[&::-webkit-search-cancel-button]:hidden",
           className == null ? void 0 : className.input
         ),
         ref,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SearchIcon, {}),
-        action: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_react_aria_components4.Button,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SearchIcon, {}),
+        action: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_react_aria_components10.Button,
           {
             className: className == null ? void 0 : className.action,
             onPress: () => onClear == null ? void 0 : onClear(),
             "aria-label": stringFormatter.format("Clear search"),
             excludeFromTabOrder: true,
             preventFocusOnPress: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -709,7 +643,7 @@ var SearchInput = (0, import_react14.forwardRef)(
                 fill: "currentColor",
                 width: 20,
                 height: 20,
-                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
               }
             )
           }
@@ -721,36 +655,36 @@ var SearchInput = (0, import_react14.forwardRef)(
 );
 
 // src/ListBox/ListBox.tsx
-var import_react16 = require("react");
-var import_react_aria_components7 = require("react-aria-components");
-var import_system16 = require("@marigold/system");
+var import_react11 = require("react");
+var import_react_aria_components13 = require("react-aria-components");
+var import_system14 = require("@marigold/system");
 
 // src/ListBox/Context.ts
-var import_react15 = require("react");
-var ListBoxContext = (0, import_react15.createContext)({});
-var useListBoxContext = () => (0, import_react15.useContext)(ListBoxContext);
+var import_react10 = require("react");
+var ListBoxContext = (0, import_react10.createContext)({});
+var useListBoxContext = () => (0, import_react10.useContext)(ListBoxContext);
 
 // src/ListBox/ListBoxItem.tsx
-var import_react_aria_components5 = require("react-aria-components");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react_aria_components11 = require("react-aria-components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var _ListBoxItem = ({ ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components5.ListBoxItem, { ...props, className: classNames2.option });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.ListBoxItem, { ...props, className: classNames2.option });
 };
-
-// src/ListBox/ListBoxSection.tsx
-var import_react_aria_components6 = require("react-aria-components");
-var import_system15 = require("@marigold/system");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var _Section = ({ header: header2, children, ...props }) => {
+
+// src/ListBox/ListBoxSection.tsx
+var import_react_aria_components12 = require("react-aria-components");
+var import_system13 = require("@marigold/system");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var _Section = ({ header, children, ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react_aria_components6.ListBoxSection,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react_aria_components12.ListBoxSection,
     {
       ...props,
-      className: (0, import_system15.cn)(classNames2.section, classNames2.header),
+      className: (0, import_system13.cn)(classNames2.section, classNames2.header),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components6.Header, { children: header2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Header, { children: header }),
         children
       ]
     }
@@ -758,16 +692,16 @@ var _Section = ({ header: header2, children, ...props }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var _ListBox = (0, import_react16.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var _ListBox = (0, import_react11.forwardRef)(
   ({ variant, size, ...props }, ref) => {
-    const classNames2 = (0, import_system16.useClassNames)({ component: "ListBox", variant, size });
+    const classNames2 = (0, import_system14.useClassNames)({ component: "ListBox", variant, size });
     const listBoxProps = { shouldSelectOnPressUp: false };
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react_aria_components7.ListBox,
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_aria_components13.ListBox,
       {
         ...props,
-        className: (0, import_system16.cn)(
+        className: (0, import_system14.cn)(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -782,43 +716,43 @@ _ListBox.Item = _ListBoxItem;
 _ListBox.Section = _Section;
 
 // src/Overlay/Popover.tsx
-var import_react18 = require("react");
-var import_react_aria_components9 = require("react-aria-components");
-var import_system20 = require("@marigold/system");
+var import_react13 = require("react");
+var import_react_aria_components15 = require("react-aria-components");
+var import_system18 = require("@marigold/system");
 
 // src/Provider/OverlayContainerProvider.tsx
-var import_react17 = require("react");
+var import_react12 = require("react");
 var import_ssr = require("@react-aria/ssr");
-var OverlayContainerContext = (0, import_react17.createContext)(void 0);
+var OverlayContainerContext = (0, import_react12.createContext)(void 0);
 var OverlayContainerProvider = OverlayContainerContext.Provider;
 var usePortalContainer = () => {
-  const portalContainer = (0, import_react17.useContext)(OverlayContainerContext);
+  const portalContainer = (0, import_react12.useContext)(OverlayContainerContext);
   const isSSR = (0, import_ssr.useIsSSR)();
   const portal = isSSR ? null : portalContainer ? document.getElementById(portalContainer) : document.body;
   return portal;
 };
 
 // src/Overlay/Underlay.tsx
-var import_react_aria_components8 = require("react-aria-components");
-var import_system19 = require("@marigold/system");
+var import_react_aria_components14 = require("react-aria-components");
+var import_system17 = require("@marigold/system");
 
 // src/Provider/index.ts
-var import_system18 = require("@marigold/system");
+var import_system16 = require("@marigold/system");
 var import_i18n2 = require("@react-aria/i18n");
 
 // src/Provider/MarigoldProvider.tsx
-var import_system17 = require("@marigold/system");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_system15 = require("@marigold/system");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
   className,
   theme
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_system17.ThemeProvider, { theme, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_system15.ThemeProvider, { theme, className, children });
 }
 
 // src/Overlay/Underlay.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Underlay = ({
   size,
   variant,
@@ -827,7 +761,7 @@ var Underlay = ({
   keyboardDismissable,
   ...rest
 }) => {
-  const classNames2 = (0, import_system19.useClassNames)({ component: "Underlay", size, variant });
+  const classNames2 = (0, import_system17.useClassNames)({ component: "Underlay", size, variant });
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -835,11 +769,11 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_aria_components8.ModalOverlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_react_aria_components14.ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => (0, import_system19.cn)(
-        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur",
+      className: ({ isEntering, isExiting }) => (0, import_system17.cn)(
+        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur-xs",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
         classNames2
@@ -853,8 +787,8 @@ var Underlay = ({
 };
 
 // src/Overlay/Popover.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var _Popover = (0, import_react18.forwardRef)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var _Popover = (0, import_react13.forwardRef)(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
       isKeyboardDismissDisabled: keyboardDismissDisabled,
@@ -862,30 +796,30 @@ var _Popover = (0, import_react18.forwardRef)(
       placement,
       ...rest
     };
-    const classNames2 = (0, import_system20.useClassNames)({
+    const classNames2 = (0, import_system18.useClassNames)({
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
-      className: "min-w-[--trigger-width]"
+      className: "min-w-(--trigger-width)"
     });
-    const isSmallScreen = (0, import_system20.useSmallScreen)();
+    const isSmallScreen = (0, import_system18.useSmallScreen)();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Underlay, { open, variant: "modal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        import_react_aria_components9.Popover,
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Underlay, { open, variant: "modal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_react_aria_components15.Popover,
         {
           ref,
           ...props,
-          className: (0, import_system20.cn)(
-            "!fixed !bottom-0 !left-0 !top-auto !max-h-fit w-full"
+          className: (0, import_system18.cn)(
+            "fixed! top-auto! bottom-0! left-0! max-h-fit! w-full"
           ),
           UNSTABLE_portalContainer: portal,
           children
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react_aria_components9.Popover,
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_react_aria_components15.Popover,
       {
         ref,
         ...props,
@@ -900,20 +834,20 @@ var _Popover = (0, import_react18.forwardRef)(
 );
 
 // src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var AutocompleteInput = ({
   onSubmit,
   onClear,
   ref
 }) => {
-  const state = import_react19.default.useContext(import_react_aria_components10.ComboBoxStateContext);
-  const classNames2 = (0, import_system21.useClassNames)({ component: "ComboBox" });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const state = import_react14.default.useContext(import_react_aria_components16.ComboBoxStateContext);
+  const classNames2 = (0, import_system19.useClassNames)({ component: "ComboBox" });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     SearchInput,
     {
       ref,
       className: {
-        action: (0, import_system21.cn)(
+        action: (0, import_system19.cn)(
           (state == null ? void 0 : state.inputValue) === "" ? "invisible" : "visible",
           classNames2
         )
@@ -936,7 +870,7 @@ var AutocompleteInput = ({
     }
   );
 };
-var _Autocomplete = (0, import_react19.forwardRef)(
+var _Autocomplete = (0, import_react14.forwardRef)(
   ({
     children,
     defaultValue,
@@ -962,9 +896,9 @@ var _Autocomplete = (0, import_react19.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(FieldBase, { as: import_react_aria_components10.ComboBox, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AutocompleteInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(_ListBox, { children }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(FieldBase, { as: import_react_aria_components16.ComboBox, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(_ListBox, { children }) })
     ] });
   }
 );
@@ -972,111 +906,41 @@ _Autocomplete.Option = _ListBox.Item;
 _Autocomplete.Section = _ListBox.Section;
 
 // src/ComboBox/ComboBox.tsx
-var import_react21 = require("react");
-var import_react_aria_components13 = require("react-aria-components");
+var import_react19 = require("react");
+var import_react_aria_components17 = require("react-aria-components");
 var import_system24 = require("@marigold/system");
 
-// src/Button/Button.tsx
-var import_react20 = require("react");
-var import_react_aria_components12 = require("react-aria-components");
-var import_system23 = require("@marigold/system");
+// src/icons/ChevronDown.tsx
+var import_react15 = require("react");
+var import_system20 = require("@marigold/system");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ChevronDown = (0, import_react15.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_system20.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
+);
 
-// src/ProgressCycle/ProgressCycle.tsx
-var import_react_aria_components11 = require("react-aria-components");
-var import_system22 = require("@marigold/system");
+// src/icons/ChevronLeft.tsx
+var import_react16 = require("react");
+var import_system21 = require("@marigold/system");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var ProgressCycle = ({
-  size = "16",
-  ...props
-}) => {
-  let strokeWidth = 3;
-  if (size <= "24") {
-    strokeWidth = 2;
-  } else if (size >= "32") {
-    strokeWidth = 4;
-  }
-  const radius = `calc(50% - ${strokeWidth / 2}px)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components11.ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    import_system22.SVG,
-    {
-      className: "animate-rotate-spinner origin-center fill-none",
-      size,
-      "aria-hidden": "true",
-      role: "img",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "circle",
-          {
-            cx: "50%",
-            cy: "50%",
-            r: radius,
-            strokeWidth,
-            className: "stroke-transparent"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "circle",
-          {
-            cx: "50%",
-            cy: "50%",
-            r: radius,
-            strokeWidth,
-            pathLength: "100",
-            strokeDasharray: "100 200",
-            strokeDashoffset: "0",
-            strokeLinecap: "round",
-            className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
-          }
-        )
-      ]
-    }
-  ) });
-};
+var ChevronLeft = (0, import_react16.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_system21.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
+);
 
-// src/Button/Button.tsx
+// src/icons/SortDown.tsx
+var import_react17 = require("react");
+var import_system22 = require("@marigold/system");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var _Button = (0, import_react20.forwardRef)(
-  ({
-    children,
-    variant,
-    size,
-    className,
-    disabled,
-    loading,
-    fullWidth,
-    ...props
-  }, ref) => {
-    const classNames2 = (0, import_system23.useClassNames)({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_react_aria_components12.Button,
-      {
-        ...props,
-        ref,
-        className: (0, import_system23.cn)(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0,
-          loading && "!cursor-progress"
-        ),
-        isPending: loading,
-        isDisabled: disabled,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "absolute", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProgressCycle, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "invisible flex gap-[inherit]", children })
-        ] }) : children
-      }
-    );
-  }
-);
+var SortDown = (0, import_react17.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_system22.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
 
-// src/ComboBox/ComboBox.tsx
+// src/icons/SortUp.tsx
+var import_react18 = require("react");
+var import_system23 = require("@marigold/system");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var _ComboBox = (0, import_react21.forwardRef)(
+var SortUp = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_system23.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
+
+// src/ComboBox/ComboBox.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var _ComboBox = (0, import_react19.forwardRef)(
   ({
     variant,
     size,
@@ -1101,14 +965,14 @@ var _ComboBox = (0, import_react21.forwardRef)(
       ...rest
     };
     const classNames2 = (0, import_system24.useClassNames)({ component: "ComboBox", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(FieldBase, { as: import_react_aria_components13.ComboBox, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(FieldBase, { as: import_react_aria_components17.ComboBox, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         _Input,
         {
-          action: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(_Button, { className: classNames2, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronDown, { className: "size-4" }) })
+          action: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(_Button, { className: classNames2, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChevronDown, { className: "size-4" }) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(_ListBox, { children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(_ListBox, { children }) })
     ] });
   }
 );
@@ -1117,49 +981,29 @@ _ComboBox.Section = _ListBox.Section;
 
 // src/Badge/Badge.tsx
 var import_system25 = require("@marigold/system");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = (0, import_system25.useClassNames)({ component: "Badge", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classNames2, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: classNames2, ...props, children });
 };
 
 // src/Breakout/Breakout.tsx
-var import_system26 = require("@marigold/system");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Breakout = ({
-  height,
-  children,
-  alignX = "left",
-  alignY = "center"
-}) => {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "div",
-    {
-      className: (0, import_system26.cn)(
-        "col-start-[1_!important] col-end-[-1_!important] w-full",
-        alignX && ((_b = (_a = import_system26.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system26.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
-        alignX || alignY ? "flex" : "block",
-        "h-[--height]"
-      ),
-      style: (0, import_system26.createVar)({ height }),
-      children
-    }
-  );
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Breakout = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "![grid-column:1/-1]", children });
 };
 
 // src/Body/Body.tsx
-var import_system27 = require("@marigold/system");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_system26 = require("@marigold/system");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system27.useClassNames)({ component: "Body", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { ...props, className: classNames2, children });
+  const classNames2 = (0, import_system26.useClassNames)({ component: "Body", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
-var import_system28 = require("@marigold/system");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_system27 = require("@marigold/system");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Card = ({
   children,
   variant,
@@ -1174,22 +1018,22 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = (0, import_system28.useClassNames)({ component: "Card", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const classNames2 = (0, import_system27.useClassNames)({ component: "Card", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system28.cn)(
+      className: (0, import_system27.cn)(
         "flex flex-col",
         classNames2,
-        import_system28.gapSpace[space],
-        import_system28.paddingSpace !== void 0 && import_system28.paddingSpace[p],
-        import_system28.paddingSpaceX !== void 0 && import_system28.paddingSpaceX[px],
-        import_system28.paddingSpaceY !== void 0 && import_system28.paddingSpaceY[py],
-        import_system28.paddingRight !== void 0 && import_system28.paddingRight[pr],
-        import_system28.paddingLeft !== void 0 && import_system28.paddingLeft[pl],
-        import_system28.paddingBottom !== void 0 && import_system28.paddingBottom[pb],
-        import_system28.paddingTop !== void 0 && import_system28.paddingTop[pt]
+        import_system27.gapSpace[space],
+        import_system27.paddingSpace !== void 0 && import_system27.paddingSpace[p],
+        import_system27.paddingSpaceX !== void 0 && import_system27.paddingSpaceX[px],
+        import_system27.paddingSpaceY !== void 0 && import_system27.paddingSpaceY[py],
+        import_system27.paddingRight !== void 0 && import_system27.paddingRight[pr],
+        import_system27.paddingLeft !== void 0 && import_system27.paddingLeft[pl],
+        import_system27.paddingBottom !== void 0 && import_system27.paddingBottom[pb],
+        import_system27.paddingTop !== void 0 && import_system27.paddingTop[pt]
       ),
       children
     }
@@ -1197,56 +1041,56 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-var import_system29 = require("@marigold/system");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_system28 = require("@marigold/system");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system29.cn)(
-        "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
-        import_system29.gapSpace[space],
-        "max-w-[--maxWidth]"
+      className: (0, import_system28.cn)(
+        "ms-[auto] me-[auto] box-content flex flex-col items-center justify-center",
+        import_system28.gapSpace[space],
+        "max-w-(--maxWidth)"
       ),
-      style: (0, import_system29.createVar)({ maxWidth }),
+      style: (0, import_system28.createVar)({ maxWidth }),
       children
     }
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_react23 = require("react");
-var import_react_aria_components15 = require("react-aria-components");
-var import_system32 = require("@marigold/system");
+var import_react21 = require("react");
+var import_react_aria_components19 = require("react-aria-components");
+var import_system31 = require("@marigold/system");
 
 // src/Checkbox/CheckBoxField.tsx
-var import_system30 = require("@marigold/system");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_system29 = require("@marigold/system");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var CheckboxField = ({ children, labelWidth }) => {
-  const classNames2 = (0, import_system30.useClassNames)({ component: "Field" });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: classNames2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[--labelWidth]", style: (0, import_system30.createVar)({ labelWidth }) }),
+  const classNames2 = (0, import_system29.useClassNames)({ component: "Field" });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: classNames2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-(--labelWidth)", style: (0, import_system29.createVar)({ labelWidth }) }),
     children
   ] });
 };
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_react_aria_components14 = require("react-aria-components");
-var import_system31 = require("@marigold/system");
+var import_react_aria_components18 = require("react-aria-components");
+var import_system30 = require("@marigold/system");
 
 // src/Checkbox/Context.tsx
-var import_react22 = require("react");
-var CheckboxGroupContext = (0, import_react22.createContext)(null);
-var useCheckboxGroupContext = () => (0, import_react22.useContext)(CheckboxGroupContext);
+var import_react20 = require("react");
+var CheckboxGroupContext = (0, import_react20.createContext)(null);
+var useCheckboxGroupContext = () => (0, import_react20.useContext)(CheckboxGroupContext);
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1259,7 +1103,7 @@ var _CheckboxGroup = ({
   orientation = "vertical",
   ...rest
 }) => {
-  const classNames2 = (0, import_system31.useClassNames)({
+  const classNames2 = (0, import_system30.useClassNames)({
     component: "Checkbox",
     variant,
     size,
@@ -1273,24 +1117,24 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldBase, { as: import_react_aria_components14.CheckboxGroup, width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldBase, { as: import_react_aria_components18.CheckboxGroup, width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       role: "presentation",
       "data-orientation": orientation,
-      className: (0, import_system31.cn)(
+      className: (0, import_system30.cn)(
         classNames2.group,
         "flex items-start",
         orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxGroupContext.Provider, { value: { width, variant, size }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckboxGroupContext.Provider, { value: { width, variant, size }, children })
     }
   ) });
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -1298,7 +1142,7 @@ var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { vie
     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__ */ (0, import_jsx_runtime34.jsx)("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var IndeterminateMark = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -1307,11 +1151,11 @@ var IndeterminateMark = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg
   }
 ) });
 var Icon2 = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       "aria-hidden": "true",
-      className: (0, import_system32.cn)(
+      className: (0, import_system31.cn)(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1319,11 +1163,11 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IndeterminateMark, {}) : checked ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckMark, {}) : null
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(IndeterminateMark, {}) : checked ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckMark, {}) : null
     }
   );
 };
-var _Checkbox = (0, import_react23.forwardRef)(
+var _Checkbox = (0, import_react21.forwardRef)(
   ({
     error,
     disabled,
@@ -1349,23 +1193,23 @@ var _Checkbox = (0, import_react23.forwardRef)(
     };
     const { labelWidth } = useFieldGroupContext();
     const group = useCheckboxGroupContext();
-    const classNames2 = (0, import_system32.useClassNames)({
+    const classNames2 = (0, import_system31.useClassNames)({
       component: "Checkbox",
       variant: variant || (group == null ? void 0 : group.variant),
       size: size || (group == null ? void 0 : group.size)
     });
-    const component = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_react_aria_components15.Checkbox,
+    const component = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      import_react_aria_components19.Checkbox,
       {
         ref,
-        className: (0, import_system32.cn)(
+        className: (0, import_system31.cn)(
           "group/checkbox flex items-center gap-[0.5rem]",
-          "cursor-pointer data-[disabled]:cursor-not-allowed",
+          "cursor-pointer data-disabled:cursor-not-allowed",
           classNames2.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Icon2,
             {
               checked: isSelected,
@@ -1373,19 +1217,19 @@ var _Checkbox = (0, import_react23.forwardRef)(
               className: classNames2.checkbox
             }
           ),
-          children ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: classNames2.label, children }) : null
+          children ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: classNames2.label, children }) : null
         ] })
       }
     );
-    return !group && !!labelWidth ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckboxField, { labelWidth, children: component }) : component;
+    return !group && !!labelWidth ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckboxField, { labelWidth, children: component }) : component;
   }
 );
 _Checkbox.Group = _CheckboxGroup;
 
 // src/Columns/Columns.tsx
-var import_react24 = require("react");
-var import_system33 = require("@marigold/system");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_system32 = require("@marigold/system");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Columns = ({
   space = 0,
   columns,
@@ -1394,30 +1238,30 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (import_react24.Children.count(children) !== columns.length) {
+  if (import_react22.Children.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${import_react24.Children.count(
+      `Columns: expected ${columns.length} children, got ${import_react22.Children.count(
         children
       )}`
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
-      className: (0, import_system33.cn)(
+      className: (0, import_system32.cn)(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
-        import_system33.gapSpace[space]
+        import_system32.gapSpace[space]
       ),
       ...props,
-      children: import_react24.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: import_react22.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "div",
         {
-          className: (0, import_system33.cn)(
-            columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-[--columnSize]",
+          className: (0, import_system32.cn)(
+            columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)",
             "basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
-          style: (0, import_system33.createVar)({
+          style: (0, import_system32.createVar)({
             collapseAt,
             columnSize: columns[idx]
           }),
@@ -1429,88 +1273,99 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-var import_system34 = require("@marigold/system");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var content = {
-  small: "20ch",
-  medium: "45ch",
-  large: "60ch"
+var import_system33 = require("@marigold/system");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var containerTextLength = {
+  short: "40ch",
+  default: "60ch",
+  long: "80ch"
 };
-var header = {
-  small: "20ch",
-  medium: "25ch",
-  large: "35ch"
+var containerHeadlineLength = {
+  short: "20ch",
+  default: "25ch",
+  long: "35ch"
+};
+var gridColsAlign = {
+  left: "grid-cols-[minmax(0,max-content)_1fr_1fr]",
+  center: "grid-cols-[1fr_minmax(0,max-content)_1fr]",
+  right: " grid-cols-[1fr_1fr_minmax(0,max-content)]"
+};
+var gridColumn = {
+  left: "*:col-[1]",
+  center: "*:col-[2]",
+  right: "*:col-[3]"
 };
 var Container = ({
-  contentType = "content",
-  size = "medium",
+  contentLength = "default",
   align = "left",
   alignItems = "none",
+  space = 0,
   children,
   ...props
-}) => {
-  const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    "div",
-    {
-      ...props,
-      className: (0, import_system34.cn)(
-        "grid",
-        import_system34.placeItems[alignItems],
-        import_system34.gridColsAlign[align],
-        import_system34.gridColumn[align]
-      ),
-      style: (0, import_system34.createVar)({ maxWidth }),
-      children
-    }
-  );
-};
+}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  "div",
+  {
+    ...props,
+    className: (0, import_system33.cn)(
+      "grid",
+      import_system33.placeItems[alignItems],
+      gridColsAlign[align],
+      gridColumn[align],
+      import_system33.gapSpace[space]
+    ),
+    style: (0, import_system33.createVar)({
+      maxTextWidth: containerTextLength[contentLength],
+      maxHeadlineWidth: containerHeadlineLength[contentLength]
+    }),
+    children
+  }
+);
 
 // src/Dialog/Dialog.tsx
-var import_react27 = require("react");
-var import_react_aria_components20 = require("react-aria-components");
-var import_system40 = require("@marigold/system");
+var import_react25 = require("react");
+var import_react_aria_components24 = require("react-aria-components");
+var import_system39 = require("@marigold/system");
 
 // src/Dialog/DialogActions.tsx
-var import_system35 = require("@marigold/system");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_system34 = require("@marigold/system");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var DialogActions = ({ variant, size, children }) => {
-  const classNames2 = (0, import_system35.useClassNames)({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_system35.cn)("[grid-area:actions]", classNames2.actions), children });
+  const classNames2 = (0, import_system34.useClassNames)({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_system34.cn)("[grid-area:actions]", classNames2.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-var import_system36 = require("@marigold/system");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_system35 = require("@marigold/system");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var DialogContent = ({
   variant,
   size,
   children
 }) => {
-  const classNames2 = (0, import_system36.useClassNames)({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_system36.cn)("[grid-area:content]", classNames2.content), children });
+  const classNames2 = (0, import_system35.useClassNames)({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: (0, import_system35.cn)("[grid-area:content]", classNames2.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
-var import_system39 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 
 // src/Header/Header.tsx
-var import_react_aria_components16 = require("react-aria-components");
-var import_system37 = require("@marigold/system");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react_aria_components20 = require("react-aria-components");
+var import_system36 = require("@marigold/system");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = (0, import_system37.useClassNames)({
+  const classNames2 = (0, import_system36.useClassNames)({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_aria_components16.Header, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components20.Header, { className: classNames2, ...props, children: props.children });
 };
-
-// src/Headline/Headline.tsx
-var import_react_aria_components17 = require("react-aria-components");
-var import_system38 = require("@marigold/system");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// src/Headline/Headline.tsx
+var import_react_aria_components21 = require("react-aria-components");
+var import_system37 = require("@marigold/system");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var _Headline = ({
   variant,
   size,
@@ -1520,67 +1375,64 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const theme = (0, import_system38.useTheme)();
-  const classNames2 = (0, import_system38.useClassNames)({
+  const classNames2 = (0, import_system37.useClassNames)({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_react_aria_components17.Heading,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_react_aria_components21.Heading,
     {
       level: Number(level),
       ...props,
-      className: (0, import_system38.cn)(classNames2, "text-[--color]", import_system38.textAlign[align]),
-      style: (0, import_system38.createVar)({
-        color: color && (0, import_system38.getColor)(
-          theme,
-          color,
-          color
-          /* fallback */
-        )
-      }),
+      className: (0, import_system37.cn)(
+        classNames2,
+        "max-w-(--maxHeadlineWidth)",
+        // possibly set by a <Container>
+        import_system37.textAlign[align]
+      ),
+      style: { color: color && `var(--color-${color})` },
       children
     }
   );
 };
 
 // src/Dialog/DialogTitle.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var DialogTitle = ({
   level = "2",
   variant,
   size,
   children
 }) => {
-  const classNames2 = (0, import_system39.useClassNames)({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(_Header, { className: (0, import_system39.cn)("[grid-area:title]", classNames2.header), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(_Headline, { slot: "title", level, children }) });
+  const classNames2 = (0, import_system38.useClassNames)({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(_Header, { className: (0, import_system38.cn)("[grid-area:title]", classNames2.header), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(_Headline, { slot: "title", level, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
-var import_react26 = require("react");
-var import_react_aria_components19 = require("react-aria-components");
+var import_react24 = require("react");
+var import_react_aria_components23 = require("react-aria-components");
 
 // src/Overlay/Modal.tsx
-var import_react25 = require("react");
-var import_react_aria_components18 = require("react-aria-components");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var _Modal = (0, import_react25.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var import_react23 = require("react");
+var import_react_aria_components22 = require("react-aria-components");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var _Modal = (0, import_react23.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        import_react_aria_components18.Modal,
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        import_react_aria_components22.Modal,
         {
           ref,
           className: "relative flex w-full justify-center",
@@ -1593,7 +1445,7 @@ var _Modal = (0, import_react25.forwardRef)(({ open, dismissable, keyboardDismis
 });
 
 // src/Dialog/DialogTrigger.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -1605,15 +1457,15 @@ var _DialogTrigger = ({
     isOpen: open,
     ...rest
   };
-  const children = import_react26.Children.toArray(props.children);
+  const children = import_react24.Children.toArray(props.children);
   const [dialogTrigger, dialog] = children;
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
   if (isNonModal)
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_aria_components19.DialogTrigger, { ...props, children: props.children });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_aria_components19.DialogTrigger, { ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components23.DialogTrigger, { ...props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_aria_components23.DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       _Modal,
       {
         dismissable,
@@ -1625,19 +1477,19 @@ var _DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var CloseButton = ({ className }) => {
-  const ctx = (0, import_react27.useContext)(import_react_aria_components20.OverlayTriggerStateContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute right-4 top-4 ml-4", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  const ctx = (0, import_react25.useContext)(import_react_aria_components24.OverlayTriggerStateContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "button",
     {
-      className: (0, import_system40.cn)(
+      className: (0, import_system39.cn)(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
       onClick: ctx == null ? void 0 : ctx.close,
       slot: "dismiss-button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -1656,23 +1508,23 @@ var _Dialog = ({
   ...props
 }) => {
   var _a;
-  const classNames2 = (0, import_system40.useClassNames)({ component: "Dialog", variant, size });
-  const state = (0, import_react27.useContext)(import_react_aria_components20.OverlayTriggerStateContext);
+  const classNames2 = (0, import_system39.useClassNames)({ component: "Dialog", variant, size });
+  const state = (0, import_react25.useContext)(import_react_aria_components24.OverlayTriggerStateContext);
   const children = typeof props.children === "function" ? props.children({
     close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
     }
   }) : props.children;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-    import_react_aria_components20.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    import_react_aria_components24.Dialog,
     {
       ...props,
-      className: (0, import_system40.cn)(
-        "relative outline-none [&>*:not(:last-child)]:mb-4",
+      className: (0, import_system39.cn)(
+        "relative outline-hidden [&>*:not(:last-child)]:mb-4",
         "grid [grid-template-areas:'title'_'content'_'actions']",
         classNames2.container
       ),
       children: [
-        closeButton && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CloseButton, { className: classNames2.closeButton }),
+        closeButton && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CloseButton, { className: classNames2.closeButton }),
         children
       ]
     }
@@ -1684,34 +1536,34 @@ _Dialog.Content = DialogContent;
 _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
-var import_react_aria_components21 = require("react-aria-components");
-var import_system41 = require("@marigold/system");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react_aria_components25 = require("react-aria-components");
+var import_system40 = require("@marigold/system");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = (0, import_system41.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_aria_components21.Separator, { className: (0, import_system41.cn)("border-none", classNames2), ...props });
+  const classNames2 = (0, import_system40.useClassNames)({ component: "Divider", variant });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_aria_components25.Separator, { className: (0, import_system40.cn)("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx
-var import_system42 = require("@marigold/system");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_system41 = require("@marigold/system");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system42.useClassNames)({ component: "Footer", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("footer", { ...props, className: classNames2, children });
+  const classNames2 = (0, import_system41.useClassNames)({ component: "Footer", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("footer", { ...props, className: classNames2, children });
 };
 
 // src/Form/Form.tsx
-var import_react_aria_components22 = require("react-aria-components");
+var import_react_aria_components26 = require("react-aria-components");
 
 // src/Grid/Grid.tsx
-var import_system43 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 
 // src/Grid/GridArea.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { style: { gridArea: name }, children });
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
 var Grid = ({
@@ -1723,10 +1575,10 @@ var Grid = ({
   space = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
-      className: (0, import_system43.cn)("grid", import_system43.gapSpace[space], import_system43.height[height]),
+      className: (0, import_system42.cn)("grid", import_system42.gapSpace[space], import_system42.height[height]),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -1740,8 +1592,8 @@ var Grid = ({
 Grid.Area = GridArea;
 
 // src/Image/Image.tsx
-var import_system44 = require("@marigold/system");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_system43 = require("@marigold/system");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Image = ({
   variant,
   size,
@@ -1749,25 +1601,25 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = (0, import_system44.useClassNames)({ component: "Image", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  const classNames2 = (0, import_system43.useClassNames)({ component: "Image", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system44.cn)(
+      className: (0, import_system43.cn)(
         fit !== "none" && "h-full w-full",
         classNames2,
-        import_system44.objectFit[fit],
-        import_system44.objectPosition[position]
+        import_system43.objectFit[fit],
+        import_system43.objectPosition[position]
       )
     }
   );
 };
 
 // src/Inline/Inline.tsx
-var import_system45 = require("@marigold/system");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_system44 = require("@marigold/system");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var Inline = ({
   space = 0,
   alignX,
@@ -1776,15 +1628,15 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system45.cn)(
+      className: (0, import_system44.cn)(
         "flex flex-wrap",
-        import_system45.gapSpace[space],
-        alignX && ((_b = (_a = import_system45.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system45.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        import_system44.gapSpace[space],
+        alignX && ((_b = (_a = import_system44.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system44.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -1792,51 +1644,51 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-var import_react28 = require("react");
-var import_react_aria_components25 = require("react-aria-components");
+var import_react26 = require("react");
+var import_react_aria_components29 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
-var import_react_aria_components24 = require("react-aria-components");
-var import_system47 = require("@marigold/system");
+var import_react_aria_components28 = require("react-aria-components");
+var import_system46 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
-var import_react_aria_components23 = require("react-aria-components");
-var import_system46 = require("@marigold/system");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react_aria_components27 = require("react-aria-components");
+var import_system45 = require("@marigold/system");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_react_aria_components23.DateSegment,
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    import_react_aria_components27.DateSegment,
     {
       ...props,
       segment,
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "span",
           {
             "aria-hidden": "true",
-            className: (0, import_system46.cn)(
+            className: (0, import_system45.cn)(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size, action, ...props }) => {
-  const classNames2 = (0, import_system47.useClassNames)({ component: "DateField", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_aria_components24.Group, { className: classNames2.field, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components24.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(_DateSegment, { className: classNames2.segment, segment }) }),
-    action ? action : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  const classNames2 = (0, import_system46.useClassNames)({ component: "DateField", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_aria_components28.Group, { className: classNames2.field, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_aria_components28.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(_DateSegment, { className: classNames2.segment, segment }) }),
+    action ? action : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "svg",
       {
         "data-testid": "action",
@@ -1844,15 +1696,15 @@ var _DateInput = ({ variant, size, action, ...props }) => {
         viewBox: "0 0 24 24",
         width: 24,
         height: 24,
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime53.jsx)("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
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var _DateField = (0, import_react28.forwardRef)(
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var _DateField = (0, import_react26.forwardRef)(
   ({
     variant,
     size,
@@ -1870,46 +1722,46 @@ var _DateField = (0, import_react28.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components25.DateField,
+        as: import_react_aria_components29.DateField,
         variant,
         size,
         ref,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(_DateInput, { action })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(_DateInput, { action })
       }
     );
   }
 );
 
 // src/Calendar/Calendar.tsx
-var import_react33 = require("react");
-var import_react_aria_components32 = require("react-aria-components");
-var import_system52 = require("@marigold/system");
+var import_react31 = require("react");
+var import_react_aria_components36 = require("react-aria-components");
+var import_system51 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
-var import_react_aria_components27 = require("react-aria-components");
-var import_system49 = require("@marigold/system");
+var import_react_aria_components31 = require("react-aria-components");
+var import_system48 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
-var import_react29 = require("react");
-var import_react_aria_components26 = require("react-aria-components");
+var import_react27 = require("react");
+var import_react_aria_components30 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
-var import_system48 = require("@marigold/system");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_system47 = require("@marigold/system");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
-  const state = (0, import_react29.useContext)(import_react_aria_components26.CalendarStateContext);
+  const state = (0, import_react27.useContext)(import_react_aria_components30.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
   const { locale } = (0, import_i18n3.useLocale)();
   const dayFormatter = (0, import_i18n3.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
-  const weekDays = (0, import_react29.useMemo)(() => {
+  const weekDays = (0, import_react27.useMemo)(() => {
     const weekStart = (0, import_date.startOfWeek)((0, import_date.today)(state.timeZone), locale);
     return [...new Array(7).keys()].map((index) => {
       const date = weekStart.add({ days: index });
@@ -1917,21 +1769,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames2 = (0, import_system48.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
+  const classNames2 = (0, import_system47.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
-  const classNames2 = (0, import_system49.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_aria_components27.CalendarGrid, { className: classNames2.calendarGrid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CalendarGridHeader, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components27.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      import_react_aria_components27.CalendarCell,
+  const classNames2 = (0, import_system48.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_aria_components31.CalendarGrid, { className: classNames2.calendarGrid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CalendarGridHeader, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components31.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      import_react_aria_components31.CalendarCell,
       {
         date,
-        className: (0, import_system49.cn)(
+        className: (0, import_system48.cn)(
           "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
           classNames2.calendarCell
         )
@@ -1941,9 +1793,9 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-var import_react30 = require("react");
-var import_react_aria_components28 = require("react-aria-components");
-var import_system50 = require("@marigold/system");
+var import_react28 = require("react");
+var import_react_aria_components32 = require("react-aria-components");
+var import_system49 = require("@marigold/system");
 
 // src/Calendar/useFormattedMonths.tsx
 var import_i18n4 = require("@react-aria/i18n");
@@ -1962,66 +1814,66 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react30.useContext)(import_react_aria_components28.CalendarStateContext);
+  const state = (0, import_react28.useContext)(import_react_aria_components32.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = (0, import_system50.useClassNames)({ component: "Select" });
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  const { select: selectClassNames } = (0, import_system49.useClassNames)({ component: "Select" });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: (0, import_system50.cn)(buttonStyles, selectClassNames),
+      className: (0, import_system49.cn)(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronDown, {})
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ChevronDown, {})
       ]
     }
   );
 }
 
 // src/Calendar/MonthControls.tsx
-var import_react_aria_components29 = require("react-aria-components");
-var import_system51 = require("@marigold/system");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react_aria_components33 = require("react-aria-components");
+var import_system50 = require("@marigold/system");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function MonthControls() {
-  const classNames2 = (0, import_system51.useClassNames)({ component: "Calendar" });
-  const buttonClassNames = (0, import_system51.useClassNames)({ component: "Button" });
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  const classNames2 = (0, import_system50.useClassNames)({ component: "Calendar" });
+  const buttonClassNames = (0, import_system50.useClassNames)({ component: "Button" });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "div",
     {
-      className: (0, import_system51.cn)(
+      className: (0, import_system50.cn)(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
         classNames2.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_react_aria_components29.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_react_aria_components33.Button,
           {
-            className: (0, import_system51.cn)(
+            className: (0, import_system50.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
             slot: "previous",
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ChevronLeft, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_react_aria_components29.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_react_aria_components33.Button,
           {
-            className: (0, import_system51.cn)(
+            className: (0, import_system50.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
             slot: "next",
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ChevronRight, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChevronRight, {})
           }
         )
       ]
@@ -2031,24 +1883,24 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-var import_react31 = require("react");
-var import_react_aria_components30 = require("react-aria-components");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_react_aria_components34 = require("react-aria-components");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react31.useContext)(import_react_aria_components30.CalendarStateContext);
+  const state = (0, import_react29.useContext)(import_react_aria_components34.CalendarStateContext);
   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__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "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__ */ (0, import_jsx_runtime58.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           _Button,
           {
             slot: "previous",
@@ -2069,12 +1921,12 @@ var MonthListBox = ({ setSelectedDropdown }) => {
 var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
-var import_react32 = require("react");
-var import_react_aria_components31 = require("react-aria-components");
+var import_react30 = require("react");
+var import_react_aria_components35 = require("react-aria-components");
 var import_i18n5 = require("@react-aria/i18n");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react32.useContext)(import_react_aria_components31.CalendarStateContext);
+  const state = (0, import_react30.useContext)(import_react_aria_components35.CalendarStateContext);
   const years = [];
   let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
@@ -2087,8 +1939,8 @@ var YearListBox = ({ setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = (0, import_react32.useRef)(null);
-  (0, import_react32.useEffect)(() => {
+  const activeButtonRef = (0, import_react30.useRef)(null);
+  (0, import_react30.useEffect)(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
       activeButton == null ? void 0 : activeButton.scrollIntoView({
@@ -2102,19 +1954,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "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__ */ (0, import_jsx_runtime59.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               _Button,
               {
                 slot: "previous",
@@ -2139,7 +1991,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var _Calendar = ({
   disabled,
   readOnly,
@@ -2154,24 +2006,24 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames2 = (0, import_system52.useClassNames)({ component: "Calendar" });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react33.useState)();
+  const classNames2 = (0, import_system51.useClassNames)({ component: "Calendar" });
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react31.useState)();
   const ViewMap = {
-    month: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    import_react_aria_components32.Calendar,
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    import_react_aria_components36.Calendar,
     {
-      className: (0, import_system52.cn)(
-        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
+      className: (0, import_system51.cn)(
+        "flex min-h-[350px] w-[360px] flex-col rounded-xs p-4",
         classNames2.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
               CalendarListBox,
               {
                 type: "month",
@@ -2179,7 +2031,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
               CalendarListBox,
               {
                 type: "year",
@@ -2188,20 +2040,20 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MonthControls_default, {})
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(_CalendarGrid, {})
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(_CalendarGrid, {})
       ] })
     }
   );
 };
 
 // src/DatePicker/DatePicker.tsx
-var import_react34 = __toESM(require("react"));
-var import_react_aria_components33 = require("react-aria-components");
-var import_system53 = require("@marigold/system");
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var _DatePicker = import_react34.default.forwardRef(
+var import_react32 = __toESM(require("react"));
+var import_react_aria_components37 = require("react-aria-components");
+var import_system52 = require("@marigold/system");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var _DatePicker = import_react32.default.forwardRef(
   ({
     dateUnavailable,
     disabled,
@@ -2224,30 +2076,30 @@ var _DatePicker = import_react34.default.forwardRef(
       granularity,
       ...rest
     };
-    const classNames2 = (0, import_system53.useClassNames)({
+    const classNames2 = (0, import_system52.useClassNames)({
       component: "DatePicker",
       size,
       variant
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components33.DatePicker,
+        as: import_react_aria_components37.DatePicker,
         variant,
         size,
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             _DateInput,
             {
-              action: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+              action: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                 _Button,
                 {
                   size: "small",
                   disabled,
                   className: classNames2.button,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                     "svg",
                     {
                       "data-testid": "action",
@@ -2255,14 +2107,14 @@ var _DatePicker = import_react34.default.forwardRef(
                       width: 24,
                       height: 24,
                       fill: "currentColor",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime61.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(_Calendar, { disabled }) })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(_Calendar, { disabled }) })
         ]
       }
     );
@@ -2270,53 +2122,53 @@ var _DatePicker = import_react34.default.forwardRef(
 );
 
 // src/Inset/Inset.tsx
-var import_system54 = require("@marigold/system");
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var import_system53 = require("@marigold/system");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   "div",
   {
-    className: (0, import_system54.cn)(
-      space && import_system54.paddingSpace[space],
-      !space && spaceX && import_system54.paddingSpaceX[spaceX],
-      !space && spaceY && import_system54.paddingSpaceY[spaceY]
+    className: (0, import_system53.cn)(
+      space && import_system53.paddingSpace[space],
+      !space && spaceX && import_system53.paddingSpaceX[spaceX],
+      !space && spaceY && import_system53.paddingSpaceY[spaceY]
     ),
     children
   }
 );
 
 // src/Link/Link.tsx
-var import_react35 = require("react");
-var import_react_aria_components34 = require("react-aria-components");
-var import_system55 = require("@marigold/system");
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var _Link = (0, import_react35.forwardRef)(
+var import_react33 = require("react");
+var import_react_aria_components38 = require("react-aria-components");
+var import_system54 = require("@marigold/system");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var _Link = (0, import_react33.forwardRef)(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = (0, import_system55.useClassNames)({
+    const classNames2 = (0, import_system54.useClassNames)({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_aria_components34.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_aria_components38.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-var import_system56 = require("@marigold/system");
+var import_system55 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react36 = require("react");
-var ListContext = (0, import_react36.createContext)({});
-var useListContext = () => (0, import_react36.useContext)(ListContext);
+var import_react34 = require("react");
+var ListContext = (0, import_react34.createContext)({});
+var useListContext = () => (0, import_react34.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var List = ({
   as = "ul",
   children,
@@ -2325,38 +2177,38 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = (0, import_system56.useClassNames)({ component: "List", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  const classNames2 = (0, import_system55.useClassNames)({ component: "List", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react_aria_components37 = require("react-aria-components");
-var import_system59 = require("@marigold/system");
+var import_react_aria_components41 = require("react-aria-components");
+var import_system58 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
-var import_react_aria_components35 = require("react-aria-components");
-var import_system57 = require("@marigold/system");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_react_aria_components39 = require("react-aria-components");
+var import_system56 = require("@marigold/system");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
-  const classNames2 = (0, import_system57.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components35.MenuItem, { ...props, className: classNames2.item, children });
+  const classNames2 = (0, import_system56.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_aria_components39.MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-var import_react_aria_components36 = require("react-aria-components");
-var import_system58 = require("@marigold/system");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_react_aria_components40 = require("react-aria-components");
+var import_system57 = require("@marigold/system");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = (0, import_system58.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react_aria_components36.MenuSection, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(_Header, { className: className.section, children: title }),
+  const className = (0, import_system57.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_react_aria_components40.MenuSection, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var _Menu = ({
   children,
   label,
@@ -2368,70 +2220,70 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames2 = (0, import_system59.useClassNames)({ component: "Menu", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_react_aria_components37.MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_aria_components37.Menu, { ...props, className: classNames2.container, children }) })
+  const classNames2 = (0, import_system58.useClassNames)({ component: "Menu", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_aria_components41.MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components41.Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
 _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-var import_react_aria_components38 = require("react-aria-components");
-var import_system60 = require("@marigold/system");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_react_aria_components42 = require("react-aria-components");
+var import_system59 = require("@marigold/system");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var ActionMenu = ({
   variant,
   size,
   disabled,
   ...props
 }) => {
-  const classNames2 = (0, import_system60.useClassNames)({ component: "Menu", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_aria_components38.MenuTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_system60.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("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__ */ (0, import_jsx_runtime69.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components38.Menu, { ...props, className: classNames2.container, children: props.children }) })
+  const classNames2 = (0, import_system59.useClassNames)({ component: "Menu", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_react_aria_components42.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_system59.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("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__ */ (0, import_jsx_runtime70.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_aria_components42.Menu, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_react38 = require("react");
-var import_button2 = require("@react-aria/button");
-var import_system63 = require("@marigold/system");
+var import_react36 = require("react");
+var import_button = require("@react-aria/button");
+var import_system62 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
-var import_react37 = require("react");
-var SectionMessageContext = (0, import_react37.createContext)({});
-var useSectionMessageContext = () => (0, import_react37.useContext)(SectionMessageContext);
+var import_react35 = require("react");
+var SectionMessageContext = (0, import_react35.createContext)({});
+var useSectionMessageContext = () => (0, import_react35.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-var import_system61 = require("@marigold/system");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_system60 = require("@marigold/system");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: (0, import_system61.cn)("[grid-area:content]", classNames2.content), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: (0, import_system60.cn)("[grid-area:content]", classNames2.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-var import_system62 = require("@marigold/system");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_system61 = require("@marigold/system");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: (0, import_system62.cn)("[grid-area:title]", classNames2.title), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: (0, import_system61.cn)("[grid-area:title]", classNames2.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var icons = {
-  success: () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2441,13 +2293,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2457,13 +2309,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2473,13 +2325,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2499,16 +2351,16 @@ var SectionMessage = ({
   onCloseChange,
   ...props
 }) => {
-  const buttonRef = (0, import_react38.useRef)(null);
-  const classNames2 = (0, import_system63.useClassNames)({
+  const buttonRef = (0, import_react36.useRef)(null);
+  const classNames2 = (0, import_system62.useClassNames)({
     component: "SectionMessage",
     variant,
     size
   });
   const Icon4 = icons[variant];
-  const [internalVisible, setInternalVisible] = (0, import_react38.useState)(true);
+  const [internalVisible, setInternalVisible] = (0, import_react36.useState)(true);
   const isCurrentlyVisible = close != null ? close : internalVisible;
-  const { buttonProps } = (0, import_button2.useButton)(props, buttonRef);
+  const { buttonProps } = (0, import_button.useButton)(props, buttonRef);
   const handleClose = () => {
     onCloseChange && close && onCloseChange(close);
     if (close === void 0) {
@@ -2516,24 +2368,24 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: (0, import_system63.cn)("grid auto-rows-min", classNames2.container),
+      className: (0, import_system62.cn)("grid auto-rows-min", classNames2.container),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "div",
           {
-            className: (0, import_system63.cn)(
+            className: (0, import_system62.cn)(
               "h-5 w-5 self-center [grid-area:icon]",
               classNames2.icon
             ),
-            children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon4, {})
+            children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon4, {})
           }
         ),
-        closeButton && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        closeButton && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "button",
           {
             ...buttonProps,
@@ -2541,7 +2393,7 @@ var SectionMessage = ({
             "aria-label": "close",
             className: "h-5 w-5 cursor-pointer border-none p-0 leading-normal outline-0 [grid-area:close]",
             onClick: handleClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
               "path",
               {
                 fillRule: "evenodd",
@@ -2560,17 +2412,17 @@ SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
-var import_react39 = require("react");
+var import_react37 = require("react");
 var import_data2 = require("@react-stately/data");
 
 // src/TagGroup/Tag.tsx
-var import_react_aria_components40 = require("react-aria-components");
-var import_system65 = require("@marigold/system");
+var import_react_aria_components44 = require("react-aria-components");
+var import_system64 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
-var import_react_aria_components39 = require("react-aria-components");
-var import_system64 = require("@marigold/system");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_react_aria_components43 = require("react-aria-components");
+var import_system63 = require("@marigold/system");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
   items,
@@ -2580,9 +2432,9 @@ var _TagGroup = ({
   size,
   ...rest
 }) => {
-  const classNames2 = (0, import_system64.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(FieldBase, { as: import_react_aria_components39.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-    import_react_aria_components39.TagList,
+  const classNames2 = (0, import_system63.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(FieldBase, { as: import_react_aria_components43.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    import_react_aria_components43.TagList,
     {
       items,
       className: classNames2.listItems,
@@ -2593,25 +2445,25 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria_components40.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react_aria_components44.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = (0, import_system65.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-    import_react_aria_components40.Tag,
+  const classNames2 = (0, import_system64.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    import_react_aria_components44.Tag,
     {
       textValue,
       ...props,
-      className: (0, import_system65.cn)("data-[selection-mode]:cursor-pointer", classNames2.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+      className: (0, import_system64.cn)("data-selection-mode:cursor-pointer", classNames2.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           CloseButton2,
           {
-            className: (0, import_system65.cn)("flex items-center", classNames2.closeButton)
+            className: (0, import_system64.cn)("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2621,14 +2473,14 @@ var _Tag = ({ variant, size, children, ...props }) => {
 _Tag.Group = _TagGroup;
 
 // src/Multiselect/Multiselect.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var Item2 = (_) => null;
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var Item = (_) => null;
 var Multiselect = ({
   label,
   children,
   ...props
 }) => {
-  const items = import_react39.Children.map(children, ({ props: props2 }) => props2);
+  const items = import_react37.Children.map(children, ({ props: props2 }) => props2);
   const list = (0, import_data2.useListData)({
     initialItems: items,
     initialSelectedKeys: props.defaultSelectedKeys,
@@ -2647,7 +2499,7 @@ var Multiselect = ({
     }
     list.setSelectedKeys(next);
   };
-  const [value, setValue] = (0, import_react39.useState)("");
+  const [value, setValue] = (0, import_react37.useState)("");
   const selectItem = (key) => {
     if (list.selectedKeys !== "all") {
       const next = list.selectedKeys.add(key);
@@ -2659,18 +2511,18 @@ var Multiselect = ({
     }, 0);
     input.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       _Tag.Group,
       {
         items: selected,
         allowsRemoving: true,
         onRemove: setUnselected,
         renderEmptyState: () => null,
-        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_Tag, { id: item.id, children: item.children }, item.id)
+        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(_Tag, { id: item.id, children: item.children }, item.id)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       _ComboBox,
       {
         value,
@@ -2680,23 +2532,23 @@ var Multiselect = ({
         disabled: unselected.length === 0,
         placeholder: unselected.length === 0 ? "All items selected" : "",
         ...props,
-        children: unselected.map((item) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_ComboBox.Option, { id: item.id, children: item.children }, item.id))
+        children: unselected.map((item) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(_ComboBox.Option, { id: item.id, children: item.children }, item.id))
       }
     )
   ] });
 };
-Multiselect.Item = Item2;
+Multiselect.Item = Item;
 
 // src/NumberField/NumberField.tsx
-var import_react40 = require("react");
-var import_react_aria_components42 = require("react-aria-components");
-var import_system67 = require("@marigold/system");
+var import_react38 = require("react");
+var import_react_aria_components46 = require("react-aria-components");
+var import_system66 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react_aria_components41 = require("react-aria-components");
-var import_system66 = require("@marigold/system");
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+var import_react_aria_components45 = require("react-aria-components");
+var import_system65 = require("@marigold/system");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2704,7 +2556,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { width: 1
     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__ */ (0, import_jsx_runtime76.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2714,25 +2566,25 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { width:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-    import_react_aria_components41.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    import_react_aria_components45.Button,
     {
-      className: (0, import_system66.cn)(
+      className: (0, import_system65.cn)(
         [
           "flex items-center justify-center",
-          "cursor-pointer data-[disabled]:cursor-not-allowed"
+          "cursor-pointer data-disabled:cursor-not-allowed"
         ],
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon4, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
-var _NumberField = (0, import_react40.forwardRef)(
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var _NumberField = (0, import_react38.forwardRef)(
   ({
     variant,
     size,
@@ -2743,7 +2595,7 @@ var _NumberField = (0, import_react40.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system67.useClassNames)({
+    const classNames2 = (0, import_system66.useClassNames)({
       component: "NumberField",
       size,
       variant
@@ -2756,8 +2608,8 @@ var _NumberField = (0, import_react40.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(FieldBase, { as: import_react_aria_components42.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_react_aria_components42.Group, { className: (0, import_system67.cn)("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FieldBase, { as: import_react_aria_components46.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react_aria_components46.Group, { className: (0, import_system66.cn)("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2765,7 +2617,7 @@ var _NumberField = (0, import_react40.forwardRef)(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         _Input,
         {
           ref,
@@ -2774,7 +2626,7 @@ var _NumberField = (0, import_react40.forwardRef)(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2787,12 +2639,12 @@ var _NumberField = (0, import_react40.forwardRef)(
 );
 
 // src/Pagination/Pagination.tsx
-var import_react44 = require("react");
+var import_react42 = require("react");
 
 // src/Pagination/Ellipsis.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var Ellipsis = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "span",
     {
       className: "text-text-base flex h-8 w-8 items-center justify-center",
@@ -2803,16 +2655,16 @@ var Ellipsis = () => {
 };
 
 // src/Pagination/NavigationButton.tsx
-var import_react41 = __toESM(require("react"));
-var import_button3 = require("@react-aria/button");
-var import_system68 = require("@marigold/system");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_react39 = __toESM(require("react"));
+var import_button2 = require("@react-aria/button");
+var import_system67 = require("@marigold/system");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var NavigationButton = (props) => {
-  const ref = import_react41.default.useRef(null);
-  const classNames2 = (0, import_system68.useClassNames)({
+  const ref = import_react39.default.useRef(null);
+  const classNames2 = (0, import_system67.useClassNames)({
     component: "Pagination"
   });
-  let { buttonProps } = (0, import_button3.useButton)(props, ref);
+  let { buttonProps } = (0, import_button2.useButton)(props, ref);
   let {
     children,
     isSelected,
@@ -2822,20 +2674,20 @@ var NavigationButton = (props) => {
     position,
     ...rest
   } = props;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (registerRef) {
       registerRef(ref.current);
       return () => registerRef(null);
     }
   }, [registerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
     "button",
     {
       ref,
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: (0, import_system68.cn)(classNames2, controlLabel && "w-24 px-2"),
+      className: (0, import_system67.cn)(classNames2, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position === "left" && children,
@@ -2847,24 +2699,24 @@ var NavigationButton = (props) => {
 };
 
 // src/Pagination/PageButton.tsx
-var import_react42 = require("react");
-var import_button4 = require("@react-aria/button");
-var import_system69 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_button3 = require("@react-aria/button");
+var import_system68 = require("@marigold/system");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var PageButton = (props) => {
-  const ref = (0, import_react42.useRef)(null);
-  const classNames2 = (0, import_system69.useClassNames)({
+  const ref = (0, import_react40.useRef)(null);
+  const classNames2 = (0, import_system68.useClassNames)({
     component: "Pagination"
   });
-  let { buttonProps } = (0, import_button4.useButton)(props, ref);
+  let { buttonProps } = (0, import_button3.useButton)(props, ref);
   let { page, selected, registerRef, isDisabled } = props;
-  (0, import_react42.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (registerRef) {
       registerRef(ref.current);
       return () => registerRef(null);
     }
   }, [registerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "button",
     {
       ref,
@@ -2881,7 +2733,7 @@ var PageButton = (props) => {
 };
 
 // src/Pagination/useKeyboardNavigation.tsx
-var import_react43 = require("react");
+var import_react41 = require("react");
 var import_interactions = require("@react-aria/interactions");
 var NavigationTypes = {
   Prev: "prev",
@@ -2895,14 +2747,14 @@ var useKeyboardNavigation = ({
   onChange = () => {
   }
 }) => {
-  const containerRef = (0, import_react43.useRef)(null);
-  const [focusedItem, setFocusedItem] = (0, import_react43.useState)({
+  const containerRef = (0, import_react41.useRef)(null);
+  const [focusedItem, setFocusedItem] = (0, import_react41.useState)({
     type: "page",
     value: page
   });
-  const navigationItems = (0, import_react43.useRef)([]);
-  const buttonRefs = (0, import_react43.useRef)(/* @__PURE__ */ new Map());
-  const isItemDisabled = (0, import_react43.useCallback)(
+  const navigationItems = (0, import_react41.useRef)([]);
+  const buttonRefs = (0, import_react41.useRef)(/* @__PURE__ */ new Map());
+  const isItemDisabled = (0, import_react41.useCallback)(
     (item) => {
       if (item.type === NavigationTypes.Prev) return page <= 1;
       if (item.type === NavigationTypes.Next) return page >= totalPages;
@@ -2910,7 +2762,7 @@ var useKeyboardNavigation = ({
     },
     [page, totalPages]
   );
-  const findNextFocusableItem = (0, import_react43.useCallback)(
+  const findNextFocusableItem = (0, import_react41.useCallback)(
     (current, direction) => {
       const items = navigationItems.current.filter(
         (item) => !isItemDisabled(item)
@@ -2926,7 +2778,7 @@ var useKeyboardNavigation = ({
     },
     [isItemDisabled, page]
   );
-  const focusItem = (0, import_react43.useCallback)(
+  const focusItem = (0, import_react41.useCallback)(
     (item) => {
       if (isItemDisabled(item)) return;
       const key = `${item.type}-${item.value}`;
@@ -2973,7 +2825,7 @@ var useKeyboardNavigation = ({
       }
     }
   });
-  const registerRef = (0, import_react43.useCallback)(
+  const registerRef = (0, import_react41.useCallback)(
     (type, value, ref) => {
       const key = `${type}-${value}`;
       if (ref) {
@@ -2984,7 +2836,7 @@ var useKeyboardNavigation = ({
     },
     []
   );
-  const setNavigationItems = (0, import_react43.useCallback)((items) => {
+  const setNavigationItems = (0, import_react41.useCallback)((items) => {
     navigationItems.current = items;
   }, []);
   return {
@@ -3027,7 +2879,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var _Pagination = ({
   defaultPage = 1,
   page,
@@ -3037,8 +2889,16 @@ var _Pagination = ({
   },
   controlLabels
 }) => {
-  const [currentPage, setCurrentPage] = (0, import_react44.useState)(page != null ? page : defaultPage);
+  const [currentPage, setCurrentPage] = (0, import_react42.useState)(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
+  const isFirstRender = (0, import_react42.useRef)(true);
+  (0, import_react42.useEffect)(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    handlePageChange(1);
+  }, [pageSize]);
   const handlePageChange = (newPage) => {
     setCurrentPage(newPage);
     onChange(newPage);
@@ -3049,7 +2909,7 @@ var _Pagination = ({
     onChange: handlePageChange
   });
   const pageRange = usePageRange({ currentPage, totalPages });
-  (0, import_react44.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const items = [
       { type: NavigationTypes.Prev, value: currentPage - 1 },
       ...pageRange.map((value) => ({
@@ -3060,19 +2920,19 @@ var _Pagination = ({
     ];
     setNavigationItems(items);
   }, [pageRange, currentPage, setNavigationItems]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setFocusedItem({ type: NavigationTypes.Page, value: currentPage });
   }, [currentPage, setFocusedItem]);
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages || totalPages === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "nav",
     {
       className: "flex items-center justify-center space-x-2",
       "aria-label": `Page ${currentPage} of ${totalPages}`,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           NavigationButton,
           {
             onPress: () => handlePageChange(Math.max(1, currentPage - 1)),
@@ -3081,11 +2941,11 @@ var _Pagination = ({
             registerRef: (ref) => registerRef(NavigationTypes.Prev, currentPage - 1, ref),
             controlLabel: controlLabels == null ? void 0 : controlLabels[0],
             position: "left",
-            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronLeft, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ChevronLeft, { className: "h-5 w-5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
-          (pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
+          (pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             PageButton,
             {
               page: pageNumber,
@@ -3095,8 +2955,8 @@ var _Pagination = ({
             },
             pageNumber
           )
-        ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           NavigationButton,
           {
             onPress: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
@@ -3105,7 +2965,7 @@ var _Pagination = ({
             registerRef: (ref) => registerRef(NavigationTypes.Next, currentPage + 1, ref),
             controlLabel: controlLabels == null ? void 0 : controlLabels[1],
             position: "right",
-            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronRight, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ChevronRight, { className: "h-5 w-5" })
           }
         )
       ]
@@ -3114,21 +2974,21 @@ var _Pagination = ({
 };
 
 // src/Radio/Radio.tsx
-var import_react46 = require("react");
-var import_react_aria_components44 = require("react-aria-components");
-var import_system71 = require("@marigold/system");
+var import_react44 = require("react");
+var import_react_aria_components48 = require("react-aria-components");
+var import_system70 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react45 = require("react");
-var RadioGroupContext = (0, import_react45.createContext)(
+var import_react43 = require("react");
+var RadioGroupContext = (0, import_react43.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react45.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react43.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react_aria_components43 = require("react-aria-components");
-var import_system70 = require("@marigold/system");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_react_aria_components47 = require("react-aria-components");
+var import_system69 = require("@marigold/system");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size,
@@ -3144,7 +3004,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = (0, import_system70.useClassNames)({ component: "Radio", variant, size });
+  const classNames2 = (0, import_system69.useClassNames)({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -3152,10 +3012,10 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     FieldBase,
     {
-      as: import_react_aria_components43.RadioGroup,
+      as: import_react_aria_components47.RadioGroup,
       width,
       label,
       description,
@@ -3163,18 +3023,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system70.cn)(
+          className: (0, import_system69.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -3182,33 +3042,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
   "div",
   {
-    className: (0, import_system71.cn)(
+    className: (0, import_system70.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react46.forwardRef)(
+var _Radio = (0, import_react44.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = (0, import_system71.useClassNames)({
+    const classNames2 = (0, import_system70.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-      import_react_aria_components44.Radio,
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      import_react_aria_components48.Radio,
       {
         ref,
-        className: (0, import_system71.cn)(
+        className: (0, import_system70.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3217,18 +3077,18 @@ var _Radio = (0, import_react46.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system71.cn)(
+              className: (0, import_system70.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: classNames2.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -3237,10 +3097,10 @@ var _Radio = (0, import_react46.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react47 = require("react");
-var import_react_aria_components45 = require("react-aria-components");
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var _SearchField = (0, import_react47.forwardRef)(
+var import_react45 = require("react");
+var import_react_aria_components49 = require("react-aria-components");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var _SearchField = (0, import_react45.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -3249,7 +3109,7 @@ var _SearchField = (0, import_react47.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(FieldBase, { as: import_react_aria_components49.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       SearchInput,
       {
         ref,
@@ -3260,11 +3120,11 @@ var _SearchField = (0, import_react47.forwardRef)(
 );
 
 // src/Select/Select.tsx
-var import_react48 = require("react");
-var import_react_aria_components46 = require("react-aria-components");
-var import_system72 = require("@marigold/system");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var _Select = (0, import_react48.forwardRef)(
+var import_react46 = require("react");
+var import_react_aria_components50 = require("react-aria-components");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var _Select = (0, import_react46.forwardRef)(
   ({
     disabled,
     required,
@@ -3284,22 +3144,22 @@ var _Select = (0, import_react48.forwardRef)(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = (0, import_system72.useClassNames)({ component: "Select", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(FieldBase, { as: import_react_aria_components46.Select, ref, variant, size, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
-        import_react_aria_components46.Button,
+    const classNames2 = (0, import_system71.useClassNames)({ component: "Select", variant, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(FieldBase, { as: import_react_aria_components50.Select, ref, variant, size, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+        import_react_aria_components50.Button,
         {
-          className: (0, import_system72.cn)(
+          className: (0, import_system71.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react_aria_components46.SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChevronDown, { className: (0, import_system72.cn)("size-4", classNames2.icon) })
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_aria_components50.SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChevronDown, { className: (0, import_system71.cn)("size-4", classNames2.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -3307,38 +3167,38 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
-var import_react51 = require("react");
-var import_react_aria_components48 = require("react-aria-components");
-var import_system74 = require("@marigold/system");
+var import_react49 = require("react");
+var import_react_aria_components52 = require("react-aria-components");
+var import_system73 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react49 = require("react");
-var SelectListContext = (0, import_react49.createContext)(
+var import_react47 = require("react");
+var SelectListContext = (0, import_react47.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react49.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react47.useContext)(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-var import_react50 = require("react");
-var import_react_aria_components47 = require("react-aria-components");
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var _SelectListItem = (0, import_react50.forwardRef)(
+var import_react48 = require("react");
+var import_react_aria_components51 = require("react-aria-components");
+var import_system72 = require("@marigold/system");
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var _SelectListItem = (0, import_react48.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      import_react_aria_components47.GridListItem,
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      import_react_aria_components51.GridListItem,
       {
         textValue,
         ...props,
-        className: (0, import_system73.cn)(
-          "items-center group-data-[layout=grid]/list:flex-row",
+        className: (0, import_system72.cn)(
+          "items-center group-[layout=grid]/list:flex-row",
           classNames2 == null ? void 0 : classNames2.option
         ),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_Checkbox, { slot: "selection" }),
+        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(_Checkbox, { slot: "selection" }),
           children
         ] })
       }
@@ -3347,21 +3207,21 @@ var _SelectListItem = (0, import_react50.forwardRef)(
 );
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var _SelectList = (0, import_react51.forwardRef)(
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var _SelectList = (0, import_react49.forwardRef)(
   ({ onChange, ...rest }, ref) => {
-    const classNames2 = (0, import_system74.useClassNames)({ component: "ListBox" });
+    const classNames2 = (0, import_system73.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-      import_react_aria_components48.GridList,
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      import_react_aria_components52.GridList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: (0, import_system74.cn)(
+        className: (0, import_system73.cn)(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -3373,29 +3233,29 @@ var _SelectList = (0, import_react51.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system75 = require("@marigold/system");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_system74 = require("@marigold/system");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
   "div",
   {
     ...props,
-    className: (0, import_system75.cn)(["sticky h-[--height] overflow-auto", import_system75.width[width]]),
-    style: (0, import_system75.createVar)({ height }),
+    className: (0, import_system74.cn)(["sticky h-(--height) overflow-auto", import_system74.width[width]]),
+    style: (0, import_system74.createVar)({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-var import_react52 = require("react");
-var import_react_aria_components49 = require("react-aria-components");
-var import_system76 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
-var _Slider = (0, import_react52.forwardRef)(
+var import_react50 = require("react");
+var import_react_aria_components53 = require("react-aria-components");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var _Slider = (0, import_react50.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -3405,7 +3265,7 @@ var _Slider = (0, import_react52.forwardRef)(
     label,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system76.useClassNames)({
+    const classNames2 = (0, import_system75.useClassNames)({
       component: "Slider",
       variant,
       size
@@ -3414,38 +3274,38 @@ var _Slider = (0, import_react52.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components49.Slider,
-        className: (0, import_system76.cn)(
+        as: import_react_aria_components53.Slider,
+        className: (0, import_system75.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          import_system76.width[width]
+          import_system75.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(_Label, { children: props.children && props.children || label && label }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system76.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-            import_react_aria_components49.SliderTrack,
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(_Label, { children: props.children && props.children || label && label }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react_aria_components53.SliderOutput, { className: (0, import_system75.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            import_react_aria_components53.SliderTrack,
             {
-              className: (0, import_system76.cn)("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+              className: (0, import_system75.cn)("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                   "div",
                   {
-                    className: (0, import_system76.cn)(
+                    className: (0, import_system75.cn)(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames2.track
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                   "div",
                   {
-                    className: (0, import_system76.cn)(
+                    className: (0, import_system75.cn)(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames2.selectedTrack
                     ),
@@ -3455,10 +3315,10 @@ var _Slider = (0, import_react52.forwardRef)(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-                  import_react_aria_components49.SliderThumb,
+                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  import_react_aria_components53.SliderThumb,
                   {
-                    className: (0, import_system76.cn)("top-1/2 cursor-pointer", classNames2.thumb),
+                    className: (0, import_system75.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: thumbLabels == null ? void 0 : thumbLabels[i]
@@ -3475,12 +3335,12 @@ var _Slider = (0, import_react52.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var Split = () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { role: "separator", className: "grow" });
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var Split = () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system77 = require("@marigold/system");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_system76 = require("@marigold/system");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -3490,14 +3350,14 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     "div",
     {
-      className: (0, import_system77.cn)(
+      className: (0, import_system76.cn)(
         "flex flex-col",
-        import_system77.gapSpace[space],
-        alignX && ((_b = (_a = import_system77.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system77.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system76.gapSpace[space],
+        alignX && ((_b = (_a = import_system76.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system76.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -3507,11 +3367,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react53 = require("react");
-var import_react_aria_components50 = require("react-aria-components");
-var import_system78 = require("@marigold/system");
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var _Switch = (0, import_react53.forwardRef)(
+var import_react51 = require("react");
+var import_react_aria_components54 = require("react-aria-components");
+var import_system77 = require("@marigold/system");
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var _Switch = (0, import_react51.forwardRef)(
   ({
     variant,
     size,
@@ -3522,40 +3382,40 @@ var _Switch = (0, import_react53.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system78.useClassNames)({ component: "Switch", size, variant });
+    const classNames2 = (0, import_system77.useClassNames)({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
-      import_react_aria_components50.Switch,
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+      import_react_aria_components54.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system78.cn)(
-          import_system78.width[width],
+        className: (0, import_system77.cn)(
+          import_system77.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
             "div",
             {
-              className: (0, import_system78.cn)(
+              className: (0, import_system77.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
                 "div",
                 {
-                  className: (0, import_system78.cn)(
+                  className: (0, import_system77.cn)(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
-                    "absolute left-0 top-px",
+                    "absolute top-px left-0",
                     "block translate-x-[1px] rounded-full transition-all duration-100 ease-in-out will-change-transform",
                     "group-selected/switch:translate-x-[calc(47px_-_100%)]",
                     classNames2.thumb
@@ -3571,24 +3431,24 @@ var _Switch = (0, import_react53.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react61 = require("react");
+var import_react59 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system84 = require("@marigold/system");
+var import_system83 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react54 = require("react");
-var TableContext = (0, import_react54.createContext)({});
-var useTableContext = () => (0, import_react54.useContext)(TableContext);
+var import_react52 = require("react");
+var TableContext = (0, import_react52.createContext)({});
+var useTableContext = () => (0, import_react52.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var TableBody = ({ children, emptyState }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
   const { state, classNames: classNames2 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       "td",
       {
         className: classNames2 == null ? void 0 : classNames2.cell,
@@ -3598,18 +3458,18 @@ var TableBody = ({ children, emptyState }) => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react55 = require("react");
-var import_focus2 = require("@react-aria/focus");
+var import_react53 = require("react");
+var import_focus = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
-var import_utils3 = require("@react-aria/utils");
-var import_system79 = require("@marigold/system");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_utils = require("@react-aria/utils");
+var import_system78 = require("@marigold/system");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react55.useRef)(null);
+  const ref = (0, import_react53.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3628,14 +3488,14 @@ var TableCell = ({ cell, align = "left" }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = (0, import_focus2.useFocusRing)();
-  const stateProps = (0, import_system79.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus.useFocusRing)();
+  const stateProps = (0, import_system78.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system79.cn)(classNames2 == null ? void 0 : classNames2.cell),
-      ...(0, import_utils3.mergeProps)(cellProps, focusProps),
+      className: (0, import_system78.cn)(classNames2 == null ? void 0 : classNames2.cell),
+      ...(0, import_utils.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
       children: cell.rendered
@@ -3644,11 +3504,11 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react56 = require("react");
-var import_focus3 = require("@react-aria/focus");
+var import_react54 = require("react");
+var import_focus2 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
-var import_utils4 = require("@react-aria/utils");
-var import_system80 = require("@marigold/system");
+var import_utils2 = require("@react-aria/utils");
+var import_system79 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3671,9 +3531,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react56.useRef)(null);
+  const ref = (0, import_react54.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3686,35 +3546,35 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system80.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus2.useFocusRing)();
+  const stateProps = (0, import_system79.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system80.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      ...(0, import_utils4.mergeProps)(gridCellProps, focusProps),
+      className: (0, import_system79.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      ...(0, import_utils2.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react57 = require("react");
-var import_focus4 = require("@react-aria/focus");
+var import_react55 = require("react");
+var import_focus3 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils6 = require("@react-aria/utils");
-var import_system81 = require("@marigold/system");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_utils4 = require("@react-aria/utils");
+var import_system80 = require("@marigold/system");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
   width = "auto",
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react57.useRef)(null);
+  const ref = (0, import_react55.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3724,23 +3584,23 @@ var TableColumnHeader = ({
     ref
   );
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system81.useStateProps)({
+  const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
+  const stateProps = (0, import_system80.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system81.cn)("cursor-default", import_system81.width[width], classNames2 == null ? void 0 : classNames2.header),
-      ...(0, import_utils6.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      className: (0, import_system80.cn)("cursor-default", import_system80.width[width], classNames2 == null ? void 0 : classNames2.header),
+      ...(0, import_utils4.mergeProps)(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__ */ (0, import_jsx_runtime96.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "invisible", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(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__ */ (0, import_jsx_runtime97.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "invisible", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -3748,10 +3608,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     "thead",
     {
       ...rowGroupProps,
@@ -3762,29 +3622,29 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react58 = require("react");
+var import_react56 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react58.useRef)(null);
+  const ref = (0, import_react56.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react59 = require("react");
-var import_focus5 = require("@react-aria/focus");
+var import_react57 = require("react");
+var import_focus4 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils7 = require("@react-aria/utils");
-var import_system82 = require("@marigold/system");
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_utils5 = require("@react-aria/utils");
+var import_system81 = require("@marigold/system");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react59.useRef)(null);
+  const ref = (0, import_react57.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system82.useClassNames)({
+  const classNames2 = (0, import_system81.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3798,28 +3658,28 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
+  const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system82.useStateProps)({
+  const stateProps = (0, import_system81.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system82.cn)(
+      className: (0, import_system81.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames2 == null ? void 0 : classNames2.row
       ),
-      ...(0, import_utils7.mergeProps)(rowProps, focusProps, hoverProps),
+      ...(0, import_utils5.mergeProps)(rowProps, focusProps, hoverProps),
       ...stateProps,
       children
     }
@@ -3827,19 +3687,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react60 = require("react");
-var import_focus6 = require("@react-aria/focus");
+var import_react58 = require("react");
+var import_focus5 = require("@react-aria/focus");
 var import_interactions4 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils8 = require("@react-aria/utils");
-var import_system83 = require("@marigold/system");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_utils6 = require("@react-aria/utils");
+var import_system82 = require("@marigold/system");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react60.useRef)(null);
+  const ref = (0, import_react58.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3850,26 +3710,26 @@ var TableSelectAllCell = ({
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system83.useStateProps)({
+  const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
+  const stateProps = (0, import_system82.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system83.cn)(import_system83.width[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
-      ...(0, import_utils8.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      className: (0, import_system82.cn)(import_system82.width[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      ...(0, import_utils6.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size,
@@ -3881,7 +3741,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react61.useRef)(null);
+  const tableRef = (0, import_react59.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3892,21 +3752,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system84.useClassNames)({
+  const classNames2 = (0, import_system83.useClassNames)({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system84.cn)(
+          className: (0, import_system83.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -3914,10 +3774,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c, _d, _e;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3925,7 +3785,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3936,12 +3796,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(TableBody, { emptyState, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(TableBody, { emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(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__ */ (0, import_jsx_runtime101.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3965,9 +3825,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react_aria_components51 = require("react-aria-components");
-var import_system85 = require("@marigold/system");
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_react_aria_components55 = require("react-aria-components");
+var import_system84 = require("@marigold/system");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var _Text = ({
   variant,
   size,
@@ -3981,47 +3841,40 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const theme = (0, import_system85.useTheme)();
-  const classNames2 = (0, import_system85.useClassNames)({
+  const classNames2 = (0, import_system84.useClassNames)({
     component: "Text",
     variant,
     size
   });
-  const Component = props.slot ? import_react_aria_components51.Text : as;
+  const Component = props.slot ? import_react_aria_components55.Text : as;
   const elementType = props.slot ? { elementType: as } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     Component,
     {
       ...props,
       ...elementType,
-      className: (0, import_system85.cn)(
-        "text-[--color] outline-[--outline]",
+      className: (0, import_system84.cn)(
+        "max-w-(--maxTextWidth)",
+        // possibly set by a <Container>
         classNames2,
-        fontStyle && import_system85.textStyle[fontStyle],
-        align && import_system85.textAlign[align],
-        cursor && import_system85.cursorStyle[cursor],
-        weight && import_system85.fontWeight[weight],
-        fontSize && import_system85.textSize[fontSize]
+        fontStyle && import_system84.textStyle[fontStyle],
+        align && import_system84.textAlign[align],
+        cursor && import_system84.cursorStyle[cursor],
+        weight && import_system84.fontWeight[weight],
+        fontSize && import_system84.textSize[fontSize]
       ),
-      style: (0, import_system85.createVar)({
-        color: color && (0, import_system85.getColor)(
-          theme,
-          color,
-          color
-          /* fallback */
-        )
-      }),
+      style: { color: color && `var(--color-${color})` },
       children
     }
   );
 };
 
 // src/TextArea/TextArea.tsx
-var import_react62 = require("react");
-var import_react_aria_components52 = require("react-aria-components");
-var import_system86 = require("@marigold/system");
-var import_jsx_runtime103 = require("react/jsx-runtime");
-var _TextArea = (0, import_react62.forwardRef)(
+var import_react60 = require("react");
+var import_react_aria_components56 = require("react-aria-components");
+var import_system85 = require("@marigold/system");
+var import_jsx_runtime104 = require("react/jsx-runtime");
+var _TextArea = (0, import_react60.forwardRef)(
   ({
     variant,
     size,
@@ -4032,7 +3885,7 @@ var _TextArea = (0, import_react62.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system86.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system85.useClassNames)({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -4040,15 +3893,15 @@ var _TextArea = (0, import_react62.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria_components52.TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(FieldBase, { as: import_react_aria_components56.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_react_aria_components56.TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react63 = require("react");
-var import_react_aria_components53 = require("react-aria-components");
-var import_jsx_runtime104 = require("react/jsx-runtime");
-var _TextField = (0, import_react63.forwardRef)(
+var import_react61 = require("react");
+var import_react_aria_components57 = require("react-aria-components");
+var import_jsx_runtime105 = require("react/jsx-runtime");
+var _TextField = (0, import_react61.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -4057,13 +3910,13 @@ var _TextField = (0, import_react63.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(FieldBase, { as: import_react_aria_components53.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(FieldBase, { as: import_react_aria_components57.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system87 = require("@marigold/system");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_system86 = require("@marigold/system");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -4076,29 +3929,29 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system87.cn)(
+      className: (0, import_system86.cn)(
         "grid",
-        import_system87.gapSpace[space],
+        import_system86.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system87.createVar)({ column, tilesWidth }),
+      style: (0, import_system86.createVar)({ column, tilesWidth }),
       children
     }
   );
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react_aria_components55 = require("react-aria-components");
-var import_system88 = require("@marigold/system");
+var import_react_aria_components59 = require("react-aria-components");
+var import_system87 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react_aria_components54 = require("react-aria-components");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_react_aria_components58 = require("react-aria-components");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -4112,26 +3965,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_react_aria_components54.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react_aria_components58.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = (0, import_system88.useClassNames)({ component: "Tooltip", variant, size });
+  const classNames2 = (0, import_system87.useClassNames)({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
-    import_react_aria_components55.Tooltip,
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+    import_react_aria_components59.Tooltip,
     {
       ...props,
-      className: (0, import_system88.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system87.cn)("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react_aria_components55.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react_aria_components59.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -4143,14 +3996,14 @@ _Tooltip.Trigger = _TooltipTrigger;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react64 = require("react");
-var import_react_aria_components57 = require("react-aria-components");
-var import_system90 = require("@marigold/system");
+var import_react62 = require("react");
+var import_react_aria_components61 = require("react-aria-components");
+var import_system89 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
-var import_react_aria_components56 = require("react-aria-components");
+var import_react_aria_components60 = require("react-aria-components");
 var import_i18n6 = require("@react-aria/i18n");
-var import_system89 = require("@marigold/system");
+var import_system88 = require("@marigold/system");
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -4163,7 +4016,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var BaseLoader = ({
   variant,
   size,
@@ -4172,16 +4025,16 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = (0, import_i18n6.useLocalizedStringFormatter)(intlMessages2, "marigold");
-  const className = (0, import_system89.useClassNames)({ component: "XLoader", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
-    import_react_aria_components56.ProgressBar,
+  const className = (0, import_system88.useClassNames)({ component: "XLoader", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+    import_react_aria_components60.ProgressBar,
     {
       className: className.container,
       isIndeterminate: true,
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -4189,13 +4042,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4208,12 +4061,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4226,12 +4079,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4244,12 +4097,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4262,12 +4115,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4280,12 +4133,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4298,12 +4151,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4316,12 +4169,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4334,12 +4187,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4352,12 +4205,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4370,12 +4223,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "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__ */ (0, import_jsx_runtime108.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4391,48 +4244,48 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react_aria_components56.Label, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components60.Label, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-var import_jsx_runtime109 = require("react/jsx-runtime");
-var LoaderFullSize = (props) => {
-  const id = (0, import_react64.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Modal, { className: "grid h-[--visual-viewport-height] cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { id, ...props }) }) }) });
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var LoaderFullScreen = (props) => {
+  const id = (0, import_react62.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_react_aria_components61.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_react_aria_components61.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
-var LoaderInline = (props) => {
-  const className = (0, import_system90.useClassNames)({
+var LoaderSection = (props) => {
+  const className = (0, import_system89.useClassNames)({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullsize" ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(LoaderFullSize, { variant: variant != null ? variant : "inverted", ...props }) : mode === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(LoaderInline, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components61 = require("react-aria-components");
-var import_system93 = require("@marigold/system");
+var import_react_aria_components65 = require("react-aria-components");
+var import_system92 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react65 = require("react");
-var TabContext = (0, import_react65.createContext)({});
-var useTabContext = () => (0, import_react65.useContext)(TabContext);
+var import_react63 = require("react");
+var TabContext = (0, import_react63.createContext)({});
+var useTabContext = () => (0, import_react63.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components58 = require("react-aria-components");
-var import_system91 = require("@marigold/system");
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_react_aria_components62 = require("react-aria-components");
+var import_system90 = require("@marigold/system");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-    import_react_aria_components58.Tab,
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_react_aria_components62.Tab,
     {
       ...props,
-      className: (0, import_system91.cn)(
+      className: (0, import_system90.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4442,49 +4295,49 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components59 = require("react-aria-components");
-var import_system92 = require("@marigold/system");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_react_aria_components63 = require("react-aria-components");
+var import_system91 = require("@marigold/system");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-    import_react_aria_components59.TabList,
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    import_react_aria_components63.TabList,
     {
       ...props,
-      className: (0, import_system92.cn)("flex", import_system92.gapSpace[space], classNames2.tabsList),
+      className: (0, import_system91.cn)("flex", import_system91.gapSpace[space], classNames2.tabsList),
       children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components60 = require("react-aria-components");
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_react_aria_components64 = require("react-aria-components");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_react_aria_components60.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_react_aria_components64.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = (0, import_system93.useClassNames)({
+  const classNames2 = (0, import_system92.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_react_aria_components61.Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_react_aria_components65.Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
 _Tabs.Item = _Tab;
 
 // src/RouterProvider/RouterProvider.tsx
-var import_react_aria_components62 = require("react-aria-components");
+var import_react_aria_components66 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4559,6 +4412,8 @@ var import_react_aria_components62 = require("react-aria-components");
   VisuallyHidden,
   XLoader,
   _Calendar,
+  gridColsAlign,
+  gridColumn,
   useAsyncList,
   useFieldGroupContext,
   useListData,