@marigold/components 1.0.0-beta.0 → 1.1.0

package/dist/index.js

@@ -85,6 +85,7 @@ __export(src_exports, {
   SSRProvider: () => import_ssr.SSRProvider,
   Select: () => Select,
   Slider: () => Slider,
+  Split: () => Split,
   Stack: () => Stack,
   Switch: () => Switch,
   Table: () => Table,
@@ -94,8 +95,6 @@ __export(src_exports, {
   ThemeProvider: () => import_system26.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => Tooltip,
-  TooltipContext: () => TooltipContext,
-  TooltipTrigger: () => TooltipTrigger,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   useCheckboxGroupContext: () => useCheckboxGroupContext,
@@ -397,7 +396,6 @@ var IndeterminateMark = () => /* @__PURE__ */ import_react10.default.createEleme
 }));
 var Icon = (_a) => {
   var _b = _a, { css, checked, indeterminate } = _b, props = __objRest(_b, ["css", "checked", "indeterminate"]);
-  const icon = indeterminate ? /* @__PURE__ */ import_react10.default.createElement(IndeterminateMark, null) : /* @__PURE__ */ import_react10.default.createElement(CheckMark, null);
   return /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues({
     "aria-hidden": "true",
     __baseCSS: {
@@ -412,7 +410,7 @@ var Icon = (_a) => {
       p: 1
     },
     css
-  }, props), checked ? icon : null);
+  }, props), indeterminate ? /* @__PURE__ */ import_react10.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react10.default.createElement(CheckMark, null) : null);
 };
 var Checkbox = (_a) => {
   var _b = _a, {
@@ -492,7 +490,7 @@ var Checkbox = (_a) => {
     checked: inputProps.checked,
     indeterminate,
     css: styles.checkbox
-  }, stateProps)), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues({
+  }, stateProps)), props.children && /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
 };
@@ -868,7 +866,7 @@ var Divider = (_a) => {
   var _b = _a, { variant } = _b, props = __objRest(_b, ["variant"]);
   const { separatorProps } = (0, import_separator.useSeparator)(props);
   const styles = (0, import_system13.useComponentStyles)("Divider", { variant });
-  return /* @__PURE__ */ import_react23.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react23.default.createElement(import_system13.Box, __spreadValues(__spreadValues({
     css: styles
   }, props), separatorProps));
 };
