@marigold/components 7.8.1 → 8.0.0

package/dist/index.mjs

@@ -914,7 +914,6 @@ import { jsx as jsx23 } from "react/jsx-runtime";
 var Breakout = ({
   height,
   children,
-  orientation,
   alignX = "left",
   alignY = "center",
   ...props
@@ -2164,18 +2163,42 @@ var ActionMenu = ({
   ] });
 };
 
-// src/Message/Message.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { cn as cn33, useClassNames as useClassNames36 } from "@marigold/system";
-import { jsx as jsx62, jsxs as jsxs24 } from "react/jsx-runtime";
+// src/SectionMessage/SectionMessage.tsx
+import { cn as cn35, useClassNames as useClassNames36 } from "@marigold/system";
+
+// src/SectionMessage/Context.tsx
+import { createContext as createContext6, useContext as useContext12 } from "react";
+var SectionMessageContext = createContext6({});
+var useSectionMessageContext = () => useContext12(SectionMessageContext);
+
+// src/SectionMessage/SectionMessageContent.tsx
+import { cn as cn33 } from "@marigold/system";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var SectionMessageContent = ({
+  children
+}) => {
+  const { classNames: classNames2 } = useSectionMessageContext();
+  return /* @__PURE__ */ jsx62("div", { className: cn33("[grid-area:content]", classNames2.content), children });
+};
+
+// src/SectionMessage/SectionMessageTitle.tsx
+import { cn as cn34 } from "@marigold/system";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var SectionMessageTitle = ({ children }) => {
+  const { classNames: classNames2 } = useSectionMessageContext();
+  return /* @__PURE__ */ jsx63("div", { className: cn34("[grid-area:title]", classNames2.title), children });
+};
+
+// src/SectionMessage/SectionMessage.tsx
+import { jsx as jsx64, jsxs as jsxs24 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx62(
+  success: () => /* @__PURE__ */ jsx64(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsx64(
         "path",
         {
           fillRule: "evenodd",
@@ -2185,13 +2208,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx62(
+  info: () => /* @__PURE__ */ jsx64(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsx64(
         "path",
         {
           fillRule: "evenodd",
@@ -2201,13 +2224,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx62(
+  warning: () => /* @__PURE__ */ jsx64(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsx64(
         "path",
         {
           fillRule: "evenodd",
@@ -2217,13 +2240,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx62(
+  error: () => /* @__PURE__ */ jsx64(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsx64(
         "path",
         {
           fillRule: "evenodd",
@@ -2234,37 +2257,42 @@ var icons = {
     }
   )
 };
-var Message = forwardRef15(
-  ({ messageTitle, variant = "info", size, children, ...props }, ref) => {
-    const classNames2 = useClassNames36({ component: "Message", variant, size });
-    const Icon4 = icons[variant];
-    return /* @__PURE__ */ jsxs24(
-      "div",
-      {
-        className: cn33(
-          "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
-          classNames2.container
+var SectionMessage = ({
+  variant = "info",
+  size,
+  children,
+  ...props
+}) => {
+  const classNames2 = useClassNames36({
+    component: "SectionMessage",
+    variant,
+    size
+  });
+  const Icon4 = icons[variant];
+  return /* @__PURE__ */ jsx64(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      role: variant === "error" ? "alert" : void 0,
+      ...props,
+      className: cn35("grid auto-rows-min", classNames2.container),
+      children: [
+        /* @__PURE__ */ jsx64(
+          "div",
+          {
+            className: cn35(
+              "h-5 w-5 self-center [grid-area:icon]",
+              classNames2.icon
+            ),
+            children: /* @__PURE__ */ jsx64(Icon4, {})
+          }
         ),
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx62("div", { className: cn33("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx62(Icon4, {}) }),
-          /* @__PURE__ */ jsx62(
-            "div",
-            {
-              className: cn33(
-                "col-start-2 row-start-1 self-center",
-                classNames2.title
-              ),
-              children: messageTitle
-            }
-          ),
-          /* @__PURE__ */ jsx62("div", { className: cn33("col-start-2", classNames2.content), children })
-        ]
-      }
-    );
-  }
-);
+        children
+      ]
+    }
+  ) });
+};
+SectionMessage.Title = SectionMessageTitle;
+SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
 import { Children as Children5, useState as useState2 } from "react";
@@ -2272,12 +2300,12 @@ import { useListData as useListData2 } from "@react-stately/data";
 
 // src/TagGroup/Tag.tsx
 import { Button as Button4, Tag } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn36, useClassNames as useClassNames38 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
 import { useClassNames as useClassNames37 } from "@marigold/system";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -2288,7 +2316,7 @@ var _TagGroup = ({
   ...rest
 }) => {
   const classNames2 = useClassNames37({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx63(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx65(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx65(
     TagList,
     {
       items,
@@ -2300,25 +2328,25 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment6, jsx as jsx64, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx66, jsxs as jsxs25 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx64(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx64("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx64("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ jsx66(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx66("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
   const classNames2 = useClassNames38({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx66(
     Tag,
     {
       textValue,
       ...props,
-      className: cn34("data-[selection-mode]:cursor-pointer", classNames2.tag),
+      className: cn36("data-[selection-mode]:cursor-pointer", classNames2.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ jsx64(
+        allowsRemoving && /* @__PURE__ */ jsx66(
           CloseButton2,
           {
-            className: cn34("flex items-center", classNames2.closeButton)
+            className: cn36("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2328,7 +2356,7 @@ var _Tag = ({ variant, size, children, ...props }) => {
 _Tag.Group = _TagGroup;
 
 // src/Multiselect/Multiselect.tsx
-import { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs26 } from "react/jsx-runtime";
 var Item2 = (_) => null;
 var Multiselect = ({
   label,
@@ -2367,17 +2395,17 @@ var Multiselect = ({
     input.focus();
   };
   return /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx67(
       _Tag.Group,
       {
         items: selected,
         allowsRemoving: true,
         onRemove: setUnselected,
         renderEmptyState: () => null,
-        children: (item) => /* @__PURE__ */ jsx65(_Tag, { id: item.id, children: item.children }, item.id)
+        children: (item) => /* @__PURE__ */ jsx67(_Tag, { id: item.id, children: item.children }, item.id)
       }
     ),
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx67(
       _ComboBox,
       {
         value,
@@ -2387,7 +2415,7 @@ var Multiselect = ({
         disabled: unselected.length === 0,
         placeholder: unselected.length === 0 ? "All items selected" : "",
         ...props,
-        children: unselected.map((item) => /* @__PURE__ */ jsx65(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
+        children: unselected.map((item) => /* @__PURE__ */ jsx67(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
       }
     )
   ] });
@@ -2395,15 +2423,15 @@ var Multiselect = ({
 Multiselect.Item = Item2;
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn38, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button5 } from "react-aria-components";
-import { cn as cn35 } from "@marigold/system";
-import { jsx as jsx66 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx66("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx66(
+import { cn as cn37 } from "@marigold/system";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx68("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx68(
   "path",
   {
     fillRule: "evenodd",
@@ -2411,7 +2439,7 @@ var Plus = () => /* @__PURE__ */ jsx66("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx66("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx66(
+var Minus = () => /* @__PURE__ */ jsx68("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx68(
   "path",
   {
     fillRule: "evenodd",
@@ -2421,10 +2449,10 @@ var Minus = () => /* @__PURE__ */ jsx66("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx68(
     Button5,
     {
-      className: cn35(
+      className: cn37(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2432,14 +2460,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx66(Icon4, {})
+      children: /* @__PURE__ */ jsx68(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
-var _NumberField = forwardRef16(
+import { jsx as jsx69, jsxs as jsxs27 } from "react/jsx-runtime";
+var _NumberField = forwardRef15(
   ({
     variant,
     size,
@@ -2463,8 +2491,8 @@ var _NumberField = forwardRef16(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx67(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn36("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx69(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn38("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx69(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2472,7 +2500,7 @@ var _NumberField = forwardRef16(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ jsx67("div", { className: "flex-1", children: /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx69("div", { className: "flex-1", children: /* @__PURE__ */ jsx69(
         _Input,
         {
           ref,
@@ -2481,7 +2509,7 @@ var _NumberField = forwardRef16(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ jsx67(
+      showStepper && /* @__PURE__ */ jsx69(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2495,22 +2523,22 @@ var _NumberField = forwardRef16(
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef17
+  forwardRef as forwardRef16
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn38, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext6, useContext as useContext12 } from "react";
-var RadioGroupContext = createContext6(
+import { createContext as createContext7, useContext as useContext13 } from "react";
+var RadioGroupContext = createContext7(
   null
 );
-var useRadioGroupContext = () => useContext12(RadioGroupContext);
+var useRadioGroupContext = () => useContext13(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn37, useClassNames as useClassNames40 } from "@marigold/system";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { cn as cn39, useClassNames as useClassNames40 } from "@marigold/system";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -2534,7 +2562,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx70(
     FieldBase,
     {
       as: RadioGroup,
@@ -2545,18 +2573,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx68(
+      children: /* @__PURE__ */ jsx70(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn37(
+          className: cn39(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx68(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx70(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2564,21 +2592,21 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment7, jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx69("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx69("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx69(
+import { Fragment as Fragment7, jsx as jsx71, jsxs as jsxs28 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx71("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx71("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx71(
   "div",
   {
-    className: cn38(
+    className: cn40(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ jsx69(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx71(Dot, {}) : null
   }
 );
-var _Radio = forwardRef17(
+var _Radio = forwardRef16(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
     const classNames2 = useClassNames41({
@@ -2586,11 +2614,11 @@ var _Radio = forwardRef17(
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx71(
       Radio,
       {
         ref,
-        className: cn38(
+        className: cn40(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2600,17 +2628,17 @@ var _Radio = forwardRef17(
         isDisabled: disabled,
         ...props,
         children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment7, { children: [
-          /* @__PURE__ */ jsx69(
+          /* @__PURE__ */ jsx71(
             Icon3,
             {
               checked: isSelected,
-              className: cn38(
+              className: cn40(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx69("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx71("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -2619,10 +2647,10 @@ var _Radio = forwardRef17(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx70 } from "react/jsx-runtime";
-var _SearchField = forwardRef18(
+import { jsx as jsx72 } from "react/jsx-runtime";
+var _SearchField = forwardRef17(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2631,7 +2659,7 @@ var _SearchField = forwardRef18(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx70(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx72(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx72(
       SearchInput,
       {
         ref,
@@ -2642,15 +2670,15 @@ var _SearchField = forwardRef18(
 );
 
 // src/Select/Select.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import {
   Button as Button6,
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn39, useClassNames as useClassNames42 } from "@marigold/system";
-import { jsx as jsx71, jsxs as jsxs29 } from "react/jsx-runtime";
-var _Select = forwardRef19(
+import { cn as cn41, useClassNames as useClassNames42 } from "@marigold/system";
+import { jsx as jsx73, jsxs as jsxs29 } from "react/jsx-runtime";
+var _Select = forwardRef18(
   ({
     disabled,
     required,
@@ -2675,17 +2703,17 @@ var _Select = forwardRef19(
       /* @__PURE__ */ jsxs29(
         Button6,
         {
-          className: cn39(
+          className: cn41(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ jsx71(SelectValue, {}),
-            /* @__PURE__ */ jsx71(ChevronDown, { className: "size-4" })
+            /* @__PURE__ */ jsx73(SelectValue, {}),
+            /* @__PURE__ */ jsx73(ChevronDown, { className: "size-4" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx71(_Popover, { children: /* @__PURE__ */ jsx71(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ jsx73(_Popover, { children: /* @__PURE__ */ jsx73(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -2694,36 +2722,36 @@ _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
 import {
-  forwardRef as forwardRef21
+  forwardRef as forwardRef20
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn41, useClassNames as useClassNames43 } from "@marigold/system";
+import { cn as cn43, useClassNames as useClassNames43 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext7, useContext as useContext13 } from "react";
-var SelectListContext = createContext7(
+import { createContext as createContext8, useContext as useContext14 } from "react";
+var SelectListContext = createContext8(
   {}
 );
-var useSelectListContext = () => useContext13(SelectListContext);
+var useSelectListContext = () => useContext14(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
-import { cn as cn40 } from "@marigold/system";
-import { Fragment as Fragment8, jsx as jsx72, jsxs as jsxs30 } from "react/jsx-runtime";
-var _SelectListItem = forwardRef20(
+import { cn as cn42 } from "@marigold/system";
+import { Fragment as Fragment8, jsx as jsx74, jsxs as jsxs30 } from "react/jsx-runtime";
+var _SelectListItem = forwardRef19(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsx74(
       SelectListItem,
       {
         textValue,
         ...props,
-        className: cn40("flex items-center", classNames2 == null ? void 0 : classNames2.option),
+        className: cn42("flex items-center", classNames2 == null ? void 0 : classNames2.option),
         ref,
         children: ({ selectionMode }) => /* @__PURE__ */ jsxs30(Fragment8, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ jsx72(FieldGroup, { children: /* @__PURE__ */ jsx72(_Checkbox, { slot: "selection" }) }),
+          selectionMode === "multiple" && /* @__PURE__ */ jsx74(FieldGroup, { children: /* @__PURE__ */ jsx74(_Checkbox, { slot: "selection" }) }),
           children
         ] })
       }
@@ -2732,20 +2760,20 @@ var _SelectListItem = forwardRef20(
 );
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
-var _SelectList = forwardRef21(
+import { jsx as jsx75 } from "react/jsx-runtime";
+var _SelectList = forwardRef20(
   ({ onChange, ...rest }, ref) => {
     const classNames2 = useClassNames43({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ jsx73(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx73("div", { className: classNames2.container, children: /* @__PURE__ */ jsx73(
+    return /* @__PURE__ */ jsx75(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx75("div", { className: classNames2.container, children: /* @__PURE__ */ jsx75(
       SelectList,
       {
         ...props,
         ref,
-        className: cn41(
+        className: cn43(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -2757,25 +2785,25 @@ var _SelectList = forwardRef21(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn42, createVar as createVar10, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { cn as cn44, createVar as createVar10, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx74(
+}) => /* @__PURE__ */ jsx76(
   "div",
   {
     ...props,
-    className: cn42(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    className: cn44(["sticky h-[--height] overflow-auto", twWidth2[width]]),
     style: createVar10({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -2783,12 +2811,12 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn43,
+  cn as cn45,
   width as twWidth3,
   useClassNames as useClassNames44
 } from "@marigold/system";
-import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
-var _Slider = forwardRef22(
+import { jsx as jsx77, jsxs as jsxs31 } from "react/jsx-runtime";
+var _Slider = forwardRef21(
   ({
     thumbLabels,
     variant,
@@ -2809,7 +2837,7 @@ var _Slider = forwardRef22(
     return /* @__PURE__ */ jsxs31(
       Slider,
       {
-        className: cn43(
+        className: cn45(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -2817,16 +2845,16 @@ var _Slider = forwardRef22(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx75(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx75(SliderOutput, { className: cn43("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsx77(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx77(SliderOutput, { className: cn45("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx77(
             SliderTrack,
             {
-              className: cn43("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx75(
+              className: cn45("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx77(
                 SliderThumb,
                 {
-                  className: cn43("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn45("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2841,30 +2869,29 @@ var _Slider = forwardRef22(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx76("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx78 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx78("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn44,
+  cn as cn46,
   gapSpace as gapSpace7
 } from "@marigold/system";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
   stretch = false,
-  orientation,
   alignX,
   alignY,
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
-      className: cn44(
+      className: cn46(
         "flex flex-col",
         gapSpace7[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -2878,15 +2905,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn45,
+  cn as cn47,
   width as twWidth4,
   useClassNames as useClassNames45
 } from "@marigold/system";
-import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
-var _Switch = forwardRef23(
+import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
+var _Switch = forwardRef22(
   ({
     variant,
     size,
@@ -2909,25 +2936,25 @@ var _Switch = forwardRef23(
       {
         ...props,
         ref,
-        className: cn45(
+        className: cn47(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx78(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx78("div", { className: "relative", children: /* @__PURE__ */ jsx78(
+          /* @__PURE__ */ jsx80(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx80("div", { className: "relative", children: /* @__PURE__ */ jsx80(
             "div",
             {
-              className: cn45(
+              className: cn47(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx78(
+              children: /* @__PURE__ */ jsx80(
                 "div",
                 {
-                  className: cn45(
+                  className: cn47(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2956,19 +2983,19 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn51, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn53, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext8, useContext as useContext14 } from "react";
-var TableContext = createContext8({});
-var useTableContext = () => useContext14(TableContext);
+import { createContext as createContext9, useContext as useContext15 } from "react";
+var TableContext = createContext9({});
+var useTableContext = () => useContext15(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx79("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx81("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -2976,8 +3003,8 @@ import { useRef as useRef4 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn46, useStateProps as useStateProps2 } from "@marigold/system";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { cn as cn48, useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef4(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -3000,11 +3027,11 @@ var TableCell = ({ cell, align = "left" }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx82(
     "td",
     {
       ref,
-      className: cn46(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn48(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -3018,7 +3045,7 @@ import { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn47, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn49, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3041,7 +3068,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef5(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3058,14 +3085,14 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing3();
   const stateProps = useStateProps3({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx83(
     "td",
     {
       ref,
-      className: cn47("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn49("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx81(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx83(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -3077,9 +3104,9 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn48, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn50, useStateProps as useStateProps4 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
-import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs33 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto",
@@ -3106,13 +3133,13 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn48("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn50("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx82(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx82(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx82(SortDown, { className: "inline-block" }))
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx84(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx84(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx84(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3120,10 +3147,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx85(
     "thead",
     {
       ...rowGroupProps,
@@ -3136,12 +3163,12 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef7 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef7(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx84("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx86("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3150,8 +3177,8 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn49, useClassNames as useClassNames46, useStateProps as useStateProps5 } from "@marigold/system";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { cn as cn51, useClassNames as useClassNames46, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
@@ -3181,11 +3208,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx87(
     "tr",
     {
       ref,
-      className: cn49(
+      className: cn51(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3208,11 +3235,11 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn50,
+  cn as cn52,
   width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto",
@@ -3234,25 +3261,25 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx88(
     "th",
     {
       ref,
-      className: cn50(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn52(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx86(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx88(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx87, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs34 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
-  stretch,
+  stretch = false,
   selectionMode = "none",
   disableKeyboardNavigation = false,
   stickyHeader,
@@ -3276,7 +3303,7 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx89(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
@@ -3284,7 +3311,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn51(
+          className: cn53(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3292,10 +3319,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx87(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx87(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx89(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx89(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c, _d, _e;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx87(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx89(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3303,7 +3330,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx87(
+                ) : /* @__PURE__ */ jsx89(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3316,10 +3343,10 @@ var Table = ({
             ) }, headerRow.key)) }),
             /* @__PURE__ */ jsxs34(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx87(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx89(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
                   const currentColumn = collection.columns[index];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx87(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx87(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx89(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx89(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3344,7 +3371,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn52,
+  cn as cn54,
   createVar as createVar11,
   cursorStyle,
   fontWeight,
@@ -3355,7 +3382,7 @@ import {
   useClassNames as useClassNames48,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3374,11 +3401,11 @@ var Text2 = ({
     variant,
     size
   });
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx90(
     "p",
     {
       ...props,
-      className: cn52(
+      className: cn54(
         "text-[--color] outline-[--outline]",
         classNames2,
         fontStyle && textStyle[fontStyle],
@@ -3401,11 +3428,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { TextArea, TextField } from "react-aria-components";
 import { useClassNames as useClassNames49 } from "@marigold/system";
-import { jsx as jsx89 } from "react/jsx-runtime";
-var _TextArea = forwardRef24(
+import { jsx as jsx91 } from "react/jsx-runtime";
+var _TextArea = forwardRef23(
   ({
     variant,
     size,
@@ -3424,15 +3451,15 @@ var _TextArea = forwardRef24(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx89(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx89(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx91(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx91(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx90 } from "react/jsx-runtime";
-var _TextField = forwardRef25(
+import { jsx as jsx92 } from "react/jsx-runtime";
+var _TextField = forwardRef24(
   ({
     variant,
     size,
@@ -3449,18 +3476,18 @@ var _TextField = forwardRef25(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx90(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx90(_Input, { ref }) });
+    return /* @__PURE__ */ jsx92(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx92(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn53, createVar as createVar12, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { cn as cn55, createVar as createVar12, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
   equalHeight = false,
-  tilesWidth,
+  tilesWidth = "250px",
   children,
   ...props
 }) => {
@@ -3468,11 +3495,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx93(
     "div",
     {
       ...props,
-      className: cn53(
+      className: cn55(
         "grid",
         gapSpace8[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3486,11 +3513,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn54, useClassNames as useClassNames50 } from "@marigold/system";
+import { cn as cn56, useClassNames as useClassNames50 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3504,11 +3531,11 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx92(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx94(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx93, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs35 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
@@ -3520,10 +3547,10 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     Tooltip,
     {
       ...props,
-      className: cn54("group/tooltip", classNames2.container),
+      className: cn56("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ jsx93(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx93("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx93("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ jsx95(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx95("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx95("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3535,10 +3562,10 @@ _Tooltip.Trigger = _TooltipTrigger;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx94, jsxs as jsxs36 } from "react/jsx-runtime";
-var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
+import { jsx as jsx96, jsxs as jsxs36 } from "react/jsx-runtime";
+var XLoader = forwardRef25((props, ref) => /* @__PURE__ */ jsxs36(
   SVG5,
   {
     id: "XLoader",
@@ -3548,13 +3575,13 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx94("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3567,12 +3594,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3585,12 +3612,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3603,12 +3630,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3621,12 +3648,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3639,12 +3666,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3657,12 +3684,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3675,12 +3702,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3693,12 +3720,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3711,12 +3738,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3729,12 +3756,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx96(
         "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__ */ jsx94(
+          children: /* @__PURE__ */ jsx96(
             "animate",
             {
               attributeName: "opacity",
@@ -3756,21 +3783,21 @@ import { Tabs } from "react-aria-components";
 import { useClassNames as useClassNames51 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext9, useContext as useContext15 } from "react";
-var TabContext = createContext9({});
-var useTabContext = () => useContext15(TabContext);
+import { createContext as createContext10, useContext as useContext16 } from "react";
+var TabContext = createContext10({});
+var useTabContext = () => useContext16(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn55 } from "@marigold/system";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { cn as cn57 } from "@marigold/system";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx97(
     Tab,
     {
       ...props,
-      className: cn55(
+      className: cn57(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3781,15 +3808,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn56, gapSpace as gapSpace9 } from "@marigold/system";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { cn as cn58, gapSpace as gapSpace9 } from "@marigold/system";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx98(
     TabList,
     {
       ...props,
-      className: cn56("flex", gapSpace9[space], classNames2.tabsList),
+      className: cn58("flex", gapSpace9[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3797,14 +3824,14 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx97(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx99(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
@@ -3815,7 +3842,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     size,
     variant
   });
-  return /* @__PURE__ */ jsx98(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx98(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx100(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx100(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -3865,7 +3892,6 @@ export {
   List,
   MarigoldProvider,
   _Menu as Menu,
-  Message,
   _Modal as Modal,
   Multiselect,
   _NumberField as NumberField,
@@ -3876,6 +3902,7 @@ export {
   RouterProvider,
   Scrollable,
   _SearchField as SearchField,
+  SectionMessage,
   _Select as Select,
   _SelectList as SelectList,
   _Slider as Slider,