@marigold/components 11.5.0 → 12.0.0

package/dist/index.js

@@ -872,6 +872,7 @@ __export(index_exports, {
   ComboBox: () => _ComboBox,
   Container: () => Container,
   DateField: () => _DateField,
+  DateFormat: () => import_system.DateFormat,
   DatePicker: () => _DatePicker,
   Dialog: () => _Dialog,
   Divider: () => _Divider,
@@ -898,12 +899,13 @@ __export(index_exports, {
   Multiselect: () => Multiselect,
   NonModal: () => NonModal,
   NumberField: () => _NumberField,
+  NumericFormat: () => import_system.NumericFormat,
   OverlayContainerProvider: () => OverlayContainerProvider,
   Pagination: () => _Pagination,
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components73.RouterProvider,
+  RouterProvider: () => import_react_aria_components74.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -919,7 +921,7 @@ __export(index_exports, {
   Text: () => _Text,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
-  ThemeProvider: () => import_system14.ThemeProvider,
+  ThemeProvider: () => import_system15.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => _Tooltip,
   Underlay: () => Underlay,
@@ -932,16 +934,17 @@ __export(index_exports, {
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
   usePortalContainer: () => usePortalContainer,
-  useTheme: () => import_system14.useTheme
+  useTheme: () => import_system15.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/hooks.ts
 var import_data = require("@react-stately/data");
+var import_system = require("@marigold/system");
 
 // src/Accordion/Accordion.tsx
 var import_react_aria_components4 = require("react-aria-components");
-var import_system3 = require("@marigold/system");
+var import_system4 = require("@marigold/system");
 
 // src/Accordion/AccordionContext.tsx
 var import_react = require("react");
@@ -960,14 +963,14 @@ var useAccordionContext = () => {
 // src/Accordion/AccordionHeader.tsx
 var import_react3 = require("react");
 var import_react_aria_components = require("react-aria-components");
-var import_system2 = require("@marigold/system");
+var import_system3 = require("@marigold/system");
 
 // src/icons/ChevronDown.tsx
 var import_react2 = require("react");
-var import_system = require("@marigold/system");
+var import_system2 = require("@marigold/system");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ChevronDown = (0, import_react2.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system2.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
 );
 
 // src/Accordion/AccordionHeader.tsx
@@ -980,7 +983,7 @@ var AccordionHeader = ({ children }) => {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       ChevronDown,
       {
-        className: (0, import_system2.cn)(classNames3.icon, isExpanded && "rotate-180")
+        className: (0, import_system3.cn)(classNames3.icon, isExpanded && "rotate-180")
       }
     )
   ] }) });
@@ -1025,7 +1028,7 @@ var Accordion = ({
   size: size2,
   ...props
 }) => {
-  const classNames3 = (0, import_system3.useClassNames)({ component: "Accordion", variant, size: size2 });
+  const classNames3 = (0, import_system4.useClassNames)({ component: "Accordion", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionProvider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_aria_components4.DisclosureGroup,
     {
@@ -1042,7 +1045,7 @@ Accordion.Item = AccordionItem;
 
 // src/Aside/Aside.tsx
 var import_react4 = require("react");
-var import_system4 = require("@marigold/system");
+var import_system5 = require("@marigold/system");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var classNames = {
   aside: "grow basis-(--sideWidth)",
@@ -1057,10 +1060,10 @@ var Aside = ({
 }) => {
   const [left, right] = import_react4.Children.toArray(children);
   const vars = {
-    aside: (0, import_system4.createVar)({ sideWidth }),
-    content: (0, import_system4.createVar)({ wrap })
+    aside: (0, import_system5.createVar)({ sideWidth }),
+    content: (0, import_system5.createVar)({ wrap })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_system4.cn)("flex flex-wrap", import_system4.gapSpace[space]), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_system5.cn)("flex flex-wrap", import_system5.gapSpace[space]), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
@@ -1081,7 +1084,7 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-var import_system5 = require("@marigold/system");
+var import_system6 = require("@marigold/system");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Aspect = ({
   ratio = "square",
@@ -1091,12 +1094,12 @@ var Aspect = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      className: (0, import_system5.cn)(
+      className: (0, import_system6.cn)(
         "overflow-hidden",
-        import_system5.aspect[ratio],
+        import_system6.aspect[ratio],
         "max-w-[var(--maxWidth)]"
       ),
-      style: (0, import_system5.createVar)({ maxWidth }),
+      style: (0, import_system6.createVar)({ maxWidth }),
       children
     }
   );
@@ -1105,21 +1108,21 @@ var Aspect = ({
 // src/Autocomplete/Autocomplete.tsx
 var import_react14 = __toESM(require("react"));
 var import_react_aria_components14 = require("react-aria-components");
-var import_system17 = require("@marigold/system");
+var import_system18 = require("@marigold/system");
 
 // src/FieldBase/FieldBase.tsx
 var import_react7 = require("react");
-var import_system8 = require("@marigold/system");
+var import_system9 = require("@marigold/system");
 
 // src/HelpText/HelpText.tsx
 var import_react5 = require("react");
 var import_react_aria_components5 = require("react-aria-components");
-var import_system6 = require("@marigold/system");
+var import_system7 = require("@marigold/system");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Icon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "svg",
   {
-    className: (0, import_system6.cn)("h-4 w-4 shrink-0", className),
+    className: (0, import_system7.cn)("h-4 w-4 shrink-0", className),
     viewBox: "0 0 24 24",
     role: "presentation",
     fill: "currentColor",
@@ -1133,16 +1136,16 @@ var HelpText = ({
   errorMessage,
   ...props
 }) => {
-  const classNames3 = (0, import_system6.useClassNames)({
+  const classNames3 = (0, import_system7.useClassNames)({
     component: "HelpText",
     variant,
     size: size2
   });
   const ctx = (0, import_react5.useContext)(import_react_aria_components5.FieldErrorContext);
-  if (!description && ctx && !ctx.isInvalid) {
+  if (!description && !(ctx == null ? void 0 : ctx.isInvalid)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_system6.cn)(classNames3.container), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_system7.cn)(classNames3.container), children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components5.FieldError, { ...props, className: "flex flex-col", children: (validation) => {
       const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
       return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
@@ -1159,7 +1162,7 @@ var HelpText = ({
 
 // src/Label/Label.tsx
 var import_react_aria_components6 = require("react-aria-components");
-var import_system7 = require("@marigold/system");
+var import_system8 = require("@marigold/system");
 
 // src/FieldBase/FieldGroup.tsx
 var import_react6 = require("react");
@@ -1173,23 +1176,23 @@ var FieldGroup = ({ labelWidth, children }) => {
 // src/Label/Label.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var _Label = ({ size: size2, variant, children, ...props }) => {
-  const classNames3 = (0, import_system7.useClassNames)({ component: "Label", size: size2, variant });
+  const classNames3 = (0, import_system8.useClassNames)({ component: "Label", size: size2, variant });
   const { labelWidth } = useFieldGroupContext();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_react_aria_components6.Label,
     {
       ...props,
-      className: (0, import_system7.cn)(classNames3.container, "inline-flex w-[var(--labelWidth)]"),
-      style: (0, import_system7.createVar)({ labelWidth }),
+      className: (0, import_system8.cn)(classNames3.container, "inline-flex w-[var(--labelWidth)]"),
+      style: (0, import_system8.createVar)({ labelWidth }),
       children: [
         children,
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_system7.SVG,
+          import_system8.SVG,
           {
             viewBox: "0 0 24 24",
             role: "presentation",
             size: 16,
-            className: (0, import_system7.cn)("hidden", classNames3.indicator),
+            className: (0, import_system8.cn)("hidden", classNames3.indicator),
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
           }
         )
@@ -1215,7 +1218,7 @@ var _FieldBase = (props, ref) => {
     stateProps,
     ...rest
   } = props;
-  const classNames3 = (0, import_system8.useClassNames)({
+  const classNames3 = (0, import_system9.useClassNames)({
     component: "Field",
     variant,
     size: size2
@@ -1224,9 +1227,9 @@ var _FieldBase = (props, ref) => {
     Component2,
     {
       ref,
-      className: (0, import_system8.cn)(
+      className: (0, import_system9.cn)(
         "group/field",
-        import_system8.width[width],
+        import_system9.width[width],
         classNames3,
         className,
         !label && `gap-x-0`
@@ -1256,23 +1259,23 @@ var FieldBase = fixedForwardRef(_FieldBase);
 var import_react9 = require("react");
 var import_react_aria_components8 = require("react-aria-components");
 var import_i18n = require("@react-aria/i18n");
-var import_system10 = require("@marigold/system");
+var import_system11 = require("@marigold/system");
 
 // src/Input/Input.tsx
 var import_react8 = require("react");
 var import_react_aria_components7 = require("react-aria-components");
-var import_system9 = require("@marigold/system");
+var import_system10 = require("@marigold/system");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var _Input = (0, import_react8.forwardRef)(
   ({ type, icon, action, variant, size: size2, className, ...props }, ref) => {
-    const classNames3 = (0, import_system9.useClassNames)({
+    const classNames3 = (0, import_system10.useClassNames)({
       component: "Input",
       variant,
       size: size2
     });
     const inputIcon = icon ? (0, import_react8.cloneElement)(icon, {
       ...icon.props,
-      className: (0, import_system9.cn)(
+      className: (0, import_system10.cn)(
         "pointer-events-none absolute",
         classNames3.icon,
         icon.props.className
@@ -1280,7 +1283,7 @@ var _Input = (0, import_react8.forwardRef)(
     }) : null;
     const inputAction = action && !props.readOnly ? (0, import_react8.cloneElement)(action, {
       ...action.props,
-      className: (0, import_system9.cn)(
+      className: (0, import_system10.cn)(
         "absolute right-0",
         classNames3.action,
         action.props.className
@@ -1298,7 +1301,7 @@ var _Input = (0, import_react8.forwardRef)(
             import_react_aria_components7.Input,
             {
               ...props,
-              className: (0, import_system9.cn)(
+              className: (0, import_system10.cn)(
                 "w-full flex-1",
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
@@ -1349,7 +1352,7 @@ var SearchInput = (0, import_react9.forwardRef)(
       _Input,
       {
         type: "search",
-        className: (0, import_system10.cn)(
+        className: (0, import_system11.cn)(
           "[&::-webkit-search-cancel-button]:hidden",
           className == null ? void 0 : className.input
         ),
@@ -1385,7 +1388,7 @@ var SearchInput = (0, import_react9.forwardRef)(
 // src/ListBox/ListBox.tsx
 var import_react11 = require("react");
 var import_react_aria_components11 = require("react-aria-components");
-var import_system12 = require("@marigold/system");
+var import_system13 = require("@marigold/system");
 
 // src/ListBox/Context.ts
 var import_react10 = require("react");
@@ -1402,7 +1405,7 @@ var _ListBoxItem = ({ ...props }) => {
 
 // src/ListBox/ListBoxSection.tsx
 var import_react_aria_components10 = require("react-aria-components");
-var import_system11 = require("@marigold/system");
+var import_system12 = require("@marigold/system");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var _Section = ({ header, children, ...props }) => {
   const { classNames: classNames3 } = useListBoxContext();
@@ -1410,7 +1413,7 @@ var _Section = ({ header, children, ...props }) => {
     import_react_aria_components10.ListBoxSection,
     {
       ...props,
-      className: (0, import_system11.cn)(classNames3.section, classNames3.header),
+      className: (0, import_system12.cn)(classNames3.section, classNames3.header),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.Header, { children: header }),
         children
@@ -1423,13 +1426,13 @@ var _Section = ({ header, children, ...props }) => {
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var _ListBox = (0, import_react11.forwardRef)(
   ({ variant, size: size2, ...props }, ref) => {
-    const classNames3 = (0, import_system12.useClassNames)({ component: "ListBox", variant, size: size2 });
+    const classNames3 = (0, import_system13.useClassNames)({ component: "ListBox", variant, size: size2 });
     const listBoxProps = { shouldSelectOnPressUp: false };
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ListBoxContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: classNames3.container, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_react_aria_components11.ListBox,
       {
         ...props,
-        className: (0, import_system12.cn)(
+        className: (0, import_system13.cn)(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -1446,7 +1449,7 @@ _ListBox.Section = _Section;
 // src/Overlay/Popover.tsx
 var import_react13 = require("react");
 var import_react_aria_components13 = require("react-aria-components");
-var import_system16 = require("@marigold/system");
+var import_system17 = require("@marigold/system");
 
 // src/Provider/OverlayContainerProvider.tsx
 var import_react12 = require("react");
@@ -1462,21 +1465,21 @@ var usePortalContainer = () => {
 
 // src/Overlay/Underlay.tsx
 var import_react_aria_components12 = require("react-aria-components");
-var import_system15 = require("@marigold/system");
+var import_system16 = require("@marigold/system");
 
 // src/Provider/index.ts
-var import_system14 = require("@marigold/system");
+var import_system15 = require("@marigold/system");
 var import_i18n2 = require("@react-aria/i18n");
 
 // src/Provider/MarigoldProvider.tsx
-var import_system13 = require("@marigold/system");
+var import_system14 = require("@marigold/system");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
   className,
   theme
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_system13.ThemeProvider, { theme, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_system14.ThemeProvider, { theme, className, children });
 }
 
 // src/Overlay/Underlay.tsx
@@ -1489,7 +1492,7 @@ var Underlay = ({
   keyboardDismissable,
   ...rest
 }) => {
-  const classNames3 = (0, import_system15.useClassNames)({ component: "Underlay", size: size2, variant });
+  const classNames3 = (0, import_system16.useClassNames)({ component: "Underlay", size: size2, variant });
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -1500,8 +1503,8 @@ var Underlay = ({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_aria_components12.ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => (0, import_system15.cn)(
-        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur-xs",
+      className: ({ isEntering, isExiting }) => (0, import_system16.cn)(
+        "fixed inset-0 z-40 grid place-items-center overflow-y-auto",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
         classNames3
@@ -1524,27 +1527,27 @@ var _Popover = (0, import_react13.forwardRef)(
       placement,
       ...rest
     };
-    const classNames3 = (0, import_system16.useClassNames)({
+    const classNames3 = (0, import_system17.useClassNames)({
       component: "Popover",
       variant: placement,
       // Make Popover as wide as trigger element
       className: "min-w-(--trigger-width)"
     });
-    const isSmallScreen = (0, import_system16.useSmallScreen)();
+    const isSmallScreen = (0, import_system17.useSmallScreen)();
     const portal = usePortalContainer();
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       import_react_aria_components13.Popover,
       {
         ref,
         ...props,
-        className: (0, import_system16.cn)(
+        className: (0, import_system17.cn)(
           "fixed! top-auto! bottom-0! left-0! max-h-fit! w-full",
           classNames3
         ),
         UNSTABLE_portalContainer: portal,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Underlay, { open, variant: "modal" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Underlay, { open })
         ]
       }
     ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1570,13 +1573,13 @@ var AutocompleteInput = ({
   ref
 }) => {
   const state = import_react14.default.useContext(import_react_aria_components14.ComboBoxStateContext);
-  const classNames3 = (0, import_system17.useClassNames)({ component: "ComboBox" });
+  const classNames3 = (0, import_system18.useClassNames)({ component: "ComboBox" });
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     SearchInput,
     {
       ref,
       className: {
-        action: (0, import_system17.cn)(
+        action: (0, import_system18.cn)(
           (state == null ? void 0 : state.inputValue) === "" ? "invisible" : "visible",
           classNames3
         )
@@ -1637,11 +1640,11 @@ _Autocomplete.Section = _ListBox.Section;
 // src/ComboBox/ComboBox.tsx
 var import_react19 = require("react");
 var import_react_aria_components16 = require("react-aria-components");
-var import_system23 = require("@marigold/system");
+var import_system24 = require("@marigold/system");
 
 // src/IconButton/IconButton.tsx
 var import_react_aria_components15 = require("react-aria-components");
-var import_system18 = require("@marigold/system");
+var import_system19 = require("@marigold/system");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var IconButton = ({
   className,
@@ -1650,7 +1653,7 @@ var IconButton = ({
   size: size2,
   ...props
 }) => {
-  const classNames3 = (0, import_system18.useClassNames)({
+  const classNames3 = (0, import_system19.useClassNames)({
     component: "IconButton",
     variant,
     size: size2
@@ -1658,7 +1661,7 @@ var IconButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_react_aria_components15.Button,
     {
-      className: (0, import_system18.cn)("shrink-0 cursor-pointer outline-0", classNames3, className),
+      className: (0, import_system19.cn)("shrink-0 cursor-pointer outline-0", classNames3, className),
       ...props,
       children
     }
@@ -1667,31 +1670,31 @@ var IconButton = ({
 
 // src/icons/ChevronRight.tsx
 var import_react15 = require("react");
-var import_system19 = require("@marigold/system");
+var import_system20 = require("@marigold/system");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var ChevronRight = (0, import_react15.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_system19.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_system20.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
 );
 
 // src/icons/ChevronLeft.tsx
 var import_react16 = require("react");
-var import_system20 = require("@marigold/system");
+var import_system21 = require("@marigold/system");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var ChevronLeft = (0, import_react16.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_system20.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_system21.SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
 );
 
 // src/icons/SortDown.tsx
 var import_react17 = require("react");
-var import_system21 = require("@marigold/system");
+var import_system22 = require("@marigold/system");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var SortDown = (0, import_react17.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_system21.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
+var SortDown = (0, import_react17.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_system22.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
 
 // src/icons/SortUp.tsx
 var import_react18 = require("react");
-var import_system22 = require("@marigold/system");
+var import_system23 = require("@marigold/system");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var SortUp = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_system22.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
+var SortUp = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_system23.SVG, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime26 = require("react/jsx-runtime");
@@ -1719,7 +1722,7 @@ var _ComboBox = (0, import_react19.forwardRef)(
       onInputChange: onChange2,
       ...rest
     };
-    const classNames3 = (0, import_system23.useClassNames)({ component: "ComboBox", variant, size: size2 });
+    const classNames3 = (0, import_system24.useClassNames)({ component: "ComboBox", variant, size: size2 });
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(FieldBase, { as: import_react_aria_components16.ComboBox, ref, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         _Input,
@@ -1735,10 +1738,10 @@ _ComboBox.Option = _ListBox.Item;
 _ComboBox.Section = _ListBox.Section;
 
 // src/Badge/Badge.tsx
-var import_system24 = require("@marigold/system");
+var import_system25 = require("@marigold/system");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Badge = ({ variant, size: size2, children, ...props }) => {
-  const classNames3 = (0, import_system24.useClassNames)({ component: "Badge", variant, size: size2 });
+  const classNames3 = (0, import_system25.useClassNames)({ component: "Badge", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classNames3, ...props, children });
 };
 
@@ -1749,21 +1752,21 @@ var Breakout = ({ children }) => {
 };
 
 // src/Body/Body.tsx
-var import_system25 = require("@marigold/system");
+var import_system26 = require("@marigold/system");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Body = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = (0, import_system25.useClassNames)({ component: "Body", variant, size: size2 });
+  const classNames3 = (0, import_system26.useClassNames)({ component: "Body", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { ...props, className: classNames3, children });
 };
 
 // src/Button/Button.tsx
 var import_react20 = require("react");
 var import_react_aria_components18 = require("react-aria-components");
-var import_system27 = require("@marigold/system");
+var import_system28 = require("@marigold/system");
 
 // src/ProgressCycle/ProgressCycle.tsx
 var import_react_aria_components17 = require("react-aria-components");
-var import_system26 = require("@marigold/system");
+var import_system27 = require("@marigold/system");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var ProgressCycle = ({
   size: size2 = "16",
@@ -1776,9 +1779,9 @@ var ProgressCycle = ({
     strokeWidth = 4;
   }
   const radius = `calc(50% - ${strokeWidth / 2}px)`;
-  const classNames3 = (0, import_system26.useClassNames)({ component: "ProgressCycle" });
+  const classNames3 = (0, import_system27.useClassNames)({ component: "ProgressCycle" });
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components17.ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_system26.SVG,
+    import_system27.SVG,
     {
       className: "animate-rotate-spinner origin-center fill-none",
       size: size2,
@@ -1806,7 +1809,7 @@ var ProgressCycle = ({
             strokeDasharray: "100 200",
             strokeDashoffset: "0",
             strokeLinecap: "round",
-            className: (0, import_system26.cn)(
+            className: (0, import_system27.cn)(
               "animate-progress-cycle origin-center -rotate-90",
               classNames3
             )
@@ -1830,7 +1833,7 @@ var _Button = (0, import_react20.forwardRef)(
     fullWidth,
     ...props
   }, ref) => {
-    const classNames3 = (0, import_system27.useClassNames)({
+    const classNames3 = (0, import_system28.useClassNames)({
       component: "Button",
       variant,
       size: size2,
@@ -1841,7 +1844,7 @@ var _Button = (0, import_react20.forwardRef)(
       {
         ...props,
         ref,
-        className: (0, import_system27.cn)(
+        className: (0, import_system28.cn)(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames3,
           fullWidth ? "w-full" : void 0,
@@ -1859,7 +1862,7 @@ var _Button = (0, import_react20.forwardRef)(
 );
 
 // src/Card/Card.tsx
-var import_system28 = require("@marigold/system");
+var import_system29 = require("@marigold/system");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Card = ({
   children,
@@ -1875,22 +1878,22 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames3 = (0, import_system28.useClassNames)({ component: "Card", variant, size: size2 });
+  const classNames3 = (0, import_system29.useClassNames)({ component: "Card", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system28.cn)(
+      className: (0, import_system29.cn)(
         "flex flex-col",
         classNames3,
-        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_system29.gapSpace[space],
+        import_system29.paddingSpace !== void 0 && import_system29.paddingSpace[p],
+        import_system29.paddingSpaceX !== void 0 && import_system29.paddingSpaceX[px],
+        import_system29.paddingSpaceY !== void 0 && import_system29.paddingSpaceY[py],
+        import_system29.paddingRight !== void 0 && import_system29.paddingRight[pr],
+        import_system29.paddingLeft !== void 0 && import_system29.paddingLeft[pl],
+        import_system29.paddingBottom !== void 0 && import_system29.paddingBottom[pb],
+        import_system29.paddingTop !== void 0 && import_system29.paddingTop[pt]
       ),
       children
     }
@@ -1898,7 +1901,7 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-var import_system29 = require("@marigold/system");
+var import_system30 = require("@marigold/system");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var Center = ({
   maxWidth = "100%",
@@ -1910,12 +1913,12 @@ var Center = ({
     "div",
     {
       ...props,
-      className: (0, import_system29.cn)(
+      className: (0, import_system30.cn)(
         "ms-[auto] me-[auto] box-content flex flex-col items-center justify-center",
-        import_system29.gapSpace[space],
+        import_system30.gapSpace[space],
         "max-w-(--maxWidth)"
       ),
-      style: (0, import_system29.createVar)({ maxWidth }),
+      style: (0, import_system30.createVar)({ maxWidth }),
       children
     }
   );
@@ -1924,22 +1927,22 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 var import_react22 = require("react");
 var import_react_aria_components20 = require("react-aria-components");
-var import_system32 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 
 // src/Checkbox/CheckBoxField.tsx
-var import_system30 = require("@marigold/system");
+var import_system31 = require("@marigold/system");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var CheckboxField = ({ children, labelWidth }) => {
-  const classNames3 = (0, import_system30.useClassNames)({ component: "Field" });
+  const classNames3 = (0, import_system31.useClassNames)({ component: "Field" });
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: classNames3, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-(--labelWidth)", style: (0, import_system30.createVar)({ labelWidth }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-(--labelWidth)", style: (0, import_system31.createVar)({ labelWidth }) }),
     children
   ] });
 };
 
 // src/Checkbox/CheckboxGroup.tsx
 var import_react_aria_components19 = require("react-aria-components");
-var import_system31 = require("@marigold/system");
+var import_system32 = require("@marigold/system");
 
 // src/Checkbox/Context.tsx
 var import_react21 = require("react");
@@ -1960,7 +1963,7 @@ var _CheckboxGroup = ({
   orientation = "vertical",
   ...rest
 }) => {
-  const classNames3 = (0, import_system31.useClassNames)({
+  const classNames3 = (0, import_system32.useClassNames)({
     component: "Checkbox",
     variant,
     size: size2,
@@ -1980,7 +1983,7 @@ var _CheckboxGroup = ({
       role: "presentation",
       "data-orientation": orientation,
       "data-group": "checkbox",
-      className: (0, import_system31.cn)(
+      className: (0, import_system32.cn)(
         classNames3.group,
         "group/checkboxgroup flex items-start",
         orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -2013,7 +2016,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     "div",
     {
       "aria-hidden": "true",
-      className: (0, import_system32.cn)(
+      className: (0, import_system33.cn)(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -2051,7 +2054,7 @@ var _Checkbox = (0, import_react22.forwardRef)(
     };
     const { labelWidth } = useFieldGroupContext();
     const group = useCheckboxGroupContext();
-    const classNames3 = (0, import_system32.useClassNames)({
+    const classNames3 = (0, import_system33.useClassNames)({
       component: "Checkbox",
       variant: variant || (group == null ? void 0 : group.variant),
       size: size2 || (group == null ? void 0 : group.size)
@@ -2060,7 +2063,7 @@ var _Checkbox = (0, import_react22.forwardRef)(
       import_react_aria_components20.Checkbox,
       {
         ref,
-        className: (0, import_system32.cn)(
+        className: (0, import_system33.cn)(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-disabled:cursor-not-allowed",
           classNames3.container
@@ -2075,7 +2078,7 @@ var _Checkbox = (0, import_react22.forwardRef)(
               className: classNames3.checkbox
             }
           ),
-          (props.children || label) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: classNames3.label, children: props.children || label })
+          label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: classNames3.label, children: label })
         ] })
       }
     );
@@ -2086,7 +2089,7 @@ _Checkbox.Group = _CheckboxGroup;
 
 // src/Columns/Columns.tsx
 var import_react23 = require("react");
-var import_system33 = require("@marigold/system");
+var import_system34 = require("@marigold/system");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var Columns = ({
   space = 0,
@@ -2106,20 +2109,20 @@ var Columns = ({
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
-      className: (0, import_system33.cn)(
+      className: (0, import_system34.cn)(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
-        import_system33.gapSpace[space]
+        import_system34.gapSpace[space]
       ),
       ...props,
       children: import_react23.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
-          className: (0, import_system33.cn)(
+          className: (0, import_system34.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_system34.createVar)({
             collapseAt,
             columnSize: columns[idx]
           }),
@@ -2131,7 +2134,7 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-var import_system34 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var containerTextLength = {
   short: "40ch",
@@ -2164,14 +2167,14 @@ var Container = ({
   "div",
   {
     ...props,
-    className: (0, import_system34.cn)(
+    className: (0, import_system35.cn)(
       "grid",
-      import_system34.placeItems[alignItems],
+      import_system35.placeItems[alignItems],
       gridColsAlign[align],
       gridColumn[align],
-      import_system34.gapSpace[space]
+      import_system35.gapSpace[space]
     ),
-    style: (0, import_system34.createVar)({
+    style: (0, import_system35.createVar)({
       maxTextWidth: containerTextLength[contentLength],
       maxHeadlineWidth: containerHeadlineLength[contentLength]
     }),
@@ -2182,16 +2185,16 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 var import_react29 = require("react");
 var import_react_aria_components26 = require("react-aria-components");
-var import_system39 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 
 // src/CloseButton/CloseButton.tsx
 var import_react24 = require("react");
 var import_react_aria_components21 = require("react-aria-components");
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var CloseButton = (0, import_react24.forwardRef)(
   ({ className, size: size2, variant, ...props }, ref) => {
-    const classNames3 = (0, import_system35.useClassNames)({
+    const classNames3 = (0, import_system36.useClassNames)({
       component: "CloseButton",
       className,
       size: size2,
@@ -2204,30 +2207,23 @@ var CloseButton = (0, import_react24.forwardRef)(
 // src/Overlay/Modal.tsx
 var import_react25 = require("react");
 var import_react_aria_components22 = require("react-aria-components");
+var import_system37 = require("@marigold/system");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var _Modal = (0, import_react25.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var _Modal = (0, import_react25.forwardRef)(({ size: size2, open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
+  const className = (0, import_system37.useClassNames)({ component: "Modal", size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
-      variant: "modal",
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        import_react_aria_components22.Modal,
-        {
-          ref,
-          className: "relative flex w-full justify-center",
-          ...props,
-          children: props.children
-        }
-      )
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components22.Modal, { ...props, className, ref, children: props.children })
     }
   );
 });
@@ -2387,36 +2383,36 @@ var NonModal = (0, import_react27.forwardRef)(
 );
 
 // src/Dialog/DialogActions.tsx
-var import_system36 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var DialogActions = ({ variant, size: size2, children }) => {
-  const classNames3 = (0, import_system36.useClassNames)({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_system36.cn)("[grid-area:actions]", classNames3.actions), children });
+  const classNames3 = (0, import_system38.useClassNames)({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_system38.cn)("[grid-area:actions]", classNames3.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-var import_system37 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var DialogContent = ({
   variant,
   size: size2,
   children
 }) => {
-  const classNames3 = (0, import_system37.useClassNames)({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_system37.cn)("[grid-area:content]", classNames3.content), children });
+  const classNames3 = (0, import_system39.useClassNames)({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_system39.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
 var import_react_aria_components24 = require("react-aria-components");
-var import_system38 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DialogTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = (0, import_system38.useClassNames)({
+  const classNames3 = (0, import_system40.useClassNames)({
     component: "Dialog",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Header, { className: (0, import_system38.cn)("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Heading, { slot: "title", className: classNames3.title, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Header, { className: (0, import_system40.cn)("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Heading, { slot: "title", className: classNames3.title, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
@@ -2429,7 +2425,6 @@ var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
-  size: size2,
   ...rest
 }) => {
   const props = {
@@ -2444,12 +2439,12 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var _Dialog = (0, import_react29.forwardRef)(
-  (props, ref) => {
+  ({ variant, size: size2, ...props }, ref) => {
     var _a;
-    const classNames3 = (0, import_system39.useClassNames)({
+    const classNames3 = (0, import_system41.useClassNames)({
       component: "Dialog",
-      variant: props.variant,
-      size: props.size
+      variant,
+      size: size2
     });
     const { isDismissable, isKeyboardDismissDisabled, isOpen } = (0, import_react29.useContext)(DialogContext);
     const state = (0, import_react29.useContext)(import_react_aria_components26.OverlayTriggerStateContext);
@@ -2463,13 +2458,14 @@ var _Dialog = (0, import_react29.forwardRef)(
         dismissable: isDismissable,
         keyboardDismissable: isKeyboardDismissDisabled,
         open: isOpen,
+        size: size2,
         children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           import_react_aria_components26.Dialog,
           {
             ...props,
             ref,
-            className: (0, import_system39.cn)(
-              "relative outline-hidden [&>*:not(:last-child)]:mb-4",
+            className: (0, import_system41.cn)(
+              "relative mx-auto outline-hidden [&>*:not(:last-child)]:mb-4",
               "grid [grid-template-areas:'title'_'content'_'actions']",
               classNames3.container
             ),
@@ -2496,18 +2492,18 @@ _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
 var import_react_aria_components27 = require("react-aria-components");
-var import_system40 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
-  const classNames3 = (0, import_system40.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components27.Separator, { className: (0, import_system40.cn)("border-none", classNames3), ...props });
+  const classNames3 = (0, import_system42.useClassNames)({ component: "Divider", variant });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components27.Separator, { className: (0, import_system42.cn)("border-none", classNames3), ...props });
 };
 
 // src/Drawer/Drawer.tsx
 var import_react31 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
 var import_landmark = require("@react-aria/landmark");
-var import_system45 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 
 // src/Drawer/Context.tsx
 var import_react30 = require("react");
@@ -2518,11 +2514,11 @@ var DrawerContext = (0, import_react30.createContext)({
 var useDrawerContext = () => (0, import_react30.useContext)(DrawerContext);
 
 // src/Drawer/DrawerActions.tsx
-var import_system41 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var DrawerActions = ({ variant, size: size2, children }) => {
   const ctx = useDrawerContext();
-  const classNames3 = (0, import_system41.useClassNames)({
+  const classNames3 = (0, import_system43.useClassNames)({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
@@ -2530,7 +2526,7 @@ var DrawerActions = ({ variant, size: size2, children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
-      className: (0, import_system41.cn)("[grid-area:actions]", classNames3.actions),
+      className: (0, import_system43.cn)("[grid-area:actions]", classNames3.actions),
       style: { "--i": 2 },
       children
     }
@@ -2538,7 +2534,7 @@ var DrawerActions = ({ variant, size: size2, children }) => {
 };
 
 // src/Drawer/DrawerContent.tsx
-var import_system42 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var DrawerContent = ({
   variant,
@@ -2546,7 +2542,7 @@ var DrawerContent = ({
   children
 }) => {
   const ctx = useDrawerContext();
-  const classNames3 = (0, import_system42.useClassNames)({
+  const classNames3 = (0, import_system44.useClassNames)({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
@@ -2554,7 +2550,7 @@ var DrawerContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
-      className: (0, import_system42.cn)("[grid-area:content]", classNames3.content),
+      className: (0, import_system44.cn)("[grid-area:content]", classNames3.content),
       style: { "--i": 1 },
       children
     }
@@ -2562,19 +2558,19 @@ var DrawerContent = ({
 };
 
 // src/Drawer/DrawerModal.tsx
-var import_system43 = require("@marigold/system");
+var import_system45 = require("@marigold/system");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var DrawerModal = ({
   children,
   className,
   ...props
 }) => {
-  const isSmallScreen = (0, import_system43.useSmallScreen)();
+  const isSmallScreen = (0, import_system45.useSmallScreen)();
   return isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(_Modal, { children }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     NonModal,
     {
       ...props,
-      className: (0, import_system43.cn)("fixed top-0 right-0 bottom-0", className),
+      className: (0, import_system45.cn)("fixed top-0 right-0 bottom-0", className),
       children
     }
   );
@@ -2582,19 +2578,19 @@ var DrawerModal = ({
 
 // src/Drawer/DrawerTitle.tsx
 var import_react_aria_components28 = require("react-aria-components");
-var import_system44 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var DrawerTitle = ({ variant, size: size2, children }) => {
-  const ctx = useDrawerContext();
-  const classNames3 = (0, import_system44.useClassNames)({
+  const classNames3 = (0, import_system46.useClassNames)({
     component: "Drawer",
-    variant: variant != null ? variant : ctx.variant,
-    size: size2 != null ? size2 : ctx.size
+    size: size2,
+    variant,
+    context: DrawerContext
   });
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_react_aria_components28.Header,
     {
-      className: (0, import_system44.cn)("[grid-area:title]", classNames3.header),
+      className: (0, import_system46.cn)("[grid-area:title]", classNames3.header),
       style: { "--i": 0 },
       children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_aria_components28.Heading, { slot: "title", level: 2, className: classNames3.title, children })
     }
@@ -2623,9 +2619,9 @@ var Drawer = ({
   ...props
 }) => {
   const ref = (0, import_react31.useRef)(null);
-  const classNames3 = (0, import_system45.useClassNames)({ component: "Drawer", variant, size: size2 });
+  const classNames3 = (0, import_system47.useClassNames)({ component: "Drawer", variant, size: size2 });
   const ctx = (0, import_react31.useContext)(import_react_aria_components30.OverlayTriggerStateContext);
-  const isSmallScreen = (0, import_system45.useSmallScreen)();
+  const isSmallScreen = (0, import_system47.useSmallScreen)();
   const landmarkAria = (0, import_landmark.useLandmark)({ ...props, role }, ref);
   const landmarkProps = isSmallScreen ? {} : landmarkAria.landmarkProps;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -2639,7 +2635,7 @@ var Drawer = ({
         {
           ...props,
           ...landmarkProps,
-          className: (0, import_system45.cn)(
+          className: (0, import_system47.cn)(
             "h-(--visual-viewport-height) outline-none",
             'grid [grid-template-areas:"title"_"content"_"actions"]',
             classNames3.container
@@ -2667,27 +2663,27 @@ Drawer.Content = DrawerContent;
 Drawer.Actions = DrawerActions;
 
 // src/Footer/Footer.tsx
-var import_system46 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var Footer = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = (0, import_system46.useClassNames)({ component: "Footer", variant, size: size2 });
+  const classNames3 = (0, import_system48.useClassNames)({ component: "Footer", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("footer", { ...props, className: classNames3, children });
 };
 
 // src/Form/Form.tsx
 var import_react_aria_components31 = require("react-aria-components");
-var import_system47 = require("@marigold/system");
+var import_system49 = require("@marigold/system");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   import_react_aria_components31.Form,
   {
     ...props,
-    className: (0, import_system47.cn)(import_system47.maxWidth[maxWidth], unstyled && "contents")
+    className: (0, import_system49.cn)(import_system49.maxWidth[maxWidth], unstyled && "contents")
   }
 );
 
 // src/Grid/Grid.tsx
-var import_system48 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 
 // src/Grid/GridArea.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
@@ -2709,7 +2705,7 @@ var Grid = ({
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
-      className: (0, import_system48.cn)("grid", import_system48.gapSpace[space], import_system48.height[height]),
+      className: (0, import_system50.cn)("grid", import_system50.gapSpace[space], import_system50.height[height]),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -2724,10 +2720,10 @@ Grid.Area = GridArea;
 
 // src/Header/Header.tsx
 var import_react_aria_components32 = require("react-aria-components");
-var import_system49 = require("@marigold/system");
+var import_system51 = require("@marigold/system");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var _Header = ({ variant, size: size2, ...props }) => {
-  const classNames3 = (0, import_system49.useClassNames)({
+  const classNames3 = (0, import_system51.useClassNames)({
     component: "Header",
     variant,
     size: size2
@@ -2737,7 +2733,7 @@ var _Header = ({ variant, size: size2, ...props }) => {
 
 // src/Headline/Headline.tsx
 var import_react_aria_components33 = require("react-aria-components");
-var import_system50 = require("@marigold/system");
+var import_system52 = require("@marigold/system");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var _Headline = ({
   variant,
@@ -2748,7 +2744,7 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const classNames3 = (0, import_system50.useClassNames)({
+  const classNames3 = (0, import_system52.useClassNames)({
     component: "Headline",
     variant,
     size: size2 != null ? size2 : `level-${level}`
@@ -2758,20 +2754,20 @@ var _Headline = ({
     {
       level: Number(level),
       ...props,
-      className: (0, import_system50.cn)(
+      className: (0, import_system52.cn)(
         classNames3,
         "max-w-(--maxHeadlineWidth)",
         // possibly set by a <Container>
-        import_system50.textAlign[align]
+        import_system52.textAlign[align]
       ),
-      style: { color: color && (0, import_system50.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system52.ensureCssVar)(color, "color") },
       children
     }
   );
 };
 
 // src/Image/Image.tsx
-var import_system51 = require("@marigold/system");
+var import_system53 = require("@marigold/system");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var Image = ({
   variant,
@@ -2780,24 +2776,24 @@ var Image = ({
   position: position2 = "none",
   ...props
 }) => {
-  const classNames3 = (0, import_system51.useClassNames)({ component: "Image", variant, size: size2 });
+  const classNames3 = (0, import_system53.useClassNames)({ component: "Image", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system51.cn)(
+      className: (0, import_system53.cn)(
         fit !== "none" && "h-full w-full",
         classNames3,
-        import_system51.objectFit[fit],
-        import_system51.objectPosition[position2]
+        import_system53.objectFit[fit],
+        import_system53.objectPosition[position2]
       )
     }
   );
 };
 
 // src/Inline/Inline.tsx
-var import_system52 = require("@marigold/system");
+var import_system54 = require("@marigold/system");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var Inline = ({
   space = 0,
@@ -2811,11 +2807,11 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: (0, import_system52.cn)(
+      className: (0, import_system54.cn)(
         "flex flex-wrap",
-        import_system52.gapSpace[space],
-        alignX && ((_b = (_a = import_system52.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system52.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        import_system54.gapSpace[space],
+        alignX && ((_b = (_a = import_system54.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system54.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -2828,11 +2824,11 @@ var import_react_aria_components36 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
 var import_react_aria_components35 = require("react-aria-components");
-var import_system54 = require("@marigold/system");
+var import_system56 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
 var import_react_aria_components34 = require("react-aria-components");
-var import_system53 = require("@marigold/system");
+var import_system55 = require("@marigold/system");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
@@ -2848,7 +2844,7 @@ var _DateSegment = ({ segment, ...props }) => {
           "span",
           {
             "aria-hidden": "true",
-            className: (0, import_system53.cn)(
+            className: (0, import_system55.cn)(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -2864,7 +2860,7 @@ var _DateSegment = ({ segment, ...props }) => {
 // src/DateField/DateInput.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
-  const classNames3 = (0, import_system54.useClassNames)({ component: "DateField", variant, size: size2 });
+  const classNames3 = (0, import_system56.useClassNames)({ component: "DateField", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react_aria_components35.Group, { className: classNames3.field, children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_aria_components35.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(_DateSegment, { className: classNames3.segment, segment }) }),
     action ? action : null
@@ -2908,11 +2904,11 @@ var _DateField = (0, import_react32.forwardRef)(
 // src/Calendar/Calendar.tsx
 var import_react37 = require("react");
 var import_react_aria_components42 = require("react-aria-components");
-var import_system59 = require("@marigold/system");
+var import_system61 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
 var import_react_aria_components38 = require("react-aria-components");
-var import_system56 = require("@marigold/system");
+var import_system58 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
@@ -2920,7 +2916,7 @@ var import_react33 = require("react");
 var import_react_aria_components37 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
-var import_system55 = require("@marigold/system");
+var import_system57 = require("@marigold/system");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
   const state = (0, import_react33.useContext)(import_react_aria_components37.CalendarStateContext);
@@ -2938,21 +2934,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames3 = (0, import_system55.useClassNames)({ component: "Calendar" });
+  const classNames3 = (0, import_system57.useClassNames)({ component: "Calendar" });
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
-  const classNames3 = (0, import_system56.useClassNames)({ component: "Calendar" });
+  const classNames3 = (0, import_system58.useClassNames)({ component: "Calendar" });
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react_aria_components38.CalendarGrid, { className: classNames3.calendarGrid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CalendarGridHeader, {}),
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components38.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       import_react_aria_components38.CalendarCell,
       {
         date,
-        className: (0, import_system56.cn)(
+        className: (0, import_system58.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",
           classNames3.calendarCell
         )
@@ -2964,7 +2960,7 @@ var _CalendarGrid = () => {
 // src/Calendar/CalendarListBox.tsx
 var import_react34 = require("react");
 var import_react_aria_components39 = require("react-aria-components");
-var import_system57 = require("@marigold/system");
+var import_system59 = require("@marigold/system");
 
 // src/Calendar/useFormattedMonths.tsx
 var import_i18n4 = require("@react-aria/i18n");
@@ -2992,13 +2988,13 @@ function CalendarListBox({
   const state = (0, import_react34.useContext)(import_react_aria_components39.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = (0, import_system57.useClassNames)({ component: "Select" });
+  const { select: selectClassNames } = (0, import_system59.useClassNames)({ component: "Select" });
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: (0, import_system57.cn)(buttonStyles, selectClassNames),
+      className: (0, import_system59.cn)(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
@@ -3009,14 +3005,14 @@ function CalendarListBox({
 }
 
 // src/Calendar/MonthControls.tsx
-var import_system58 = require("@marigold/system");
+var import_system60 = require("@marigold/system");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function MonthControls() {
-  const classNames3 = (0, import_system58.useClassNames)({ component: "Calendar" });
+  const classNames3 = (0, import_system60.useClassNames)({ component: "Calendar" });
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
-      className: (0, import_system58.cn)(
+      className: (0, import_system60.cn)(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button]:px-2 [&_button]:py-1 [&_button:disabled]:cursor-not-allowed",
         classNames3.calendarControllers
       ),
@@ -3024,7 +3020,7 @@ function MonthControls() {
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           IconButton,
           {
-            className: (0, import_system58.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: (0, import_system60.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "previous",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronLeft, {})
@@ -3033,7 +3029,7 @@ function MonthControls() {
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           IconButton,
           {
-            className: (0, import_system58.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: (0, import_system60.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "next",
             children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronRight, {})
@@ -3169,7 +3165,7 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = (0, import_system59.useClassNames)({ component: "Calendar" });
+  const classNames3 = (0, import_system61.useClassNames)({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = (0, import_react37.useState)();
   const ViewMap = {
     month: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthListBox_default, { setSelectedDropdown }),
@@ -3178,7 +3174,7 @@ var _Calendar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     import_react_aria_components42.Calendar,
     {
-      className: (0, import_system59.cn)(
+      className: (0, import_system61.cn)(
         "flex min-h-[350px] w-fit flex-col rounded-xs p-4",
         classNames3.calendar
       ),
@@ -3214,7 +3210,7 @@ var _Calendar = ({
 // src/DatePicker/DatePicker.tsx
 var import_react38 = __toESM(require("react"));
 var import_react_aria_components43 = require("react-aria-components");
-var import_system60 = require("@marigold/system");
+var import_system62 = require("@marigold/system");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var _DatePicker = import_react38.default.forwardRef(
   ({
@@ -3239,7 +3235,7 @@ var _DatePicker = import_react38.default.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = (0, import_system60.useClassNames)({
+    const classNames3 = (0, import_system62.useClassNames)({
       component: "DatePicker",
       size: size2,
       variant
@@ -3277,15 +3273,15 @@ var _DatePicker = import_react38.default.forwardRef(
 );
 
 // src/Inset/Inset.tsx
-var import_system61 = require("@marigold/system");
+var import_system63 = require("@marigold/system");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
   "div",
   {
-    className: (0, import_system61.cn)(
-      space && import_system61.paddingSpace[space],
-      !space && spaceX && import_system61.paddingSpaceX[spaceX],
-      !space && spaceY && import_system61.paddingSpaceY[spaceY]
+    className: (0, import_system63.cn)(
+      space && import_system63.paddingSpace[space],
+      !space && spaceX && import_system63.paddingSpaceX[spaceX],
+      !space && spaceY && import_system63.paddingSpaceY[spaceY]
     ),
     children
   }
@@ -3294,11 +3290,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 // src/Link/Link.tsx
 var import_react39 = require("react");
 var import_react_aria_components44 = require("react-aria-components");
-var import_system62 = require("@marigold/system");
+var import_system64 = require("@marigold/system");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var _Link = (0, import_react39.forwardRef)(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = (0, import_system62.useClassNames)({
+    const classNames3 = (0, import_system64.useClassNames)({
       component: "Link",
       variant,
       size: size2
@@ -3308,7 +3304,7 @@ var _Link = (0, import_react39.forwardRef)(
 );
 
 // src/List/List.tsx
-var import_system63 = require("@marigold/system");
+var import_system65 = require("@marigold/system");
 
 // src/List/Context.ts
 var import_react40 = require("react");
@@ -3332,30 +3328,30 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = (0, import_system63.useClassNames)({ component: "List", variant, size: size2 });
+  const classNames3 = (0, import_system65.useClassNames)({ component: "List", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 var import_react_aria_components47 = require("react-aria-components");
-var import_system66 = require("@marigold/system");
+var import_system68 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
 var import_react_aria_components45 = require("react-aria-components");
-var import_system64 = require("@marigold/system");
+var import_system66 = require("@marigold/system");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = (0, import_system64.useClassNames)({ component: "Menu" });
+  const classNames3 = (0, import_system66.useClassNames)({ component: "Menu" });
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components45.MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 var import_react_aria_components46 = require("react-aria-components");
-var import_system65 = require("@marigold/system");
+var import_system67 = require("@marigold/system");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = (0, import_system65.useClassNames)({ component: "Menu" });
+  const className = (0, import_system67.useClassNames)({ component: "Menu" });
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react_aria_components46.MenuSection, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(_Header, { className: className.section, children: title }),
     children
@@ -3375,7 +3371,7 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = (0, import_system66.useClassNames)({ component: "Menu", variant, size: size2 });
+  const classNames3 = (0, import_system68.useClassNames)({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react_aria_components47.MenuTrigger, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react_aria_components47.Menu, { ...props, className: classNames3.container, children }) })
@@ -3386,7 +3382,7 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 var import_react_aria_components48 = require("react-aria-components");
-var import_system67 = require("@marigold/system");
+var import_system69 = require("@marigold/system");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var ActionMenu = ({
   variant,
@@ -3394,9 +3390,9 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames3 = (0, import_system67.useClassNames)({ component: "Menu", variant, size: size2 });
+  const classNames3 = (0, import_system69.useClassNames)({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_react_aria_components48.MenuTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_system67.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_system69.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components48.Menu, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
@@ -3404,7 +3400,7 @@ var ActionMenu = ({
 // src/SectionMessage/SectionMessage.tsx
 var import_react42 = require("react");
 var import_button = require("@react-aria/button");
-var import_system70 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
 var import_react41 = require("react");
@@ -3412,21 +3408,21 @@ var SectionMessageContext = (0, import_react41.createContext)({});
 var useSectionMessageContext = () => (0, import_react41.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-var import_system68 = require("@marigold/system");
+var import_system70 = require("@marigold/system");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_system68.cn)("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_system70.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-var import_system69 = require("@marigold/system");
+var import_system71 = require("@marigold/system");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_system69.cn)("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_system71.cn)("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
@@ -3507,7 +3503,7 @@ var SectionMessage = ({
   ...props
 }) => {
   const buttonRef = (0, import_react42.useRef)(null);
-  const classNames3 = (0, import_system70.useClassNames)({
+  const classNames3 = (0, import_system72.useClassNames)({
     component: "SectionMessage",
     variant,
     size: size2
@@ -3528,16 +3524,16 @@ var SectionMessage = ({
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: (0, import_system70.cn)("grid auto-rows-min", classNames3.container),
+      className: (0, import_system72.cn)("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_system70.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon4, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_system72.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon4, {}) }),
         closeButton && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           CloseButton,
           {
             ...buttonProps,
             ref: buttonRef,
             "aria-label": "close",
-            className: (0, import_system70.cn)("[grid-area:close]", classNames3.close),
+            className: (0, import_system72.cn)("[grid-area:close]", classNames3.close),
             onPress: handleClose
           }
         ),
@@ -9049,7 +9045,7 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 var import_utils8 = require("@react-aria/utils");
-var import_system71 = require("@marigold/system");
+var import_system73 = require("@marigold/system");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var propsToBeRemoved = [
   "clearValue",
@@ -9090,17 +9086,17 @@ var MultiValueRemove2 = ({ innerProps }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_aria_components49.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime84.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 getClassNames = (classNames3) => ({
-  control: () => (0, import_system71.cn)(
+  control: () => (0, import_system73.cn)(
     "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
   indicatorSeparator: () => "hidden",
-  menu: () => (0, import_system71.cn)("b", classNames3.listContainer),
-  menuList: () => (0, import_system71.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
-  multiValue: () => (0, import_system71.cn)(classNames3.tag, "m-0 "),
+  menu: () => (0, import_system73.cn)("b", classNames3.listContainer),
+  menuList: () => (0, import_system73.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
+  multiValue: () => (0, import_system73.cn)(classNames3.tag, "m-0 "),
   multiValueLabel: () => "p-0",
-  option: ({ isFocused }) => (0, import_system71.cn)(classNames3.option, { isFocused }),
+  option: ({ isFocused }) => (0, import_system73.cn)(classNames3.option, { isFocused }),
   placeholder: () => "hidden",
   valueContainer: () => classNames3.valueContainer
 });
@@ -9121,7 +9117,7 @@ var Multiselect = ({
   onSelectionChange,
   ...rest
 }) => {
-  const classNames3 = (0, import_system71.useClassNames)({
+  const classNames3 = (0, import_system73.useClassNames)({
     component: "MultiSelect",
     size: size2,
     variant
@@ -9165,14 +9161,14 @@ var Multiselect = ({
             // react-select doesn't handle readonly so we had to do it manually here
             // keep to the button disabled in read only to prevent menu from opening
             isDisabled: disabled || readOnly,
-            className: (0, import_system71.cn)("flex items-center", classNames3.closeButton)
+            className: (0, import_system73.cn)("flex items-center", classNames3.closeButton)
           }
         ]
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
         "div",
         {
-          className: (0, import_system71.cn)(classNames3.field, "group/field"),
+          className: (0, import_system73.cn)(classNames3.field, "group/field"),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
@@ -9195,6 +9191,7 @@ var Multiselect = ({
                   valueContainer: (base) => ({ ...base, padding: 0 }),
                   container: (base) => ({ ...base, pointerEvents: "auto" }),
                   menuList: () => ({}),
+                  // eslint-disable-next-line no-empty-pattern
                   option: ({}) => ({}),
                   multiValue: () => ({}),
                   multiValueLabel: () => ({})
@@ -9212,6 +9209,7 @@ var Multiselect = ({
                 components: {
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
+                  // eslint-disable-next-line react/prop-types
                   DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                     "button",
                     {
@@ -9235,11 +9233,11 @@ var Multiselect = ({
 // src/NumberField/NumberField.tsx
 var import_react51 = require("react");
 var import_react_aria_components51 = require("react-aria-components");
-var import_system73 = require("@marigold/system");
+var import_system75 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
 var import_react_aria_components50 = require("react-aria-components");
-var import_system72 = require("@marigold/system");
+var import_system74 = require("@marigold/system");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
   "path",
@@ -9262,7 +9260,7 @@ var _StepButton = ({ direction, className, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     import_react_aria_components50.Button,
     {
-      className: (0, import_system72.cn)(
+      className: (0, import_system74.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -9288,7 +9286,7 @@ var _NumberField = (0, import_react51.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system73.useClassNames)({
+    const classNames3 = (0, import_system75.useClassNames)({
       component: "NumberField",
       size: size2,
       variant
@@ -9308,7 +9306,7 @@ var _NumberField = (0, import_react51.forwardRef)(
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_react_aria_components51.Group, { className: (0, import_system73.cn)("flex items-stretch", classNames3.group), children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_react_aria_components51.Group, { className: (0, import_system75.cn)("flex items-stretch", classNames3.group), children: [
           showStepper && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             _StepButton,
             {
@@ -9321,7 +9319,7 @@ var _NumberField = (0, import_react51.forwardRef)(
             import_react_aria_components51.Input,
             {
               ref,
-              className: (0, import_system73.cn)("h-full flex-1 outline-none", classNames3.input)
+              className: (0, import_system75.cn)("h-full flex-1 outline-none", classNames3.input)
             }
           ),
           showStepper && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
@@ -9341,7 +9339,7 @@ var _NumberField = (0, import_react51.forwardRef)(
 // src/Pagination/Pagination.tsx
 var import_react54 = require("react");
 var import_focus2 = require("@react-aria/focus");
-var import_system76 = require("@marigold/system");
+var import_system78 = require("@marigold/system");
 
 // src/Pagination/Ellipsis.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
@@ -9359,11 +9357,11 @@ var Ellipsis = () => {
 // src/Pagination/NavigationButton.tsx
 var import_react52 = require("react");
 var import_button2 = require("@react-aria/button");
-var import_system74 = require("@marigold/system");
+var import_system76 = require("@marigold/system");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var NavigationButton = (props) => {
   const ref = (0, import_react52.useRef)(null);
-  const classNames3 = (0, import_system74.useClassNames)({
+  const classNames3 = (0, import_system76.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button2.useButton)(props, ref);
@@ -9383,7 +9381,7 @@ var NavigationButton = (props) => {
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: (0, import_system74.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
+      className: (0, import_system76.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position2 === "left" && children,
@@ -9397,11 +9395,11 @@ var NavigationButton = (props) => {
 // src/Pagination/PageButton.tsx
 var import_react53 = require("react");
 var import_button3 = require("@react-aria/button");
-var import_system75 = require("@marigold/system");
+var import_system77 = require("@marigold/system");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var PageButton = (props) => {
   const ref = (0, import_react53.useRef)(null);
-  const classNames3 = (0, import_system75.useClassNames)({
+  const classNames3 = (0, import_system77.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button3.useButton)(props, ref);
@@ -9480,7 +9478,7 @@ var InnerPagination = ({
       onChange2(newPage);
     }
   };
-  const classNames3 = (0, import_system76.useClassNames)({ component: "Pagination" });
+  const classNames3 = (0, import_system78.useClassNames)({ component: "Pagination" });
   const handleKeyDown = (onEnter) => (e) => {
     if (e.key === "ArrowRight") {
       e.preventDefault();
@@ -9565,7 +9563,7 @@ var _Pagination = ({
 // src/Radio/Radio.tsx
 var import_react56 = require("react");
 var import_react_aria_components53 = require("react-aria-components");
-var import_system78 = require("@marigold/system");
+var import_system80 = require("@marigold/system");
 
 // src/Radio/Context.ts
 var import_react55 = require("react");
@@ -9576,7 +9574,7 @@ var useRadioGroupContext = () => (0, import_react55.useContext)(RadioGroupContex
 
 // src/Radio/RadioGroup.tsx
 var import_react_aria_components52 = require("react-aria-components");
-var import_system77 = require("@marigold/system");
+var import_system79 = require("@marigold/system");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
@@ -9593,7 +9591,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = (0, import_system77.useClassNames)({ component: "Radio", variant, size: size2 });
+  const classNames3 = (0, import_system79.useClassNames)({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9618,7 +9616,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system77.cn)(
+          className: (0, import_system79.cn)(
             classNames3.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -9636,7 +9634,7 @@ var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { viewBox:
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
   "div",
   {
-    className: (0, import_system78.cn)(
+    className: (0, import_system80.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -9648,7 +9646,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx
 var _Radio = (0, import_react56.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = (0, import_system78.useClassNames)({
+    const classNames3 = (0, import_system80.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
@@ -9657,7 +9655,7 @@ var _Radio = (0, import_react56.forwardRef)(
       import_react_aria_components53.Radio,
       {
         ref,
-        className: (0, import_system78.cn)(
+        className: (0, import_system80.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -9671,7 +9669,7 @@ var _Radio = (0, import_react56.forwardRef)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system78.cn)(
+              className: (0, import_system80.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames3.radio
               )
@@ -9711,7 +9709,7 @@ var _SearchField = (0, import_react57.forwardRef)(
 // src/Select/Select.tsx
 var import_react58 = require("react");
 var import_react_aria_components55 = require("react-aria-components");
-var import_system79 = require("@marigold/system");
+var import_system81 = require("@marigold/system");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var _Select = (0, import_react58.forwardRef)(
   ({
@@ -9733,18 +9731,18 @@ var _Select = (0, import_react58.forwardRef)(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = (0, import_system79.useClassNames)({ component: "Select", variant, size: size2 });
+    const classNames3 = (0, import_system81.useClassNames)({ component: "Select", variant, size: size2 });
     return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(FieldBase, { as: import_react_aria_components55.Select, ref, variant, size: size2, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
         IconButton,
         {
-          className: (0, import_system79.cn)(
+          className: (0, import_system81.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames3.select
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components55.SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ChevronDown, { className: (0, import_system79.cn)("size-4", classNames3.icon) })
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ChevronDown, { className: (0, import_system81.cn)("size-4", classNames3.icon) })
           ]
         }
       ),
@@ -9758,7 +9756,7 @@ _Select.Section = _ListBox.Section;
 // src/SelectList/SelectList.tsx
 var import_react61 = require("react");
 var import_react_aria_components57 = require("react-aria-components");
-var import_system81 = require("@marigold/system");
+var import_system83 = require("@marigold/system");
 
 // src/SelectList/Context.ts
 var import_react59 = require("react");
@@ -9770,7 +9768,7 @@ var useSelectListContext = () => (0, import_react59.useContext)(SelectListContex
 // src/SelectList/SelectListItem.tsx
 var import_react60 = require("react");
 var import_react_aria_components56 = require("react-aria-components");
-var import_system80 = require("@marigold/system");
+var import_system82 = require("@marigold/system");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var _SelectListItem = (0, import_react60.forwardRef)(
   ({ children, ...props }, ref) => {
@@ -9781,7 +9779,7 @@ var _SelectListItem = (0, import_react60.forwardRef)(
       {
         textValue,
         ...props,
-        className: (0, import_system80.cn)("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.option),
+        className: (0, import_system82.cn)("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.option),
         ref,
         children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "flex gap-2", children: [
           selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(_Checkbox, { slot: "selection" }),
@@ -9796,7 +9794,7 @@ var _SelectListItem = (0, import_react60.forwardRef)(
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var _SelectList = (0, import_react61.forwardRef)(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = (0, import_system81.useClassNames)({ component: "ListBox" });
+    const classNames3 = (0, import_system83.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
@@ -9807,7 +9805,7 @@ var _SelectList = (0, import_react61.forwardRef)(
         ...props,
         layout: "grid",
         ref,
-        className: (0, import_system81.cn)(
+        className: (0, import_system83.cn)(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -9819,7 +9817,7 @@ var _SelectList = (0, import_react61.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system82 = require("@marigold/system");
+var import_system84 = require("@marigold/system");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
@@ -9830,8 +9828,8 @@ var Scrollable = ({
   "div",
   {
     ...props,
-    className: (0, import_system82.cn)(["sticky h-(--height) overflow-auto", import_system82.width[width]]),
-    style: (0, import_system82.createVar)({ height }),
+    className: (0, import_system84.cn)(["sticky h-(--height) overflow-auto", import_system84.width[width]]),
+    style: (0, import_system84.createVar)({ height }),
     children
   }
 );
@@ -9839,7 +9837,7 @@ var Scrollable = ({
 // src/Slider/Slider.tsx
 var import_react62 = require("react");
 var import_react_aria_components58 = require("react-aria-components");
-var import_system83 = require("@marigold/system");
+var import_system85 = require("@marigold/system");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var _Slider = (0, import_react62.forwardRef)(
   ({
@@ -9851,7 +9849,7 @@ var _Slider = (0, import_react62.forwardRef)(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system83.useClassNames)({
+    const classNames3 = (0, import_system85.useClassNames)({
       component: "Slider",
       variant,
       size: size2
@@ -9864,25 +9862,25 @@ var _Slider = (0, import_react62.forwardRef)(
       FieldBase,
       {
         as: import_react_aria_components58.Slider,
-        className: (0, import_system83.cn)(
+        className: (0, import_system85.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames3.container,
-          import_system83.width[width]
+          import_system85.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_Label, { children: props.children && props.children || label && label }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components58.SliderOutput, { className: (0, import_system83.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_Label, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components58.SliderOutput, { className: (0, import_system85.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
             import_react_aria_components58.SliderTrack,
             {
-              className: (0, import_system83.cn)("relative col-span-2 h-2 w-full", classNames3.track),
+              className: (0, import_system85.cn)("relative col-span-2 h-2 w-full", classNames3.track),
               children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                   "div",
                   {
-                    className: (0, import_system83.cn)(
+                    className: (0, import_system85.cn)(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames3.track
                     )
@@ -9891,7 +9889,7 @@ var _Slider = (0, import_react62.forwardRef)(
                 /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                   "div",
                   {
-                    className: (0, import_system83.cn)(
+                    className: (0, import_system85.cn)(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames3.selectedTrack
                     ),
@@ -9904,7 +9902,7 @@ var _Slider = (0, import_react62.forwardRef)(
                 state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                   import_react_aria_components58.SliderThumb,
                   {
-                    className: (0, import_system83.cn)("top-1/2 cursor-pointer", classNames3.thumb),
+                    className: (0, import_system85.cn)("top-1/2 cursor-pointer", classNames3.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: thumbLabels == null ? void 0 : thumbLabels[i]
@@ -9925,7 +9923,7 @@ var import_jsx_runtime99 = require("react/jsx-runtime");
 var Split = () => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system84 = require("@marigold/system");
+var import_system86 = require("@marigold/system");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var Stack = ({
   children,
@@ -9939,11 +9937,11 @@ var Stack = ({
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "div",
     {
-      className: (0, import_system84.cn)(
+      className: (0, import_system86.cn)(
         "flex flex-col",
-        import_system84.gapSpace[space],
-        alignX && ((_b = (_a = import_system84.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system84.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system86.gapSpace[space],
+        alignX && ((_b = (_a = import_system86.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system86.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -9955,7 +9953,7 @@ var Stack = ({
 // src/Switch/Switch.tsx
 var import_react63 = require("react");
 var import_react_aria_components59 = require("react-aria-components");
-var import_system85 = require("@marigold/system");
+var import_system87 = require("@marigold/system");
 var import_jsx_runtime101 = require("react/jsx-runtime");
 var _Switch = (0, import_react63.forwardRef)(
   ({
@@ -9968,7 +9966,7 @@ var _Switch = (0, import_react63.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system85.useClassNames)({ component: "Switch", size: size2, variant });
+    const classNames3 = (0, import_system87.useClassNames)({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -9980,14 +9978,14 @@ var _Switch = (0, import_react63.forwardRef)(
       {
         ...props,
         ref,
-        className: (0, import_system85.cn)(
-          import_system85.width[width],
+        className: (0, import_system87.cn)(
+          import_system87.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames3.container
         ),
         children: [
-          (props.children || label) && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Label, { elementType: "span", children: props.children || label }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Label, { elementType: "span", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: classNames3.track, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: classNames3.thumb }) }) })
         ]
       }
@@ -9999,7 +9997,7 @@ var _Switch = (0, import_react63.forwardRef)(
 var import_react71 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system92 = require("@marigold/system");
+var import_system94 = require("@marigold/system");
 
 // src/Table/Context.tsx
 var import_react64 = require("react");
@@ -10021,7 +10019,7 @@ var TableBody = ({
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
-        colSpan: state.collection.size,
+        colSpan: state.collection.columnCount,
         role: "rowheader",
         children: emptyState()
       }
@@ -10035,7 +10033,7 @@ var import_react65 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils9 = require("@react-aria/utils");
-var import_system86 = require("@marigold/system");
+var import_system88 = require("@marigold/system");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
   const ref = (0, import_react65.useRef)(null);
@@ -10058,12 +10056,12 @@ var TableCell = ({ cell, align = "left" }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system86.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system88.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system86.cn)(classNames3 == null ? void 0 : classNames3.cell),
+      className: (0, import_system88.cn)(classNames3 == null ? void 0 : classNames3.cell),
       ...(0, import_utils9.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
@@ -10077,7 +10075,7 @@ var import_react66 = require("react");
 var import_focus4 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils10 = require("@react-aria/utils");
-var import_system87 = require("@marigold/system");
+var import_system89 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -10116,12 +10114,12 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system87.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system89.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system87.cn)("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
+      className: (0, import_system89.cn)("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
       ...(0, import_utils10.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(_Checkbox, { ...checkboxProps })
@@ -10135,7 +10133,7 @@ var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils12 = require("@react-aria/utils");
-var import_system88 = require("@marigold/system");
+var import_system90 = require("@marigold/system");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column: column2,
@@ -10154,7 +10152,7 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
-  const stateProps = (0, import_system88.useStateProps)({
+  const stateProps = (0, import_system90.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -10163,7 +10161,7 @@ var TableColumnHeader = ({
     {
       colSpan: column2.colspan,
       ref,
-      className: (0, import_system88.cn)("cursor-default", import_system88.width[width], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system90.cn)("cursor-default", import_system90.width[width], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils12.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10177,7 +10175,7 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_system89 = require("@marigold/system");
+var import_system91 = require("@marigold/system");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
@@ -10186,7 +10184,7 @@ var TableHeader = ({ stickyHeader, children }) => {
     "thead",
     {
       ...rowGroupProps,
-      className: (0, import_system89.cn)(
+      className: (0, import_system91.cn)(
         classNames3 == null ? void 0 : classNames3.thead,
         // for sticky header &th needs to be sticky for b2b and core theme
         // for rui sticky is applied to thead
@@ -10218,13 +10216,13 @@ var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils13 = require("@react-aria/utils");
-var import_system90 = require("@marigold/system");
+var import_system92 = require("@marigold/system");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react69.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = (0, import_system90.useClassNames)({
+  const classNames3 = (0, import_system92.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10242,7 +10240,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system90.useStateProps)({
+  const stateProps = (0, import_system92.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
@@ -10253,7 +10251,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: (0, import_system90.cn)(
+      className: (0, import_system92.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10272,7 +10270,7 @@ var import_focus7 = require("@react-aria/focus");
 var import_interactions4 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils14 = require("@react-aria/utils");
-var import_system91 = require("@marigold/system");
+var import_system93 = require("@marigold/system");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column: column2,
@@ -10291,7 +10289,7 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus7.useFocusRing)();
-  const stateProps = (0, import_system91.useStateProps)({
+  const stateProps = (0, import_system93.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -10299,7 +10297,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: (0, import_system91.cn)(import_system91.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system93.cn)(import_system93.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils14.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10332,7 +10330,7 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames3 = (0, import_system92.useClassNames)({
+  const classNames3 = (0, import_system94.useClassNames)({
     component: "Table",
     variant,
     size: size2
@@ -10346,7 +10344,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: (0, import_system92.cn)(
+          className: (0, import_system94.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10414,7 +10412,7 @@ Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
 var import_react_aria_components60 = require("react-aria-components");
-var import_system93 = require("@marigold/system");
+var import_system95 = require("@marigold/system");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var _Text = ({
   variant,
@@ -10429,7 +10427,7 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = (0, import_system93.useClassNames)({
+  const classNames3 = (0, import_system95.useClassNames)({
     component: "Text",
     variant,
     size: size2
@@ -10441,17 +10439,17 @@ var _Text = ({
     {
       ...props,
       ...elementType,
-      className: (0, import_system93.cn)(
+      className: (0, import_system95.cn)(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
-        fontStyle && import_system93.textStyle[fontStyle],
-        align && import_system93.textAlign[align],
-        cursor2 && import_system93.cursorStyle[cursor2],
-        weight && import_system93.fontWeight[weight],
-        fontSize && import_system93.textSize[fontSize]
+        fontStyle && import_system95.textStyle[fontStyle],
+        align && import_system95.textAlign[align],
+        cursor2 && import_system95.cursorStyle[cursor2],
+        weight && import_system95.fontWeight[weight],
+        fontSize && import_system95.textSize[fontSize]
       ),
-      style: { color: color && (0, import_system93.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system95.ensureCssVar)(color, "color") },
       children
     }
   );
@@ -10460,7 +10458,7 @@ var _Text = ({
 // src/TextArea/TextArea.tsx
 var import_react72 = require("react");
 var import_react_aria_components61 = require("react-aria-components");
-var import_system94 = require("@marigold/system");
+var import_system96 = require("@marigold/system");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var _TextArea = (0, import_react72.forwardRef)(
   ({
@@ -10473,7 +10471,7 @@ var _TextArea = (0, import_react72.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system94.useClassNames)({ component: "TextArea", variant, size: size2 });
+    const classNames3 = (0, import_system96.useClassNames)({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10503,7 +10501,7 @@ var _TextField = (0, import_react73.forwardRef)(
 );
 
 // src/Tiles/Tiles.tsx
-var import_system95 = require("@marigold/system");
+var import_system97 = require("@marigold/system");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
@@ -10521,13 +10519,13 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: (0, import_system95.cn)(
+      className: (0, import_system97.cn)(
         "grid",
-        import_system95.gapSpace[space],
+        import_system97.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system95.createVar)({ column: column2, tilesWidth }),
+      style: (0, import_system97.createVar)({ column: column2, tilesWidth }),
       children
     }
   );
@@ -10535,7 +10533,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_react_aria_components64 = require("react-aria-components");
-var import_system96 = require("@marigold/system");
+var import_system98 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react_aria_components63 = require("react-aria-components");
@@ -10563,13 +10561,13 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames3 = (0, import_system96.useClassNames)({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = (0, import_system98.useClassNames)({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
     import_react_aria_components64.Tooltip,
     {
       ...props,
-      className: (0, import_system96.cn)("group/tooltip", classNames3.container),
+      className: (0, import_system98.cn)("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_aria_components64.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
@@ -10581,52 +10579,80 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-var import_react_aria_components66 = require("react-aria-components");
-var import_system98 = require("@marigold/system");
+var import_react_aria_components67 = require("react-aria-components");
+var import_system100 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
+var import_react_aria_components66 = require("react-aria-components");
+var import_system99 = require("@marigold/system");
+
+// src/TagGroup/TagGroupHiddenInput.tsx
+var import_react74 = require("react");
 var import_react_aria_components65 = require("react-aria-components");
-var import_system97 = require("@marigold/system");
 var import_jsx_runtime117 = require("react/jsx-runtime");
+var TagGroupHiddenInput = ({ name }) => {
+  var _a;
+  const state = (0, import_react74.useContext)(import_react_aria_components65.ListStateContext);
+  const selectedKeys = Array.from((_a = state == null ? void 0 : state.selectionManager.selectedKeys) != null ? _a : []);
+  if (!selectedKeys.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    "input",
+    {
+      type: "checkbox",
+      name,
+      value: key,
+      checked: true,
+      readOnly: true
+    },
+    key
+  )) });
+};
+
+// src/TagGroup/TagGroup.tsx
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
   items,
   children,
-  renderEmptyState,
+  emptyState,
   variant,
   size: size2,
+  name,
   ...rest
 }) => {
-  const classNames3 = (0, import_system97.useClassNames)({ component: "Tag", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(FieldBase, { as: import_react_aria_components65.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-    import_react_aria_components65.TagList,
-    {
-      items,
-      className: classNames3.listItems,
-      renderEmptyState,
-      children
-    }
-  ) });
+  const classNames3 = (0, import_system99.useClassNames)({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(FieldBase, { as: import_react_aria_components66.TagGroup, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      import_react_aria_components66.TagList,
+      {
+        items,
+        className: classNames3.listItems,
+        renderEmptyState: emptyState,
+        children
+      }
+    ),
+    name ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(TagGroupHiddenInput, { name }) : null
+  ] });
 };
 
 // src/TagGroup/Tag.tsx
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = (0, import_system98.useClassNames)({ component: "Tag", variant, size: size2 });
+  const classNames3 = (0, import_system100.useClassNames)({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-    import_react_aria_components66.Tag,
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    import_react_aria_components67.Tag,
     {
       textValue,
       ...props,
-      className: (0, import_system98.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
+      className: (0, import_system100.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
     }
   );
@@ -10637,14 +10663,14 @@ _Tag.Group = _TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react_aria_components68 = require("react-aria-components");
+var import_react_aria_components69 = require("react-aria-components");
 var import_utils16 = require("@react-aria/utils");
-var import_system100 = require("@marigold/system");
+var import_system102 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
-var import_react_aria_components67 = require("react-aria-components");
+var import_react_aria_components68 = require("react-aria-components");
 var import_i18n6 = require("@react-aria/i18n");
-var import_system99 = require("@marigold/system");
+var import_system101 = require("@marigold/system");
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10657,7 +10683,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var BaseLoader = ({
   variant,
   size: size2,
@@ -10666,16 +10692,16 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = (0, import_i18n6.useLocalizedStringFormatter)(intlMessages2, "marigold");
-  const className = (0, import_system99.useClassNames)({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-    import_react_aria_components67.ProgressBar,
+  const className = (0, import_system101.useClassNames)({ component: "XLoader", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+    import_react_aria_components68.ProgressBar,
     {
       className: className.container,
       isIndeterminate: true,
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -10683,13 +10709,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10702,12 +10728,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10720,12 +10746,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10738,12 +10764,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10756,12 +10782,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10774,12 +10800,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10792,12 +10818,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10810,12 +10836,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10828,12 +10854,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10846,12 +10872,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10864,12 +10890,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.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_runtime119.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10885,48 +10911,48 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_react_aria_components67.Label, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components68.Label, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var LoaderFullScreen = (props) => {
   const id = (0, import_utils16.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components68.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components68.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BaseLoader, { id, ...props }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_aria_components69.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_aria_components69.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = (0, import_system100.useClassNames)({
+  const className = (0, import_system102.useClassNames)({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components72 = require("react-aria-components");
-var import_system103 = require("@marigold/system");
+var import_react_aria_components73 = require("react-aria-components");
+var import_system105 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react74 = require("react");
-var TabContext = (0, import_react74.createContext)({});
-var useTabContext = () => (0, import_react74.useContext)(TabContext);
+var import_react75 = require("react");
+var TabContext = (0, import_react75.createContext)({});
+var useTabContext = () => (0, import_react75.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components69 = require("react-aria-components");
-var import_system101 = require("@marigold/system");
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_react_aria_components70 = require("react-aria-components");
+var import_system103 = require("@marigold/system");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-    import_react_aria_components69.Tab,
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_react_aria_components70.Tab,
     {
       ...props,
-      className: (0, import_system101.cn)(
+      className: (0, import_system103.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -10936,49 +10962,49 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components70 = require("react-aria-components");
-var import_system102 = require("@marigold/system");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_react_aria_components71 = require("react-aria-components");
+var import_system104 = require("@marigold/system");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-    import_react_aria_components70.TabList,
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+    import_react_aria_components71.TabList,
     {
       ...props,
-      className: (0, import_system102.cn)("flex", import_system102.gapSpace[space], classNames3.tabsList),
+      className: (0, import_system104.cn)("flex", import_system104.gapSpace[space], classNames3.tabsList),
       children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components71 = require("react-aria-components");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_react_aria_components72 = require("react-aria-components");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react_aria_components71.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components72.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = (0, import_system103.useClassNames)({
+  const classNames3 = (0, import_system105.useClassNames)({
     component: "Tabs",
     size: size2,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components72.Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react_aria_components73.Tabs, { ...props, className: classNames3.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
 _Tabs.Item = _Tab;
 
 // src/RouterProvider/RouterProvider.tsx
-var import_react_aria_components73 = require("react-aria-components");
+var import_react_aria_components74 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -11000,6 +11026,7 @@ var import_react_aria_components73 = require("react-aria-components");
   ComboBox,
   Container,
   DateField,
+  DateFormat,
   DatePicker,
   Dialog,
   Divider,
@@ -11026,6 +11053,7 @@ var import_react_aria_components73 = require("react-aria-components");
   Multiselect,
   NonModal,
   NumberField,
+  NumericFormat,
   OverlayContainerProvider,
   Pagination,
   Popover,