@marigold/components 6.2.0 → 6.2.3

package/dist/index.mjs

@@ -25,6 +25,7 @@ import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { cn, useClassNames, useStateProps } from "@marigold/system";
+import { jsx } from "react/jsx-runtime";
 var Button = forwardRef(
   ({
     as = "button",
@@ -77,7 +78,7 @@ var Button = forwardRef(
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Component,
       {
         ...mergeProps(buttonProps, focusProps, hoverProps, props),
@@ -87,9 +88,9 @@ var Button = forwardRef(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
           fullWidth ? "w-full" : void 0
-        )
-      },
-      children
+        ),
+        children
+      }
     );
   }
 );
@@ -97,15 +98,17 @@ var Button = forwardRef(
 // src/Chevron/ChevronUp.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { SVG } from "@marigold/system";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ChevronUp = forwardRef2(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(SVG, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React.createElement("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }))
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx2("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }) })
 );
 
 // src/Chevron/ChevronDown.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { SVG as SVG2 } from "@marigold/system";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var ChevronDown = forwardRef3(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(SVG2, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React.createElement("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }))
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SVG2, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx3("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
 );
 
 // src/Accordion/useAccordionItem.ts
@@ -205,6 +208,7 @@ function useAccordionItem(props, state, ref) {
 }
 
 // src/Accordion/AccordionItem.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var AccordionItem = ({
   item,
   state,
@@ -243,27 +247,33 @@ var AccordionItem = ({
     expanded: defaultExpanded || expanded
   });
   const classNames2 = useClassNames2({ component: "Accordion", variant, size });
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col", ...props }, /* @__PURE__ */ React.createElement(FocusRing, { within: true }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: classNames2.button,
-      ...mergeProps3(buttonProps, stateProps, props),
-      ref,
-      "aria-label": item.textValue
-    },
-    title,
-    !expanded ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h3 w-6" })
-  )), expanded || defaultExpanded ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ...mergeProps3(regionProps, focusProps, stateProps),
-      className: classNames2.item
-    },
-    item.props.children
-  ) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", ...props, children: [
+    /* @__PURE__ */ jsx4(FocusRing, { within: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: classNames2.button,
+        ...mergeProps3(buttonProps, stateProps, props),
+        ref,
+        "aria-label": item.textValue,
+        children: [
+          title,
+          !expanded ? /* @__PURE__ */ jsx4(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ jsx4(ChevronDown, { className: "h3 w-6" })
+        ]
+      }
+    ) }),
+    expanded || defaultExpanded ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        ...mergeProps3(regionProps, focusProps, stateProps),
+        className: classNames2.item,
+        children: item.props.children
+      }
+    ) : null
+  ] });
 };
 
 // src/Accordion/Accordion.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Accordion = ({ children, ...props }) => {
   const ownProps = {
     ...props,
@@ -288,23 +298,24 @@ var Accordion = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ React.createElement("div", { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx5("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx5(
     AccordionItem,
     {
-      key: item.key,
       title: item.props.title,
       item,
       state,
       variant: item.props.variant,
       size: item.props.size
-    }
-  )));
+    },
+    item.key
+  )) });
 };
 Accordion.Item = Item;
 
 // src/Aside/Aside.tsx
 import { Children as Children2 } from "react";
 import { cn as cn2, createVar, gapSpace } from "@marigold/system";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var classNames = {
   aside: "grow basis-[--sideWidth]",
   content: "basis-0 grow-[999] [min-inline-size:--wrap]"
@@ -322,47 +333,50 @@ var Aside = ({
     aside: createVar({ sideWidth }),
     content: createVar({ wrap })
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn2(
         "flex flex-wrap",
         gapSpace[space],
         !stretch && "items-start"
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames[side === "left" ? "aside" : "content"],
-        style: vars[side === "left" ? "aside" : "content"]
-      },
-      left
-    ),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames[side === "right" ? "aside" : "content"],
-        style: vars[side === "right" ? "aside" : "content"]
-      },
-      right
-    )
+      ),
+      children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: classNames[side === "left" ? "aside" : "content"],
+            style: vars[side === "left" ? "aside" : "content"],
+            children: left
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: classNames[side === "right" ? "aside" : "content"],
+            style: vars[side === "right" ? "aside" : "content"],
+            children: right
+          }
+        )
+      ]
+    }
   );
 };
 
 // src/Aspect/Aspect.tsx
 import { aspect, cn as cn3, createVar as createVar2 } from "@marigold/system";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx7(
   "div",
   {
     className: cn3("overflow-hidden", aspect[ratio], "max-w-[var(--maxWidth)]"),
-    style: createVar2({ maxWidth })
-  },
-  children
+    style: createVar2({ maxWidth }),
+    children
+  }
 );
 
 // src/Autocomplete/Autocomplete.tsx
@@ -381,6 +395,7 @@ import {
 
 // src/HelpText/HelpText.tsx
 import { SVG as SVG3, cn as cn4, useClassNames as useClassNames3 } from "@marigold/system";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var HelpText = ({
   variant,
   size,
@@ -400,27 +415,31 @@ var HelpText = ({
     size,
     className
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       ...props,
       ...hasErrorMessage ? errorMessageProps : descriptionProps,
-      className: cn4("flex items-center gap-1", classNames2.container)
-    },
-    hasErrorMessage ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      SVG3,
-      {
-        className: cn4("h-4 w-4", classNames2.icon),
-        viewBox: "0 0 24 24",
-        role: "presentation"
-      },
-      /* @__PURE__ */ React.createElement("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) : /* @__PURE__ */ React.createElement(React.Fragment, null, description)
+      className: cn4("flex items-center gap-1", classNames2.container),
+      children: hasErrorMessage ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx8(
+          SVG3,
+          {
+            className: cn4("h-4 w-4", classNames2.icon),
+            viewBox: "0 0 24 24",
+            role: "presentation",
+            children: /* @__PURE__ */ jsx8("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
+      ] }) : /* @__PURE__ */ jsx8(Fragment, { children: description })
+    }
   );
 };
 
 // src/Label/Label.tsx
 import { SVG as SVG4, cn as cn5, createVar as createVar3, useClassNames as useClassNames4 } from "@marigold/system";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var Label = ({
   as = "label",
   children,
@@ -431,36 +450,40 @@ var Label = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames4({ component: "Label", size, variant });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs4(
     Component,
     {
       ...props,
       className: cn5(classNames2.container, "flex w-[var(--labelWidth)]"),
-      style: createVar3({ labelWidth })
-    },
-    children,
-    /* @__PURE__ */ React.createElement(
-      SVG4,
-      {
-        viewBox: "0 0 24 24",
-        role: "presentation",
-        size: 16,
-        className: cn5("hidden", classNames2.indicator)
-      },
-      /* @__PURE__ */ React.createElement("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
-    )
+      style: createVar3({ labelWidth }),
+      children: [
+        children,
+        /* @__PURE__ */ jsx9(
+          SVG4,
+          {
+            viewBox: "0 0 24 24",
+            role: "presentation",
+            size: 16,
+            className: cn5("hidden", classNames2.indicator),
+            children: /* @__PURE__ */ jsx9("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
+          }
+        )
+      ]
+    }
   );
 };
 
 // src/FieldBase/FieldGroup.tsx
 import { createContext, useContext } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var FieldGroupContext = createContext({});
 var useFieldGroupContext = () => useContext(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ React.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
+  return /* @__PURE__ */ jsx10(FieldGroupContext.Provider, { value: { labelWidth }, children });
 };
 
 // src/FieldBase/FieldBase.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var FieldBase = ({
   children,
   variant,
@@ -484,37 +507,39 @@ var FieldBase = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ...props,
       ...stateProps,
-      className: cn6("group/field", twWidth[width], classNames2)
-    },
-    label && /* @__PURE__ */ React.createElement(
-      Label,
-      {
-        variant,
-        size,
-        labelWidth,
-        ...labelProps
-      },
-      label
-    ),
-    children,
-    hasHelpText && /* @__PURE__ */ React.createElement(
-      HelpText,
-      {
-        variant,
-        size,
-        disabled,
-        description,
-        descriptionProps,
-        error,
-        errorMessage,
-        errorMessageProps
-      }
-    )
+      className: cn6("group/field", twWidth[width], classNames2),
+      children: [
+        label && /* @__PURE__ */ jsx11(
+          Label,
+          {
+            variant,
+            size,
+            labelWidth,
+            ...labelProps,
+            children: label
+          }
+        ),
+        children,
+        hasHelpText && /* @__PURE__ */ jsx11(
+          HelpText,
+          {
+            variant,
+            size,
+            disabled,
+            description,
+            descriptionProps,
+            error,
+            errorMessage,
+            errorMessageProps
+          }
+        )
+      ]
+    }
   );
 };
 
@@ -524,6 +549,7 @@ import {
   forwardRef as forwardRef4
 } from "react";
 import { cn as cn7, useClassNames as useClassNames6 } from "@marigold/system";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var Input = forwardRef4(
   ({
     type = "text",
@@ -556,31 +582,33 @@ var Input = forwardRef4(
       ),
       ...action.props
     }) : null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "group/input relative flex items-center",
         "data-icon": icon && "",
-        "data-action": action && ""
-      },
-      inputIcon,
-      /* @__PURE__ */ React.createElement(
-        "input",
-        {
-          ...props,
-          className: cn7(
-            "flex-1",
-            "disabled:cursor-not-allowed",
-            "[&[type=file]]:border-none [&[type=file]]:p-0",
-            "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0",
-            classNames2.input,
-            className
+        "data-action": action && "",
+        children: [
+          inputIcon,
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              ...props,
+              className: cn7(
+                "flex-1",
+                "disabled:cursor-not-allowed",
+                "[&[type=file]]:border-none [&[type=file]]:p-0",
+                "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0",
+                classNames2.input,
+                className
+              ),
+              ref,
+              type
+            }
           ),
-          ref,
-          type
-        }
-      ),
-      inputAction
+          inputAction
+        ]
+      }
     );
   }
 );