@@ -900,7 +898,12 @@ var Image = (_a) => {
 
 // src/Inline/Inline.tsx
 var import_react26 = __toESM(require("react"));
-var ALIGNMENT2 = {
+var ALIGNMENT_X = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var ALIGNMENT_Y = {
   top: "flex-start",
   center: "center",
   bottom: "flex-end"
@@ -908,17 +911,23 @@ var ALIGNMENT2 = {
 var Inline = (_a) => {
   var _b = _a, {
     space = "none",
-    align = "center",
+    alignX = "left",
+    alignY = "center",
     children
   } = _b, props = __objRest(_b, [
     "space",
-    "align",
+    "alignX",
+    "alignY",
     "children"
   ]);
   return /* @__PURE__ */ import_react26.default.createElement(import_system.Box, __spreadValues({
-    __baseCSS: { gap: space, flexWrap: "wrap" },
-    display: "inline-flex",
-    alignItems: ALIGNMENT2[align]
+    css: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: space,
+      alignItems: ALIGNMENT_Y[alignY],
+      justifyContent: ALIGNMENT_X[alignX]
+    }
   }, props), children);
 };
 
@@ -1177,9 +1186,10 @@ var HelpText = (_a) => {
 
 // src/FieldBase/FieldBase.tsx
 var FieldBase = ({
+  children,
   variant,
   size,
-  children,
+  width = "100%",
   disabled,
   required,
   label,
@@ -1193,7 +1203,7 @@ var FieldBase = ({
 }) => {
   const hasHelpText = !!description || errorMessage && error;
   return /* @__PURE__ */ import_react35.default.createElement(import_system22.Box, {
-    css: { display: "flex", flexDirection: "column", width: "100%" }
+    css: { display: "flex", flexDirection: "column", width }
   }, label && /* @__PURE__ */ import_react35.default.createElement(Label, __spreadValues(__spreadValues({
     required,
     variant,
@@ -1261,20 +1271,22 @@ var StepButton = (_a) => {
 // src/NumberField/NumberField.tsx
 var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     disabled,
     required,
     readOnly,
     error,
-    variant,
-    size,
     hideStepper
   } = _b, rest = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "disabled",
     "required",
     "readOnly",
     "error",
-    "variant",
-    "size",
     "hideStepper"
   ]);
   const props = __spreadValues({
@@ -1321,7 +1333,8 @@ var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
     errorMessageProps,
     stateProps,
     variant,
-    size
+    size,
+    width
   }, /* @__PURE__ */ import_react37.default.createElement(import_system24.Box, __spreadValues(__spreadValues({
     "data-group": true,
     __baseCSS: {
@@ -1365,23 +1378,29 @@ function MarigoldProvider({
 }
 
 // src/Radio/Radio.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
+var import_interactions6 = require("@react-aria/interactions");
+var import_focus7 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
 var import_system28 = require("@marigold/system");
 
+// src/Radio/Context.ts
+var import_react39 = require("react");
+var RadioGroupContext = (0, import_react39.createContext)(null);
+var useRadioGroupContext = () => (0, import_react39.useContext)(RadioGroupContext);
+
 // src/Radio/RadioGroup.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_radio = require("@react-aria/radio");
 var import_radio2 = require("@react-stately/radio");
 var import_system27 = require("@marigold/system");
-var RadioGroupContext = import_react39.default.createContext(null);
-var useRadioGroupContext = () => (0, import_react39.useContext)(RadioGroupContext);
 var RadioGroup = (_a) => {
   var _b = _a, {
     children,
     orientation = "vertical",
     size,
     variant,
+    width,
     required,
     disabled,
     readOnly,
@@ -1391,6 +1410,7 @@ var RadioGroup = (_a) => {
     "orientation",
     "size",
     "variant",
+    "width",
     "required",
     "disabled",
     "readOnly",
@@ -1405,12 +1425,12 @@ var RadioGroup = (_a) => {
   const state = (0, import_radio2.useRadioGroupState)(props);
   const { radioGroupProps, labelProps } = (0, import_radio.useRadioGroup)(props, state);
   const styles = (0, import_system27.useComponentStyles)("RadioGroup", { variant, size }, { parts: ["container", "group"] });
-  return /* @__PURE__ */ import_react39.default.createElement(import_system27.Box, __spreadProps(__spreadValues({}, radioGroupProps), {
+  return /* @__PURE__ */ import_react40.default.createElement(import_system27.Box, __spreadProps(__spreadValues({}, radioGroupProps), {
     css: styles.container
-  }), props.label && /* @__PURE__ */ import_react39.default.createElement(Label, __spreadValues({
+  }), props.label && /* @__PURE__ */ import_react40.default.createElement(Label, __spreadValues({
     as: "span",
     required
-  }, labelProps), props.label), /* @__PURE__ */ import_react39.default.createElement(import_system27.Box, {
+  }, labelProps), props.label), /* @__PURE__ */ import_react40.default.createElement(import_system27.Box, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1420,17 +1440,15 @@ var RadioGroup = (_a) => {
       gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
     },
     css: styles.group
-  }, /* @__PURE__ */ import_react39.default.createElement(RadioGroupContext.Provider, {
-    value: __spreadValues({ variant, size, error }, state)
+  }, /* @__PURE__ */ import_react40.default.createElement(RadioGroupContext.Provider, {
+    value: __spreadValues({ variant, size, width, error }, state)
   }, children)));
 };
 
 // src/Radio/Radio.tsx
-var import_interactions6 = require("@react-aria/interactions");
-var import_focus7 = require("@react-aria/focus");
-var Dot = () => /* @__PURE__ */ import_react40.default.createElement("svg", {
+var Dot = () => /* @__PURE__ */ import_react41.default.createElement("svg", {
   viewBox: "0 0 6 6"
-}, /* @__PURE__ */ import_react40.default.createElement("circle", {
+}, /* @__PURE__ */ import_react41.default.createElement("circle", {
   fill: "currentColor",
   cx: "3",
   cy: "3",
@@ -1438,7 +1456,7 @@ var Dot = () => /* @__PURE__ */ import_react40.default.createElement("svg", {
 }));
 var Icon2 = (_a) => {
   var _b = _a, { checked, css } = _b, props = __objRest(_b, ["checked", "css"]);
-  return /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues({
+  return /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues({
     "aria-hidden": "true",
     __baseCSS: {
       width: 16,
@@ -1452,12 +1470,22 @@ var Icon2 = (_a) => {
       p: 4
     },
     css
-  }, props), checked ? /* @__PURE__ */ import_react40.default.createElement(Dot, null) : null);
+  }, props), checked ? /* @__PURE__ */ import_react41.default.createElement(Dot, null) : null);
 };
 var Radio = (_a) => {
-  var _b = _a, { disabled } = _b, props = __objRest(_b, ["disabled"]);
-  const _a2 = useRadioGroupContext(), { variant, size, error } = _a2, state = __objRest(_a2, ["variant", "size", "error"]);
-  const ref = (0, import_react40.useRef)(null);
+  var _b = _a, { width, disabled } = _b, props = __objRest(_b, ["width", "disabled"]);
+  const _a2 = useRadioGroupContext(), {
+    variant,
+    size,
+    error,
+    width: groupWidth
+  } = _a2, state = __objRest(_a2, [
+    "variant",
+    "size",
+    "error",
+    "width"
+  ]);
+  const ref = (0, import_react41.useRef)(null);
   const { inputProps } = (0, import_radio3.useRadio)(__spreadValues({ isDisabled: disabled }, props), state, ref);
   const styles = (0, import_system28.useComponentStyles)("Radio", { variant: variant || props.variant, size: size || props.size }, { parts: ["container", "label", "radio"] });
   const { hoverProps, isHovered } = (0, import_interactions6.useHover)({});
@@ -1470,16 +1498,17 @@ var Radio = (_a) => {
     readOnly: props.readOnly,
     error
   });
-  return /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
     as: "label",
     __baseCSS: {
       display: "flex",
       alignItems: "center",
       gap: "1ch",
-      position: "relative"
+      position: "relative",
+      width: width || groupWidth || "100%"
     },
     css: styles.container
-  }, hoverProps), stateProps), /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
+  }, hoverProps), stateProps), /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
     as: "input",
     ref,
     css: {
@@ -1492,17 +1521,17 @@ var Radio = (_a) => {
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
     }
-  }, inputProps), focusProps)), /* @__PURE__ */ import_react40.default.createElement(Icon2, __spreadValues({
+  }, inputProps), focusProps)), /* @__PURE__ */ import_react41.default.createElement(Icon2, __spreadValues({
     checked: inputProps.checked,
     css: styles.radio
-  }, stateProps)), /* @__PURE__ */ import_react40.default.createElement(import_system28.Box, __spreadValues({
+  }, stateProps)), /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
 };
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var import_button4 = require("@react-aria/button");
 var import_focus8 = require("@react-aria/focus");
 var import_i18n2 = require("@react-aria/i18n");
@@ -1514,27 +1543,27 @@ var import_utils8 = require("@react-aria/utils");
 var import_system32 = require("@marigold/system");
 
 // src/ListBox/ListBox.tsx
-var import_react44 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_utils7 = require("@react-aria/utils");
 var import_system31 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
 // src/ListBox/Context.ts
-var import_react41 = require("react");
-var ListBoxContext = (0, import_react41.createContext)({});
-var useListBoxContext = () => (0, import_react41.useContext)(ListBoxContext);
+var import_react42 = require("react");
+var ListBoxContext = (0, import_react42.createContext)({});
+var useListBoxContext = () => (0, import_react42.useContext)(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_listbox2 = require("@react-aria/listbox");
 var import_system30 = require("@marigold/system");
 
 // src/ListBox/ListBoxOption.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_listbox = require("@react-aria/listbox");
 var import_system29 = require("@marigold/system");
 var ListBoxOption = ({ item, state }) => {
-  const ref = (0, import_react42.useRef)(null);
+  const ref = (0, import_react43.useRef)(null);
   const { optionProps, isSelected, isDisabled, isFocused } = (0, import_listbox.useOption)({
     key: item.key
   }, state, ref);
@@ -1544,7 +1573,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ import_react42.default.createElement(import_system29.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react43.default.createElement(import_system29.Box, __spreadValues(__spreadValues({
     as: "li",
     ref,
     css: styles.option
@@ -1558,16 +1587,16 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, __spreadValues({
+  return /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, __spreadValues({
     as: "li",
     css: styles.section
-  }, itemProps), section.rendered && /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, __spreadValues({
+  }, itemProps), section.rendered && /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, __spreadValues({
     css: styles.sectionTitle
-  }, headingProps), section.rendered), /* @__PURE__ */ import_react43.default.createElement(import_system30.Box, __spreadValues({
+  }, headingProps), section.rendered), /* @__PURE__ */ import_react44.default.createElement(import_system30.Box, __spreadValues({
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list
-  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react43.default.createElement(ListBoxOption, {
+  }, groupProps), [...section.childNodes].map((node) => /* @__PURE__ */ import_react44.default.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
@@ -1575,25 +1604,25 @@ var ListBoxSection = ({ section, state }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = (0, import_react44.forwardRef)((_a, ref) => {
+var ListBox = (0, import_react45.forwardRef)((_a, ref) => {
   var _b = _a, { state, variant, size } = _b, props = __objRest(_b, ["state", "variant", "size"]);
   const innerRef = (0, import_utils7.useObjectRef)(ref);
   const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
   const styles = (0, import_system31.useComponentStyles)("ListBox", { variant, size }, { parts: ["container", "list", "option", "section", "sectionTitle"] });
-  return /* @__PURE__ */ import_react44.default.createElement(ListBoxContext.Provider, {
+  return /* @__PURE__ */ import_react45.default.createElement(ListBoxContext.Provider, {
     value: { styles }
-  }, /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, {
+  }, /* @__PURE__ */ import_react45.default.createElement(import_system31.Box, {
     css: styles.container
-  }, /* @__PURE__ */ import_react44.default.createElement(import_system31.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react45.default.createElement(import_system31.Box, __spreadValues({
     as: "ul",
     ref: innerRef,
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list
-  }, listBoxProps), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react44.default.createElement(ListBoxSection, {
+  }, listBoxProps), [...state.collection].map((item) => item.type === "section" ? /* @__PURE__ */ import_react45.default.createElement(ListBoxSection, {
     key: item.key,
     section: item,
     state
-  }) : /* @__PURE__ */ import_react44.default.createElement(ListBoxOption, {
+  }) : /* @__PURE__ */ import_react45.default.createElement(ListBoxOption, {
     key: item.key,
     item,
     state
@@ -1611,7 +1640,7 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ import_react45.default.createElement(import_system32.Box, {
+var Chevron = ({ css }) => /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   css,
@@ -1619,28 +1648,28 @@ var Chevron = ({ css }) => /* @__PURE__ */ import_react45.default.createElement(
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   strokeWidth: 2
-}, /* @__PURE__ */ import_react45.default.createElement("path", {
+}, /* @__PURE__ */ import_react46.default.createElement("path", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   d: "M19 9l-7 7-7-7"
 }));
 var Select = (_a) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     open,
     disabled,
     required,
-    error,
-    variant,
-    size,
-    css
+    error
   } = _b, rest = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "open",
     "disabled",
     "required",
-    "error",
-    "variant",
-    "size",
-    "css"
+    "error"
   ]);
   const formatMessage = (0, import_i18n2.useMessageFormatter)(messages);
   const props = __spreadValues({
@@ -1651,7 +1680,7 @@ var Select = (_a) => {
     placeholder: rest.placeholder || formatMessage("placeholder")
   }, rest);
   const state = (0, import_select2.useSelectState)(props);
-  const buttonRef = (0, import_react45.useRef)(null);
+  const buttonRef = (0, import_react46.useRef)(null);
   const {
     labelProps,
     triggerProps,
@@ -1662,7 +1691,7 @@ var Select = (_a) => {
   } = (0, import_select.useSelect)(props, state, buttonRef);
   const { buttonProps } = (0, import_button4.useButton)(__spreadValues({ isDisabled: disabled }, triggerProps), buttonRef);
   const { focusProps, isFocusVisible } = (0, import_focus8.useFocusRing)();
-  const overlayRef = (0, import_react45.useRef)(null);
+  const overlayRef = (0, import_react46.useRef)(null);
   const { overlayProps: positionProps } = (0, import_overlays8.useOverlayPosition)({
     targetRef: buttonRef,
     overlayRef,
@@ -1676,9 +1705,10 @@ var Select = (_a) => {
     focusVisible: isFocusVisible,
     expanded: state.isOpen
   });
-  return /* @__PURE__ */ import_react45.default.createElement(FieldBase, {
+  return /* @__PURE__ */ import_react46.default.createElement(FieldBase, {
     variant,
     size,
+    width,
     label: props.label,
     labelProps: __spreadValues({ as: "span" }, labelProps),
     description: props.description,
@@ -1689,13 +1719,13 @@ var Select = (_a) => {
     stateProps,
     disabled,
     required
-  }, /* @__PURE__ */ import_react45.default.createElement(import_select.HiddenSelect, {
+  }, /* @__PURE__ */ import_react46.default.createElement(import_select.HiddenSelect, {
     state,
     triggerRef: buttonRef,
     label: props.label,
     name: props.name,
     isDisabled: disabled
-  }), /* @__PURE__ */ import_react45.default.createElement(import_system32.Box, __spreadValues(__spreadValues({
+  }), /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, __spreadValues(__spreadValues({
     as: "button",
     __baseCSS: {
       display: "flex",
@@ -1706,29 +1736,29 @@ var Select = (_a) => {
     },
     css: styles.button,
     ref: buttonRef
-  }, (0, import_utils8.mergeProps)(buttonProps, focusProps)), stateProps), /* @__PURE__ */ import_react45.default.createElement(import_system32.Box, __spreadValues({
+  }, (0, import_utils8.mergeProps)(buttonProps, focusProps)), stateProps), /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, __spreadValues({
     css: {
       overflow: "hidden",
       whiteSpace: "nowrap"
     }
-  }, valueProps), state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react45.default.createElement(Chevron, {
+  }, valueProps), state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react46.default.createElement(Chevron, {
     css: styles.icon
-  })), /* @__PURE__ */ import_react45.default.createElement(Popover, __spreadValues({
+  })), /* @__PURE__ */ import_react46.default.createElement(Popover, __spreadValues({
     open: state.isOpen,
     onClose: state.close,
     dismissable: true,
     shouldCloseOnBlur: true,
     minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
     ref: overlayRef
-  }, positionProps), /* @__PURE__ */ import_react45.default.createElement(import_focus8.FocusScope, {
+  }, positionProps), /* @__PURE__ */ import_react46.default.createElement(import_focus8.FocusScope, {
     restoreFocus: true
-  }, /* @__PURE__ */ import_react45.default.createElement(import_overlays8.DismissButton, {
+  }, /* @__PURE__ */ import_react46.default.createElement(import_overlays8.DismissButton, {
     onDismiss: state.close
-  }), /* @__PURE__ */ import_react45.default.createElement(ListBox, __spreadValues({
+  }), /* @__PURE__ */ import_react46.default.createElement(ListBox, __spreadValues({
     state,
     variant,
     size
-  }, menuProps)), /* @__PURE__ */ import_react45.default.createElement(import_overlays8.DismissButton, {
+  }, menuProps)), /* @__PURE__ */ import_react46.default.createElement(import_overlays8.DismissButton, {
     onDismiss: state.close
   }))));
 };
@@ -1736,14 +1766,14 @@ Select.Option = import_collections2.Item;
 Select.Section = import_collections2.Section;
 
 // src/Slider/Slider.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_slider2 = require("@react-aria/slider");
 var import_slider3 = require("@react-stately/slider");
 var import_i18n3 = require("@react-aria/i18n");
 var import_system34 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
 var import_utils9 = require("@react-aria/utils");
 var import_system33 = require("@marigold/system");
@@ -1756,7 +1786,7 @@ var import_focus9 = require("@react-aria/focus");
 var Thumb = (_a) => {
   var _b = _a, { state, trackRef, styles } = _b, props = __objRest(_b, ["state", "trackRef", "styles"]);
   const { disabled } = props;
-  const inputRef = import_react46.default.useRef(null);
+  const inputRef = import_react47.default.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = (0, import_focus9.useFocusRing)();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
   const stateProps = (0, import_system33.useStateProps)({
@@ -1769,19 +1799,19 @@ var Thumb = (_a) => {
     inputRef,
     isDisabled: disabled
   }, state);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ import_react46.default.createElement(import_system.Box, {
+  return /* @__PURE__ */ import_react47.default.createElement(import_system.Box, {
     __baseCSS: {
       position: "absolute",
       top: 16,
       transform: "translateX(-50%)",
       left: `${state.getThumbPercent(0) * 100}%`
     }
-  }, /* @__PURE__ */ import_react46.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({}, thumbProps), {
+  }, /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues(__spreadProps(__spreadValues({}, thumbProps), {
     __baseCSS: styles
-  }), stateProps), /* @__PURE__ */ import_react46.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react46.default.createElement(import_system.Box, __spreadValues({
+  }), stateProps), /* @__PURE__ */ import_react47.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues({
     as: "input",
     type: "range",
     ref: inputRef
@@ -1790,32 +1820,41 @@ var Thumb = (_a) => {
 
 // src/Slider/Slider.tsx
 var Slider = (_a) => {
-  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
+  var _b = _a, {
+    variant,
+    size,
+    width = "100%"
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "width"
+  ]);
   const { formatOptions } = props;
-  const trackRef = (0, import_react47.useRef)(null);
+  const trackRef = (0, import_react48.useRef)(null);
   const numberFormatter = (0, import_i18n3.useNumberFormatter)(formatOptions);
   const state = (0, import_slider3.useSliderState)(__spreadProps(__spreadValues({}, props), { numberFormatter }));
   const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)(__spreadValues({
     label: props.children
   }, props), state, trackRef);
   const styles = (0, import_system34.useComponentStyles)("Slider", { variant, size }, { parts: ["track", "thumb", "label", "output"] });
-  return /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       display: "flex",
       flexDirection: "column",
-      touchAction: "none"
+      touchAction: "none",
+      width
     }
-  }, groupProps), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, {
+  }, groupProps), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
     __baseCSS: { display: "flex", alignSelf: "stretch" }
-  }, props.children && /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadValues({
+  }, props.children && /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadValues({
     as: "label",
     __baseCSS: styles.label
-  }, labelProps), props.children), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadProps(__spreadValues({
+  }, labelProps), props.children), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadProps(__spreadValues({
     as: "output"
   }, outputProps), {
     __baseCSS: { flex: "1 0 auto", textAlign: "end" },
     css: styles.output
-  }), state.getThumbValueLabel(0))), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, trackProps), {
+  }), state.getThumbValueLabel(0))), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, trackProps), {
     ref: trackRef,
     __baseCSS: {
       position: "relative",
@@ -1823,9 +1862,9 @@ var Slider = (_a) => {
       width: "100%",
       cursor: props.disabled ? "not-allowed" : "pointer"
     }
-  }), /* @__PURE__ */ import_react47.default.createElement(import_system.Box, {
+  }), /* @__PURE__ */ import_react48.default.createElement(import_system.Box, {
     __baseCSS: styles.track
-  }), /* @__PURE__ */ import_react47.default.createElement(Thumb, {
+  }), /* @__PURE__ */ import_react48.default.createElement(Thumb, {
     state,
     trackRef,
     disabled: props.disabled,
@@ -1833,42 +1872,64 @@ var Slider = (_a) => {
   })));
 };
 
+// src/Split/Split.tsx
+var import_react49 = __toESM(require("react"));
+var import_system35 = require("@marigold/system");
+var Split = (props) => /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, __spreadProps(__spreadValues({}, props), {
+  role: "separator",
+  css: { flexGrow: 1 }
+}));
+
 // src/Stack/Stack.tsx
-var import_react48 = __toESM(require("react"));
-var ALIGNMENT3 = {
+var import_react50 = __toESM(require("react"));
+var ALIGNMENT_X2 = {
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
+var ALIGNMENT_Y2 = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
 var Stack = (_a) => {
   var _b = _a, {
+    children,
     space = "none",
-    align = "left",
-    children
+    alignX = "left",
+    alignY = "top",
+    stretch = false
   } = _b, props = __objRest(_b, [
+    "children",
     "space",
-    "align",
-    "children"
+    "alignX",
+    "alignY",
+    "stretch"
   ]);
-  return /* @__PURE__ */ import_react48.default.createElement(import_system.Box, __spreadProps(__spreadValues({}, props), {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: ALIGNMENT3[align],
-    p: "0",
-    css: { gap: space }
-  }), children);
+  return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues({
+    css: {
+      display: "flex",
+      flexDirection: "column",
+      p: 0,
+      gap: space,
+      alignItems: ALIGNMENT_X2[alignX],
+      justifyContent: ALIGNMENT_Y2[alignY],
+      blockSize: stretch ? "100%" : "auto"
+    }
+  }, props), children);
 };
 
 // src/Switch/Switch.tsx
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_focus10 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var Switch = (_a) => {
   var _b = _a, {
     variant,
     size,
+    width = "100%",
     checked,
     disabled,
     readOnly,
@@ -1876,12 +1937,13 @@ var Switch = (_a) => {
   } = _b, rest = __objRest(_b, [
     "variant",
     "size",
+    "width",
     "checked",
     "disabled",
     "readOnly",
     "defaultChecked"
   ]);
-  const ref = (0, import_react49.useRef)(null);
+  const ref = (0, import_react51.useRef)(null);
   const props = __spreadValues({
     isSelected: checked,
     isDisabled: disabled,
@@ -1891,24 +1953,25 @@ var Switch = (_a) => {
   const state = (0, import_toggle2.useToggleState)(props);
   const { inputProps } = (0, import_switch.useSwitch)(props, state, ref);
   const { isFocusVisible, focusProps } = (0, import_focus10.useFocusRing)();
-  const stateProps = (0, import_system35.useStateProps)({
+  const stateProps = (0, import_system36.useStateProps)({
     checked: state.isSelected,
     disabled,
     readOnly,
     focus: isFocusVisible
   });
-  const styles = (0, import_system35.useComponentStyles)("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
-  return /* @__PURE__ */ import_react49.default.createElement(import_system.Box, {
+  const styles = (0, import_system36.useComponentStyles)("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
+  return /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     as: "label",
     __baseCSS: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       gap: "1ch",
-      position: "relative"
+      position: "relative",
+      width
     },
     css: styles.container
-  }, /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as: "input",
     ref,
     css: {
@@ -1921,9 +1984,9 @@ var Switch = (_a) => {
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
     }
-  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react49.default.createElement(import_system.Box, {
+  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     css: styles.label
-  }, props.children), /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues({
+  }, props.children), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       position: "relative",
       width: 48,
@@ -1932,7 +1995,7 @@ var Switch = (_a) => {
       borderRadius: 20
     },
     css: styles.track
-  }, stateProps), /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues({
+  }, stateProps), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       display: "block",
       position: "absolute",
@@ -1954,233 +2017,350 @@ var Switch = (_a) => {
 };
 
 // src/Table/Table.tsx
-var import_react56 = __toESM(require("react"));
-var import_table6 = require("@react-aria/table");
-var import_table7 = require("@react-stately/table");
-var import_system41 = require("@marigold/system");
+var import_react61 = __toESM(require("react"));
+var import_table9 = require("@react-aria/table");
+var import_table10 = require("@react-stately/table");
+var import_system42 = require("@marigold/system");
+
+// src/Table/Context.tsx
+var import_react52 = require("react");
+var TableContext = (0, import_react52.createContext)({});
+var useTableContext = () => (0, import_react52.useContext)(TableContext);
+
+// src/Table/TableBody.tsx
+var import_react53 = __toESM(require("react"));
+var import_table = require("@react-aria/table");
+var TableBody = ({ children }) => {
+  const { rowGroupProps } = (0, import_table.useTableRowGroup)();
+  return /* @__PURE__ */ import_react53.default.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+};
 
 // src/Table/TableCell.tsx
-var import_react50 = __toESM(require("react"));
-var import_checkbox4 = require("@react-aria/checkbox");
+var import_react54 = __toESM(require("react"));
+var import_table2 = require("@react-aria/table");
 var import_focus11 = require("@react-aria/focus");
-var import_table = require("@react-aria/table");
 var import_utils10 = require("@react-aria/utils");
-var import_toggle3 = require("@react-stately/toggle");
-var import_system36 = require("@marigold/system");
-var TableCell = ({
-  item: cell,
-  state,
-  isSelectionCell,
-  css
-}) => {
-  const cellRef = (0, import_react50.useRef)(null);
-  const { gridCellProps } = (0, import_table.useTableCell)({ node: cell }, state, cellRef);
-  const { checkboxProps } = (0, import_table.useTableSelectionCheckbox)({ key: cell.parentKey }, state);
-  const inputRef = (0, import_react50.useRef)(null);
-  const { inputProps } = (0, import_checkbox4.useCheckbox)(checkboxProps, (0, import_toggle3.useToggleState)(checkboxProps), inputRef);
+var import_system37 = require("@marigold/system");
+var TableCell = ({ cell }) => {
+  const ref = (0, import_react54.useRef)(null);
+  const { state, styles } = useTableContext();
+  const disabled = state.disabledKeys.has(cell.parentKey);
+  const { gridCellProps } = (0, import_table2.useTableCell)({
+    node: cell
+  }, state, ref);
   const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
-  const stateProps = (0, import_system36.useStateProps)({ focus: isFocusVisible });
-  return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  const stateProps = (0, import_system37.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react54.default.createElement(import_system37.Box, __spreadValues(__spreadValues({
     as: "td",
-    ref: cellRef,
-    __baseCSS: {
-      textAlign: isSelectionCell ? "center" : "left"
-    },
-    css
-  }, (0, import_utils10.mergeProps)(gridCellProps, focusProps)), stateProps), isSelectionCell ? /* @__PURE__ */ import_react50.default.createElement("input", __spreadValues({}, inputProps)) : /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, cell.rendered));
+    ref,
+    css: styles.cell
+  }, (0, import_utils10.mergeProps)(gridCellProps, focusProps)), stateProps), cell.rendered);
 };
 
-// src/Table/TableColumnHeader.tsx
-var import_react52 = __toESM(require("react"));
-var import_checkbox5 = require("@react-aria/checkbox");
+// src/Table/TableCheckboxCell.tsx
+var import_react55 = __toESM(require("react"));
+var import_table3 = require("@react-aria/table");
 var import_focus12 = require("@react-aria/focus");
-var import_table2 = require("@react-aria/table");
 var import_utils11 = require("@react-aria/utils");
-var import_toggle4 = require("@react-stately/toggle");
-var import_system39 = require("@marigold/system");
-
-// src/Text/Text.tsx
-var import_react51 = __toESM(require("react"));
-var import_system37 = require("@marigold/system");
 var import_system38 = require("@marigold/system");
-var Text = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    align,
-    color,
-    fontSize,
-    cursor,
-    outline,
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "align",
-    "color",
-    "fontSize",
-    "cursor",
-    "outline",
-    "children"
+
+// src/Table/utils.ts
+var mapCheckboxProps = (_a) => {
+  var {
+    checkboxProps: _b
+  } = _a, _c = _b, {
+    isIndeterminate,
+    isSelected,
+    isDisabled,
+    defaultSelected
+  } = _c, rest = __objRest(_c, [
+    "isIndeterminate",
+    "isSelected",
+    "isDisabled",
+    "defaultSelected"
   ]);
-  const styles = (0, import_system37.useComponentStyles)("Text", {
-    variant,
-    size
-  });
-  return /* @__PURE__ */ import_react51.default.createElement(import_system38.Box, __spreadProps(__spreadValues({
-    as: "p"
-  }, props), {
-    css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
-  }), children);
+  const checkboxProps = __spreadValues({
+    disabled: isDisabled,
+    checked: isSelected,
+    defaultChecked: defaultSelected,
+    indeterminate: isIndeterminate
+  }, rest);
+  return { checkboxProps };
 };
 
-// src/Table/TableColumnHeader.tsx
-var TableColumnHeader = ({
-  item: column,
-  state,
-  isSelectionColumn,
-  css
-}) => {
-  const ref = (0, import_react52.useRef)(null);
-  const { columnHeaderProps } = (0, import_table2.useTableColumnHeader)({ node: column }, state, ref);
-  const { checkboxProps } = (0, import_table2.useTableSelectAllCheckbox)(state);
-  const inputRef = (0, import_react52.useRef)(null);
-  const { inputProps } = (0, import_checkbox5.useCheckbox)(checkboxProps, (0, import_toggle4.useToggleState)(checkboxProps), inputRef);
+// src/Table/TableCheckboxCell.tsx
+var TableCheckboxCell = ({ cell }) => {
+  const ref = (0, import_react55.useRef)(null);
+  const { state, styles } = useTableContext();
+  const disabled = state.disabledKeys.has(cell.parentKey);
+  const { gridCellProps } = (0, import_table3.useTableCell)({
+    node: cell
+  }, state, ref);
+  const { checkboxProps } = mapCheckboxProps((0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state));
   const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
-  const stateProps = (0, import_system39.useStateProps)({ focus: isFocusVisible });
-  return /* @__PURE__ */ import_react52.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  const stateProps = (0, import_system38.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react55.default.createElement(import_system38.Box, __spreadValues(__spreadValues({
+    as: "td",
+    ref,
+    __baseCSS: {
+      textAlign: "center",
+      verticalAlign: "middle",
+      lineHeight: 1
+    },
+    css: styles.cell
+  }, (0, import_utils11.mergeProps)(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ import_react55.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+};
+
+// src/Table/TableColumnHeader.tsx
+var import_react56 = __toESM(require("react"));
+var import_focus13 = require("@react-aria/focus");
+var import_interactions7 = require("@react-aria/interactions");
+var import_table4 = require("@react-aria/table");
+var import_utils13 = require("@react-aria/utils");
+var import_system39 = require("@marigold/system");
+var SortIndicator = ({
+  direction = "ascending",
+  visible
+}) => /* @__PURE__ */ import_react56.default.createElement(import_system39.Box, {
+  as: "span",
+  role: "presentation",
+  "aria-hidden": "true",
+  css: {
+    color: "currentColor",
+    paddingInlineStart: "0.5ch",
+    visibility: visible ? "visible" : "hidden"
+  }
+}, direction === "ascending" ? "\u25B2" : "\u25BC");
+var TableColumnHeader = ({ column }) => {
+  var _a, _b;
+  const ref = (0, import_react56.useRef)(null);
+  const { state, styles } = useTableContext();
+  const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)({
+    node: column
+  }, state, ref);
+  const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const stateProps = (0, import_system39.useStateProps)({
+    hover: isHovered,
+    focusVisible: isFocusVisible
+  });
+  return /* @__PURE__ */ import_react56.default.createElement(import_system39.Box, __spreadValues(__spreadValues({
     as: "th",
+    colSpan: column.colspan,
     ref,
-    __baseCSS: { textAlign: isSelectionColumn ? "center" : "left" },
-    css
-  }, (0, import_utils11.mergeProps)(columnHeaderProps, focusProps)), stateProps), isSelectionColumn ? /* @__PURE__ */ import_react52.default.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
-    ref: inputRef
-  })) : /* @__PURE__ */ import_react52.default.createElement(Text, {
-    size: "xxsmall"
-  }, column.rendered));
+    css: styles.header
+  }, (0, import_utils13.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react56.default.createElement(SortIndicator, {
+    direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
+    visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
+  }));
+};
+
+// src/Table/TableHeader.tsx
+var import_react57 = __toESM(require("react"));
+var import_table5 = require("@react-aria/table");
+var TableHeader = ({ children }) => {
+  const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
+  return /* @__PURE__ */ import_react57.default.createElement("thead", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react53 = __toESM(require("react"));
-var import_table3 = require("@react-aria/table");
-var TableHeaderRow = ({
-  item,
-  state,
-  children
-}) => {
-  const ref = (0, import_react53.useRef)(null);
-  const { rowProps } = (0, import_table3.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react53.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+var import_react58 = __toESM(require("react"));
+var import_table6 = require("@react-aria/table");
+var TableHeaderRow = ({ item, children }) => {
+  const { state } = useTableContext();
+  const ref = (0, import_react58.useRef)(null);
+  const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
+  return /* @__PURE__ */ import_react58.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
     ref
   }), children);
 };
 
 // src/Table/TableRow.tsx
-var import_react54 = __toESM(require("react"));
-var import_focus13 = require("@react-aria/focus");
-var import_table4 = require("@react-aria/table");
-var import_utils12 = require("@react-aria/utils");
+var import_react59 = __toESM(require("react"));
+var import_focus14 = require("@react-aria/focus");
+var import_interactions8 = require("@react-aria/interactions");
+var import_table7 = require("@react-aria/table");
+var import_utils14 = require("@react-aria/utils");
 var import_system40 = require("@marigold/system");
-var TableRow = ({ item, state, children, css }) => {
-  const ref = (0, import_react54.useRef)(null);
-  const isSelected = state.selectionManager.isSelected(item.key);
-  const { rowProps } = (0, import_table4.useTableRow)({
-    node: item
+var TableRow = ({ children, row }) => {
+  const ref = (0, import_react59.useRef)(null);
+  const { state, styles } = useTableContext();
+  const { rowProps, isPressed } = (0, import_table7.useTableRow)({
+    node: row
   }, state, ref);
-  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const disabled = state.disabledKeys.has(row.key);
+  const selected = state.selectionManager.isSelected(row.key);
+  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
+  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({ isDisabled: disabled });
   const stateProps = (0, import_system40.useStateProps)({
-    focus: isFocusVisible,
-    checked: isSelected
+    disabled,
+    selected,
+    hover: isHovered,
+    focusVisible: isFocusVisible,
+    active: isPressed
   });
-  return /* @__PURE__ */ import_react54.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react59.default.createElement(import_system40.Box, __spreadValues(__spreadValues({
     as: "tr",
     ref,
-    css
-  }, (0, import_utils12.mergeProps)(rowProps, focusProps)), stateProps), children);
+    css: styles.row
+  }, (0, import_utils14.mergeProps)(rowProps, focusProps, hoverProps)), stateProps), children);
 };
 
-// src/Table/TableRowGroup.tsx
-var import_react55 = __toESM(require("react"));
-var import_table5 = require("@react-aria/table");
-var TableRowGroup = ({
-  as: Element,
-  children
-}) => {
-  const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ import_react55.default.createElement(Element, __spreadValues({}, rowGroupProps), children);
+// src/Table/TableSelectAllCell.tsx
+var import_react60 = __toESM(require("react"));
+var import_focus15 = require("@react-aria/focus");
+var import_interactions9 = require("@react-aria/interactions");
+var import_table8 = require("@react-aria/table");
+var import_utils15 = require("@react-aria/utils");
+var import_system41 = require("@marigold/system");
+var TableSelectAllCell = ({ column }) => {
+  const ref = (0, import_react60.useRef)(null);
+  const { state, styles } = useTableContext();
+  const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)({
+    node: column
+  }, state, ref);
+  const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
+  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)();
+  const stateProps = (0, import_system41.useStateProps)({
+    hover: isHovered,
+    focusVisible: isFocusVisible
+  });
+  return /* @__PURE__ */ import_react60.default.createElement(import_system41.Box, __spreadValues(__spreadValues({
+    as: "th",
+    ref,
+    __baseCSS: {
+      textAlign: "center",
+      verticalAlign: "middle",
+      lineHeight: 1
+    },
+    css: styles.header
+  }, (0, import_utils15.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ import_react60.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/Table.tsx
 var Table = (_a) => {
-  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
-  const showSelectionCheckboxes = props.selectionMode === "multiple" && props.selectionBehavior !== "replace";
-  const state = (0, import_table7.useTableState)(__spreadProps(__spreadValues({}, props), {
-    showSelectionCheckboxes
+  var _b = _a, {
+    variant,
+    size,
+    stretch
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "stretch"
+  ]);
+  const tableRef = (0, import_react61.useRef)(null);
+  const state = (0, import_table10.useTableState)(__spreadProps(__spreadValues({}, props), {
+    showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
   }));
-  const ref = (0, import_react56.useRef)(null);
-  const { gridProps } = (0, import_table6.useTable)(props, state, ref);
-  const styles = (0, import_system41.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
-  return /* @__PURE__ */ import_react56.default.createElement(import_system.Box, __spreadValues({
+  const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
+  const styles = (0, import_system42.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  const { collection } = state;
+  return /* @__PURE__ */ import_react61.default.createElement(TableContext.Provider, {
+    value: { state, styles }
+  }, /* @__PURE__ */ import_react61.default.createElement(import_system42.Box, __spreadValues({
     as: "table",
-    ref,
-    __baseCSS: styles.table
-  }, gridProps), /* @__PURE__ */ import_react56.default.createElement(TableRowGroup, {
-    as: "thead"
-  }, state.collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react56.default.createElement(TableHeaderRow, {
+    ref: tableRef,
+    __baseCSS: {
+      borderCollapse: "collapse",
+      width: stretch ? "100%" : void 0
+    },
+    css: styles.table
+  }, gridProps), /* @__PURE__ */ import_react61.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react61.default.createElement(TableHeaderRow, {
     key: headerRow.key,
-    item: headerRow,
-    state
-  }, [...headerRow.childNodes].map((column) => /* @__PURE__ */ import_react56.default.createElement(TableColumnHeader, {
-    key: column.key,
-    item: column,
-    state,
-    isSelectionColumn: column.props.isSelectionCell,
-    css: styles.header
-  }))))), /* @__PURE__ */ import_react56.default.createElement(TableRowGroup, {
-    as: "tbody"
-  }, [...state.collection.body.childNodes].map((row) => /* @__PURE__ */ import_react56.default.createElement(TableRow, {
-    css: styles.row,
+    item: headerRow
+  }, [...headerRow.childNodes].map((column) => {
+    var _a2;
+    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableSelectAllCell, {
+      key: column.key,
+      column
+    }) : /* @__PURE__ */ import_react61.default.createElement(TableColumnHeader, {
+      key: column.key,
+      column
+    });
+  })))), /* @__PURE__ */ import_react61.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react61.default.createElement(TableRow, {
     key: row.key,
-    item: row,
-    state
-  }, [...row.childNodes].map((cell) => /* @__PURE__ */ import_react56.default.createElement(TableCell, {
-    key: cell.key,
-    item: cell,
-    state,
-    isSelectionCell: cell.props.isSelectionCell,
-    css: styles.cell
+    row
+  }, [...row.childNodes].map((cell) => {
+    var _a2;
+    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableCheckboxCell, {
+      key: cell.key,
+      cell
+    }) : /* @__PURE__ */ import_react61.default.createElement(TableCell, {
+      key: cell.key,
+      cell
+    });
   }))))));
 };
-Table.Body = import_table7.TableBody;
-Table.Cell = import_table7.Cell;
-Table.Column = import_table7.Column;
-Table.Header = import_table7.TableHeader;
-Table.Row = import_table7.Row;
+Table.Body = import_table10.TableBody;
+Table.Cell = import_table10.Cell;
+Table.Column = import_table10.Column;
+Table.Header = import_table10.TableHeader;
+Table.Row = import_table10.Row;
+
+// src/Text/Text.tsx
+var import_react62 = __toESM(require("react"));
+var import_system43 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
+var Text = (_a) => {
+  var _b = _a, {
+    variant,
+    size,
+    align,
+    color,
+    fontSize,
+    cursor,
+    outline,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "align",
+    "color",
+    "fontSize",
+    "cursor",
+    "outline",
+    "children"
+  ]);
+  const styles = (0, import_system43.useComponentStyles)("Text", {
+    variant,
+    size
+  });
+  return /* @__PURE__ */ import_react62.default.createElement(import_system44.Box, __spreadProps(__spreadValues({
+    as: "p"
+  }, props), {
+    css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
+  }), children);
+};
 
 // src/TextArea/TextArea.tsx
-var import_react57 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 var import_textfield = require("@react-aria/textfield");
-var import_system42 = require("@marigold/system");
-var import_interactions7 = require("@react-aria/interactions");
-var import_focus14 = require("@react-aria/focus");
+var import_system45 = require("@marigold/system");
+var import_interactions10 = require("@react-aria/interactions");
+var import_focus16 = require("@react-aria/focus");
 var TextArea = (_a) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     disabled,
     required,
     readOnly,
     error,
-    variant,
-    size
+    rows
   } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "disabled",
     "required",
     "readOnly",
     "error",
-    "variant",
-    "size"
+    "rows"
   ]);
   const { label, description, errorMessage } = props;
-  const ref = (0, import_react57.useRef)(null);
+  const ref = (0, import_react63.useRef)(null);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(__spreadValues({
     inputElementType: "textarea",
     isDisabled: disabled,
@@ -2188,17 +2368,17 @@ var TextArea = (_a) => {
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
   }, props), ref);
-  const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
-  const stateProps = (0, import_system42.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
+  const stateProps = (0, import_system45.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  const styles = (0, import_system42.useComponentStyles)("TextArea", { variant, size });
-  return /* @__PURE__ */ import_react57.default.createElement(FieldBase, {
+  const styles = (0, import_system45.useComponentStyles)("TextArea", { variant, size });
+  return /* @__PURE__ */ import_react63.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2209,57 +2389,61 @@ var TextArea = (_a) => {
     errorMessageProps,
     stateProps,
     variant,
-    size
-  }, /* @__PURE__ */ import_react57.default.createElement(import_system42.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    size,
+    width
+  }, /* @__PURE__ */ import_react63.default.createElement(import_system45.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
     css: styles,
-    ref
+    ref,
+    rows
   }, inputProps), focusProps), hoverProps), stateProps)));
 };
 
 // src/TextField/TextField.tsx
-var import_react58 = __toESM(require("react"));
-var import_interactions8 = require("@react-aria/interactions");
-var import_focus15 = require("@react-aria/focus");
+var import_react64 = __toESM(require("react"));
+var import_interactions11 = require("@react-aria/interactions");
+var import_focus17 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
-var import_system43 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 var TextField = (_a) => {
   var _b = _a, {
+    variant,
+    size,
+    width,
     disabled,
     required,
     readOnly,
-    error,
-    variant,
-    size
+    error
   } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "width",
     "disabled",
     "required",
     "readOnly",
-    "error",
-    "variant",
-    "size"
+    "error"
   ]);
   const { label, description, errorMessage, autoFocus } = props;
-  const ref = (0, import_react58.useRef)(null);
+  const ref = (0, import_react64.useRef)(null);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadValues({
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
   }, props), ref);
-  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)({
+  const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)({
     isTextInput: true,
     autoFocus
   });
-  const stateProps = (0, import_system43.useStateProps)({
+  const stateProps = (0, import_system46.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react58.default.createElement(FieldBase, {
+  return /* @__PURE__ */ import_react64.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2270,8 +2454,9 @@ var TextField = (_a) => {
     errorMessageProps,
     stateProps,
     variant,
-    size
-  }, /* @__PURE__ */ import_react58.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    size,
+    width
+  }, /* @__PURE__ */ import_react64.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     ref,
     variant,
     size
@@ -2279,10 +2464,10 @@ var TextField = (_a) => {
 };
 
 // src/Tiles/Tiles.tsx
-var import_react59 = __toESM(require("react"));
-var Tiles = import_react59.default.forwardRef(function Tiles2(_a, ref) {
+var import_react65 = __toESM(require("react"));
+var Tiles = import_react65.default.forwardRef((_a, ref) => {
   var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ import_react59.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react65.default.createElement(import_system.Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -2293,50 +2478,95 @@ var Tiles = import_react59.default.forwardRef(function Tiles2(_a, ref) {
 });
 
 // src/Tooltip/Tooltip.tsx
-var import_react61 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_utils13 = require("@react-aria/utils");
+var import_system47 = require("@marigold/system");
+
+// src/Tooltip/Context.ts
+var import_react66 = require("react");
+var TooltipContext = (0, import_react66.createContext)({});
+var useTooltipContext = () => (0, import_react66.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react60 = __toESM(require("react"));
-var import_focus16 = require("@react-aria/focus");
+var import_react67 = __toESM(require("react"));
+var import_focus18 = require("@react-aria/focus");
+var import_overlays9 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
-var TooltipContext = import_react60.default.createContext({});
 var TooltipTrigger = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [trigger, tooltip] = import_react60.default.Children.toArray(children);
+  var _b = _a, {
+    disabled,
+    open,
+    delay = 1e3,
+    placement = "top",
+    children
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "open",
+    "delay",
+    "placement",
+    "children"
+  ]);
+  const [tooltipTrigger, tooltip] = import_react67.default.Children.toArray(children);
+  const props = __spreadProps(__spreadValues({}, rest), {
+    isDisabled: disabled,
+    isOpen: open,
+    delay,
+    placement
+  });
+  const tooltipTriggerRef = (0, import_react67.useRef)(null);
+  const overlayRef = (0, import_react67.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
-  const tooltipTriggerRef = (0, import_react60.useRef)();
-  const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)({}, state, tooltipTriggerRef);
-  return /* @__PURE__ */ import_react60.default.createElement(import_focus16.FocusableProvider, __spreadProps(__spreadValues({}, triggerProps), {
+  const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(props, state, tooltipTriggerRef);
+  const {
+    overlayProps: positionProps,
+    placement: overlayPlacement,
+    arrowProps
+  } = (0, import_overlays9.useOverlayPosition)({
+    placement: props.placement,
+    targetRef: tooltipTriggerRef,
+    offset: props.offset,
+    crossOffset: props.crossOffset,
+    isOpen: state.isOpen,
+    overlayRef
+  });
+  return /* @__PURE__ */ import_react67.default.createElement(import_focus18.FocusableProvider, __spreadValues({
     ref: tooltipTriggerRef
-  }), trigger, state.isOpen && /* @__PURE__ */ import_react60.default.createElement(TooltipContext.Provider, {
-    value: __spreadValues({
-      state
-    }, tooltipProps)
-  }, tooltip));
+  }, triggerProps), tooltipTrigger, /* @__PURE__ */ import_react67.default.createElement(TooltipContext.Provider, {
+    value: __spreadValues(__spreadValues({
+      state,
+      overlayRef,
+      arrowProps,
+      placement: overlayPlacement
+    }, tooltipProps), positionProps)
+  }, /* @__PURE__ */ import_react67.default.createElement(Overlay, {
+    open: state.isOpen
+  }, tooltip)));
 };
 
 // src/Tooltip/Tooltip.tsx
-var Tooltip = (_a) => {
-  var _b = _a, {
-    variant = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "children"
-  ]);
-  const _a2 = (0, import_react61.useContext)(TooltipContext), { state } = _a2, tooltipProviderProps = __objRest(_a2, ["state"]);
-  const mergedProps = (0, import_utils13.mergeProps)(props, tooltipProviderProps);
-  const { tooltipProps } = (0, import_tooltip3.useTooltip)(mergedProps, state);
-  return /* @__PURE__ */ import_react61.default.createElement(import_system.Box, __spreadValues({
-    position: "relative"
-  }, tooltipProps), /* @__PURE__ */ import_react61.default.createElement(import_system.Box, __spreadValues({
-    position: "absolute",
-    variant: `tooltip.${variant}`
-  }, mergedProps), children));
+var Tooltip = ({ children, variant, size }) => {
+  const _a = useTooltipContext(), { arrowProps, state, overlayRef, placement } = _a, rest = __objRest(_a, ["arrowProps", "state", "overlayRef", "placement"]);
+  const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
+  const styles = (0, import_system47.useComponentStyles)("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
+  return /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+    ref: overlayRef,
+    css: styles.container,
+    "data-placement": placement
+  }), /* @__PURE__ */ import_react68.default.createElement("div", null, children), /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, __spreadProps(__spreadValues({}, arrowProps), {
+    __baseCSS: {
+      position: "absolute",
+      height: 0,
+      width: 0,
+      borderStyle: "solid",
+      borderLeftColor: "transparent",
+      borderRightColor: "transparent",
+      borderBottomColor: "transparent"
+    },
+    css: styles.arrow
+  })));
 };
+Tooltip.Trigger = TooltipTrigger;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Aside,
@@ -2373,6 +2603,7 @@ var Tooltip = (_a) => {
   SSRProvider,
   Select,
   Slider,
+  Split,
   Stack,
   Switch,
   Table,
@@ -2382,8 +2613,6 @@ var Tooltip = (_a) => {
   ThemeProvider,
   Tiles,
   Tooltip,
-  TooltipContext,
-  TooltipTrigger,
   Underlay,
   VisuallyHidden,
   useCheckboxGroupContext,