@marigold/components 11.5.0 → 12.0.0

package/dist/index.mjs

@@ -846,6 +846,7 @@ var require_taggedTemplateLiteral = __commonJS({
 
 // src/hooks.ts
 import { useAsyncList, useListData } from "@react-stately/data";
+import { DateFormat, NumericFormat } from "@marigold/system";
 
 // src/Accordion/Accordion.tsx
 import { DisclosureGroup } from "react-aria-components";
@@ -1049,7 +1050,7 @@ var HelpText = ({
     size: size2
   });
   const ctx = useContext3(FieldErrorContext);
-  if (!description && ctx && !ctx.isInvalid) {
+  if (!description && !(ctx == null ? void 0 : ctx.isInvalid)) {
     return null;
   }
   return /* @__PURE__ */ jsxs3("div", { className: cn4(classNames3.container), children: [
@@ -1413,7 +1414,7 @@ var Underlay = ({
     ModalOverlay,
     {
       className: ({ isEntering, isExiting }) => cn11(
-        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur-xs",
+        "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
@@ -1456,7 +1457,7 @@ var _Popover = forwardRef6(
         UNSTABLE_portalContainer: portal,
         children: [
           children,
-          /* @__PURE__ */ jsx19(Underlay, { open, variant: "modal" })
+          /* @__PURE__ */ jsx19(Underlay, { open })
         ]
       }
     ) }) : /* @__PURE__ */ jsx19(
@@ -1998,7 +1999,7 @@ var _Checkbox = forwardRef14(
               className: classNames3.checkbox
             }
           ),
-          (props.children || label) && /* @__PURE__ */ jsx36("div", { className: classNames3.label, children: props.children || label })
+          label && /* @__PURE__ */ jsx36("div", { className: classNames3.label, children: label })
         ] })
       }
     );
@@ -2108,7 +2109,7 @@ import {
   useContext as useContext9
 } from "react";
 import { Dialog, OverlayTriggerStateContext as OverlayTriggerStateContext2 } from "react-aria-components";
-import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames25 } from "@marigold/system";
 
 // src/CloseButton/CloseButton.tsx
 import { forwardRef as forwardRef15 } from "react";
@@ -2130,30 +2131,23 @@ var CloseButton = forwardRef15(
 // src/Overlay/Modal.tsx
 import { forwardRef as forwardRef16 } from "react";
 import { Modal } from "react-aria-components";
+import { useClassNames as useClassNames21 } from "@marigold/system";
 import { jsx as jsx40 } from "react/jsx-runtime";
-var _Modal = forwardRef16(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var _Modal = forwardRef16(({ size: size2, open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
+  const className = useClassNames21({ component: "Modal", size: size2 });
   return /* @__PURE__ */ jsx40(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
-      variant: "modal",
-      children: /* @__PURE__ */ jsx40(
-        Modal,
-        {
-          ref,
-          className: "relative flex w-full justify-center",
-          ...props,
-          children: props.children
-        }
-      )
+      children: /* @__PURE__ */ jsx40(Modal, { ...props, className, ref, children: props.children })
     }
   );
 });
@@ -2325,31 +2319,31 @@ var NonModal = forwardRef17(
 );
 
 // src/Dialog/DialogActions.tsx
-import { cn as cn23, useClassNames as useClassNames21 } from "@marigold/system";
+import { cn as cn23, useClassNames as useClassNames22 } from "@marigold/system";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var DialogActions = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames21({ component: "Dialog", variant, size: size2 });
+  const classNames3 = useClassNames22({ component: "Dialog", variant, size: size2 });
   return /* @__PURE__ */ jsx42("div", { className: cn23("[grid-area:actions]", classNames3.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-import { cn as cn24, useClassNames as useClassNames22 } from "@marigold/system";
+import { cn as cn24, useClassNames as useClassNames23 } from "@marigold/system";
 import { jsx as jsx43 } from "react/jsx-runtime";
 var DialogContent = ({
   variant,
   size: size2,
   children
 }) => {
-  const classNames3 = useClassNames22({ component: "Dialog", variant, size: size2 });
+  const classNames3 = useClassNames23({ component: "Dialog", variant, size: size2 });
   return /* @__PURE__ */ jsx43("div", { className: cn24("[grid-area:content]", classNames3.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
 import { Header as Header2, Heading as Heading2 } from "react-aria-components";
-import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
+import { cn as cn25, useClassNames as useClassNames24 } from "@marigold/system";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var DialogTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames23({
+  const classNames3 = useClassNames24({
     component: "Dialog",
     variant,
     size: size2
@@ -2367,7 +2361,6 @@ var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
-  size: size2,
   ...rest
 }) => {
   const props = {
@@ -2382,12 +2375,12 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 import { jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
 var _Dialog = forwardRef18(
-  (props, ref) => {
+  ({ variant, size: size2, ...props }, ref) => {
     var _a;
-    const classNames3 = useClassNames24({
+    const classNames3 = useClassNames25({
       component: "Dialog",
-      variant: props.variant,
-      size: props.size
+      variant,
+      size: size2
     });
     const { isDismissable, isKeyboardDismissDisabled, isOpen } = useContext9(DialogContext);
     const state = useContext9(OverlayTriggerStateContext2);
@@ -2401,13 +2394,14 @@ var _Dialog = forwardRef18(
         dismissable: isDismissable,
         keyboardDismissable: isKeyboardDismissDisabled,
         open: isOpen,
+        size: size2,
         children: /* @__PURE__ */ jsxs16(
           Dialog,
           {
             ...props,
             ref,
             className: cn26(
-              "relative outline-hidden [&>*:not(:last-child)]:mb-4",
+              "relative mx-auto outline-hidden [&>*:not(:last-child)]:mb-4",
               "grid [grid-template-areas:'title'_'content'_'actions']",
               classNames3.container
             ),
@@ -2434,10 +2428,10 @@ _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames26 } from "@marigold/system";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames3 = useClassNames25({ component: "Divider", variant });
+  const classNames3 = useClassNames26({ component: "Divider", variant });
   return /* @__PURE__ */ jsx47(Separator, { className: cn27("border-none", classNames3), ...props });
 };
 
@@ -2445,7 +2439,7 @@ var _Divider = ({ variant, ...props }) => {
 import { useContext as useContext11, useRef } from "react";
 import { Dialog as Dialog2, OverlayTriggerStateContext as OverlayTriggerStateContext3 } from "react-aria-components";
 import { useLandmark } from "@react-aria/landmark";
-import { cn as cn32, useClassNames as useClassNames29, useSmallScreen as useSmallScreen3 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames30, useSmallScreen as useSmallScreen3 } from "@marigold/system";
 
 // src/Drawer/Context.tsx
 import { createContext as createContext7, useContext as useContext10 } from "react";
@@ -2456,11 +2450,11 @@ var DrawerContext = createContext7({
 var useDrawerContext = () => useContext10(DrawerContext);
 
 // src/Drawer/DrawerActions.tsx
-import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames27 } from "@marigold/system";
 import { jsx as jsx48 } from "react/jsx-runtime";
 var DrawerActions = ({ variant, size: size2, children }) => {
   const ctx = useDrawerContext();
-  const classNames3 = useClassNames26({
+  const classNames3 = useClassNames27({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
@@ -2476,7 +2470,7 @@ var DrawerActions = ({ variant, size: size2, children }) => {
 };
 
 // src/Drawer/DrawerContent.tsx
-import { cn as cn29, useClassNames as useClassNames27 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames28 } from "@marigold/system";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var DrawerContent = ({
   variant,
@@ -2484,7 +2478,7 @@ var DrawerContent = ({
   children
 }) => {
   const ctx = useDrawerContext();
-  const classNames3 = useClassNames27({
+  const classNames3 = useClassNames28({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
@@ -2520,14 +2514,14 @@ var DrawerModal = ({
 
 // src/Drawer/DrawerTitle.tsx
 import { Header as Header3, Heading as Heading3 } from "react-aria-components";
-import { cn as cn31, useClassNames as useClassNames28 } from "@marigold/system";
+import { cn as cn31, useClassNames as useClassNames29 } from "@marigold/system";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var DrawerTitle = ({ variant, size: size2, children }) => {
-  const ctx = useDrawerContext();
-  const classNames3 = useClassNames28({
+  const classNames3 = useClassNames29({
     component: "Drawer",
-    variant: variant != null ? variant : ctx.variant,
-    size: size2 != null ? size2 : ctx.size
+    size: size2,
+    variant,
+    context: DrawerContext
   });
   return /* @__PURE__ */ jsx51(
     Header3,
@@ -2561,7 +2555,7 @@ var Drawer = ({
   ...props
 }) => {
   const ref = useRef(null);
-  const classNames3 = useClassNames29({ component: "Drawer", variant, size: size2 });
+  const classNames3 = useClassNames30({ component: "Drawer", variant, size: size2 });
   const ctx = useContext11(OverlayTriggerStateContext3);
   const isSmallScreen = useSmallScreen3();
   const landmarkAria = useLandmark({ ...props, role }, ref);
@@ -2605,10 +2599,10 @@ Drawer.Content = DrawerContent;
 Drawer.Actions = DrawerActions;
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames30 } from "@marigold/system";
+import { useClassNames as useClassNames31 } from "@marigold/system";
 import { jsx as jsx54 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames30({ component: "Footer", variant, size: size2 });
+  const classNames3 = useClassNames31({ component: "Footer", variant, size: size2 });
   return /* @__PURE__ */ jsx54("footer", { ...props, className: classNames3, children });
 };
 
@@ -2662,10 +2656,10 @@ Grid.Area = GridArea;
 
 // src/Header/Header.tsx
 import { Header as Header4 } from "react-aria-components";
-import { useClassNames as useClassNames31 } from "@marigold/system";
+import { useClassNames as useClassNames32 } from "@marigold/system";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var _Header = ({ variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames31({
+  const classNames3 = useClassNames32({
     component: "Header",
     variant,
     size: size2
@@ -2679,7 +2673,7 @@ import {
   cn as cn35,
   ensureCssVar,
   textAlign,
-  useClassNames as useClassNames32
+  useClassNames as useClassNames33
 } from "@marigold/system";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var _Headline = ({
@@ -2691,7 +2685,7 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const classNames3 = useClassNames32({
+  const classNames3 = useClassNames33({
     component: "Headline",
     variant,
     size: size2 != null ? size2 : `level-${level}`
@@ -2718,7 +2712,7 @@ import {
   cn as cn36,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames33
+  useClassNames as useClassNames34
 } from "@marigold/system";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var Image = ({
@@ -2728,7 +2722,7 @@ var Image = ({
   position: position2 = "none",
   ...props
 }) => {
-  const classNames3 = useClassNames33({ component: "Image", variant, size: size2 });
+  const classNames3 = useClassNames34({ component: "Image", variant, size: size2 });
   return /* @__PURE__ */ jsx60(
     "img",
     {
@@ -2776,7 +2770,7 @@ import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
 import { DateInput, Group } from "react-aria-components";
-import { useClassNames as useClassNames34 } from "@marigold/system";
+import { useClassNames as useClassNames35 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
@@ -2812,7 +2806,7 @@ var _DateSegment = ({ segment, ...props }) => {
 // src/DateField/DateInput.tsx
 import { jsx as jsx63, jsxs as jsxs19 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
-  const classNames3 = useClassNames34({ component: "DateField", variant, size: size2 });
+  const classNames3 = useClassNames35({ component: "DateField", variant, size: size2 });
   return /* @__PURE__ */ jsxs19(Group, { className: classNames3.field, children: [
     /* @__PURE__ */ jsx63(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx63(_DateSegment, { className: classNames3.segment, segment }) }),
     action ? action : null
@@ -2856,7 +2850,7 @@ var _DateField = forwardRef19(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn42, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn42, useClassNames as useClassNames40 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -2864,7 +2858,7 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn39, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn39, useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
@@ -2872,7 +2866,7 @@ import { useContext as useContext12, useMemo as useMemo2 } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
-import { useClassNames as useClassNames35 } from "@marigold/system";
+import { useClassNames as useClassNames36 } from "@marigold/system";
 import { jsx as jsx65 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
   const state = useContext12(CalendarStateContext);
@@ -2890,14 +2884,14 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames3 = useClassNames35({ component: "Calendar" });
+  const classNames3 = useClassNames36({ component: "Calendar" });
   return /* @__PURE__ */ jsx65("thead", { ...headerProps, children: /* @__PURE__ */ jsx65("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ jsx65("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
 import { jsx as jsx66, jsxs as jsxs20 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
-  const classNames3 = useClassNames36({ component: "Calendar" });
+  const classNames3 = useClassNames37({ component: "Calendar" });
   return /* @__PURE__ */ jsxs20(CalendarGrid, { className: classNames3.calendarGrid, children: [
     /* @__PURE__ */ jsx66(CalendarGridHeader, {}),
     /* @__PURE__ */ jsx66(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx66(
@@ -2916,7 +2910,7 @@ var _CalendarGrid = () => {
 // src/Calendar/CalendarListBox.tsx
 import { useContext as useContext13 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
-import { cn as cn40, useClassNames as useClassNames37 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames38 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -2944,7 +2938,7 @@ function CalendarListBox({
   const state = useContext13(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = useClassNames37({ component: "Select" });
+  const { select: selectClassNames } = useClassNames38({ component: "Select" });
   return /* @__PURE__ */ jsxs21(
     "button",
     {
@@ -2961,10 +2955,10 @@ function CalendarListBox({
 }
 
 // src/Calendar/MonthControls.tsx
-import { cn as cn41, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn41, useClassNames as useClassNames39 } from "@marigold/system";
 import { jsx as jsx68, jsxs as jsxs22 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames3 = useClassNames38({ component: "Calendar" });
+  const classNames3 = useClassNames39({ component: "Calendar" });
   return /* @__PURE__ */ jsxs22(
     "div",
     {
@@ -3125,7 +3119,7 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = useClassNames39({ component: "Calendar" });
+  const classNames3 = useClassNames40({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
     month: /* @__PURE__ */ jsx71(MonthListBox_default, { setSelectedDropdown }),
@@ -3170,7 +3164,7 @@ var _Calendar = ({
 // src/DatePicker/DatePicker.tsx
 import React6 from "react";
 import { DatePicker, Dialog as Dialog3 } from "react-aria-components";
-import { useClassNames as useClassNames40 } from "@marigold/system";
+import { useClassNames as useClassNames41 } from "@marigold/system";
 import { jsx as jsx72, jsxs as jsxs24 } from "react/jsx-runtime";
 var _DatePicker = React6.forwardRef(
   ({
@@ -3195,7 +3189,7 @@ var _DatePicker = React6.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = useClassNames40({
+    const classNames3 = useClassNames41({
       component: "DatePicker",
       size: size2,
       variant
@@ -3255,11 +3249,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx73(
 // src/Link/Link.tsx
 import { forwardRef as forwardRef20 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames41 } from "@marigold/system";
+import { useClassNames as useClassNames42 } from "@marigold/system";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var _Link = forwardRef20(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = useClassNames41({
+    const classNames3 = useClassNames42({
       component: "Link",
       variant,
       size: size2
@@ -3269,7 +3263,7 @@ var _Link = forwardRef20(
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames42 } from "@marigold/system";
+import { useClassNames as useClassNames43 } from "@marigold/system";
 
 // src/List/Context.ts
 import { createContext as createContext8, useContext as useContext16 } from "react";
@@ -3293,30 +3287,30 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = useClassNames42({ component: "List", variant, size: size2 });
+  const classNames3 = useClassNames43({ component: "List", variant, size: size2 });
   return /* @__PURE__ */ jsx76(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx76(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import { Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames45 } from "@marigold/system";
+import { useClassNames as useClassNames46 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames43 } from "@marigold/system";
+import { useClassNames as useClassNames44 } from "@marigold/system";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = useClassNames43({ component: "Menu" });
+  const classNames3 = useClassNames44({ component: "Menu" });
   return /* @__PURE__ */ jsx77(MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { MenuSection } from "react-aria-components";
-import { useClassNames as useClassNames44 } from "@marigold/system";
+import { useClassNames as useClassNames45 } from "@marigold/system";
 import { jsx as jsx78, jsxs as jsxs25 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames44({ component: "Menu" });
+  const className = useClassNames45({ component: "Menu" });
   return /* @__PURE__ */ jsxs25(MenuSection, { ...props, children: [
     /* @__PURE__ */ jsx78(_Header, { className: className.section, children: title }),
     children
@@ -3336,7 +3330,7 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = useClassNames45({ component: "Menu", variant, size: size2 });
+  const classNames3 = useClassNames46({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ jsxs26(MenuTrigger, { ...props, children: [
     /* @__PURE__ */ jsx79(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
     /* @__PURE__ */ jsx79(_Popover, { open, placement, children: /* @__PURE__ */ jsx79(Menu, { ...props, className: classNames3.container, children }) })
@@ -3347,7 +3341,7 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG8, useClassNames as useClassNames46 } from "@marigold/system";
+import { SVG as SVG8, useClassNames as useClassNames47 } from "@marigold/system";
 import { jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
@@ -3355,7 +3349,7 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames3 = useClassNames46({ component: "Menu", variant, size: size2 });
+  const classNames3 = useClassNames47({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ jsxs27(MenuTrigger2, { children: [
     /* @__PURE__ */ jsx80(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx80(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx80("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__ */ jsx80(_Popover, { children: /* @__PURE__ */ jsx80(Menu2, { ...props, className: classNames3.container, children: props.children }) })
@@ -3365,7 +3359,7 @@ var ActionMenu = ({
 // src/SectionMessage/SectionMessage.tsx
 import { useRef as useRef3, useState as useState2 } from "react";
 import { useButton } from "@react-aria/button";
-import { cn as cn46, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn46, useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
 import { createContext as createContext9, useContext as useContext17 } from "react";
@@ -3468,7 +3462,7 @@ var SectionMessage = ({
   ...props
 }) => {
   const buttonRef = useRef3(null);
-  const classNames3 = useClassNames47({
+  const classNames3 = useClassNames48({
     component: "SectionMessage",
     variant,
     size: size2
@@ -9017,7 +9011,7 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 import { useId } from "@react-aria/utils";
-import { cn as cn47, useClassNames as useClassNames48 } from "@marigold/system";
+import { cn as cn47, useClassNames as useClassNames49 } from "@marigold/system";
 import { jsx as jsx86, jsxs as jsxs29 } from "react/jsx-runtime";
 var propsToBeRemoved = [
   "clearValue",
@@ -9089,7 +9083,7 @@ var Multiselect = ({
   onSelectionChange,
   ...rest
 }) => {
-  const classNames3 = useClassNames48({
+  const classNames3 = useClassNames49({
     component: "MultiSelect",
     size: size2,
     variant
@@ -9163,6 +9157,7 @@ var Multiselect = ({
                   valueContainer: (base) => ({ ...base, padding: 0 }),
                   container: (base) => ({ ...base, pointerEvents: "auto" }),
                   menuList: () => ({}),
+                  // eslint-disable-next-line no-empty-pattern
                   option: ({}) => ({}),
                   multiValue: () => ({}),
                   multiValueLabel: () => ({})
@@ -9180,6 +9175,7 @@ var Multiselect = ({
                 components: {
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
+                  // eslint-disable-next-line react/prop-types
                   DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ jsx86(
                     "button",
                     {
@@ -9203,7 +9199,7 @@ var Multiselect = ({
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef24 } from "react";
 import { Group as Group4, Input as Input5, NumberField } from "react-aria-components";
-import { cn as cn49, useClassNames as useClassNames49 } from "@marigold/system";
+import { cn as cn49, useClassNames as useClassNames50 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button7 } from "react-aria-components";
@@ -9256,7 +9252,7 @@ var _NumberField = forwardRef24(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames49({
+    const classNames3 = useClassNames50({
       component: "NumberField",
       size: size2,
       variant
@@ -9309,7 +9305,7 @@ var _NumberField = forwardRef24(
 // src/Pagination/Pagination.tsx
 import { useEffect as useEffect4, useRef as useRef9, useState as useState5 } from "react";
 import { FocusScope as FocusScope2, useFocusManager } from "@react-aria/focus";
-import { useClassNames as useClassNames52 } from "@marigold/system";
+import { useClassNames as useClassNames53 } from "@marigold/system";
 
 // src/Pagination/Ellipsis.tsx
 import { jsx as jsx89 } from "react/jsx-runtime";
@@ -9327,11 +9323,11 @@ var Ellipsis = () => {
 // src/Pagination/NavigationButton.tsx
 import { useRef as useRef7 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
-import { cn as cn50, useClassNames as useClassNames50 } from "@marigold/system";
+import { cn as cn50, useClassNames as useClassNames51 } from "@marigold/system";
 import { jsxs as jsxs31 } from "react/jsx-runtime";
 var NavigationButton = (props) => {
   const ref = useRef7(null);
-  const classNames3 = useClassNames50({
+  const classNames3 = useClassNames51({
     component: "Pagination"
   });
   let { buttonProps } = useButton2(props, ref);
@@ -9365,11 +9361,11 @@ var NavigationButton = (props) => {
 // src/Pagination/PageButton.tsx
 import { useRef as useRef8 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
-import { useClassNames as useClassNames51 } from "@marigold/system";
+import { useClassNames as useClassNames52 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
 var PageButton = (props) => {
   const ref = useRef8(null);
-  const classNames3 = useClassNames51({
+  const classNames3 = useClassNames52({
     component: "Pagination"
   });
   let { buttonProps } = useButton3(props, ref);
@@ -9448,7 +9444,7 @@ var InnerPagination = ({
       onChange2(newPage);
     }
   };
-  const classNames3 = useClassNames52({ component: "Pagination" });
+  const classNames3 = useClassNames53({ component: "Pagination" });
   const handleKeyDown = (onEnter) => (e) => {
     if (e.key === "ArrowRight") {
       e.preventDefault();
@@ -9535,7 +9531,7 @@ import {
   forwardRef as forwardRef25
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn52, useClassNames as useClassNames54 } from "@marigold/system";
+import { cn as cn52, useClassNames as useClassNames55 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext12, useContext as useContext22 } from "react";
@@ -9546,7 +9542,7 @@ var useRadioGroupContext = () => useContext22(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn51, useClassNames as useClassNames53 } from "@marigold/system";
+import { cn as cn51, useClassNames as useClassNames54 } from "@marigold/system";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -9563,7 +9559,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = useClassNames53({ component: "Radio", variant, size: size2 });
+  const classNames3 = useClassNames54({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9618,7 +9614,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx93(
 var _Radio = forwardRef25(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = useClassNames54({
+    const classNames3 = useClassNames55({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
@@ -9681,7 +9677,7 @@ var _SearchField = forwardRef26(
 // src/Select/Select.tsx
 import { forwardRef as forwardRef27 } from "react";
 import { Select as Select2, SelectValue } from "react-aria-components";
-import { cn as cn53, useClassNames as useClassNames55 } from "@marigold/system";
+import { cn as cn53, useClassNames as useClassNames56 } from "@marigold/system";
 import { jsx as jsx95, jsxs as jsxs34 } from "react/jsx-runtime";
 var _Select = forwardRef27(
   ({
@@ -9703,7 +9699,7 @@ var _Select = forwardRef27(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = useClassNames55({ component: "Select", variant, size: size2 });
+    const classNames3 = useClassNames56({ component: "Select", variant, size: size2 });
     return /* @__PURE__ */ jsxs34(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
       /* @__PURE__ */ jsxs34(
         IconButton,
@@ -9730,7 +9726,7 @@ import {
   forwardRef as forwardRef29
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn55, useClassNames as useClassNames56 } from "@marigold/system";
+import { cn as cn55, useClassNames as useClassNames57 } from "@marigold/system";
 
 // src/SelectList/Context.ts
 import { createContext as createContext13, useContext as useContext23 } from "react";
@@ -9768,7 +9764,7 @@ var _SelectListItem = forwardRef28(
 import { jsx as jsx97 } from "react/jsx-runtime";
 var _SelectList = forwardRef29(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = useClassNames56({ component: "ListBox" });
+    const classNames3 = useClassNames57({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
@@ -9819,7 +9815,7 @@ import {
 import {
   cn as cn57,
   width as twWidth3,
-  useClassNames as useClassNames57
+  useClassNames as useClassNames58
 } from "@marigold/system";
 import { Fragment as Fragment11, jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
 var _Slider = forwardRef30(
@@ -9832,7 +9828,7 @@ var _Slider = forwardRef30(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames57({
+    const classNames3 = useClassNames58({
       component: "Slider",
       variant,
       size: size2
@@ -9853,7 +9849,7 @@ var _Slider = forwardRef30(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx99(_Label, { children: props.children && props.children || label && label }),
+          label && /* @__PURE__ */ jsx99(_Label, { children: label }),
           /* @__PURE__ */ jsx99(SliderOutput, { className: cn57("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ jsx99(
             SliderTrack,
@@ -9939,7 +9935,7 @@ import { Switch } from "react-aria-components";
 import {
   cn as cn59,
   width as twWidth4,
-  useClassNames as useClassNames58
+  useClassNames as useClassNames59
 } from "@marigold/system";
 import { jsx as jsx102, jsxs as jsxs37 } from "react/jsx-runtime";
 var _Switch = forwardRef31(
@@ -9953,7 +9949,7 @@ var _Switch = forwardRef31(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames58({ component: "Switch", size: size2, variant });
+    const classNames3 = useClassNames59({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -9972,7 +9968,7 @@ var _Switch = forwardRef31(
           classNames3.container
         ),
         children: [
-          (props.children || label) && /* @__PURE__ */ jsx102(_Label, { elementType: "span", children: props.children || label }),
+          label && /* @__PURE__ */ jsx102(_Label, { elementType: "span", children: label }),
           /* @__PURE__ */ jsx102("div", { className: "relative", children: /* @__PURE__ */ jsx102("div", { className: classNames3.track, children: /* @__PURE__ */ jsx102("div", { className: classNames3.thumb }) }) })
         ]
       }
@@ -9991,7 +9987,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn66, useClassNames as useClassNames60 } from "@marigold/system";
+import { cn as cn66, useClassNames as useClassNames61 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext14, useContext as useContext24 } from "react";
@@ -10013,7 +10009,7 @@ var TableBody = ({
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
-        colSpan: state.collection.size,
+        colSpan: state.collection.columnCount,
         role: "rowheader",
         children: emptyState()
       }
@@ -10210,13 +10206,13 @@ import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { cn as cn64, useClassNames as useClassNames59, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn64, useClassNames as useClassNames60, useStateProps as useStateProps4 } from "@marigold/system";
 import { jsx as jsx109 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = useClassNames59({
+  const classNames3 = useClassNames60({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10331,7 +10327,7 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames3 = useClassNames60({
+  const classNames3 = useClassNames61({
     component: "Table",
     variant,
     size: size2
@@ -10421,7 +10417,7 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames61
+  useClassNames as useClassNames62
 } from "@marigold/system";
 import { jsx as jsx112 } from "react/jsx-runtime";
 var _Text = ({
@@ -10437,7 +10433,7 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = useClassNames61({
+  const classNames3 = useClassNames62({
     component: "Text",
     variant,
     size: size2
@@ -10468,7 +10464,7 @@ var _Text = ({
 // src/TextArea/TextArea.tsx
 import { forwardRef as forwardRef32 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames62 } from "@marigold/system";
+import { useClassNames as useClassNames63 } from "@marigold/system";
 import { jsx as jsx113 } from "react/jsx-runtime";
 var _TextArea = forwardRef32(
   ({
@@ -10481,7 +10477,7 @@ var _TextArea = forwardRef32(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames62({ component: "TextArea", variant, size: size2 });
+    const classNames3 = useClassNames63({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10543,7 +10539,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn69, useClassNames as useClassNames63 } from "@marigold/system";
+import { cn as cn69, useClassNames as useClassNames64 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -10571,7 +10567,7 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames3 = useClassNames63({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = useClassNames64({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
   return /* @__PURE__ */ jsxs40(
     Tooltip,
@@ -10590,51 +10586,79 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 import { Tag } from "react-aria-components";
-import { cn as cn70, useClassNames as useClassNames65 } from "@marigold/system";
+import { cn as cn70, useClassNames as useClassNames66 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames64 } from "@marigold/system";
+import { useClassNames as useClassNames65 } from "@marigold/system";
+
+// src/TagGroup/TagGroupHiddenInput.tsx
+import { useContext as useContext25 } from "react";
+import { ListStateContext } from "react-aria-components";
 import { jsx as jsx118 } from "react/jsx-runtime";
+var TagGroupHiddenInput = ({ name }) => {
+  var _a;
+  const state = useContext25(ListStateContext);
+  const selectedKeys = Array.from((_a = state == null ? void 0 : state.selectionManager.selectedKeys) != null ? _a : []);
+  if (!selectedKeys.length) return null;
+  return /* @__PURE__ */ jsx118("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ jsx118(
+    "input",
+    {
+      type: "checkbox",
+      name,
+      value: key,
+      checked: true,
+      readOnly: true
+    },
+    key
+  )) });
+};
+
+// src/TagGroup/TagGroup.tsx
+import { jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
   children,
-  renderEmptyState,
+  emptyState,
   variant,
   size: size2,
+  name,
   ...rest
 }) => {
-  const classNames3 = useClassNames64({ component: "Tag", variant, size: size2 });
-  return /* @__PURE__ */ jsx118(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx118(
-    TagList,
-    {
-      items,
-      className: classNames3.listItems,
-      renderEmptyState,
-      children
-    }
-  ) });
+  const classNames3 = useClassNames65({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ jsxs41(FieldBase, { as: TagGroup, ...rest, children: [
+    /* @__PURE__ */ jsx119(
+      TagList,
+      {
+        items,
+        className: classNames3.listItems,
+        renderEmptyState: emptyState,
+        children
+      }
+    ),
+    name ? /* @__PURE__ */ jsx119(TagGroupHiddenInput, { name }) : null
+  ] });
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment12, jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx120, jsxs as jsxs42 } from "react/jsx-runtime";
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = useClassNames65({ component: "Tag", variant, size: size2 });
+  const classNames3 = useClassNames66({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  return /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx120(
     Tag,
     {
       textValue,
       ...props,
       className: cn70("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs41(Fragment12, { children: [
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs42(Fragment12, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ jsx119(CloseButton, { className: classNames3.closeButton, slot: "remove" })
+        allowsRemoving && /* @__PURE__ */ jsx120(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
     }
   );
@@ -10647,12 +10671,12 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 // src/XLoader/XLoader.tsx
 import { Dialog as Dialog4, Modal as Modal2 } from "react-aria-components";
 import { useId as useId2 } from "@react-aria/utils";
-import { useClassNames as useClassNames67 } from "@marigold/system";
+import { useClassNames as useClassNames68 } from "@marigold/system";
 
 // src/XLoader/BaseLoader.tsx
 import { Label as Label2, ProgressBar as ProgressBar2 } from "react-aria-components";
 import { useLocalizedStringFormatter as useLocalizedStringFormatter2 } from "@react-aria/i18n";
-import { useClassNames as useClassNames66 } from "@marigold/system";
+import { useClassNames as useClassNames67 } from "@marigold/system";
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10665,7 +10689,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-import { jsx as jsx120, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs43 } from "react/jsx-runtime";
 var BaseLoader = ({
   variant,
   size: size2,
@@ -10674,8 +10698,8 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = useLocalizedStringFormatter2(intlMessages2, "marigold");
-  const className = useClassNames66({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ jsxs42(
+  const className = useClassNames67({ component: "XLoader", variant, size: size2 });
+  return /* @__PURE__ */ jsxs43(
     ProgressBar2,
     {
       className: className.container,
@@ -10683,7 +10707,7 @@ var BaseLoader = ({
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs42(
+        /* @__PURE__ */ jsxs43(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -10691,13 +10715,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ jsx120("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10710,12 +10734,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10728,12 +10752,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10746,12 +10770,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10764,12 +10788,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10782,12 +10806,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10800,12 +10824,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10818,12 +10842,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10836,12 +10860,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10854,12 +10878,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10872,12 +10896,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 "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__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10893,44 +10917,44 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ jsx120(Label2, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ jsx121(Label2, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
 var LoaderFullScreen = (props) => {
   const id = useId2();
-  return /* @__PURE__ */ jsx121(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx121(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx121(Dialog4, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx121(BaseLoader, { id, ...props }) }) }) });
+  return /* @__PURE__ */ jsx122(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx122(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx122(Dialog4, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx122(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = useClassNames67({
+  const className = useClassNames68({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ jsx121("div", { className, children: /* @__PURE__ */ jsx121(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ jsx122("div", { className, children: /* @__PURE__ */ jsx122(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx121(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx121(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx121(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx122(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx122(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx122(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames68 } from "@marigold/system";
+import { useClassNames as useClassNames69 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext15, useContext as useContext25 } from "react";
+import { createContext as createContext15, useContext as useContext26 } from "react";
 var TabContext = createContext15({});
-var useTabContext = () => useContext25(TabContext);
+var useTabContext = () => useContext26(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
 import { cn as cn71 } from "@marigold/system";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx123(
     Tab,
     {
       ...props,
@@ -10946,10 +10970,10 @@ var _Tab = (props) => {
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
 import { cn as cn72, gapSpace as gapSpace10 } from "@marigold/system";
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx124(
     TabList,
     {
       ...props,
@@ -10961,25 +10985,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx124(TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx125(TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = useClassNames68({
+  const classNames3 = useClassNames69({
     component: "Tabs",
     size: size2,
     variant
   });
-  return /* @__PURE__ */ jsx125(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx125(Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ jsx126(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx126(Tabs, { ...props, className: classNames3.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -11007,6 +11031,7 @@ export {
   _ComboBox as ComboBox,
   Container,
   _DateField as DateField,
+  DateFormat,
   _DatePicker as DatePicker,
   _Dialog as Dialog,
   _Divider as Divider,
@@ -11033,6 +11058,7 @@ export {
   Multiselect,
   NonModal,
   _NumberField as NumberField,
+  NumericFormat,
   OverlayContainerProvider,
   _Pagination as Pagination,
   _Popover as Popover,