@@ -601,6 +629,7 @@ import { useRef as useRef3 } from "react";
 import { useOption } from "@react-aria/listbox";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
 import { useStateProps as useStateProps3 } from "@marigold/system";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var ListBoxOption = ({ item, state }) => {
   const ref = useRef3(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption(
@@ -617,35 +646,40 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx13(
     "li",
     {
       ref,
       className: classNames2.option,
-      ...mergeProps4(props, { onPointerDown: onPointerUp }, { ...stateProps })
-    },
-    item.props.children
+      ...mergeProps4(props, { onPointerDown: onPointerUp }, { ...stateProps }),
+      children: item.props.children
+    }
   );
 };
 
 // src/ListBox/ListBoxSection.tsx
 import { useListBoxSection } from "@react-aria/listbox";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var ListBoxSection = ({ section, state }) => {
   const { classNames: classNames2 } = useListBoxContext();
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ React.createElement("li", { className: classNames2.section, ...itemProps }, section.rendered && /* @__PURE__ */ React.createElement("div", { className: classNames2.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React.createElement("ul", { className: classNames2.list, ...groupProps }, [...section.props.children].map((node) => /* @__PURE__ */ React.createElement(ListBoxOption, { key: node.key, item: node, state }))));
+  return /* @__PURE__ */ jsxs7("li", { className: classNames2.section, ...itemProps, children: [
+    section.rendered && /* @__PURE__ */ jsx14("div", { className: classNames2.sectionTitle, ...headingProps, children: section.rendered }),
+    /* @__PURE__ */ jsx14("ul", { className: classNames2.list, ...groupProps, children: [...section.props.children].map((node) => /* @__PURE__ */ jsx14(ListBoxOption, { item: node, state }, node.key)) })
+  ] });
 };
 
 // src/ListBox/ListBox.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
 var ListBox = forwardRef5(
   ({ state, variant, size, ...props }, ref) => {
     const innerRef = useObjectRef2(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
     const classNames2 = useClassNames7({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ React.createElement(ListBoxContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx15(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx15("div", { className: classNames2.container, children: /* @__PURE__ */ jsx15(
       "ul",
       {
         className: cn8(
@@ -653,12 +687,12 @@ var ListBox = forwardRef5(
           classNames2.list
         ),
         ref: innerRef,
-        ...listBoxProps
-      },
-      [...state.collection].map(
-        (item) => item.type === "section" ? /* @__PURE__ */ React.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React.createElement(ListBoxOption, { key: item.key, item, state })
-      )
-    )));
+        ...listBoxProps,
+        children: [...state.collection].map(
+          (item) => item.type === "section" ? /* @__PURE__ */ jsx15(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx15(ListBoxOption, { item, state }, item.key)
+        )
+      }
+    ) }) });
   }
 );
 
@@ -670,12 +704,14 @@ import { mergeProps as mergeProps5, useObjectRef as useObjectRef3 } from "@react
 
 // src/Overlay/Underlay.tsx
 import { cn as cn9, useClassNames as useClassNames8 } from "@marigold/system";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Underlay = ({ size, variant, ...props }) => {
   const classNames2 = useClassNames8({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ React.createElement("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
+  return /* @__PURE__ */ jsx16("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
 };
 
 // src/Overlay/Modal.tsx
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var Modal = forwardRef6(
   ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
     const modalRef = useObjectRef3(ref);
@@ -690,15 +726,18 @@ var Modal = forwardRef6(
     );
     usePreventScroll();
     const { modalProps } = useModal({});
-    return /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "pointer-none fixed inset-0 z-50 flex items-center justify-center",
-        ref: modalRef,
-        ...mergeProps5(props, overlayProps, modalProps)
-      },
-      /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "auto" } }, children)
-    ));
+    return /* @__PURE__ */ jsxs8(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
+      /* @__PURE__ */ jsx17(Underlay, { ...underlayProps, variant: "modal" }),
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: "pointer-none fixed inset-0 z-50 flex items-center justify-center",
+          ref: modalRef,
+          ...mergeProps5(props, overlayProps, modalProps),
+          children: /* @__PURE__ */ jsx17("div", { style: { pointerEvents: "auto" }, children })
+        }
+      )
+    ] });
   }
 );
 
@@ -708,6 +747,7 @@ import {
   Overlay as ReactAriaOverlay
 } from "@react-aria/overlays";
 import { useTheme } from "@marigold/system";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Overlay = ({ children, container, open }) => {
   const nodeRef = useRef4(null);
   const theme = useTheme();
@@ -715,16 +755,16 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx18(ReactAriaOverlay, { portalContainer: container, children: /* @__PURE__ */ jsx18(
     "div",
     {
       ref: nodeRef,
       "data-testid": "overlay",
       "data-theme": theme.name,
-      className: "opacity-100"
-    },
-    children
-  ));
+      className: "opacity-100",
+      children
+    }
+  ) });
 };
 
 // src/Overlay/Popover.tsx
@@ -735,12 +775,13 @@ import {
   usePopover
 } from "@react-aria/overlays";
 import { useClassNames as useClassNames9 } from "@marigold/system";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Popover = forwardRef7(
   (props, ref) => {
     const fallbackRef = useRef5(null);
     const popoverRef = ref || fallbackRef;
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
+    return /* @__PURE__ */ jsx19(Overlay, { open: state.isOpen, ...otherProps, children: /* @__PURE__ */ jsx19(PopoverWrapper, { ref: popoverRef, ...props, children }) });
   }
 );
 var PopoverWrapper = forwardRef7(
@@ -765,22 +806,27 @@ var PopoverWrapper = forwardRef7(
       component: "Popover",
       variant: placement
     });
-    return /* @__PURE__ */ React.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ...popoverProps,
-        className: classNames2,
-        style: {
-          ...popoverProps.style,
-          minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
-        },
-        ref,
-        role: "presentation"
-      },
-      !isNonModal && /* @__PURE__ */ React.createElement(DismissButton, { onDismiss: state.close }),
-      children,
-      /* @__PURE__ */ React.createElement(DismissButton, { onDismiss: state.close })
-    ));
+    return /* @__PURE__ */ jsxs9(FocusScope2, { restoreFocus: true, children: [
+      !isNonModal && /* @__PURE__ */ jsx19(Underlay, { ...underlayProps }),
+      /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          ...popoverProps,
+          className: classNames2,
+          style: {
+            ...popoverProps.style,
+            minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+          },
+          ref,
+          role: "presentation",
+          children: [
+            !isNonModal && /* @__PURE__ */ jsx19(DismissButton, { onDismiss: state.close }),
+            children,
+            /* @__PURE__ */ jsx19(DismissButton, { onDismiss: state.close })
+          ]
+        }
+      )
+    ] });
   }
 );
 
@@ -792,10 +838,11 @@ import {
   useModalOverlay
 } from "@react-aria/overlays";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var Tray = forwardRef8(
   ({ state, children, ...props }, ref) => {
     const trayRef = useObjectRef4(ref);
-    return /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
+    return /* @__PURE__ */ jsx20(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx20(TrayWrapper, { state, ...props, ref: trayRef, children }) });
   }
 );
 var TrayWrapper = forwardRef8(
@@ -808,18 +855,20 @@ var TrayWrapper = forwardRef8(
       state,
       ref
     );
-    return /* @__PURE__ */ React.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx20(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx20(Underlay, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ jsxs10(
       "div",
       {
         ...modalProps,
         ref,
         className: "absolute bottom-0 w-full",
-        "data-testid": "tray"
-      },
-      /* @__PURE__ */ React.createElement(DismissButton2, { onDismiss: state.close }),
-      children,
-      /* @__PURE__ */ React.createElement(DismissButton2, { onDismiss: state.close })
-    )));
+        "data-testid": "tray",
+        children: [
+          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close }),
+          children,
+          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close })
+        ]
+      }
+    ) }) });
   }
 );
 
