@marigold/components 6.6.4 → 6.7.0

package/dist/index.mjs

@@ -1296,71 +1296,136 @@ var _Checkbox = forwardRef9(
 );
 
 // src/Checkbox/CheckboxGroup.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { useCheckboxGroup } from "@react-aria/checkbox";
-import {
-  useCheckboxGroupState
-} from "@react-stately/checkbox";
-import { useClassNames as useClassNames14, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var CheckboxGroupContext = createContext3(
-  null
-);
-var useCheckboxGroupContext = () => useContext3(CheckboxGroupContext);
-var CheckboxGroup = ({
+import { CheckboxGroup } from "react-aria-components";
+import { useClassNames as useClassNames16 } from "@marigold/system";
+
+// src/FieldBase/_FieldBase.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { cn as cn17, width as twWidth2, useClassNames as useClassNames15 } from "@marigold/system";
+
+// src/HelpText/_HelpText.tsx
+import { Text } from "react-aria-components";
+import { cn as cn16, useClassNames as useClassNames14 } from "@marigold/system";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+var HelpText2 = ({
   variant,
   size,
+  description,
+  error,
+  errorMessage,
+  ...props
+}) => {
+  const hasErrorMessage = errorMessage && error;
+  const classNames2 = useClassNames14({
+    component: "HelpText",
+    variant,
+    size
+  });
+  if (!description && !errorMessage) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx30(
+    Text,
+    {
+      ...props,
+      slot: hasErrorMessage ? "errorMessage" : "description",
+      className: cn16("flex items-center gap-1", classNames2.container),
+      children: hasErrorMessage ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+        /* @__PURE__ */ jsx30(
+          "svg",
+          {
+            className: cn16("h-4 w-4", classNames2.icon),
+            viewBox: "0 0 24 24",
+            role: "presentation",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx30("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+          }
+        ),
+        errorMessage
+      ] }) : description
+    }
+  );
+};
+
+// src/FieldBase/_FieldBase.tsx
+import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+var fixedForwardRef = forwardRef10;
+var _FieldBase = (props, ref) => {
+  const {
+    as: Component = "div",
+    children,
+    label,
+    size,
+    variant,
+    width = "full",
+    description,
+    errorMessage,
+    className,
+    ...rest
+  } = props;
+  const classNames2 = useClassNames15({
+    component: "Field",
+    variant,
+    size
+  });
+  return /* @__PURE__ */ jsxs15(
+    Component,
+    {
+      ref,
+      className: cn17("group/field", twWidth2[width], classNames2, className),
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ jsx31(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx31("span", { "aria-hidden": "true" }),
+        children,
+        /* @__PURE__ */ jsx31(
+          HelpText2,
+          {
+            variant,
+            size,
+            description,
+            errorMessage,
+            error: props.isInvalid
+          }
+        )
+      ]
+    }
+  );
+};
+var FieldBase2 = fixedForwardRef(_FieldBase);
+
+// src/Checkbox/CheckboxGroup.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var _CheckboxGroup = ({
   children,
+  variant,
+  size,
   required,
   disabled,
   readOnly,
   error,
-  width,
   ...rest
 }) => {
+  const classNames2 = useClassNames16({
+    component: "Checkbox",
+    variant,
+    size,
+    className: { group: "flex flex-col items-start gap-[0.5ch]" }
+  });
   const props = {
+    className: classNames2.group,
     isRequired: required,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid",
+    isInvalid: error,
     ...rest
   };
-  const state = useCheckboxGroupState(props);
-  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
-  const classNames2 = useClassNames14({
-    component: "Checkbox",
-    variant,
-    size,
-    className: { group: "flex flex-col items-start gap-[0.5ch]" }
-  });
-  const stateProps = useStateProps4({
-    disabled,
-    readOnly,
-    error
-  });
-  return /* @__PURE__ */ jsx30(
-    FieldBase,
-    {
-      label: props.label,
-      labelProps: { elementType: "span", ...labelProps },
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      disabled,
-      stateProps,
-      width,
-      ...groupProps,
-      children: /* @__PURE__ */ jsx30("div", { role: "presentation", className: classNames2.group, children: /* @__PURE__ */ jsx30(CheckboxGroupContext.Provider, { value: { error, ...state }, children }) })
-    }
-  );
+  return /* @__PURE__ */ jsx32(FieldBase2, { as: CheckboxGroup, ...props, children });
 };
 
 // src/Columns/Columns.tsx
 import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
