@marigold/components 7.8.1 → 8.0.0

package/dist/index.js

@@ -71,7 +71,6 @@ __export(src_exports, {
   List: () => List,
   MarigoldProvider: () => MarigoldProvider,
   Menu: () => _Menu,
-  Message: () => Message,
   Modal: () => _Modal,
   Multiselect: () => Multiselect,
   NumberField: () => _NumberField,
@@ -82,6 +81,7 @@ __export(src_exports, {
   RouterProvider: () => import_react_aria_components59.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
+  SectionMessage: () => SectionMessage,
   Select: () => _Select,
   SelectList: () => _SelectList,
   Slider: () => _Slider,
@@ -1016,7 +1016,6 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
 var Breakout = ({
   height,
   children,
-  orientation,
   alignX = "left",
   alignY = "center",
   ...props
@@ -2220,18 +2219,42 @@ var ActionMenu = ({
   ] });
 };
 
-// src/Message/Message.tsx
+// src/SectionMessage/SectionMessage.tsx
+var import_system54 = require("@marigold/system");
+
+// src/SectionMessage/Context.tsx
 var import_react32 = require("react");
+var SectionMessageContext = (0, import_react32.createContext)({});
+var useSectionMessageContext = () => (0, import_react32.useContext)(SectionMessageContext);
+
+// src/SectionMessage/SectionMessageContent.tsx
 var import_system52 = require("@marigold/system");
 var import_jsx_runtime62 = require("react/jsx-runtime");
+var SectionMessageContent = ({
+  children
+}) => {
+  const { classNames: classNames2 } = useSectionMessageContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_system52.cn)("[grid-area:content]", classNames2.content), children });
+};
+
+// src/SectionMessage/SectionMessageTitle.tsx
+var import_system53 = require("@marigold/system");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var SectionMessageTitle = ({ children }) => {
+  const { classNames: classNames2 } = useSectionMessageContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_system53.cn)("[grid-area:title]", classNames2.title), children });
+};
+
+// src/SectionMessage/SectionMessage.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var icons = {
-  success: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2241,13 +2264,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2257,13 +2280,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2273,13 +2296,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2290,37 +2313,42 @@ var icons = {
     }
   )
 };
-var Message = (0, import_react32.forwardRef)(
-  ({ messageTitle, variant = "info", size, children, ...props }, ref) => {
-    const classNames2 = (0, import_system52.useClassNames)({ component: "Message", variant, size });
-    const Icon4 = icons[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-      "div",
-      {
-        className: (0, import_system52.cn)(
-          "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
-          classNames2.container
+var SectionMessage = ({
+  variant = "info",
+  size,
+  children,
+  ...props
+}) => {
+  const classNames2 = (0, import_system54.useClassNames)({
+    component: "SectionMessage",
+    variant,
+    size
+  });
+  const Icon4 = icons[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    "div",
+    {
+      role: variant === "error" ? "alert" : void 0,
+      ...props,
+      className: (0, import_system54.cn)("grid auto-rows-min", classNames2.container),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          "div",
+          {
+            className: (0, import_system54.cn)(
+              "h-5 w-5 self-center [grid-area:icon]",
+              classNames2.icon
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon4, {})
+          }
         ),
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_system52.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon4, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            "div",
-            {
-              className: (0, import_system52.cn)(
-                "col-start-2 row-start-1 self-center",
-                classNames2.title
-              ),
-              children: messageTitle
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_system52.cn)("col-start-2", classNames2.content), children })
-        ]
-      }
-    );
-  }
-);
+        children
+      ]
+    }
+  ) });
+};
+SectionMessage.Title = SectionMessageTitle;
+SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
 var import_react33 = require("react");
@@ -2328,12 +2356,12 @@ var import_data2 = require("@react-stately/data");
 
 // src/TagGroup/Tag.tsx
 var import_react_aria_components40 = require("react-aria-components");
-var import_system54 = require("@marigold/system");
+var import_system56 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
 var import_react_aria_components39 = require("react-aria-components");
-var import_system53 = require("@marigold/system");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_system55 = require("@marigold/system");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
   items,