@@ -830,6 +879,7 @@ import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
 import { cn as cn10, useStateProps as useStateProps4 } from "@marigold/system";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ClearButton = ({
   preventFocus,
   disabled,
@@ -872,7 +922,7 @@ var ClearButton = ({
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       ...mergeProps6(buttonProps, focusProps, hoverProps, props),
@@ -881,24 +931,25 @@ var ClearButton = ({
       className: cn10(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
+      ),
+      children: /* @__PURE__ */ jsx21(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          width: 20,
+          height: 20,
+          children: /* @__PURE__ */ jsx21("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+        }
       )
-    },
-    /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
-        width: 20,
-        height: 20
-      },
-      /* @__PURE__ */ React.createElement("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
-    )
+    }
   );
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var SearchIcon = (props) => /* @__PURE__ */ React.createElement(
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var SearchIcon = (props) => /* @__PURE__ */ jsx22(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -906,9 +957,9 @@ var SearchIcon = (props) => /* @__PURE__ */ React.createElement(
     fill: "currentColor",
     width: 24,
     height: 24,
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    ...props,
+    children: /* @__PURE__ */ jsx22("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+  }
 );
 var Autocomplete = ({
   disabled,
@@ -962,54 +1013,58 @@ var Autocomplete = ({
     state
   );
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    FieldBase,
-    {
-      label: props.label,
-      labelProps,
-      description: props.description,
-      error,
-      errorMessage: props.errorMessage,
-      disabled,
-      width
-    },
-    /* @__PURE__ */ React.createElement(
-      Input,
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx22(
+      FieldBase,
       {
-        ...inputProps,
-        ref: inputRef,
-        icon: /* @__PURE__ */ React.createElement(SearchIcon, null),
-        action: state.inputValue !== "" ? /* @__PURE__ */ React.createElement(
-          ClearButton,
+        label: props.label,
+        labelProps,
+        description: props.description,
+        error,
+        errorMessage: props.errorMessage,
+        disabled,
+        width,
+        children: /* @__PURE__ */ jsx22(
+          Input,
           {
-            preventFocus: true,
-            disabled: isDisabled,
-            ...restClearButtonProps
+            ...inputProps,
+            ref: inputRef,
+            icon: /* @__PURE__ */ jsx22(SearchIcon, {}),
+            action: state.inputValue !== "" ? /* @__PURE__ */ jsx22(
+              ClearButton,
+              {
+                preventFocus: true,
+                disabled: isDisabled,
+                ...restClearButtonProps
+              }
+            ) : null
           }
-        ) : null
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx22(
+      Popover,
+      {
+        state,
+        ref: popoverRef,
+        triggerRef: inputRef,
+        scrollRef: listBoxRef,
+        isNonModal: true,
+        children: /* @__PURE__ */ jsx22(ListBox, { ref: listBoxRef, state, ...listBoxProps })
       }
     )
-  ), /* @__PURE__ */ React.createElement(
-    Popover,
-    {
-      state,
-      ref: popoverRef,
-      triggerRef: inputRef,
-      scrollRef: listBoxRef,
-      isNonModal: true
-    },
-    /* @__PURE__ */ React.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
-  ));
+  ] });
 };
 Autocomplete.Item = Item2;
 
 // src/ComboBox/ComboBox.tsx
-import React2 from "react";
+import React from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { useComboBox } from "@react-aria/combobox";
 import { useFilter as useFilter2 } from "@react-aria/i18n";
 import { Item as Item3 } from "@react-stately/collections";
 import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var ComboBox = ({
   error,
   width,
@@ -1034,10 +1089,10 @@ var ComboBox = ({
   };
   const { contains } = useFilter2({ sensitivity: "base" });
   const state = useComboBoxState2({ ...props, defaultFilter: contains });
-  const buttonRef = React2.useRef(null);
-  const inputRef = React2.useRef(null);
-  const listBoxRef = React2.useRef(null);
-  const popoverRef = React2.useRef(null);
+  const buttonRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const listBoxRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
   const {
     buttonProps: triggerProps,
     inputProps,
@@ -1050,56 +1105,61 @@ var ComboBox = ({
   const errorMessageProps = { "aria-invalid": error };
   const { buttonProps } = useButton4(triggerProps, buttonRef);
   const { label, description, errorMessage } = props;
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-    FieldBase,
-    {
-      label,
-      labelProps,
-      description,
-      error,
-      errorMessage,
-      errorMessageProps,
-      width
-    },
-    /* @__PURE__ */ React2.createElement(
-      Input,
+  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+    /* @__PURE__ */ jsx23(
+      FieldBase,
       {
-        ...inputProps,
-        ref: inputRef,
-        action: /* @__PURE__ */ React2.createElement(
-          Button,
+        label,
+        labelProps,
+        description,
+        error,
+        errorMessage,
+        errorMessageProps,
+        width,
+        children: /* @__PURE__ */ jsx23(
+          Input,
           {
-            className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
-            ref: buttonRef,
-            ...buttonProps
-          },
-          /* @__PURE__ */ React2.createElement(ChevronDown, { className: "h-4 w-4" })
+            ...inputProps,
+            ref: inputRef,
+            action: /* @__PURE__ */ jsx23(
+              Button,
+              {
+                className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
+                ref: buttonRef,
+                ...buttonProps,
+                children: /* @__PURE__ */ jsx23(ChevronDown, { className: "h-4 w-4" })
+              }
+            )
+          }
         )
       }
+    ),
+    /* @__PURE__ */ jsx23(
+      Popover,
+      {
+        state,
+        ref: popoverRef,
+        triggerRef: inputRef,
+        scrollRef: listBoxRef,
+        isNonModal: true,
+        children: /* @__PURE__ */ jsx23(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+      }
     )
-  ), /* @__PURE__ */ React2.createElement(
-    Popover,
-    {
-      state,
-      ref: popoverRef,
-      triggerRef: inputRef,
-      scrollRef: listBoxRef,
-      isNonModal: true
-    },
-    /* @__PURE__ */ React2.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
-  ));
+  ] });
 };
 ComboBox.Item = Item3;
 
 // src/Badge/Badge.tsx
 import { useClassNames as useClassNames10 } from "@marigold/system";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = useClassNames10({ component: "Badge", variant, size });
-  return /* @__PURE__ */ React.createElement("div", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ jsx24("div", { ...props, className: classNames2, children });
 };
 
 // src/Breakout/Breakout.tsx
 import { alignment, cn as cn11, createVar as createVar4 } from "@marigold/system";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Breakout = ({
   height,
   children,
@@ -1109,7 +1169,7 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: cn11(
@@ -1120,17 +1180,18 @@ var Breakout = ({
         "h-[--height]"
       ),
       style: createVar4({ height }),
-      ...props
-    },
-    children
+      ...props,
+      children
+    }
   );
 };
 
 // src/Body/Body.tsx
 import { useClassNames as useClassNames11 } from "@marigold/system";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames11({ component: "Body", variant, size });
-  return /* @__PURE__ */ React.createElement("section", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ jsx26("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
@@ -1146,6 +1207,7 @@ import {
   paddingTop,
   useClassNames as useClassNames12
 } from "@marigold/system";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Card = ({
   children,
   variant,
@@ -1161,7 +1223,7 @@ var Card = ({
   ...props
 }) => {
   const classNames2 = useClassNames12({ component: "Card", variant, size });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       ...props,
@@ -1176,21 +1238,22 @@ var Card = ({
         paddingLeft !== void 0 && paddingLeft[pl],
         paddingBottom !== void 0 && paddingBottom[pb],
         paddingTop !== void 0 && paddingTop[pt]
-      )
-    },
-    children
+      ),
+      children
+    }
   );
 };
 
 // src/Center/Center.tsx
 import { cn as cn13, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn13(
@@ -1199,9 +1262,9 @@ var Center = ({
         "max-w-[--maxWidth]"
       ),
       style: createVar5({ maxWidth }),
-      ...props
-    },
-    children
+      ...props,
+      children
+    }
   );
 };
 
@@ -1220,9 +1283,13 @@ import {
 
 // src/Checkbox/CheckboxField.tsx
 import { createVar as createVar6, useClassNames as useClassNames13 } from "@marigold/system";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 var CheckboxField = ({ children, labelWidth }) => {
   const classNames2 = useClassNames13({ component: "Field" });
-  return /* @__PURE__ */ React.createElement("div", { className: classNames2 }, /* @__PURE__ */ React.createElement("div", { className: "w-[--labelWidth]", style: createVar6({ labelWidth }) }), children);
+  return /* @__PURE__ */ jsxs13("div", { className: classNames2, children: [
+    /* @__PURE__ */ jsx29("div", { className: "w-[--labelWidth]", style: createVar6({ labelWidth }) }),
+    children
+  ] });
 };
 
 // src/Checkbox/CheckboxGroup.tsx
@@ -1232,6 +1299,7 @@ import {
   useCheckboxGroupState
 } from "@react-stately/checkbox";
 import { useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(
   null
 );
@@ -1259,7 +1327,7 @@ var CheckboxGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx30(
     FieldBase,
     {
       label: props.label,
@@ -1272,31 +1340,32 @@ var CheckboxGroup = ({
       disabled,
       stateProps,
       width,
-      ...groupProps
-    },
-    /* @__PURE__ */ React.createElement("div", { role: "presentation", className: "flex flex-col items-start" }, /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children))
+      ...groupProps,
+      children: /* @__PURE__ */ jsx30("div", { role: "presentation", className: "flex flex-col items-start", children: /* @__PURE__ */ jsx30(CheckboxGroupContext.Provider, { value: { error, ...state }, children }) })
+    }
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React.createElement(
+import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
+var CheckMark = () => /* @__PURE__ */ jsx31("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx31(
   "path",
   {
     fill: "currentColor",
     stroke: "none",
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
-));
-var IndeterminateMark = () => /* @__PURE__ */ React.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React.createElement(
+) });
+var IndeterminateMark = () => /* @__PURE__ */ jsx31("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx31(
   "path",
   {
     fill: "currentColor",
     stroke: "none",
     d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
   }
-));
+) });
 var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       "aria-hidden": "true",
@@ -1307,9 +1376,9 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
         "rounded-[3px] border border-solid border-black",
         className
       ),
-      ...props
-    },
-    indeterminate ? /* @__PURE__ */ React.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React.createElement(CheckMark, null) : null
+      ...props,
+      children: indeterminate ? /* @__PURE__ */ jsx31(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx31(CheckMark, {}) : null
+    }
   );
 };
 var Checkbox = forwardRef9(
@@ -1376,7 +1445,7 @@ var Checkbox = forwardRef9(
       readOnly,
       indeterminate
     });
-    const component = /* @__PURE__ */ React.createElement(
+    const component = /* @__PURE__ */ jsxs14(
       "label",
       {
         className: cn14(
@@ -1384,34 +1453,37 @@ var Checkbox = forwardRef9(
           classNames2.container
         ),
         ...hoverProps,
-        ...stateProps
-      },
-      /* @__PURE__ */ React.createElement(
-        "input",
-        {
-          ref: inputRef,
-          className: "z-1 absolute left-0 top-0 h-full w-full cursor-pointer opacity-[0.0001] group-disabled/checkbox:cursor-not-allowed",
-          ...inputProps,
-          ...focusProps
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Icon,
-        {
-          checked: inputProps.checked,
-          indeterminate,
-          className: classNames2.checkbox
-        }
-      ),
-      props.children && /* @__PURE__ */ React.createElement("div", { className: classNames2.label }, props.children)
+        ...stateProps,
+        children: [
+          /* @__PURE__ */ jsx31(
+            "input",
+            {
+              ref: inputRef,
+              className: "z-1 absolute left-0 top-0 h-full w-full cursor-pointer opacity-[0.0001] group-disabled/checkbox:cursor-not-allowed",
+              ...inputProps,
+              ...focusProps
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            Icon,
+            {
+              checked: inputProps.checked,
+              indeterminate,
+              className: classNames2.checkbox
+            }
+          ),
+          props.children && /* @__PURE__ */ jsx31("div", { className: classNames2.label, children: props.children })
+        ]
+      }
     );
-    return !groupState && labelWidth ? /* @__PURE__ */ React.createElement(CheckboxField, { labelWidth }, component) : component;
+    return !groupState && labelWidth ? /* @__PURE__ */ jsx31(CheckboxField, { labelWidth, children: component }) : component;
   }
 );
 
 // src/Columns/Columns.tsx
 import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
 import { cn as cn15, createVar as createVar7, gapSpace as gapSpace4 } from "@marigold/system";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1427,7 +1499,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       className: cn15(
@@ -1435,29 +1507,30 @@ var Columns = ({
         stretch && "h-full",
         gapSpace4[space]
       ),
-      ...props
-    },
-    Children3.map(children, (child, idx) => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn15(
-          "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-        ),
-        style: createVar7({ collapseAt, columnSize: columns[idx] })
-      },
-      isValidElement2(child) ? cloneElement3(child) : child
-    ))
-  );
-};
-
-// src/Container/Container.tsx
-import {
+      ...props,
+      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx32(
+        "div",
+        {
+          className: cn15(
+            "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
+          ),
+          style: createVar7({ collapseAt, columnSize: columns[idx] }),
+          children: isValidElement2(child) ? cloneElement3(child) : child
+        }
+      ))
+    }
+  );
+};
+
+// src/Container/Container.tsx
+import {
   cn as cn16,
   createVar as createVar8,
   gridColsAlign,
   gridColumn,
   placeItems
 } from "@marigold/system";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1477,7 +1550,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: cn16(
@@ -1487,9 +1560,9 @@ var Container = ({
         gridColumn[align]
       ),
       style: createVar8({ maxWidth }),
-      ...props
-    },
-    children
+      ...props,
+      children
+    }
   );
 };
 
@@ -1506,6 +1579,7 @@ import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Header/Header.tsx
 import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Header = ({
   children,
   variant,
@@ -1519,7 +1593,7 @@ var Header = ({
     size,
     className
   });
-  return /* @__PURE__ */ React.createElement("header", { ...props, className: cn17(classNames2) }, children);
+  return /* @__PURE__ */ jsx34("header", { ...props, className: cn17(classNames2), children });
 };
 
 // src/Headline/Headline.tsx
@@ -1531,6 +1605,7 @@ import {
   useClassNames as useClassNames16,
   useTheme as useTheme2
 } from "@marigold/system";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Headline = ({
   children,
   variant,
@@ -1548,7 +1623,7 @@ var Headline = ({
     size: size != null ? size : `level-${level}`
   });
   const Component = as;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx35(
     Component,
     {
       ...props,
@@ -1560,9 +1635,9 @@ var Headline = ({
           color
           /* fallback */
         )
-      })
-    },
-    children
+      }),
+      children
+    }
   );
 };
 
@@ -1572,8 +1647,8 @@ var DialogContext = createContext4({});
 var useDialogContext = () => useContext4(DialogContext);
 
 // src/Dialog/DialogController.tsx
-import React3 from "react";
 import { useOverlayTriggerState } from "@react-stately/overlays";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var DialogController = ({
   children,
   dismissable = true,
@@ -1586,22 +1661,23 @@ var DialogController = ({
     onOpenChange
   });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React3.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React3.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ jsx36(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx36(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx36(
     Modal,
     {
       open: state.isOpen,
       onClose: state.close,
       dismissable,
-      keyboardDismissable
-    },
-    children
-  )));
+      keyboardDismissable,
+      children
+    }
+  ) }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
 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 jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var DialogTrigger = ({
   children,
   dismissable = true,
@@ -1611,27 +1687,31 @@ var DialogTrigger = ({
   const dialogTriggerRef = useRef8(null);
   const state = useOverlayTriggerState2({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement(
-    PressResponder,
-    {
-      ref: dialogTriggerRef,
-      isPressed: state.isOpen,
-      onPress: state.toggle
-    },
-    dialogTrigger
-  ), /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React.createElement(
-    Modal,
-    {
-      open: state.isOpen,
-      onClose: state.close,
-      dismissable,
-      keyboardDismissable
-    },
-    dialog
-  )));
+  return /* @__PURE__ */ jsxs15(DialogContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsx37(
+      PressResponder,
+      {
+        ref: dialogTriggerRef,
+        isPressed: state.isOpen,
+        onPress: state.toggle,
+        children: dialogTrigger
+      }
+    ),
+    /* @__PURE__ */ jsx37(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx37(
+      Modal,
+      {
+        open: state.isOpen,
+        onClose: state.close,
+        dismissable,
+        keyboardDismissable,
+        children: dialog
+      }
+    ) })
+  ] });
 };
 
 // src/Dialog/Dialog.tsx
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
   const ref = useRef9(null);
   const { close } = useDialogContext();