-import { cn as cn16, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { cn as cn18, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1376,19 +1441,19 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
-      className: cn16(
+      className: cn18(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
       ),
       ...props,
-      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx31(
+      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx33(
         "div",
         {
-          className: cn16(
+          className: cn18(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
           style: createVar6({ collapseAt, columnSize: columns[idx] }),
@@ -1401,13 +1466,13 @@ var Columns = ({
 
 // src/Container/Container.tsx
 import {
-  cn as cn17,
+  cn as cn19,
   createVar as createVar7,
   gridColsAlign,
   gridColumn,
   placeItems
 } from "@marigold/system";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1427,11 +1492,11 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       ...props,
-      className: cn17(
+      className: cn19(
         "grid",
         placeItems[alignItems],
         gridColsAlign[align],
@@ -1452,32 +1517,32 @@ import {
 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
-import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
+import { cn as cn21, useClassNames as useClassNames19 } from "@marigold/system";
 
 // src/Header/Header.tsx
 import { Header } from "react-aria-components";
-import { useClassNames as useClassNames15 } from "@marigold/system";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { useClassNames as useClassNames17 } from "@marigold/system";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = useClassNames15({
+  const classNames2 = useClassNames17({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx33(Header, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ jsx35(Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
 import {
-  cn as cn18,
+  cn as cn20,
   createVar as createVar8,
   get,
   textAlign,
-  useClassNames as useClassNames16,
+  useClassNames as useClassNames18,
   useTheme as useTheme2
 } from "@marigold/system";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
   size,
@@ -1488,17 +1553,17 @@ var _Headline = ({
   ...props
 }) => {
   const theme = useTheme2();
-  const classNames2 = useClassNames16({
+  const classNames2 = useClassNames18({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     Heading,
     {
       level: Number(level),
       ...props,
-      className: cn18(classNames2, "text-[--color]", textAlign[align]),
+      className: cn20(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
         color: color && theme.colors && get(
           theme.colors,
@@ -1513,13 +1578,13 @@ var _Headline = ({
 };
 
 // src/Dialog/Context.ts
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var DialogContext = createContext4({});
-var useDialogContext = () => useContext4(DialogContext);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var DialogContext = createContext3({});
+var useDialogContext = () => useContext3(DialogContext);
 
 // src/Dialog/DialogController.tsx
 import { useOverlayTriggerState } from "@react-stately/overlays";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var DialogController = ({
   children,
   dismissable = true,
@@ -1532,7 +1597,7 @@ var DialogController = ({
     onOpenChange
   });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ jsx35(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx35(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx37(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx37(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx37(
     Modal,
     {
       open: state.isOpen,
@@ -1548,7 +1613,7 @@ var DialogController = ({
 import { Children as Children4, useRef as useRef8 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var DialogTrigger = ({
   children,
   dismissable = true,
@@ -1558,8 +1623,8 @@ var DialogTrigger = ({
   const dialogTriggerRef = useRef8(null);
   const state = useOverlayTriggerState2({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ jsxs14(DialogContext.Provider, { value: ctx, children: [
-    /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs16(DialogContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsx38(
       PressResponder,
       {
         ref: dialogTriggerRef,
@@ -1568,7 +1633,7 @@ var DialogTrigger = ({
         children: dialogTrigger
       }
     ),
-    /* @__PURE__ */ jsx36(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx38(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx38(
       Modal,
       {
         open: state.isOpen,
@@ -1582,7 +1647,7 @@ var DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
   const ref = useRef9(null);
   const { close } = useDialogContext();
@@ -1592,16 +1657,16 @@ var CloseButton = ({ className }) => {
     },
     ref
   );
-  return /* @__PURE__ */ jsx37("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx39(
     "button",
     {
-      className: cn19(
+      className: cn21(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
       ref,
       ...buttonProps,
-      children: /* @__PURE__ */ jsx37("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx39("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx39(
         "path",
         {
           fillRule: "evenodd",
@@ -1640,9 +1705,9 @@ var Dialog = ({
   const ref = useRef9(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const classNames2 = useClassNames17({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsxs15("div", { className: classNames2.container, ...dialogProps, children: [
-    closeButton && /* @__PURE__ */ jsx37(CloseButton, { className: classNames2.closeButton }),
+  const classNames2 = useClassNames19({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ jsxs17("div", { className: classNames2.container, ...dialogProps, children: [
+    closeButton && /* @__PURE__ */ jsx39(CloseButton, { className: classNames2.closeButton }),
     typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps)
   ] });
 };
@@ -1651,29 +1716,29 @@ Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { useClassNames as useClassNames18 } from "@marigold/system";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { useClassNames as useClassNames20 } from "@marigold/system";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = useClassNames18({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx38(Separator, { className: classNames2, ...props });
+  const classNames2 = useClassNames20({ component: "Divider", variant });
+  return /* @__PURE__ */ jsx40(Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames19 } from "@marigold/system";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useClassNames as useClassNames21 } from "@marigold/system";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames19({ component: "Footer", variant, size });
-  return /* @__PURE__ */ jsx39("footer", { ...props, className: classNames2, children });
+  const classNames2 = useClassNames21({ component: "Footer", variant, size });
+  return /* @__PURE__ */ jsx41("footer", { ...props, className: classNames2, children });
 };
 
 // src/Image/Image.tsx
 import {
-  cn as cn20,
+  cn as cn22,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames20
+  useClassNames as useClassNames22
 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1681,13 +1746,13 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames20({ component: "Image", variant, size });
-  return /* @__PURE__ */ jsx40(
+  const classNames2 = useClassNames22({ component: "Image", variant, size });
+  return /* @__PURE__ */ jsx42(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn20(
+      className: cn22(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1700,10 +1765,10 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn21,
+  cn as cn23,
   gapSpace as gapSpace5
 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   orientation,
@@ -1713,11 +1778,11 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ...props,
-      className: cn21(
+      className: cn23(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1737,15 +1802,15 @@ import { useLocale } from "@react-aria/i18n";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { cn as cn23, useClassNames as useClassNames21, useStateProps as useStateProps6 } from "@marigold/system";
+import { cn as cn25, useClassNames as useClassNames23, useStateProps as useStateProps5 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { useRef as useRef10 } from "react";
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn22, useStateProps as useStateProps5 } from "@marigold/system";
-import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
+import { cn as cn24, useStateProps as useStateProps4 } from "@marigold/system";
+import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
 var DateSegment = ({
   className,
   segment,
@@ -1758,17 +1823,17 @@ var DateSegment = ({
     within: true,
     isTextInput: true
   });
-  const stateProps = useStateProps5({
+  const stateProps = useStateProps4({
     disabled: state.isDisabled,
     focusVisible: isFocused
   });
   const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ...mergeProps6(segmentProps, stateProps, focusProps),
       ref,
-      className: cn22(
+      className: cn24(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1779,25 +1844,25 @@ var DateSegment = ({
         minWidth: maxValue != null ? String(maxValue).length + "ch" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           "span",
           {
             "aria-hidden": "true",
-            className: cn22(
+            className: cn24(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx42("span", { children: isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text })
+        /* @__PURE__ */ jsx44("span", { children: isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text })
       ]
     }
   );
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
 var DateField = ({
   disabled,
   readOnly,
@@ -1832,14 +1897,14 @@ var DateField = ({
     state,
     ref
   );
-  const classNames2 = useClassNames21({ component: "DateField", variant, size });
+  const classNames2 = useClassNames23({ component: "DateField", variant, size });
   const { focusProps, isFocused } = useFocusRing4({
     within: true,
     isTextInput: true,
     autoFocus: props.autoFocus
   });
   const { hoverProps, isHovered } = useHover2({ isDisabled: disabled });
-  const stateProps = useStateProps6({
+  const stateProps = useStateProps5({
     hover: isHovered,
     error,
     readOnly,
@@ -1847,7 +1912,7 @@ var DateField = ({
     required,
     focus: isFocused || isPressed
   });
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     FieldBase,
     {
       error,
@@ -1862,11 +1927,11 @@ var DateField = ({
       variant,
       size,
       width,
-      children: /* @__PURE__ */ jsxs17(
+      children: /* @__PURE__ */ jsxs19(
         "div",
         {
           ...mergeProps7(fieldProps, focusProps, stateProps, hoverProps),
-          className: cn23(
+          className: cn25(
             "relative flex flex-row flex-nowrap",
             "cursor-text aria-disabled:cursor-not-allowed",
             classNames2.field
@@ -1874,9 +1939,9 @@ var DateField = ({
           "data-testid": "date-field",
           ref: triggerRef,
           children: [
-            /* @__PURE__ */ jsx43("div", { ref, className: "flex basis-full items-center", children: state.segments.map((segment, i) => {
+            /* @__PURE__ */ jsx45("div", { ref, className: "flex basis-full items-center", children: state.segments.map((segment, i) => {
               var _a;
-              return /* @__PURE__ */ jsx43(
+              return /* @__PURE__ */ jsx45(
                 DateSegment,
                 {
                   className: classNames2.segment,
@@ -1887,15 +1952,15 @@ var DateField = ({
                 i
               );
             }) }),
-            action ? action : /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx43(
+            action ? action : /* @__PURE__ */ jsx45("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx45(
               "svg",
               {
                 "data-testid": "action",
-                className: cn23(classNames2.action),
+                className: cn25(classNames2.action),
                 viewBox: "0 0 24 24",
                 width: 24,
                 height: 24,
-                children: /* @__PURE__ */ jsx43("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                children: /* @__PURE__ */ jsx45("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
               }
             ) })
           ]
@@ -1914,7 +1979,7 @@ import {
 import { useDateFormatter as useDateFormatter3, useLocale as useLocale3 } from "@react-aria/i18n";
 import { useCalendarState } from "@react-stately/calendar";
 import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn25, useClassNames as useClassNames23, useStateProps as useStateProps8 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps7 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
@@ -1928,28 +1993,28 @@ import { useRef as useRef12 } from "react";
 import { useCalendarCell } from "@react-aria/calendar";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { mergeProps as mergeProps8 } from "@react-aria/utils";
-import { cn as cn24, useClassNames as useClassNames22, useStateProps as useStateProps7 } from "@marigold/system";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps6 } from "@marigold/system";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var CalendarCell = (props) => {
   const ref = useRef12(null);
   const { state } = props;
   let { cellProps, buttonProps, formattedDate, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
-  const classNames2 = useClassNames22({
+  const classNames2 = useClassNames24({
     component: "Calendar"
   });
   const isDisabled = cellProps["aria-disabled"];
   const { hoverProps, isHovered } = useHover3({
     isDisabled: isDisabled || cellProps["aria-selected"]
   });
-  const stateProps = useStateProps7({
+  const stateProps = useStateProps6({
     disabled: isDisabled,
     hover: isHovered,
     selected: cellProps["aria-selected"]
   });
-  return /* @__PURE__ */ jsx44("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx46(
     "div",
     {
-      className: cn24(
+      className: cn26(
         "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
         classNames2.calendarCell
       ),
@@ -1962,7 +2027,7 @@ var CalendarCell = (props) => {
 };
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
 var CalendarGrid = ({ state, ...props }) => {
   const { locale } = useLocale2();
   const { gridProps, headerProps } = useCalendarGrid(props, state);
@@ -1982,23 +2047,23 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs20(
     "table",
     {
       className: "w-full border-spacing-[6px]",
       ...gridProps,
       cellPadding: "8",
       children: [
-        /* @__PURE__ */ jsx45("thead", { ...headerProps, children: /* @__PURE__ */ jsx45("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx45("th", { style: { fontWeight: "bolder" }, children: day.substring(0, 2) }, index)) }) }),
-        /* @__PURE__ */ jsx45("tbody", { children: [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx45("tr", { children: state.getDatesInWeek(weekIndex).map(
-          (date, i) => date ? /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx47("thead", { ...headerProps, children: /* @__PURE__ */ jsx47("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx47("th", { style: { fontWeight: "bolder" }, children: day.substring(0, 2) }, index)) }) }),
+        /* @__PURE__ */ jsx47("tbody", { children: [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx47("tr", { children: state.getDatesInWeek(weekIndex).map(
+          (date, i) => date ? /* @__PURE__ */ jsx47(
             CalendarCell,
             {
               date,
               state
             },
             i
-          ) : /* @__PURE__ */ jsx45("td", {}, i)
+          ) : /* @__PURE__ */ jsx47("td", {}, i)
         ) }, weekIndex)) })
       ]
     }
@@ -2006,7 +2071,7 @@ var CalendarGrid = ({ state, ...props }) => {
 };
 
 // src/Calendar/MonthDropdown.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var MonthDropdown = ({
   state,
   setSelectedDropdown,
@@ -2017,13 +2082,13 @@ var MonthDropdown = ({
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     "ul",
     {
       "data-testid": "monthOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: months.map((month, index) => {
-        return /* @__PURE__ */ jsx46("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx46(
+        return /* @__PURE__ */ jsx48("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx48(
           _Button,
           {
             variant: index === state.focusedDate.month - 1 ? "secondary" : "text",
@@ -2045,7 +2110,7 @@ var MonthDropdown_default = MonthDropdown;
 // src/Calendar/YearDropdown.tsx
 import { useEffect as useEffect2, useRef as useRef13 } from "react";
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var YearDropdown = ({ state, setSelectedDropdown }) => {
   const years = [];
   let formatter = useDateFormatter2({
@@ -2074,19 +2139,19 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     "ul",
     {
       "data-testid": "yearOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: years.map((year, index) => {
         const isActive = +year.formatted === state.focusedDate.year;
-        return /* @__PURE__ */ jsx47("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx47(
+        return /* @__PURE__ */ jsx49("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx49(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx47(
+            children: /* @__PURE__ */ jsx49(
               _Button,
               {
                 disabled: state.isDisabled,
@@ -2110,7 +2175,7 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
 var YearDropdown_default = YearDropdown;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment5, jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
 var buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
 var Calendar = ({
   disabled,
@@ -2145,12 +2210,12 @@ var Calendar = ({
     onFocusChange: nextFocusChange,
     ...nextPropsRest
   } = nextButtonProps;
-  const calendarState = useStateProps8({
+  const calendarState = useStateProps7({
     disabled: state.isDisabled,
     focusVisible: state.isFocused
   });
-  const classNames2 = useClassNames23({ component: "Calendar" });
-  const { select: selectClassNames } = useClassNames23({ component: "Select" });
+  const classNames2 = useClassNames25({ component: "Calendar" });
+  const { select: selectClassNames } = useClassNames25({ component: "Select" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   let months = [];
   let formatter = useDateFormatter3({
@@ -2166,75 +2231,75 @@ var Calendar = ({
     month: months[state.focusedDate.month - 1].substring(0, 3),
     year: state.focusedDate.year
   };
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       tabIndex: -1,
-      className: cn25(
+      className: cn27(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
       ...calendarProps,
       ...calendarState,
       ref,
-      children: selectedDropdown ? selectedDropdown === "month" ? /* @__PURE__ */ jsx48(
+      children: selectedDropdown ? selectedDropdown === "month" ? /* @__PURE__ */ jsx50(
         MonthDropdown_default,
         {
           setSelectedDropdown,
           months,
           state
         }
-      ) : /* @__PURE__ */ jsx48(
+      ) : /* @__PURE__ */ jsx50(
         YearDropdown_default,
         {
           setSelectedDropdown,
           state
         }
-      ) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
-        /* @__PURE__ */ jsxs19("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs19("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ jsxs19(
+      ) : /* @__PURE__ */ jsxs21(Fragment6, { children: [
+        /* @__PURE__ */ jsxs21("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs21("div", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ jsxs21(
               "button",
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("month"),
-                className: cn25(buttonStyles, selectClassNames),
+                className: cn27(buttonStyles, selectClassNames),
                 "data-testid": "month",
                 children: [
                   selectedValue.month,
-                  /* @__PURE__ */ jsx48(ChevronDown2, {})
+                  /* @__PURE__ */ jsx50(ChevronDown2, {})
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs19(
+            /* @__PURE__ */ jsxs21(
               "button",
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("year"),
-                className: cn25(buttonStyles, selectClassNames),
+                className: cn27(buttonStyles, selectClassNames),
                 "data-testid": "year",
                 children: [
                   selectedValue.year,
-                  /* @__PURE__ */ jsx48(ChevronDown2, {})
+                  /* @__PURE__ */ jsx50(ChevronDown2, {})
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs21(
             "div",
             {
-              className: cn25(
+              className: cn27(
                 "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
                 classNames2.calendarControllers
               ),
               children: [
-                /* @__PURE__ */ jsx48(_Button, { ...prevPropsRest, disabled: prevIsDisabled, children: /* @__PURE__ */ jsx48(ChevronLeft, {}) }),
-                /* @__PURE__ */ jsx48(_Button, { ...nextPropsRest, disabled: nextIsDisabled, children: /* @__PURE__ */ jsx48(ChevronRight, {}) })
+                /* @__PURE__ */ jsx50(_Button, { ...prevPropsRest, disabled: prevIsDisabled, children: /* @__PURE__ */ jsx50(ChevronLeft, {}) }),
+                /* @__PURE__ */ jsx50(_Button, { ...nextPropsRest, disabled: nextIsDisabled, children: /* @__PURE__ */ jsx50(ChevronRight, {}) })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx48(CalendarGrid, { state })
+        /* @__PURE__ */ jsx50(CalendarGrid, { state })
       ] })
     }
   );
@@ -2245,8 +2310,8 @@ import { useRef as useRef15 } from "react";
 import { useDatePicker } from "@react-aria/datepicker";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { useDatePickerState } from "@react-stately/datepicker";
-import { useClassNames as useClassNames24, useStateProps as useStateProps9 } from "@marigold/system";
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useClassNames as useClassNames26, useStateProps as useStateProps8 } from "@marigold/system";
+import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
 var DatePicker = ({
   disabled,
   required,
@@ -2271,7 +2336,7 @@ var DatePicker = ({
     ...props
   });
   const ref = useRef15(null);
-  const stateProps = useStateProps9({
+  const stateProps = useStateProps8({
     focus: state.isOpen
   });
   const { groupProps, fieldProps, buttonProps, calendarProps } = useDatePicker(
@@ -2280,13 +2345,13 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = useClassNames24({
+  const classNames2 = useClassNames26({
     component: "DatePicker",
     size,
     variant
   });
-  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    /* @__PURE__ */ jsx49("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    /* @__PURE__ */ jsx51("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx51(
       DateField,
       {
         ...fieldProps,
@@ -2299,41 +2364,41 @@ var DatePicker = ({
         description: !state.isOpen && description,
         triggerRef: ref,
         width,
-        action: /* @__PURE__ */ jsx49("div", { className: classNames2.container, children: /* @__PURE__ */ jsx49(
+        action: /* @__PURE__ */ jsx51("div", { className: classNames2.container, children: /* @__PURE__ */ jsx51(
           _Button,
           {
             ...mergeProps9(buttonProps, stateProps),
             disabled: isDisabled,
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx51(
               "svg",
               {
                 width: "24",
                 height: "24",
                 viewBox: "0 0 24 24",
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx49("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                children: /* @__PURE__ */ jsx51("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
               }
             )
           }
         ) })
       }
     ) }),
-    state.isOpen && /* @__PURE__ */ jsx49(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx49(Calendar, { disabled, ...calendarProps }) })
+    state.isOpen && /* @__PURE__ */ jsx51(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx51(Calendar, { disabled, ...calendarProps }) })
   ] });
 };
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn26,
+  cn as cn28,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx50(
+import { jsx as jsx52 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
   "div",
   {
-    className: cn26(
+    className: cn28(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2343,38 +2408,38 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx50(
 );
 
 // src/Link/Link.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames25 } from "@marigold/system";
-import { jsx as jsx51 } from "react/jsx-runtime";
-var _Link = forwardRef10(
+import { useClassNames as useClassNames27 } from "@marigold/system";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var _Link = forwardRef11(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = useClassNames25({
+    const classNames2 = useClassNames27({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ jsx51(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx53(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames26 } from "@marigold/system";
+import { useClassNames as useClassNames28 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var ListContext = createContext5({});
-var useListContext = () => useContext5(ListContext);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var ListContext = createContext4({});
+var useListContext = () => useContext4(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx52("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx54("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2383,8 +2448,8 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames26({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx53(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx53(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  const classNames2 = useClassNames28({ component: "List", variant, size });
+  return /* @__PURE__ */ jsx55(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx55(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -2394,23 +2459,23 @@ import { useMenu } from "@react-aria/menu";
 import { useSyncRef } from "@react-aria/utils";
 import { Item as Item4, Section } from "@react-stately/collections";
 import { useTreeState as useTreeState2 } from "@react-stately/tree";
-import { useClassNames as useClassNames28 } from "@marigold/system";
+import { useClassNames as useClassNames30 } from "@marigold/system";
 
 // src/Menu/Context.ts
 import {
-  createContext as createContext6,
-  useContext as useContext6
+  createContext as createContext5,
+  useContext as useContext5
 } from "react";
-var MenuContext = createContext6({});
-var useMenuContext = () => useContext6(MenuContext);
+var MenuContext = createContext5({});
+var useMenuContext = () => useContext5(MenuContext);
 
 // src/Menu/MenuItem.tsx
 import { useRef as useRef16 } from "react";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { useStateProps as useStateProps10 } from "@marigold/system";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { useStateProps as useStateProps9 } from "@marigold/system";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var MenuItem = ({
   item,
   state,
@@ -2429,11 +2494,11 @@ var MenuItem = ({
     ref
   );
   const { isFocusVisible, focusProps } = useFocusRing5();
-  const stateProps = useStateProps10({
+  const stateProps = useStateProps9({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     "li",
     {
       ref,
@@ -2451,19 +2516,19 @@ var MenuItem = ({
 
 // src/Menu/MenuSection.tsx
 import { useMenuSection } from "@react-aria/menu";
-import { useClassNames as useClassNames27 } from "@marigold/system";
-import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useClassNames as useClassNames29 } from "@marigold/system";
+import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = useMenuSection({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
-  const className = useClassNames27({ component: "Menu" });
-  return /* @__PURE__ */ jsxs21(Fragment7, { children: [
-    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx55("li", { children: /* @__PURE__ */ jsx55(_Divider, { variant: "section" }) }),
-    /* @__PURE__ */ jsxs21("li", { ...itemProps, children: [
-      item.rendered && /* @__PURE__ */ jsx55("span", { ...headingProps, className: className.section, children: item.rendered }),
-      /* @__PURE__ */ jsx55("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ jsx55(
+  const className = useClassNames29({ component: "Menu" });
+  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
+    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx57("li", { children: /* @__PURE__ */ jsx57(_Divider, { variant: "section" }) }),
+    /* @__PURE__ */ jsxs23("li", { ...itemProps, children: [
+      item.rendered && /* @__PURE__ */ jsx57("span", { ...headingProps, className: className.section, children: item.rendered }),
+      /* @__PURE__ */ jsx57("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ jsx57(
         MenuItem,
         {
           item: node,
@@ -2485,7 +2550,7 @@ import { useMenuTrigger } from "@react-aria/menu";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useSmallScreen } from "@marigold/system";
-import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
 var MenuTrigger = ({
   disabled,
   open,
@@ -2512,8 +2577,8 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useSmallScreen();
-  return /* @__PURE__ */ jsxs22(MenuContext.Provider, { value: menuContext, children: [
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs24(MenuContext.Provider, { value: menuContext, children: [
+    /* @__PURE__ */ jsx58(
       PressResponder2,
       {
         ...menuTriggerProps,
@@ -2522,12 +2587,12 @@ var MenuTrigger = ({
         children: menuTrigger
       }
     ),
-    isSmallScreen ? /* @__PURE__ */ jsx56(Tray, { state, children: menu }) : /* @__PURE__ */ jsx56(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
+    isSmallScreen ? /* @__PURE__ */ jsx58(Tray, { state, children: menu }) : /* @__PURE__ */ jsx58(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
@@ -2535,10 +2600,10 @@ var Menu = ({ variant, size, ...props }) => {
   const state = useTreeState2({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const classNames2 = useClassNames28({ component: "Menu", variant, size });
-  return /* @__PURE__ */ jsx57("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
+  const classNames2 = useClassNames30({ component: "Menu", variant, size });
+  return /* @__PURE__ */ jsx59("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ jsx57(
+      return /* @__PURE__ */ jsx59(
         MenuSection_default,
         {
           item,
@@ -2548,7 +2613,7 @@ var Menu = ({ variant, size, ...props }) => {
         item.key
       );
     }
-    return /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsx59(
       MenuItem,
       {
         item,
@@ -2566,25 +2631,25 @@ Menu.Section = Section;
 
 // src/Menu/ActionMenu.tsx
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ jsxs23(Menu.Trigger, { children: [
-    /* @__PURE__ */ jsx58(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx58(SVG5, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
-    /* @__PURE__ */ jsx58(Menu, { ...props })
+  return /* @__PURE__ */ jsxs25(Menu.Trigger, { children: [
+    /* @__PURE__ */ jsx60(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx60(SVG5, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx60("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__ */ jsx60(Menu, { ...props })
   ] });
 };
 
 // src/Message/Message.tsx
-import { cn as cn27, useClassNames as useClassNames29 } from "@marigold/system";
-import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
+import { cn as cn29, useClassNames as useClassNames31 } from "@marigold/system";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
 var icons = {
-  info: () => /* @__PURE__ */ jsx59(
+  info: () => /* @__PURE__ */ jsx61(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsx61(
         "path",
         {
           fillRule: "evenodd",
@@ -2594,13 +2659,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx59(
+  warning: () => /* @__PURE__ */ jsx61(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsx61(
         "path",
         {
           fillRule: "evenodd",
@@ -2610,13 +2675,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx59(
+  error: () => /* @__PURE__ */ jsx61(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsx61(
         "path",
         {
           fillRule: "evenodd",
@@ -2634,49 +2699,49 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = useClassNames29({ component: "Message", variant, size });
+  const classNames2 = useClassNames31({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
-      className: cn27(
+      className: cn29(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx59("div", { className: cn27("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx59(Icon3, {}) }),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx61("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
+        /* @__PURE__ */ jsx61(
           "div",
           {
-            className: cn27("col-start-2 row-start-1 self-center", classNames2.title),
+            className: cn29("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx59("div", { className: cn27("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx61("div", { className: cn29("col-start-2", classNames2.content), children })
       ]
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useLocale as useLocale4 } from "@react-aria/i18n";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useNumberField } from "@react-aria/numberfield";
 import { mergeProps as mergeProps12, useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
-import { cn as cn29, useClassNames as useClassNames30, useStateProps as useStateProps12 } from "@marigold/system";
+import { cn as cn31, useClassNames as useClassNames32, useStateProps as useStateProps11 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { useRef as useRef19 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { useHover as useHover4 } from "@react-aria/interactions";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { cn as cn28, useStateProps as useStateProps11 } from "@marigold/system";
-import { jsx as jsx60 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx60(
+import { cn as cn30, useStateProps as useStateProps10 } from "@marigold/system";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx62(
   "path",
   {
     fillRule: "evenodd",
@@ -2684,7 +2749,7 @@ var Plus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx60(
+var Minus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx62(
   "path",
   {
     fillRule: "evenodd",
@@ -2703,16 +2768,16 @@ var StepButton = ({
     ref
   );
   const { hoverProps, isHovered } = useHover4(props);
-  const stateProps = useStateProps11({
+  const stateProps = useStateProps10({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx62(
     "div",
     {
-      className: cn28(
+      className: cn30(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2721,14 +2786,14 @@ var StepButton = ({
       ),
       ...mergeProps11(buttonProps, hoverProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx60(Icon3, {})
+      children: /* @__PURE__ */ jsx62(Icon3, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
-var NumberField = forwardRef11(
+import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
+var NumberField = forwardRef12(
   ({
     variant,
     size,
@@ -2766,7 +2831,7 @@ var NumberField = forwardRef11(
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const stateProps = useStateProps12({
+    const stateProps = useStateProps11({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -2774,12 +2839,12 @@ var NumberField = forwardRef11(
       readOnly,
       required
     });
-    const classNames2 = useClassNames30({
+    const classNames2 = useClassNames32({
       component: "NumberField",
       size,
       variant
     });
-    return /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsx63(
       FieldBase,
       {
         label: props.label,
@@ -2793,16 +2858,16 @@ var NumberField = forwardRef11(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ jsxs25(
+        children: /* @__PURE__ */ jsxs27(
           "div",
           {
             "data-group": true,
-            className: cn29("flex items-stretch", classNames2.group),
+            className: cn31("flex items-stretch", classNames2.group),
             "data-testid": "number-field-container",
             ...mergeProps12(groupProps, focusProps, hoverProps),
             ...stateProps,
             children: [
-              showStepper && /* @__PURE__ */ jsx61(
+              showStepper && /* @__PURE__ */ jsx63(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -2810,7 +2875,7 @@ var NumberField = forwardRef11(
                   ...decrementButtonProps
                 }
               ),
-              /* @__PURE__ */ jsx61("div", { className: "flex-1", children: /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63("div", { className: "flex-1", children: /* @__PURE__ */ jsx63(
                 Input,
                 {
                   ref: inputRef,
@@ -2820,7 +2885,7 @@ var NumberField = forwardRef11(
                   ...stateProps
                 }
               ) }),
-              showStepper && /* @__PURE__ */ jsx61(
+              showStepper && /* @__PURE__ */ jsx63(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -2846,14 +2911,14 @@ import {
   defaultTheme,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   theme
 }) {
   const outerTheme = useTheme3();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx62(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx62(OverlayProvider, { children }) : children });
+  return /* @__PURE__ */ jsx64(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx64(OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
@@ -2864,109 +2929,15 @@ import { Radio } from "react-aria-components";
 import { cn as cn33, useClassNames as useClassNames34 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext7, useContext as useContext7 } from "react";
-var RadioGroupContext = createContext7(
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var RadioGroupContext = createContext6(
   null
 );
-var useRadioGroupContext = () => useContext7(RadioGroupContext);
+var useRadioGroupContext = () => useContext6(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
 import { cn as cn32, useClassNames as useClassNames33 } from "@marigold/system";
-
-// src/FieldBase/_FieldBase.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { cn as cn31, width as twWidth2, useClassNames as useClassNames32 } from "@marigold/system";
-
-// src/HelpText/_HelpText.tsx
-import { Text } from "react-aria-components";
-import { cn as cn30, useClassNames as useClassNames31 } from "@marigold/system";
-import { Fragment as Fragment8, jsx as jsx63, jsxs as jsxs26 } from "react/jsx-runtime";
-var HelpText2 = ({
-  variant,
-  size,
-  description,
-  error,
-  errorMessage,
-  ...props
-}) => {
-  const hasErrorMessage = errorMessage && error;
-  const classNames2 = useClassNames31({
-    component: "HelpText",
-    variant,
-    size
-  });
-  if (!description && !errorMessage) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx63(
-    Text,
-    {
-      ...props,
-      slot: hasErrorMessage ? "errorMessage" : "description",
-      className: cn30("flex items-center gap-1", classNames2.container),
-      children: hasErrorMessage ? /* @__PURE__ */ jsxs26(Fragment8, { children: [
-        /* @__PURE__ */ jsx63(
-          "svg",
-          {
-            className: cn30("h-4 w-4", classNames2.icon),
-            viewBox: "0 0 24 24",
-            role: "presentation",
-            children: /* @__PURE__ */ jsx63("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
-          }
-        ),
-        errorMessage
-      ] }) : description
-    }
-  );
-};
-
-// src/FieldBase/_FieldBase.tsx
-import { jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
-var fixedForwardRef = forwardRef12;
-var _FieldBase = (props, ref) => {
-  const {
-    as: Component = "div",
-    children,
-    label,
-    size,
-    variant,
-    width = "full",
-    description,
-    errorMessage,
-    ...rest
-  } = props;
-  const classNames2 = useClassNames32({
-    component: "Field",
-    variant,
-    size
-  });
-  return /* @__PURE__ */ jsxs27(
-    Component,
-    {
-      ref,
-      className: cn31("group/field", twWidth2[width], classNames2),
-      ...rest,
-      children: [
-        label ? /* @__PURE__ */ jsx64(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx64("span", { "aria-hidden": "true" }),
-        children,
-        /* @__PURE__ */ jsx64(
-          HelpText2,
-          {
-            variant,
-            size,
-            description,
-            errorMessage,
-            error: props.isInvalid
-          }
-        )
-      ]
-    }
-  );
-};
-var FieldBase2 = fixedForwardRef(_FieldBase);
-
-// src/Radio/RadioGroup.tsx
 import { jsx as jsx65 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -3091,7 +3062,7 @@ import {
   cn as cn34,
   useClassNames as useClassNames35,
   useSmallScreen as useSmallScreen2,
-  useStateProps as useStateProps13
+  useStateProps as useStateProps12
 } from "@marigold/system";
 
 // src/Select/intl.ts
@@ -3146,7 +3117,7 @@ var Select = forwardRef14(
     const { focusProps, isFocusVisible } = useFocusRing7();
     const classNames2 = useClassNames35({ component: "Select", variant, size });
     const isSmallScreen = useSmallScreen2();
-    const stateProps = useStateProps13({
+    const stateProps = useStateProps12({
       disabled,
       error,
       focusVisible: isFocusVisible,
@@ -3407,9 +3378,9 @@ import {
 import { cn as cn42, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext8, useContext as useContext8 } from "react";
-var TableContext = createContext8({});
-var useTableContext = () => useContext8(TableContext);
+import { createContext as createContext7, useContext as useContext7 } from "react";
+var TableContext = createContext7({});
+var useTableContext = () => useContext7(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
@@ -3424,7 +3395,7 @@ import { useRef as useRef21 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps14 } from "@react-aria/utils";
-import { useStateProps as useStateProps14 } from "@marigold/system";
+import { useStateProps as useStateProps13 } from "@marigold/system";
 import { jsx as jsx73 } from "react/jsx-runtime";
 var TableCell = ({ cell }) => {
   const ref = useRef21(null);
@@ -3447,7 +3418,7 @@ var TableCell = ({ cell }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = useFocusRing8();
-  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
+  const stateProps = useStateProps13({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ jsx73(
     "td",
     {
@@ -3465,7 +3436,7 @@ import { useRef as useRef22 } from "react";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps15 } from "@react-aria/utils";
-import { cn as cn38, useStateProps as useStateProps15 } from "@marigold/system";
+import { cn as cn38, useStateProps as useStateProps14 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3504,7 +3475,7 @@ var TableCheckboxCell = ({ cell }) => {
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = useFocusRing9();
-  const stateProps = useStateProps15({ disabled, focusVisible: isFocusVisible });
+  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ jsx74(
     "td",
     {
@@ -3524,7 +3495,7 @@ import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps16 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn39, useStateProps as useStateProps16 } from "@marigold/system";
+import { cn as cn39, useStateProps as useStateProps15 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
 import { jsx as jsx75, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
@@ -3543,7 +3514,7 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = useHover6({});
   const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps16({
+  const stateProps = useStateProps15({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3588,7 +3559,7 @@ import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps17 } from "@react-aria/utils";
-import { cn as cn40, useClassNames as useClassNames38, useStateProps as useStateProps17 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames38, useStateProps as useStateProps16 } from "@marigold/system";
 import { jsx as jsx78 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef25(null);
@@ -3612,7 +3583,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = useHover7({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps17({
+  const stateProps = useStateProps16({
     disabled,
     selected,
     hover: isHovered,
@@ -3648,7 +3619,7 @@ import { mergeProps as mergeProps18 } from "@react-aria/utils";
 import {
   cn as cn41,
   width as twWidth6,
-  useStateProps as useStateProps18
+  useStateProps as useStateProps17
 } from "@marigold/system";
 import { jsx as jsx79 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
@@ -3667,7 +3638,7 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
   const { hoverProps, isHovered } = useHover8({});
   const { focusProps, isFocusVisible } = useFocusRing12();
-  const stateProps = useStateProps18({
+  const stateProps = useStateProps17({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3833,7 +3804,7 @@ import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
-import { useClassNames as useClassNames41, useStateProps as useStateProps19 } from "@marigold/system";
+import { useClassNames as useClassNames41, useStateProps as useStateProps18 } from "@marigold/system";
 import { jsx as jsx82 } from "react/jsx-runtime";
 var TextArea = forwardRef17(
   ({
@@ -3862,7 +3833,7 @@ var TextArea = forwardRef17(
     );
     const { hoverProps, isHovered } = useHover9({});
     const { focusProps, isFocusVisible } = useFocusRing13();
-    const stateProps = useStateProps19({
+    const stateProps = useStateProps18({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
@@ -3907,7 +3878,7 @@ import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useHover as useHover10 } from "@react-aria/interactions";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { mergeProps as mergeProps19, useObjectRef as useObjectRef8 } from "@react-aria/utils";
-import { useStateProps as useStateProps20 } from "@marigold/system";
+import { useStateProps as useStateProps19 } from "@marigold/system";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var TextField = forwardRef18(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
@@ -3928,7 +3899,7 @@ var TextField = forwardRef18(
       isTextInput: true,
       autoFocus
     });
-    const stateProps = useStateProps20({
+    const stateProps = useStateProps19({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -4000,9 +3971,9 @@ import { useTooltip } from "@react-aria/tooltip";
 import { cn as cn45, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
-import { createContext as createContext9, useContext as useContext9 } from "react";
-var TooltipContext = createContext9({});
-var useTooltipContext = () => useContext9(TooltipContext);
+import { createContext as createContext8, useContext as useContext8 } from "react";
+var TooltipContext = createContext8({});
+var useTooltipContext = () => useContext8(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
 import { Children as Children7, useRef as useRef28 } from "react";
@@ -4102,7 +4073,7 @@ import { Item as Item6 } from "@react-stately/collections";
 import { useRef as useRef30 } from "react";
 import { useTagGroup } from "@react-aria/tag";
 import { useListState } from "@react-stately/list";
-import { useStateProps as useStateProps21 } from "@marigold/system";
+import { useStateProps as useStateProps20 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
 import React3, { useRef as useRef29 } from "react";
@@ -4171,7 +4142,7 @@ var TagGroup = ({
   const inputRef = useRef30(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
-  const stateProps = useStateProps21({
+  const stateProps = useStateProps20({
     error,
     required
   });
@@ -4444,16 +4415,16 @@ import { useTabListState } from "@react-stately/tabs";
 import { cn as cn49, gapSpace as gapSpace8, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext10, useContext as useContext10 } from "react";
-var TabContext = createContext10({});
-var useTabContext = () => useContext10(TabContext);
+import { createContext as createContext9, useContext as useContext9 } from "react";
+var TabContext = createContext9({});
+var useTabContext = () => useContext9(TabContext);
 
 // src/Tabs/Tab.tsx
 import { useRef as useRef31 } from "react";
 import { useFocus, useHover as useHover11 } from "@react-aria/interactions";
 import { useTab } from "@react-aria/tabs";
 import { mergeProps as mergeProps21 } from "@react-aria/utils";
-import { cn as cn47, useStateProps as useStateProps22 } from "@marigold/system";
+import { cn as cn47, useStateProps as useStateProps21 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
@@ -4464,7 +4435,7 @@ var Tab = ({ item, state }) => {
     isDisabled: disabled || isSelected
   });
   const { focusProps } = useFocus({});
-  const stateProps = useStateProps22({ active: isSelected, hover: isHovered });
+  const stateProps = useStateProps21({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ jsx90(
     "div",
@@ -4549,8 +4520,7 @@ export {
   Card,
   Center,
   _Checkbox as Checkbox,
-  CheckboxGroup,
-  CheckboxGroupContext,
+  _CheckboxGroup as CheckboxGroup,
   Columns,
   ComboBox,
   Container,
@@ -4601,7 +4571,6 @@ export {
   XLoader,
   _Slider,
   useAsyncList,
-  useCheckboxGroupContext,
   useFieldGroupContext,
   useListData,
   useTheme4 as useTheme