@@ -2343,8 +2371,8 @@ var _TagGroup = ({
   size,
   ...rest
 }) => {
-  const classNames2 = (0, import_system53.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FieldBase, { as: import_react_aria_components39.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const classNames2 = (0, import_system55.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FieldBase, { as: import_react_aria_components39.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     import_react_aria_components39.TagList,
     {
       items,
@@ -2356,25 +2384,25 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_aria_components40.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components40.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = (0, import_system54.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  const classNames2 = (0, import_system56.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     import_react_aria_components40.Tag,
     {
       textValue,
       ...props,
-      className: (0, import_system54.cn)("data-[selection-mode]:cursor-pointer", classNames2.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+      className: (0, import_system56.cn)("data-[selection-mode]:cursor-pointer", classNames2.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           CloseButton2,
           {
-            className: (0, import_system54.cn)("flex items-center", classNames2.closeButton)
+            className: (0, import_system56.cn)("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2384,7 +2412,7 @@ var _Tag = ({ variant, size, children, ...props }) => {
 _Tag.Group = _TagGroup;
 
 // src/Multiselect/Multiselect.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var Item2 = (_) => null;
 var Multiselect = ({
   label,
@@ -2422,18 +2450,18 @@ var Multiselect = ({
     }, 0);
     input.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       _Tag.Group,
       {
         items: selected,
         allowsRemoving: true,
         onRemove: setUnselected,
         renderEmptyState: () => null,
-        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(_Tag, { id: item.id, children: item.children }, item.id)
+        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(_Tag, { id: item.id, children: item.children }, item.id)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       _ComboBox,
       {
         value,
@@ -2443,7 +2471,7 @@ var Multiselect = ({
         disabled: unselected.length === 0,
         placeholder: unselected.length === 0 ? "All items selected" : "",
         ...props,
-        children: unselected.map((item) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
+        children: unselected.map((item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
       }
     )
   ] });
@@ -2453,13 +2481,13 @@ Multiselect.Item = Item2;
 // src/NumberField/NumberField.tsx
 var import_react34 = require("react");
 var import_react_aria_components42 = require("react-aria-components");
-var import_system56 = require("@marigold/system");
+var import_system58 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
 var import_react_aria_components41 = require("react-aria-components");
-var import_system55 = require("@marigold/system");
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var import_system57 = require("@marigold/system");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2467,7 +2495,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { width: 1
     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__ */ (0, import_jsx_runtime66.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2477,10 +2505,10 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { width:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     import_react_aria_components41.Button,
     {
-      className: (0, import_system55.cn)(
+      className: (0, import_system57.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2488,13 +2516,13 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon4, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var _NumberField = (0, import_react34.forwardRef)(
   ({
     variant,
@@ -2506,7 +2534,7 @@ var _NumberField = (0, import_react34.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system56.useClassNames)({
+    const classNames2 = (0, import_system58.useClassNames)({
       component: "NumberField",
       size,
       variant
@@ -2519,8 +2547,8 @@ var _NumberField = (0, import_react34.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FieldBase, { as: import_react_aria_components42.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react_aria_components42.Group, { className: (0, import_system56.cn)("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FieldBase, { as: import_react_aria_components42.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_aria_components42.Group, { className: (0, import_system58.cn)("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2528,7 +2556,7 @@ var _NumberField = (0, import_react34.forwardRef)(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         _Input,
         {
           ref,
@@ -2537,7 +2565,7 @@ var _NumberField = (0, import_react34.forwardRef)(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2552,7 +2580,7 @@ var _NumberField = (0, import_react34.forwardRef)(
 // src/Radio/Radio.tsx
 var import_react36 = require("react");
 var import_react_aria_components44 = require("react-aria-components");
-var import_system58 = require("@marigold/system");
+var import_system60 = require("@marigold/system");
 
 // src/Radio/Context.ts
 var import_react35 = require("react");
@@ -2563,8 +2591,8 @@ var useRadioGroupContext = () => (0, import_react35.useContext)(RadioGroupContex
 
 // src/Radio/RadioGroup.tsx
 var import_react_aria_components43 = require("react-aria-components");
-var import_system57 = require("@marigold/system");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_system59 = require("@marigold/system");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size,
@@ -2580,7 +2608,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = (0, import_system57.useClassNames)({ component: "Radio", variant, size });
+  const classNames2 = (0, import_system59.useClassNames)({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2588,7 +2616,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     FieldBase,
     {
       as: import_react_aria_components43.RadioGroup,
@@ -2599,18 +2627,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system57.cn)(
+          className: (0, import_system59.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2618,33 +2646,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
   "div",
   {
-    className: (0, import_system58.cn)(
+    className: (0, import_system60.cn)(
       "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__ */ (0, import_jsx_runtime69.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Dot, {}) : null
   }
 );
 var _Radio = (0, import_react36.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = (0, import_system58.useClassNames)({
+    const classNames2 = (0, import_system60.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       import_react_aria_components44.Radio,
       {
         ref,
-        className: (0, import_system58.cn)(
+        className: (0, import_system60.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2653,18 +2681,18 @@ var _Radio = (0, import_react36.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system58.cn)(
+              className: (0, import_system60.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: classNames2.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -2675,7 +2703,7 @@ _Radio.Group = _RadioGroup;
 // src/SearchField/SearchField.tsx
 var import_react37 = require("react");
 var import_react_aria_components45 = require("react-aria-components");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var _SearchField = (0, import_react37.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
@@ -2685,7 +2713,7 @@ var _SearchField = (0, import_react37.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       SearchInput,
       {
         ref,
@@ -2698,8 +2726,8 @@ var _SearchField = (0, import_react37.forwardRef)(
 // src/Select/Select.tsx
 var import_react38 = require("react");
 var import_react_aria_components46 = require("react-aria-components");
-var import_system59 = require("@marigold/system");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_system61 = require("@marigold/system");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var _Select = (0, import_react38.forwardRef)(
   ({
     disabled,
@@ -2720,22 +2748,22 @@ var _Select = (0, import_react38.forwardRef)(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = (0, import_system59.useClassNames)({ component: "Select", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(FieldBase, { isOpen: true, as: import_react_aria_components46.Select, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    const classNames2 = (0, import_system61.useClassNames)({ component: "Select", variant, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(FieldBase, { isOpen: true, as: import_react_aria_components46.Select, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
         import_react_aria_components46.Button,
         {
-          className: (0, import_system59.cn)(
+          className: (0, import_system61.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react_aria_components46.SelectValue, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronDown, { className: "size-4" })
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react_aria_components46.SelectValue, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronDown, { className: "size-4" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -2745,7 +2773,7 @@ _Select.Section = _ListBox.Section;
 // src/SelectList/SelectList.tsx
 var import_react41 = require("react");
 var import_react_aria_components48 = require("react-aria-components");
-var import_system61 = require("@marigold/system");
+var import_system63 = require("@marigold/system");
 
 // src/SelectList/Context.ts
 var import_react39 = require("react");
@@ -2757,21 +2785,21 @@ var useSelectListContext = () => (0, import_react39.useContext)(SelectListContex
 // src/SelectList/SelectListItem.tsx
 var import_react40 = require("react");
 var import_react_aria_components47 = require("react-aria-components");
-var import_system60 = require("@marigold/system");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_system62 = require("@marigold/system");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var _SelectListItem = (0, import_react40.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       import_react_aria_components47.GridListItem,
       {
         textValue,
         ...props,
-        className: (0, import_system60.cn)("flex items-center", classNames2 == null ? void 0 : classNames2.option),
+        className: (0, import_system62.cn)("flex items-center", classNames2 == null ? void 0 : classNames2.option),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FieldGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Checkbox, { slot: "selection" }) }),
+        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(FieldGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(_Checkbox, { slot: "selection" }) }),
           children
         ] })
       }
@@ -2780,20 +2808,20 @@ var _SelectListItem = (0, import_react40.forwardRef)(
 );
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var _SelectList = (0, import_react41.forwardRef)(
   ({ onChange, ...rest }, ref) => {
-    const classNames2 = (0, import_system61.useClassNames)({ component: "ListBox" });
+    const classNames2 = (0, import_system63.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       import_react_aria_components48.GridList,
       {
         ...props,
         ref,
-        className: (0, import_system61.cn)(
+        className: (0, import_system63.cn)(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -2805,19 +2833,19 @@ var _SelectList = (0, import_react41.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system62 = require("@marigold/system");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_system64 = require("@marigold/system");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
   "div",
   {
     ...props,
-    className: (0, import_system62.cn)(["sticky h-[--height] overflow-auto", import_system62.width[width]]),
-    style: (0, import_system62.createVar)({ height }),
+    className: (0, import_system64.cn)(["sticky h-[--height] overflow-auto", import_system64.width[width]]),
+    style: (0, import_system64.createVar)({ height }),
     children
   }
 );
@@ -2825,8 +2853,8 @@ var Scrollable = ({
 // src/Slider/Slider.tsx
 var import_react42 = require("react");
 var import_react_aria_components49 = require("react-aria-components");
-var import_system63 = require("@marigold/system");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_system65 = require("@marigold/system");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var _Slider = (0, import_react42.forwardRef)(
   ({
     thumbLabels,
@@ -2836,7 +2864,7 @@ var _Slider = (0, import_react42.forwardRef)(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system63.useClassNames)({
+    const classNames2 = (0, import_system65.useClassNames)({
       component: "Slider",
       variant,
       size
@@ -2845,27 +2873,27 @@ var _Slider = (0, import_react42.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
       import_react_aria_components49.Slider,
       {
-        className: (0, import_system63.cn)(
+        className: (0, import_system65.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          import_system63.width[width]
+          import_system65.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system63.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(_Label, { children: props.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system65.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             import_react_aria_components49.SliderTrack,
             {
-              className: (0, import_system63.cn)("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+              className: (0, import_system65.cn)("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                 import_react_aria_components49.SliderThumb,
                 {
-                  className: (0, import_system63.cn)("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: (0, import_system65.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2880,30 +2908,29 @@ var _Slider = (0, import_react42.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ...props, role: "separator", className: "grow" });
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system64 = require("@marigold/system");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_system66 = require("@marigold/system");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
   stretch = false,
-  orientation,
   alignX,
   alignY,
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
-      className: (0, import_system64.cn)(
+      className: (0, import_system66.cn)(
         "flex flex-col",
-        import_system64.gapSpace[space],
-        alignX && ((_b = (_a = import_system64.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system64.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system66.gapSpace[space],
+        alignX && ((_b = (_a = import_system66.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system66.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -2915,8 +2942,8 @@ var Stack = ({
 // src/Switch/Switch.tsx
 var import_react43 = require("react");
 var import_react_aria_components50 = require("react-aria-components");
-var import_system65 = require("@marigold/system");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_system67 = require("@marigold/system");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var _Switch = (0, import_react43.forwardRef)(
   ({
     variant,
@@ -2928,37 +2955,37 @@ var _Switch = (0, import_react43.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system65.useClassNames)({ component: "Switch", size, variant });
+    const classNames2 = (0, import_system67.useClassNames)({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
       import_react_aria_components50.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system65.cn)(
-          import_system65.width[width],
+        className: (0, import_system67.cn)(
+          import_system67.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             "div",
             {
-              className: (0, import_system65.cn)(
+              className: (0, import_system67.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 "div",
                 {
-                  className: (0, import_system65.cn)(
+                  className: (0, import_system67.cn)(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2980,7 +3007,7 @@ var _Switch = (0, import_react43.forwardRef)(
 var import_react51 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system72 = require("@marigold/system");
+var import_system74 = require("@marigold/system");
 
 // src/Table/Context.tsx
 var import_react44 = require("react");
@@ -2989,10 +3016,10 @@ var useTableContext = () => (0, import_react44.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -3000,8 +3027,8 @@ var import_react45 = require("react");
 var import_focus2 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils3 = require("@react-aria/utils");
-var import_system66 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_system68 = require("@marigold/system");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
   const ref = (0, import_react45.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -3023,12 +3050,12 @@ var TableCell = ({ cell, align = "left" }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus2.useFocusRing)();
-  const stateProps = (0, import_system66.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  const stateProps = (0, import_system68.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system66.cn)(classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system68.cn)(classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils3.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
@@ -3042,7 +3069,7 @@ var import_react46 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils4 = require("@react-aria/utils");
-var import_system67 = require("@marigold/system");
+var import_system69 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3065,7 +3092,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
   const ref = (0, import_react46.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3081,15 +3108,15 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system67.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  const stateProps = (0, import_system69.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system67.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system69.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils4.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -3101,9 +3128,9 @@ var import_interactions = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils6 = require("@react-aria/utils");
 var import_icons3 = require("@marigold/icons");
-var import_system68 = require("@marigold/system");
-var import_system69 = require("@marigold/system");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_system70 = require("@marigold/system");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
   width = "auto",
@@ -3121,22 +3148,22 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system68.useStateProps)({
+  const stateProps = (0, import_system70.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system68.cn)("cursor-default", import_system69.width[width], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system70.cn)("cursor-default", import_system71.width[width], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils6.mergeProps)(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__ */ (0, import_jsx_runtime82.jsx)(import_icons3.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_icons3.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_icons3.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__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3144,10 +3171,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     "thead",
     {
       ...rowGroupProps,
@@ -3160,12 +3187,12 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 var import_react48 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = (0, import_react48.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3174,13 +3201,13 @@ var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils7 = require("@react-aria/utils");
-var import_system70 = require("@marigold/system");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_system72 = require("@marigold/system");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react49.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system70.useClassNames)({
+  const classNames2 = (0, import_system72.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3198,18 +3225,18 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system70.useStateProps)({
+  const stateProps = (0, import_system72.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system70.cn)(
+      className: (0, import_system72.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3228,8 +3255,8 @@ var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils8 = require("@react-aria/utils");
-var import_system71 = require("@marigold/system");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_system73 = require("@marigold/system");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto",
@@ -3247,29 +3274,29 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system71.useStateProps)({
+  const stateProps = (0, import_system73.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system71.cn)(import_system71.width[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system73.cn)(import_system73.width[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils8.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size,
-  stretch,
+  stretch = false,
   selectionMode = "none",
   disableKeyboardNavigation = false,
   stickyHeader,
@@ -3287,21 +3314,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system72.useClassNames)({
+  const classNames2 = (0, import_system74.useClassNames)({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system72.cn)(
+          className: (0, import_system74.cn)(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3309,10 +3336,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(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__ */ (0, import_jsx_runtime87.jsx)(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3320,7 +3347,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3331,12 +3358,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(TableBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(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__ */ (0, import_jsx_runtime87.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3360,8 +3387,8 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var Text2 = ({
   variant,
   size,
@@ -3374,27 +3401,27 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system73.useTheme)();
-  const classNames2 = (0, import_system73.useClassNames)({
+  const theme = (0, import_system75.useTheme)();
+  const classNames2 = (0, import_system75.useClassNames)({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     "p",
     {
       ...props,
-      className: (0, import_system73.cn)(
+      className: (0, import_system75.cn)(
         "text-[--color] outline-[--outline]",
         classNames2,
-        fontStyle && import_system73.textStyle[fontStyle],
-        align && import_system73.textAlign[align],
-        cursor && import_system73.cursorStyle[cursor],
-        weight && import_system73.fontWeight[weight],
-        fontSize && import_system73.textSize[fontSize]
+        fontStyle && import_system75.textStyle[fontStyle],
+        align && import_system75.textAlign[align],
+        cursor && import_system75.cursorStyle[cursor],
+        weight && import_system75.fontWeight[weight],
+        fontSize && import_system75.textSize[fontSize]
       ),
-      style: (0, import_system73.createVar)({
-        color: color && (0, import_system73.getColor)(
+      style: (0, import_system75.createVar)({
+        color: color && (0, import_system75.getColor)(
           theme,
           color,
           color
@@ -3409,8 +3436,8 @@ var Text2 = ({
 // src/TextArea/TextArea.tsx
 var import_react52 = require("react");
 var import_react_aria_components51 = require("react-aria-components");
-var import_system74 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_system76 = require("@marigold/system");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var _TextArea = (0, import_react52.forwardRef)(
   ({
     variant,
@@ -3422,7 +3449,7 @@ var _TextArea = (0, import_react52.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system74.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system76.useClassNames)({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3430,14 +3457,14 @@ var _TextArea = (0, import_react52.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(FieldBase, { as: import_react_aria_components51.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react_aria_components51.TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FieldBase, { as: import_react_aria_components51.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_react_aria_components51.TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 var import_react53 = require("react");
 var import_react_aria_components52 = require("react-aria-components");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var _TextField = (0, import_react53.forwardRef)(
   ({
     variant,
@@ -3455,18 +3482,18 @@ var _TextField = (0, import_react53.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system75 = require("@marigold/system");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_system77 = require("@marigold/system");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
   equalHeight = false,
-  tilesWidth,
+  tilesWidth = "250px",
   children,
   ...props
 }) => {
@@ -3474,17 +3501,17 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system75.cn)(
+      className: (0, import_system77.cn)(
         "grid",
-        import_system75.gapSpace[space],
+        import_system77.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system75.createVar)({ column, tilesWidth }),
+      style: (0, import_system77.createVar)({ column, tilesWidth }),
       children
     }
   );
@@ -3492,11 +3519,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_react_aria_components54 = require("react-aria-components");
-var import_system76 = require("@marigold/system");
+var import_system78 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react_aria_components53 = require("react-aria-components");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3510,26 +3537,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_aria_components53.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components53.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = (0, import_system76.useClassNames)({ component: "Tooltip", variant, size });
+  const classNames2 = (0, import_system78.useClassNames)({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     import_react_aria_components54.Tooltip,
     {
       ...props,
-      className: (0, import_system76.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system78.cn)("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_aria_components54.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components54.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3542,10 +3569,10 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
 var import_react54 = require("react");
-var import_system77 = require("@marigold/system");
-var import_jsx_runtime94 = require("react/jsx-runtime");
-var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
-  import_system77.SVG,
+var import_system79 = require("@marigold/system");
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  import_system79.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3554,13 +3581,13 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_5_",
           d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3573,12 +3600,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_18_",
           d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3591,12 +3618,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_19_",
           d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3609,12 +3636,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_20_",
           d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3627,12 +3654,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_21_",
           d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3645,12 +3672,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_22_",
           d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3663,12 +3690,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_23_",
           d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3681,12 +3708,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_24_",
           d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3699,12 +3726,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_25_",
           d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3717,12 +3744,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_26_",
           d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3735,12 +3762,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         "path",
         {
           id: "XMLID_27_",
           d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3759,7 +3786,7 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 
 // src/Tabs/Tabs.tsx
 var import_react_aria_components58 = require("react-aria-components");
-var import_system80 = require("@marigold/system");
+var import_system82 = require("@marigold/system");
 
 // src/Tabs/Context.ts
 var import_react55 = require("react");
@@ -3768,15 +3795,15 @@ var useTabContext = () => (0, import_react55.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
 var import_react_aria_components55 = require("react-aria-components");
-var import_system78 = require("@marigold/system");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_system80 = require("@marigold/system");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     import_react_aria_components55.Tab,
     {
       ...props,
-      className: (0, import_system78.cn)(
+      className: (0, import_system80.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3787,15 +3814,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 var import_react_aria_components56 = require("react-aria-components");
-var import_system79 = require("@marigold/system");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_system81 = require("@marigold/system");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     import_react_aria_components56.TabList,
     {
       ...props,
-      className: (0, import_system79.cn)("flex", import_system79.gapSpace[space], classNames2.tabsList),
+      className: (0, import_system81.cn)("flex", import_system81.gapSpace[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3803,25 +3830,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 var import_react_aria_components57 = require("react-aria-components");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_react_aria_components57.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_aria_components57.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = (0, import_system80.useClassNames)({
+  const classNames2 = (0, import_system82.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components58.Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react_aria_components58.Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -3872,7 +3899,6 @@ var import_react_aria_components59 = require("react-aria-components");
   List,
   MarigoldProvider,
   Menu,
-  Message,
   Modal,
   Multiselect,
   NumberField,
@@ -3883,6 +3909,7 @@ var import_react_aria_components59 = require("react-aria-components");
   RouterProvider,
   Scrollable,
   SearchField,
+  SectionMessage,
   Select,
   SelectList,
   Slider,