@@ -1641,7 +1721,7 @@ var CloseButton = ({ className }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx38("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx38(
     "button",
     {
       className: cn19(
@@ -1649,17 +1729,17 @@ var CloseButton = ({ className }) => {
         className
       ),
       ref,
-      ...buttonProps
-    },
-    /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-      }
-    ))
-  ));
+      ...buttonProps,
+      children: /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx38(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+        }
+      ) })
+    }
+  ) });
 };
 var addTitleProps = (children, titleProps) => {
   const childs = Children5.toArray(children);
@@ -1690,7 +1770,10 @@ var Dialog = ({
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
   const classNames2 = useClassNames17({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ React.createElement("div", { className: classNames2.container, ...dialogProps }, closeButton && /* @__PURE__ */ React.createElement(CloseButton, { className: classNames2.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  return /* @__PURE__ */ jsxs16("div", { className: classNames2.container, ...dialogProps, children: [
+    closeButton && /* @__PURE__ */ jsx38(CloseButton, { className: classNames2.closeButton }),
+    typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps)
+  ] });
 };
 Dialog.Trigger = DialogTrigger;
 Dialog.Controller = DialogController;
@@ -1698,17 +1781,19 @@ Dialog.Controller = DialogController;
 // src/Divider/Divider.tsx
 import { useSeparator } from "@react-aria/separator";
 import { useClassNames as useClassNames18 } from "@marigold/system";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
   const classNames2 = useClassNames18({ component: "Divider", variant });
-  return /* @__PURE__ */ React.createElement("div", { className: classNames2, ...props, ...separatorProps });
+  return /* @__PURE__ */ jsx39("div", { className: classNames2, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
 import { useClassNames as useClassNames19 } from "@marigold/system";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames19({ component: "Footer", variant, size });
-  return /* @__PURE__ */ React.createElement("footer", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ jsx40("footer", { ...props, className: classNames2, children });
 };
 
 // src/Image/Image.tsx
@@ -1718,6 +1803,7 @@ import {
   objectPosition,
   useClassNames as useClassNames20
 } from "@marigold/system";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1726,7 +1812,7 @@ var Image = ({
   ...props
 }) => {
   const classNames2 = useClassNames20({ component: "Image", variant, size });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx41(
     "img",
     {
       ...props,
@@ -1747,6 +1833,7 @@ import {
   cn as cn21,
   gapSpace as gapSpace5
 } from "@marigold/system";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   orientation,
@@ -1756,7 +1843,7 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: cn21(
@@ -1765,9 +1852,9 @@ var Inline = ({
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
-      ...props
-    },
-    children
+      ...props,
+      children
+    }
   );
 };
 
@@ -1788,6 +1875,7 @@ import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import { cn as cn22, useStateProps as useStateProps7 } from "@marigold/system";
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
 var DateSegment = ({
   className,
   segment,
@@ -1805,7 +1893,7 @@ var DateSegment = ({
     focusVisible: isFocused
   });
   const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ...mergeProps7(segmentProps, stateProps, focusProps),
@@ -1819,24 +1907,27 @@ var DateSegment = ({
       style: {
         ...segmentProps.style,
         minWidth: maxValue != null ? String(maxValue).length + "ch" : void 0
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: cn22(
-          isPlaceholder ? "visible block" : "invisible hidden",
-          "pointer-events-none w-full text-center"
-        )
       },
-      isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
-    ),
-    /* @__PURE__ */ React.createElement("span", null, isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text)
+      children: [
+        /* @__PURE__ */ jsx43(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn22(
+              isPlaceholder ? "visible block" : "invisible hidden",
+              "pointer-events-none w-full text-center"
+            ),
+            children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
+          }
+        ),
+        /* @__PURE__ */ jsx43("span", { children: isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text })
+      ]
+    }
   );
 };
 
 // src/DateField/DateField.tsx
+import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
 var DateField = ({
   disabled,
   readOnly,
@@ -1886,7 +1977,7 @@ var DateField = ({
     required,
     focus: isFocused || isPressed
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx44(
     FieldBase,
     {
       error,
@@ -1900,45 +1991,47 @@ var DateField = ({
       stateProps,
       variant,
       size,
-      width
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ...mergeProps8(fieldProps, focusProps, stateProps, hoverProps),
-        className: cn23(
-          "relative flex flex-row flex-nowrap",
-          "cursor-text aria-disabled:cursor-not-allowed",
-          classNames2.field
-        ),
-        "data-testid": "date-field",
-        ref: triggerRef
-      },
-      /* @__PURE__ */ React.createElement("div", { ref, className: "flex basis-full items-center" }, state.segments.map((segment, i) => {
-        var _a;
-        return /* @__PURE__ */ React.createElement(
-          DateSegment,
-          {
-            className: classNames2.segment,
-            isPrevPlaceholder: (_a = state.segments[i - 1]) == null ? void 0 : _a.isPlaceholder,
-            key: i,
-            segment,
-            state
-          }
-        );
-      })),
-      action ? action : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement(
-        "svg",
+      width,
+      children: /* @__PURE__ */ jsxs18(
+        "div",
         {
-          "data-testid": "action",
-          className: cn23(classNames2.action),
-          viewBox: "0 0 24 24",
-          width: 24,
-          height: 24
-        },
-        /* @__PURE__ */ React.createElement("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" })
-      ))
-    )
+          ...mergeProps8(fieldProps, focusProps, stateProps, hoverProps),
+          className: cn23(
+            "relative flex flex-row flex-nowrap",
+            "cursor-text aria-disabled:cursor-not-allowed",
+            classNames2.field
+          ),
+          "data-testid": "date-field",
+          ref: triggerRef,
+          children: [
+            /* @__PURE__ */ jsx44("div", { ref, className: "flex basis-full items-center", children: state.segments.map((segment, i) => {
+              var _a;
+              return /* @__PURE__ */ jsx44(
+                DateSegment,
+                {
+                  className: classNames2.segment,
+                  isPrevPlaceholder: (_a = state.segments[i - 1]) == null ? void 0 : _a.isPlaceholder,
+                  segment,
+                  state
+                },
+                i
+              );
+            }) }),
+            action ? action : /* @__PURE__ */ jsx44("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx44(
+              "svg",
+              {
+                "data-testid": "action",
+                className: cn23(classNames2.action),
+                viewBox: "0 0 24 24",
+                width: 24,
+                height: 24,
+                children: /* @__PURE__ */ jsx44("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" })
+              }
+            ) })
+          ]
+        }
+      )
+    }
   );
 };
 
@@ -1966,6 +2059,7 @@ import { useCalendarCell } from "@react-aria/calendar";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { cn as cn24, useClassNames as useClassNames22, useStateProps as useStateProps9 } from "@marigold/system";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var CalendarCell = (props) => {
   const ref = useRef12(null);
   const { state } = props;
@@ -1982,7 +2076,7 @@ var CalendarCell = (props) => {
     hover: isHovered,
     selected: cellProps["aria-selected"]
   });
-  return /* @__PURE__ */ React.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx45("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn24(
@@ -1991,13 +2085,14 @@ var CalendarCell = (props) => {
       ),
       hidden: isOutsideVisibleRange,
       ref,
-      ...mergeProps9(buttonProps, stateProps, hoverProps)
-    },
-    formattedDate
-  ));
+      ...mergeProps9(buttonProps, stateProps, hoverProps),
+      children: formattedDate
+    }
+  ) });
 };
 
 // src/Calendar/CalendarGrid.tsx
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
 var CalendarGrid = ({ state, ...props }) => {
   const { locale } = useLocale2();
   const { gridProps, headerProps } = useCalendarGrid(props, state);
@@ -2017,24 +2112,26 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs19(
     "table",
     {
       className: "w-full border-spacing-[6px]",
       ...gridProps,
-      cellPadding: "8"
-    },
-    /* @__PURE__ */ React.createElement("thead", { ...headerProps }, /* @__PURE__ */ React.createElement("tr", null, weekDays.map((day, index) => /* @__PURE__ */ React.createElement("th", { style: { fontWeight: "bolder" }, key: index }, day.substring(0, 2))))),
-    /* @__PURE__ */ React.createElement("tbody", null, [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ React.createElement("tr", { key: weekIndex }, state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ React.createElement(
-        CalendarCell,
-        {
-          key: i,
-          date,
-          state
-        }
-      ) : /* @__PURE__ */ React.createElement("td", { key: i })
-    ))))
+      cellPadding: "8",
+      children: [
+        /* @__PURE__ */ jsx46("thead", { ...headerProps, children: /* @__PURE__ */ jsx46("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx46("th", { style: { fontWeight: "bolder" }, children: day.substring(0, 2) }, index)) }) }),
+        /* @__PURE__ */ jsx46("tbody", { children: [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx46("tr", { children: state.getDatesInWeek(weekIndex).map(
+          (date, i) => date ? /* @__PURE__ */ jsx46(
+            CalendarCell,
+            {
+              date,
+              state
+            },
+            i
+          ) : /* @__PURE__ */ jsx46("td", {}, i)
+        ) }, weekIndex)) })
+      ]
+    }
   );
 };
 
@@ -2071,6 +2168,7 @@ var messages = {
 };
 
 // src/Select/Select.tsx
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
 var Select = forwardRef10(
   ({
     variant,
@@ -2118,7 +2216,7 @@ var Select = forwardRef10(
       expanded: state.isOpen,
       required
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs20(
       FieldBase,
       {
         variant,
@@ -2132,51 +2230,55 @@ var Select = forwardRef10(
         errorMessage: props.errorMessage,
         errorMessageProps,
         stateProps,
-        disabled
-      },
-      /* @__PURE__ */ React.createElement(
-        HiddenSelect,
-        {
-          state,
-          triggerRef: buttonRef,
-          label: props.label,
-          name: props.name,
-          isDisabled: disabled
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: cn25(
-            "flex w-full items-center justify-between gap-1",
-            classNames2.select
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx47(
+            HiddenSelect,
+            {
+              state,
+              triggerRef: buttonRef,
+              label: props.label,
+              name: props.name,
+              isDisabled: disabled
+            }
           ),
-          ref: buttonRef,
-          ...mergeProps10(buttonProps, focusProps),
-          ...stateProps
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder),
-        /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4" })
-      ),
-      isSmallScreen ? /* @__PURE__ */ React.createElement(Tray, { state }, /* @__PURE__ */ React.createElement(
-        ListBox,
-        {
-          ref: listboxRef,
-          state,
-          variant,
-          size,
-          ...menuProps
-        }
-      )) : /* @__PURE__ */ React.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React.createElement(
-        ListBox,
-        {
-          ref: listboxRef,
-          state,
-          variant,
-          size,
-          ...menuProps
-        }
-      ))
+          /* @__PURE__ */ jsxs20(
+            "button",
+            {
+              className: cn25(
+                "flex w-full items-center justify-between gap-1",
+                classNames2.select
+              ),
+              ref: buttonRef,
+              ...mergeProps10(buttonProps, focusProps),
+              ...stateProps,
+              children: [
+                /* @__PURE__ */ jsx47("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ jsx47(ChevronDown, { className: "h-4 w-4" })
+              ]
+            }
+          ),
+          isSmallScreen ? /* @__PURE__ */ jsx47(Tray, { state, children: /* @__PURE__ */ jsx47(
+            ListBox,
+            {
+              ref: listboxRef,
+              state,
+              variant,
+              size,
+              ...menuProps
+            }
+          ) }) : /* @__PURE__ */ jsx47(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx47(
+            ListBox,
+            {
+              ref: listboxRef,
+              state,
+              variant,
+              size,
+              ...menuProps
+            }
+          ) })
+        ]
+      }
     );
   }
 );
@@ -2184,6 +2286,7 @@ Select.Option = Item4;
 Select.Section = Section;
 
 // src/Calendar/MonthDropdown.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
 var MonthDropdown = ({ state }) => {
   let months = [];
   let formatter = useDateFormatter2({
@@ -2200,22 +2303,23 @@ var MonthDropdown = ({ state }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx48(
     Select,
     {
       "aria-label": "Month",
       onChange,
       selectedKey: String(state.focusedDate.month),
       "data-testid": "month",
-      disabled: state.isDisabled
-    },
-    months.map((month, i) => /* @__PURE__ */ React.createElement(Select.Option, { key: i + 1 }, month.substring(0, 3)))
+      disabled: state.isDisabled,
+      children: months.map((month, i) => /* @__PURE__ */ jsx48(Select.Option, { children: month.substring(0, 3) }, i + 1))
+    }
   );
 };
 var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var YearDropdown = ({ state }) => {
   const years = [];
   let formatter = useDateFormatter3({
@@ -2234,21 +2338,22 @@ var YearDropdown = ({ state }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx49(
     Select,
     {
       "aria-label": "Year",
       selectedKey: "20",
       onChange,
       "data-testid": "year",
-      disabled: state.isDisabled
-    },
-    years.map((year, i) => /* @__PURE__ */ React.createElement(Select.Option, { key: i }, year.formatted))
+      disabled: state.isDisabled,
+      children: years.map((year, i) => /* @__PURE__ */ jsx49(Select.Option, { children: year.formatted }, i))
+    }
   );
 };
 var YearDropdown_default = YearDropdown;
 
 // src/Calendar/Calendar.tsx
+import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
 var Calendar = ({
   disabled,
   readOnly,
@@ -2287,7 +2392,7 @@ var Calendar = ({
     focusVisible: state.isFocused
   });
   const classNames2 = useClassNames24({ component: "Calendar" });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       tabIndex: -1,
@@ -2297,26 +2402,37 @@ var Calendar = ({
       ),
       ...calendarProps,
       ...calendarState,
-      ref
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center gap-[60px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex" }, /* @__PURE__ */ React.createElement(MonthDropdown_default, { state }), /* @__PURE__ */ React.createElement(YearDropdown_default, { state })), /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1" }, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        className: classNames2.calendarControllers,
-        ...prevPropsRest,
-        disabled: prevIsDisabled
-      },
-      /* @__PURE__ */ React.createElement(ChevronLeft, null)
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        className: classNames2.calendarControllers,
-        ...nextPropsRest,
-        disabled: nextIsDisabled
-      },
-      /* @__PURE__ */ React.createElement(ChevronRight, null)
-    ))),
-    /* @__PURE__ */ React.createElement(CalendarGrid, { state })
+      ref,
+      children: [
+        /* @__PURE__ */ jsxs21("div", { className: "mb-4 flex items-center gap-[60px]", children: [
+          /* @__PURE__ */ jsxs21("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex", children: [
+            /* @__PURE__ */ jsx50(MonthDropdown_default, { state }),
+            /* @__PURE__ */ jsx50(YearDropdown_default, { state })
+          ] }),
+          /* @__PURE__ */ jsxs21("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1", children: [
+            /* @__PURE__ */ jsx50(
+              Button,
+              {
+                className: classNames2.calendarControllers,
+                ...prevPropsRest,
+                disabled: prevIsDisabled,
+                children: /* @__PURE__ */ jsx50(ChevronLeft, {})
+              }
+            ),
+            /* @__PURE__ */ jsx50(
+              Button,
+              {
+                className: classNames2.calendarControllers,
+                ...nextPropsRest,
+                disabled: nextIsDisabled,
+                children: /* @__PURE__ */ jsx50(ChevronRight, {})
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx50(CalendarGrid, { state })
+      ]
+    }
   );
 };
 
@@ -2326,6 +2442,7 @@ import { useDatePicker } from "@react-aria/datepicker";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
 import { useDatePickerState } from "@react-stately/datepicker";
 import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps12 } from "@marigold/system";
+import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
 var DatePicker = ({
   disabled,
   required,
@@ -2363,38 +2480,41 @@ var DatePicker = ({
     size,
     variant
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex w-full min-w-[300px]", ...groupProps }, /* @__PURE__ */ React.createElement(
-    DateField,
-    {
-      ...fieldProps,
-      label,
-      isPressed: state.isOpen,
-      disabled,
-      required,
-      errorMessage,
-      error,
-      description: !state.isOpen && description,
-      triggerRef: ref,
-      action: /* @__PURE__ */ React.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          ...mergeProps11(buttonProps, stateProps),
-          className: cn27("absolute right-0 top-0", classNames2.button),
-          disabled: isDisabled
-        },
-        /* @__PURE__ */ React.createElement(
-          "svg",
+  return /* @__PURE__ */ jsxs22(Fragment4, { children: [
+    /* @__PURE__ */ jsx51("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx51(
+      DateField,
+      {
+        ...fieldProps,
+        label,
+        isPressed: state.isOpen,
+        disabled,
+        required,
+        errorMessage,
+        error,
+        description: !state.isOpen && description,
+        triggerRef: ref,
+        action: /* @__PURE__ */ jsx51("div", { className: classNames2.container, children: /* @__PURE__ */ jsx51(
+          Button,
           {
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "currentColor"
-          },
-          /* @__PURE__ */ React.createElement("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__ */ React.createElement(Popover, { triggerRef: ref, state }, /* @__PURE__ */ React.createElement(Calendar, { disabled, ...calendarProps })));
+            ...mergeProps11(buttonProps, stateProps),
+            className: cn27("absolute right-0 top-0", classNames2.button),
+            disabled: isDisabled,
+            children: /* @__PURE__ */ jsx51(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                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__ */ jsx51(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx51(Calendar, { disabled, ...calendarProps }) })
+  ] });
 };
 
 // src/Inset/Inset.tsx
@@ -2404,20 +2524,21 @@ import {
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Inset = ({
   space = 0,
   spaceX = 0,
   spaceY = 0,
   children
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx52(
   "div",
   {
     className: cn28(
       space ? paddingSpace2[space] : paddingSpaceX2[spaceX],
       paddingSpaceY2[spaceY]
-    )
-  },
-  children
+    ),
+    children
+  }
 );
 
 // src/Link/Link.tsx
@@ -2425,6 +2546,7 @@ import { forwardRef as forwardRef11 } from "react";
 import { useLink } from "@react-aria/link";
 import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
 import { useClassNames as useClassNames26 } from "@marigold/system";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var Link = forwardRef11(
   ({
     as = "a",
@@ -2453,16 +2575,16 @@ var Link = forwardRef11(
       size,
       className
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx53(
       Component,
       {
         ...props,
         role: "link",
         className: classNames2,
         ref: linkRef,
-        ...linkProps
-      },
-      children
+        ...linkProps,
+        children
+      }
     );
   }
 );
@@ -2476,12 +2598,14 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ React.createElement("li", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ jsx54("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2491,7 +2615,7 @@ var List = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames27({ component: "List", variant, size });
-  return /* @__PURE__ */ React.createElement(Component, { ...props, className: classNames2[as] }, /* @__PURE__ */ React.createElement(ListContext.Provider, { value: { classNames: classNames2.item } }, children));
+  return /* @__PURE__ */ jsx55(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx55(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -2517,6 +2641,7 @@ import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
 import { useStateProps as useStateProps13 } from "@marigold/system";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var MenuItem = ({
   item,
   state,
@@ -2539,7 +2664,7 @@ var MenuItem = ({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx56(
     "li",
     {
       ref,
@@ -2549,31 +2674,38 @@ var MenuItem = ({
         { onPointerDown: onPointerUp },
         stateProps,
         focusProps
-      )
-    },
-    item.props.children
+      ),
+      children: item.props.children
+    }
   );
 };
 
 // src/Menu/MenuSection.tsx
 import { useMenuSection } from "@react-aria/menu";
 import { useClassNames as useClassNames28 } from "@marigold/system";
+import { Fragment as Fragment5, 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 = useClassNames28({ component: "Menu" });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(Divider, { variant: "section" })), /* @__PURE__ */ React.createElement("li", { ...itemProps }, item.rendered && /* @__PURE__ */ React.createElement("span", { ...headingProps, className: className.section }, item.rendered), /* @__PURE__ */ React.createElement("ul", { ...groupProps, className: "pb-1" }, [...item.props.children].map((node) => /* @__PURE__ */ React.createElement(
-    MenuItem,
-    {
-      key: node.key,
-      item: node,
-      state,
-      onAction,
-      className: className.item
-    }
-  )))));
+  return /* @__PURE__ */ jsxs23(Fragment5, { 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,
+          state,
+          onAction,
+          className: className.item
+        },
+        node.key
+      )) })
+    ] })
+  ] });
 };
 var MenuSection_default = MenuSection;
 
@@ -2584,6 +2716,7 @@ import { useMenuTrigger } from "@react-aria/menu";
 import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useSmallScreen as useSmallScreen2 } from "@marigold/system";
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
 var MenuTrigger = ({
   disabled,
   open,
@@ -2610,18 +2743,22 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useSmallScreen2();
-  return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React.createElement(
-    PressResponder2,
-    {
-      ...menuTriggerProps,
-      ref: menuTriggerRef,
-      isPressed: state.isOpen
-    },
-    menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ React.createElement(Tray, { state }, menu) : /* @__PURE__ */ React.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+  return /* @__PURE__ */ jsxs24(MenuContext.Provider, { value: menuContext, children: [
+    /* @__PURE__ */ jsx58(
+      PressResponder2,
+      {
+        ...menuTriggerProps,
+        ref: menuTriggerRef,
+        isPressed: state.isOpen,
+        children: menuTrigger
+      }
+    ),
+    isSmallScreen ? /* @__PURE__ */ jsx58(Tray, { state, children: menu }) : /* @__PURE__ */ jsx58(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
+  ] });
 };
 
 // src/Menu/Menu.tsx
+import { jsx as jsx59 } from "react/jsx-runtime";
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
@@ -2630,29 +2767,29 @@ var Menu = ({ variant, size, ...props }) => {
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
   const classNames2 = useClassNames29({ component: "Menu", variant, size });
-  return /* @__PURE__ */ React.createElement("ul", { ref, className: classNames2.container, ...menuProps }, [...state.collection].map((item) => {
+  return /* @__PURE__ */ jsx59("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx59(
         MenuSection_default,
         {
-          key: item.key,
           item,
           state,
           onAction: props.onAction
-        }
+        },
+        item.key
       );
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx59(
       MenuItem,
       {
-        key: item.key,
         item,
         state,
         onAction: props.onAction,
         className: classNames2.item
-      }
+      },
+      item.key
     );
-  }));
+  }) });
 };
 Menu.Trigger = MenuTrigger;
 Menu.Item = Item5;
@@ -2660,60 +2797,65 @@ Menu.Section = Section2;
 
 // src/Menu/ActionMenu.tsx
 import { SVG as SVG5 } from "@marigold/system";
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ React.createElement(Menu.Trigger, null, /* @__PURE__ */ React.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React.createElement(SVG5, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("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__ */ React.createElement(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 cn29, useClassNames as useClassNames30 } from "@marigold/system";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
 var icons = {
-  info: () => /* @__PURE__ */ React.createElement(
+  info: () => /* @__PURE__ */ jsx61(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      fill: "currentColor"
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
-        clipRule: "evenodd"
-      }
-    )
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx61(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
+    }
   ),
-  warning: () => /* @__PURE__ */ React.createElement(
+  warning: () => /* @__PURE__ */ jsx61(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      fill: "currentColor"
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
-        clipRule: "evenodd"
-      }
-    )
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx61(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
+    }
   ),
-  error: () => /* @__PURE__ */ React.createElement(
+  error: () => /* @__PURE__ */ jsx61(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
-      fill: "currentColor"
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
-        clipRule: "evenodd"
-      }
-    )
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx61(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+          clipRule: "evenodd"
+        }
+      )
+    }
   )
 };
 var Message = ({
@@ -2725,24 +2867,26 @@ var Message = ({
 }) => {
   const classNames2 = useClassNames30({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn29(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
-      ...props
-    },
-    /* @__PURE__ */ React.createElement("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ React.createElement(Icon3, null)),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn29("col-start-2 row-start-1 self-center", classNames2.title)
-      },
-      messageTitle
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: cn29("col-start-2", classNames2.content) }, children)
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx61("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
+        /* @__PURE__ */ jsx61(
+          "div",
+          {
+            className: cn29("col-start-2 row-start-1 self-center", classNames2.title),
+            children: messageTitle
+          }
+        ),
+        /* @__PURE__ */ jsx61("div", { className: cn29("col-start-2", classNames2.content), children })
+      ]
+    }
   );
 };
 
@@ -2762,22 +2906,23 @@ import { useButton as useButton7 } from "@react-aria/button";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
 import { cn as cn30, useStateProps as useStateProps14 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
+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",
     clipRule: "evenodd",
     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__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
+) });
+var Minus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx62(
   "path",
   {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
   }
-));
+) });
 var StepButton = ({
   direction,
   className,
@@ -2795,7 +2940,7 @@ var StepButton = ({
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx62(
     "div",
     {
       className: cn30(
@@ -2806,13 +2951,14 @@ var StepButton = ({
         className
       ),
       ...mergeProps13(buttonProps, hoverProps),
-      ...stateProps
-    },
-    /* @__PURE__ */ React.createElement(Icon3, null)
+      ...stateProps,
+      children: /* @__PURE__ */ jsx62(Icon3, {})
+    }
   );
 };
 
 // src/NumberField/NumberField.tsx
+import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
 var NumberField = forwardRef12(
   ({
     variant,
@@ -2864,7 +3010,7 @@ var NumberField = forwardRef12(
       size,
       variant
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx63(
       FieldBase,
       {
         label: props.label,
@@ -2877,47 +3023,49 @@ var NumberField = forwardRef12(
         stateProps,
         variant,
         size,
-        width
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          "data-group": true,
-          className: cn31("flex items-stretch", classNames2.group),
-          "data-testid": "number-field-container",
-          ...mergeProps14(groupProps, focusProps, hoverProps),
-          ...stateProps
-        },
-        showStepper && /* @__PURE__ */ React.createElement(
-          StepButton,
-          {
-            className: classNames2.stepper,
-            direction: "down",
-            ...decrementButtonProps
-          }
-        ),
-        /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement(
-          Input,
-          {
-            ref: inputRef,
-            variant,
-            size,
-            className: {
-              input: "min-w-0 items-stretch  border-none"
-            },
-            ...inputProps,
-            ...stateProps
-          }
-        )),
-        showStepper && /* @__PURE__ */ React.createElement(
-          StepButton,
+        width,
+        children: /* @__PURE__ */ jsxs27(
+          "div",
           {
-            className: classNames2.stepper,
-            direction: "up",
-            ...incrementButtonProps
+            "data-group": true,
+            className: cn31("flex items-stretch", classNames2.group),
+            "data-testid": "number-field-container",
+            ...mergeProps14(groupProps, focusProps, hoverProps),
+            ...stateProps,
+            children: [
+              showStepper && /* @__PURE__ */ jsx63(
+                StepButton,
+                {
+                  className: classNames2.stepper,
+                  direction: "down",
+                  ...decrementButtonProps
+                }
+              ),
+              /* @__PURE__ */ jsx63("div", { className: "flex-1", children: /* @__PURE__ */ jsx63(
+                Input,
+                {
+                  ref: inputRef,
+                  variant,
+                  size,
+                  className: {
+                    input: "min-w-0 items-stretch  border-none"
+                  },
+                  ...inputProps,
+                  ...stateProps
+                }
+              ) }),
+              showStepper && /* @__PURE__ */ jsx63(
+                StepButton,
+                {
+                  className: classNames2.stepper,
+                  direction: "up",
+                  ...incrementButtonProps
+                }
+              )
+            ]
           }
         )
-      )
+      }
     );
   }
 );
@@ -2932,13 +3080,14 @@ import {
   defaultTheme,
   useTheme as useTheme3
 } from "@marigold/system";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   theme
 }) {
   const outerTheme = useTheme3();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ React.createElement(OverlayProvider, null, children) : children);
+  return /* @__PURE__ */ jsx64(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx64(OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
@@ -2966,6 +3115,7 @@ var useRadioGroupContext = () => useContext7(RadioGroupContext);
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import { cn as cn32, useStateProps as useStateProps16 } from "@marigold/system";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
   orientation = "vertical",
@@ -2991,7 +3141,7 @@ var RadioGroup = ({
     error,
     required
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx65(
     FieldBase,
     {
       width,
@@ -3004,26 +3154,27 @@ var RadioGroup = ({
       errorMessageProps,
       disabled,
       stateProps,
-      ...radioGroupProps
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        role: "presentation",
-        "data-orientation": orientation,
-        className: cn32(
-          "flex items-start",
-          orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
-        )
-      },
-      /* @__PURE__ */ React.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
-    )
+      ...radioGroupProps,
+      children: /* @__PURE__ */ jsx65(
+        "div",
+        {
+          role: "presentation",
+          "data-orientation": orientation,
+          className: cn32(
+            "flex items-start",
+            orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
+          ),
+          children: /* @__PURE__ */ jsx65(RadioGroupContext.Provider, { value: { width, error, state }, children })
+        }
+      )
+    }
   );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React.createElement(
+import { jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx66("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx66(
   "div",
   {
     className: cn33(
@@ -3031,9 +3182,9 @@ var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React.createEl
       className
     ),
     "aria-hidden": "true",
-    ...props
-  },
-  checked ? /* @__PURE__ */ React.createElement(Dot, null) : null
+    ...props,
+    children: checked ? /* @__PURE__ */ jsx66(Dot, {}) : null
+  }
 );
 var Radio = forwardRef13(
   ({ width, disabled, ...props }, ref) => {
@@ -3065,7 +3216,7 @@ var Radio = forwardRef13(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs28(
       "label",
       {
         className: cn33(
@@ -3074,21 +3225,23 @@ var Radio = forwardRef13(
           width || groupWidth || "w-full",
           classNames2.container
         ),
-        ...mergeProps15(hoverProps, stateProps)
-      },
-      /* @__PURE__ */ React.createElement(
-        "input",
-        {
-          ref: inputRef,
-          className: cn33(
-            "absolute left-0 top-0 z-[1] h-full w-full opacity-[0.0001]",
-            inputProps.disabled ? "cursor-not-allowed" : "cursor-pointer"
+        ...mergeProps15(hoverProps, stateProps),
+        children: [
+          /* @__PURE__ */ jsx66(
+            "input",
+            {
+              ref: inputRef,
+              className: cn33(
+                "absolute left-0 top-0 z-[1] h-full w-full opacity-[0.0001]",
+                inputProps.disabled ? "cursor-not-allowed" : "cursor-pointer"
+              ),
+              ...mergeProps15(inputProps, focusProps)
+            }
           ),
-          ...mergeProps15(inputProps, focusProps)
-        }
-      ),
-      /* @__PURE__ */ React.createElement(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
-      /* @__PURE__ */ React.createElement("div", { className: classNames2.label }, props.children)
+          /* @__PURE__ */ jsx66(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
+          /* @__PURE__ */ jsx66("div", { className: classNames2.label, children: props.children })
+        ]
+      }
     );
   }
 );
@@ -3113,6 +3266,7 @@ import { cn as cn34, useStateProps as useStateProps18 } from "@marigold/system";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/Slider/Thumb.tsx
+import { jsx as jsx67 } from "react/jsx-runtime";
 var Thumb = ({ state, trackRef, className, ...props }) => {
   const { disabled } = props;
   const inputRef = useRef20(null);
@@ -3134,17 +3288,18 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
   useEffect2(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React.createElement("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ React.createElement(VisuallyHidden, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx67("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps, children: /* @__PURE__ */ jsx67(VisuallyHidden, { children: /* @__PURE__ */ jsx67(
     "input",
     {
       type: "range",
       ref: inputRef,
       ...mergeProps16(inputProps, focusProps)
     }
-  )));
+  ) }) });
 };
 
 // src/Slider/Slider.tsx
+import { jsx as jsx68, jsxs as jsxs29 } from "react/jsx-runtime";
 var Slider = forwardRef14(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
@@ -3167,57 +3322,65 @@ var Slider = forwardRef14(
     const sliderState = useStateProps19({
       disabled: props.disabled
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs29(
       "div",
       {
         className: "flex w-[var(--slideWidth)] touch-none flex-col",
         style: createVar10({ slideWidth: width }),
-        ...groupProps
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex self-stretch" }, props.children && /* @__PURE__ */ React.createElement("label", { className: classNames2.label, ...labelProps }, props.children), /* @__PURE__ */ React.createElement(
-        "output",
-        {
-          className: cn35(
-            "flex flex-shrink-0 flex-grow basis-auto",
-            classNames2.output
-          ),
-          ...outputProps
-        },
-        state.getThumbValueLabel(0)
-      )),
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "h-8 w-full cursor-pointer data-[disabled]:cursor-not-allowed",
-          ...trackProps,
-          ...sliderState,
-          ref: trackRef
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn35(
-              "absolute top-2/4 h-2 w-full -translate-y-1/2",
-              classNames2.track
+        ...groupProps,
+        children: [
+          /* @__PURE__ */ jsxs29("div", { className: "flex self-stretch", children: [
+            props.children && /* @__PURE__ */ jsx68("label", { className: classNames2.label, ...labelProps, children: props.children }),
+            /* @__PURE__ */ jsx68(
+              "output",
+              {
+                className: cn35(
+                  "flex flex-shrink-0 flex-grow basis-auto",
+                  classNames2.output
+                ),
+                ...outputProps,
+                children: state.getThumbValueLabel(0)
+              }
             )
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          Thumb,
-          {
-            state,
-            trackRef,
-            disabled: props.disabled,
-            className: classNames2.thumb
-          }
-        )
-      )
+          ] }),
+          /* @__PURE__ */ jsxs29(
+            "div",
+            {
+              className: "h-8 w-full cursor-pointer data-[disabled]:cursor-not-allowed",
+              ...trackProps,
+              ...sliderState,
+              ref: trackRef,
+              children: [
+                /* @__PURE__ */ jsx68(
+                  "div",
+                  {
+                    className: cn35(
+                      "absolute top-2/4 h-2 w-full -translate-y-1/2",
+                      classNames2.track
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx68(
+                  Thumb,
+                  {
+                    state,
+                    trackRef,
+                    disabled: props.disabled,
+                    className: classNames2.thumb
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
     );
   }
 );
 
 // src/Split/Split.tsx
-var Split = (props) => /* @__PURE__ */ React.createElement("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx69 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx69("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
@@ -3225,6 +3388,7 @@ import {
   cn as cn36,
   gapSpace as gapSpace6
 } from "@marigold/system";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -3235,7 +3399,7 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx70(
     "div",
     {
       className: cn36(
@@ -3245,9 +3409,9 @@ var Stack = ({
         alignY && ((_d = (_c = alignment3) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
-      ...props
-    },
-    children
+      ...props,
+      children
+    }
   );
 };
 
@@ -3258,6 +3422,7 @@ import { useSwitch } from "@react-aria/switch";
 import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import { cn as cn37, createVar as createVar11, useClassNames as useClassNames34, useStateProps as useStateProps20 } from "@marigold/system";
+import { Fragment as Fragment6, jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
 var Switch = forwardRef15(
   ({
     variant,
@@ -3287,7 +3452,7 @@ var Switch = forwardRef15(
       focus: isFocusVisible
     });
     const classNames2 = useClassNames34({ component: "Switch", size, variant });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs30(
       "label",
       {
         className: cn37(
@@ -3296,40 +3461,42 @@ var Switch = forwardRef15(
           "relative flex items-center justify-between gap-[1ch]"
         ),
         style: createVar11({ switchWidth: width }),
-        ...stateProps
-      },
-      /* @__PURE__ */ React.createElement(
-        "input",
-        {
-          ref: inputRef,
-          className: "absolute left-0 top-0 z-[1] h-full w-full cursor-pointer opacity-[0.0001] disabled:cursor-not-allowed",
-          ...inputProps,
-          ...focusProps
-        }
-      ),
-      props.children && /* @__PURE__ */ React.createElement(React.Fragment, null, props.children),
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: cn37(
-            "relative h-6 flex-shrink-0 flex-grow-0 basis-12 rounded-3xl",
-            classNames2.track
+        ...stateProps,
+        children: [
+          /* @__PURE__ */ jsx71(
+            "input",
+            {
+              ref: inputRef,
+              className: "absolute left-0 top-0 z-[1] h-full w-full cursor-pointer opacity-[0.0001] disabled:cursor-not-allowed",
+              ...inputProps,
+              ...focusProps
+            }
+          ),
+          props.children && /* @__PURE__ */ jsx71(Fragment6, { children: props.children }),
+          /* @__PURE__ */ jsx71(
+            "div",
+            {
+              className: cn37(
+                "relative h-6 flex-shrink-0 flex-grow-0 basis-12 rounded-3xl",
+                classNames2.track
+              ),
+              children: /* @__PURE__ */ jsx71(
+                "div",
+                {
+                  className: cn37(
+                    "h-[22px] w-[22px]",
+                    "cubic-bezier(.7,0,.3,1)",
+                    "absolute left-0 top-px",
+                    "block translate-x-[1px] rounded-full transition-all duration-100 ease-in-out will-change-transform",
+                    "group-selected/switch:translate-x-[calc(47px_-_100%)]",
+                    classNames2.thumb
+                  )
+                }
+              )
+            }
           )
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn37(
-              "h-[22px] w-[22px]",
-              "cubic-bezier(.7,0,.3,1)",
-              "absolute left-0 top-px",
-              "block translate-x-[1px] rounded-full transition-all duration-100 ease-in-out will-change-transform",
-              "group-selected/switch:translate-x-[calc(47px_-_100%)]",
-              classNames2.thumb
-            )
-          }
-        )
-      )
+        ]
+      }
     );
   }
 );
@@ -3354,9 +3521,10 @@ var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ jsx72("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -3365,6 +3533,7 @@ import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps17 } from "@react-aria/utils";
 import { useStateProps as useStateProps21 } from "@marigold/system";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var TableCell = ({ cell }) => {
   const ref = useRef21(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -3387,15 +3556,15 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing13();
   const stateProps = useStateProps21({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx73(
     "td",
     {
       ref,
       className: classNames2 == null ? void 0 : classNames2.cell,
       ...mergeProps17(cellProps, focusProps),
-      ...stateProps
-    },
-    cell.rendered
+      ...stateProps,
+      children: cell.rendered
+    }
   );
 };
 
@@ -3427,6 +3596,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
+import { jsx as jsx74 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef22(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3443,15 +3613,15 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing14();
   const stateProps = useStateProps22({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx74(
     "td",
     {
       ref,
       className: cn38("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps18(gridCellProps, focusProps),
-      ...stateProps
-    },
-    /* @__PURE__ */ React.createElement(Checkbox, { ...checkboxProps })
+      ...stateProps,
+      children: /* @__PURE__ */ jsx74(Checkbox, { ...checkboxProps })
+    }
   );
 };
 
@@ -3464,6 +3634,7 @@ import { mergeProps as mergeProps19 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
 import { cn as cn39, useStateProps as useStateProps23 } from "@marigold/system";
 import { width as twWidth2 } from "@marigold/system";
+import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto"
@@ -3484,35 +3655,39 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs31(
     "th",
     {
       colSpan: column.colspan,
       ref,
       className: cn39("cursor-default", twWidth2[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps19(columnHeaderProps, hoverProps, focusProps),
-      ...stateProps
-    },
-    column.rendered,
-    column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ React.createElement(SortUp, { className: "inline-block" }) : /* @__PURE__ */ React.createElement(SortDown, { className: "inline-block" }) : /* @__PURE__ */ React.createElement(SortDown, { className: "inline-block" }))
+      ...stateProps,
+      children: [
+        column.rendered,
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx75(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx75(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx75(SortDown, { className: "inline-block" }))
+      ]
+    }
   );
 };
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React.createElement("thead", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ jsx76("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef24 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef24(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ jsx77("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3522,6 +3697,7 @@ import { useHover as useHover10 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps20 } from "@react-aria/utils";
 import { cn as cn40, useClassNames as useClassNames35, useStateProps as useStateProps24 } from "@marigold/system";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef25(null);
   const { interactive, state, ...ctx } = useTableContext();
@@ -3551,7 +3727,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx78(
     "tr",
     {
       ref,
@@ -3562,9 +3738,9 @@ var TableRow = ({ children, row }) => {
         classNames2 == null ? void 0 : classNames2.row
       ),
       ...mergeProps20(rowProps, focusProps, hoverProps),
-      ...stateProps
-    },
-    children
+      ...stateProps,
+      children
+    }
   );
 };
 
@@ -3582,6 +3758,7 @@ import {
   width as twWidth3,
   useStateProps as useStateProps25
 } from "@marigold/system";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto"
@@ -3602,7 +3779,7 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx79(
     "th",
     {
       ref,
@@ -3612,13 +3789,14 @@ var TableSelectAllCell = ({
         classNames2 == null ? void 0 : classNames2.header
       ),
       ...mergeProps21(columnHeaderProps, hoverProps, focusProps),
-      ...stateProps
-    },
-    /* @__PURE__ */ React.createElement(Checkbox, { ...checkboxProps })
+      ...stateProps,
+      children: /* @__PURE__ */ jsx79(Checkbox, { ...checkboxProps })
+    }
   );
 };
 
 // src/Table/Table.tsx
+import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3641,52 +3819,56 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx80(
     TableContext.Provider,
     {
-      value: { state, interactive, classNames: classNames2, variant, size }
-    },
-    /* @__PURE__ */ React.createElement(
-      "table",
-      {
-        ref: tableRef,
-        className: cn42(
-          "group/table",
-          "border-collapse overflow-auto whitespace-nowrap",
-          stretch ? "table w-full" : "block",
-          classNames2.table
-        ),
-        ...gridProps
-      },
-      /* @__PURE__ */ React.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...collection.getChildren(headerRow.key)].map(
-        (column) => {
-          var _a, _b, _c;
-          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React.createElement(
-            TableSelectAllCell,
-            {
-              width: (_b = column.props) == null ? void 0 : _b.width,
-              key: column.key,
-              column
-            }
-          ) : /* @__PURE__ */ React.createElement(
-            TableColumnHeader,
-            {
-              width: (_c = column.props) == null ? void 0 : _c.width,
-              key: column.key,
-              column
-            }
-          );
+      value: { state, interactive, classNames: classNames2, variant, size },
+      children: /* @__PURE__ */ jsxs32(
+        "table",
+        {
+          ref: tableRef,
+          className: cn42(
+            "group/table",
+            "border-collapse overflow-auto whitespace-nowrap",
+            stretch ? "table w-full" : "block",
+            classNames2.table
+          ),
+          ...gridProps,
+          children: [
+            /* @__PURE__ */ jsx80(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx80(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+              (column) => {
+                var _a, _b, _c;
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(
+                  TableSelectAllCell,
+                  {
+                    width: (_b = column.props) == null ? void 0 : _b.width,
+                    column
+                  },
+                  column.key
+                ) : /* @__PURE__ */ jsx80(
+                  TableColumnHeader,
+                  {
+                    width: (_c = column.props) == null ? void 0 : _c.width,
+                    column
+                  },
+                  column.key
+                );
+              }
+            ) }, headerRow.key)) }),
+            /* @__PURE__ */ jsxs32(TableBody, { children: [
+              ...collection.rows.map(
+                (row) => row.type === "item" && /* @__PURE__ */ jsx80(TableRow, { row, children: [...collection.getChildren(row.key)].map(
+                  (cell) => {
+                    var _a;
+                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx80(TableCell, { cell }, cell.key);
+                  }
+                ) }, row.key)
+              )
+            ] })
+          ]
         }
-      )))),
-      /* @__PURE__ */ React.createElement(TableBody, null, ...collection.rows.map(
-        (row) => row.type === "item" && /* @__PURE__ */ React.createElement(TableRow, { key: row.key, row }, [...collection.getChildren(row.key)].map(
-          (cell) => {
-            var _a;
-            return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React.createElement(TableCell, { key: cell.key, cell });
-          }
-        ))
-      ))
-    )
+      )
+    }
   );
 };
 Table.Body = Body2;
@@ -3708,6 +3890,7 @@ import {
   useClassNames as useClassNames37,
   useTheme as useTheme5
 } from "@marigold/system";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var Text = ({
   variant,
   size,
@@ -3726,7 +3909,7 @@ var Text = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx81(
     "p",
     {
       ...props,
@@ -3746,9 +3929,9 @@ var Text = ({
           color
           /* fallback */
         )
-      })
-    },
-    children
+      }),
+      children
+    }
   );
 };
 
@@ -3759,6 +3942,7 @@ import { useHover as useHover12 } from "@react-aria/interactions";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
 import { useClassNames as useClassNames38, useStateProps as useStateProps26 } from "@marigold/system";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var TextArea = forwardRef16(
   ({
     variant,
@@ -3795,7 +3979,7 @@ var TextArea = forwardRef16(
       error
     });
     const classNames2 = useClassNames38({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx82(
       FieldBase,
       {
         label,
@@ -3808,19 +3992,19 @@ var TextArea = forwardRef16(
         stateProps,
         variant,
         size,
-        width
-      },
-      /* @__PURE__ */ React.createElement(
-        "textarea",
-        {
-          className: classNames2,
-          ref: textAreaRef,
-          rows,
-          ...inputProps,
-          ...focusProps,
-          ...hoverProps
-        }
-      )
+        width,
+        children: /* @__PURE__ */ jsx82(
+          "textarea",
+          {
+            className: classNames2,
+            ref: textAreaRef,
+            rows,
+            ...inputProps,
+            ...focusProps,
+            ...hoverProps
+          }
+        )
+      }
     );
   }
 );
@@ -3832,6 +4016,7 @@ import { useHover as useHover13 } from "@react-aria/interactions";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { mergeProps as mergeProps22, useObjectRef as useObjectRef14 } from "@react-aria/utils";
 import { useStateProps as useStateProps27 } from "@marigold/system";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var TextField = forwardRef17(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
@@ -3859,7 +4044,7 @@ var TextField = forwardRef17(
       readOnly,
       required
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx83(
       FieldBase,
       {
         label,
@@ -3872,23 +4057,24 @@ var TextField = forwardRef17(
         stateProps,
         variant,
         size,
-        width
-      },
-      /* @__PURE__ */ React.createElement(
-        Input,
-        {
-          ref: inputRef,
-          variant,
-          size,
-          ...mergeProps22(focusProps, inputProps, hoverProps)
-        }
-      )
+        width,
+        children: /* @__PURE__ */ jsx83(
+          Input,
+          {
+            ref: inputRef,
+            variant,
+            size,
+            ...mergeProps22(focusProps, inputProps, hoverProps)
+          }
+        )
+      }
     );
   }
 );
 
 // src/Tiles/Tiles.tsx
 import { cn as cn44, createVar as createVar13, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3901,7 +4087,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       ...props,
@@ -3911,9 +4097,9 @@ var Tiles = ({
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: createVar13({ column, tilesWidth })
-    },
-    children
+      style: createVar13({ column, tilesWidth }),
+      children
+    }
   );
 };
 
@@ -3932,6 +4118,7 @@ import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
+import { jsx as jsx85, jsxs as jsxs33 } from "react/jsx-runtime";
 var TooltipTrigger = ({
   disabled,
   open,
@@ -3968,44 +4155,50 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React.createElement(
-    TooltipContext.Provider,
-    {
-      value: {
-        state,
-        overlayRef,
-        arrowProps,
-        placement: overlayPlacement,
-        ...tooltipProps,
-        ...positionProps
+  return /* @__PURE__ */ jsxs33(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
+    tooltipTrigger,
+    /* @__PURE__ */ jsx85(
+      TooltipContext.Provider,
+      {
+        value: {
+          state,
+          overlayRef,
+          arrowProps,
+          placement: overlayPlacement,
+          ...tooltipProps,
+          ...positionProps
+        },
+        children: /* @__PURE__ */ jsx85(Overlay, { open: state.isOpen, children: tooltip })
       }
-    },
-    /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, tooltip)
-  ));
+    )
+  ] });
 };
 
 // src/Tooltip/Tooltip.tsx
+import { jsx as jsx86, jsxs as jsxs34 } from "react/jsx-runtime";
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
   const classNames2 = useClassNames39({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       ...tooltipProps,
       ...rest,
       ref: overlayRef,
       className: cn45("group/tooltip", classNames2.container),
-      "data-placement": placement
-    },
-    /* @__PURE__ */ React.createElement("div", null, children),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ...arrowProps,
-        className: cn45("absolute h-0 w-0", classNames2.arrow)
-      }
-    )
+      "data-placement": placement,
+      children: [
+        /* @__PURE__ */ jsx86("div", { children }),
+        /* @__PURE__ */ jsx86(
+          "div",
+          {
+            ...arrowProps,
+            className: cn45("absolute h-0 w-0", classNames2.arrow)
+          }
+        )
+      ]
+    }
   );
 };
 Tooltip.Trigger = TooltipTrigger;
@@ -4020,17 +4213,18 @@ import { useListState } from "@react-stately/list";
 import { useStateProps as useStateProps28 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
-import React4 from "react";
+import React2 from "react";
 import { useFocusRing as useFocusRing20 } from "@react-aria/focus";
 import { useTag } from "@react-aria/tag";
 import { mergeProps as mergeProps23 } from "@react-aria/utils";
 import { cn as cn46, useClassNames as useClassNames40 } from "@marigold/system";
+import { jsx as jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
     item,
     ...rest
   };
-  let ref = React4.useRef(null);
+  let ref = React2.useRef(null);
   let { focusProps } = useFocusRing20({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
     {
@@ -4041,26 +4235,31 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     ref
   );
   const classNames2 = useClassNames40({ component: "Tag", variant, size });
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ jsx87(
     "span",
     {
       ref,
       ...mergeProps23(rowProps, focusProps),
-      className: classNames2.tag
-    },
-    /* @__PURE__ */ React4.createElement("div", { ...gridCellProps, className: classNames2.gridCell }, /* @__PURE__ */ React4.createElement("span", null, item.rendered), allowsRemoving && /* @__PURE__ */ React4.createElement(
-      Button,
-      {
-        ...removeButtonProps,
-        className: cn46("flex items-center", classNames2.closeButton),
-        role: "button"
-      },
-      /* @__PURE__ */ React4.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ React4.createElement("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))
-    ))
+      className: classNames2.tag,
+      children: /* @__PURE__ */ jsxs35("div", { ...gridCellProps, className: classNames2.gridCell, children: [
+        /* @__PURE__ */ jsx87("span", { children: item.rendered }),
+        allowsRemoving && /* @__PURE__ */ jsx87(
+          Button,
+          {
+            ...removeButtonProps,
+            className: cn46("flex items-center", classNames2.closeButton),
+            role: "button",
+            children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) })
+          }
+        )
+      ] })
+    }
   );
 };
 
 // src/TagGroup/TagGroup.tsx
+import { jsx as jsx88 } from "react/jsx-runtime";
+import { createElement } from "react";
 var TagGroup = ({
   width,
   required,
@@ -4080,7 +4279,7 @@ var TagGroup = ({
     error,
     required
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx88(
     FieldBase,
     {
       width,
@@ -4092,28 +4291,28 @@ var TagGroup = ({
       errorMessage: props.errorMessage,
       errorMessageProps,
       stateProps,
-      ...gridProps
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        role: "presentation",
-        ref: inputRef,
-        className: "flex flex-wrap items-start gap-1"
-      },
-      [...state.collection].map((item) => /* @__PURE__ */ React.createElement(
-        Tag,
+      ...gridProps,
+      children: /* @__PURE__ */ jsx88(
+        "div",
         {
-          ...item.props,
-          key: item.key,
-          item,
-          state,
-          allowsRemoving,
-          onRemove: props.onRemove
-        },
-        item.rendered
-      ))
-    )
+          role: "presentation",
+          ref: inputRef,
+          className: "flex flex-wrap items-start gap-1",
+          children: [...state.collection].map((item) => /* @__PURE__ */ createElement(
+            Tag,
+            {
+              ...item.props,
+              key: item.key,
+              item,
+              state,
+              allowsRemoving,
+              onRemove: props.onRemove
+            },
+            item.rendered
+          ))
+        }
+      )
+    }
   );
 };
 
@@ -4124,7 +4323,8 @@ Tag2.Group = TagGroup;
 // src/XLoader/XLoader.tsx
 import { forwardRef as forwardRef18 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React.createElement(
+import { jsx as jsx89, jsxs as jsxs36 } from "react/jsx-runtime";
+var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs36(
   SVG6,
   {
     id: "XLoader",
@@ -4132,207 +4332,209 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React.createElement(
     size: 150,
     viewBox: "0 0 150 150",
     ...props,
-    ...ref
-  },
-  /* @__PURE__ */ React.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "1.0s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.9s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.8s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.7s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.6s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.5s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.4s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.3s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.2s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.1s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  ),
-  /* @__PURE__ */ React.createElement(
-    "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"
-    },
-    /* @__PURE__ */ React.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        attributeType: "XML",
-        values: "1; .01; 1; 1; 1;",
-        begin: "0.0s",
-        dur: "2.5s",
-        repeatCount: "indefinite"
-      }
-    )
-  )
+    ...ref,
+    children: [
+      /* @__PURE__ */ jsx89("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "1.0s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.9s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.8s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.7s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.6s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.5s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.4s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.3s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.2s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.1s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx89(
+        "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__ */ jsx89(
+            "animate",
+            {
+              attributeName: "opacity",
+              attributeType: "XML",
+              values: "1; .01; 1; 1; 1;",
+              begin: "0.0s",
+              dur: "2.5s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      )
+    ]
+  }
 ));
 
 // src/Tabs/Tabs.tsx
@@ -4353,6 +4555,7 @@ import { useFocus, useHover as useHover14 } from "@react-aria/interactions";
 import { useTab } from "@react-aria/tabs";
 import { mergeProps as mergeProps24 } from "@react-aria/utils";
 import { cn as cn47, useStateProps as useStateProps29 } from "@marigold/system";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
   const ref = useRef30(null);
@@ -4364,7 +4567,7 @@ var Tab = ({ item, state }) => {
   const { focusProps } = useFocus({});
   const stateProps = useStateProps29({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx90(
     "div",
     {
       className: cn47(
@@ -4372,9 +4575,9 @@ var Tab = ({ item, state }) => {
         classNames2.tab
       ),
       ...mergeProps24(tabProps, stateProps, focusProps, hoverProps),
-      ref
-    },
-    rendered
+      ref,
+      children: rendered
+    }
   );
 };
 
@@ -4382,16 +4585,18 @@ var Tab = ({ item, state }) => {
 import { useRef as useRef31 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
 import { cn as cn48 } from "@marigold/system";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var TabPanel = ({ state, ...props }) => {
   var _a;
   const ref = useRef31(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ React.createElement("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps }, selectedItemProps == null ? void 0 : selectedItemProps.children);
+  return /* @__PURE__ */ jsx91("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
 };
 
 // src/Tabs/Tabs.tsx
+import { jsx as jsx92, jsxs as jsxs37 } from "react/jsx-runtime";
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4412,17 +4617,20 @@ var Tabs = ({
     size,
     variant
   });
-  return /* @__PURE__ */ React.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React.createElement("div", { className: cn49(classNames2.container) }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn49("flex", gapSpace8[space], classNames2.tabs),
-      ...tabListProps,
-      ref
-    },
-    [...state.collection].map((item) => {
-      return /* @__PURE__ */ React.createElement(Tab, { key: item.key, item, state });
-    })
-  ), /* @__PURE__ */ React.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state })));
+  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs37("div", { className: cn49(classNames2.container), children: [
+    /* @__PURE__ */ jsx92(
+      "div",
+      {
+        className: cn49("flex", gapSpace8[space], classNames2.tabs),
+        ...tabListProps,
+        ref,
+        children: [...state.collection].map((item) => {
+          return /* @__PURE__ */ jsx92(Tab, { item, state }, item.key);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx92(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
+  ] }) });
 };
 Tabs.Item = Item7;
 export {