@marigold/components 1.0.1 → 1.2.0

package/dist/index.mjs

@@ -225,10 +225,11 @@ var Center = (_a) => {
 };
 
 // src/Checkbox/Checkbox.tsx
-import React10 from "react";
+import React10, { forwardRef as forwardRef2 } from "react";
 import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
+import { useObjectRef } from "@react-aria/utils";
 import { useToggleState } from "@react-stately/toggle";
 import {
   Box as Box6,
@@ -360,7 +361,7 @@ var Icon = (_a) => {
     css
   }, props), indeterminate ? /* @__PURE__ */ React10.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React10.createElement(CheckMark, null) : null);
 };
-var Checkbox = (_a) => {
+var Checkbox = forwardRef2((_a, ref) => {
   var _b = _a, {
     size,
     variant,
@@ -382,7 +383,7 @@ var Checkbox = (_a) => {
     "required",
     "error"
   ]);
-  const ref = React10.useRef(null);
+  const inputRef = useObjectRef(ref);
   const checkboxProps = {
     isIndeterminate: indeterminate,
     isDisabled: disabled,
@@ -393,14 +394,17 @@ var Checkbox = (_a) => {
   const groupState = useCheckboxGroupContext();
   const { inputProps } = groupState ? useCheckboxGroupItem(__spreadProps(__spreadValues(__spreadValues({}, props), checkboxProps), {
     value: props.value
-  }), groupState, ref) : useCheckbox(__spreadValues(__spreadValues({
+  }), groupState, inputRef) : useCheckbox(__spreadValues(__spreadValues({
     isSelected: checked,
     defaultSelected: defaultChecked
   }, checkboxProps), props), useToggleState(__spreadValues({
     isSelected: checked,
     defaultSelected: defaultChecked
-  }, props)), ref);
-  const styles = useComponentStyles6("Checkbox", { variant: (groupState == null ? void 0 : groupState.variant) || variant, size: (groupState == null ? void 0 : groupState.size) || size }, { parts: ["container", "label", "checkbox"] });
+  }, props)), inputRef);
+  const styles = useComponentStyles6("Checkbox", {
+    variant: (groupState == null ? void 0 : groupState.variant) || variant,
+    size: (groupState == null ? void 0 : groupState.size) || size
+  }, { parts: ["container", "label", "checkbox"] });
   const { hoverProps, isHovered } = useHover({});
   const { isFocusVisible, focusProps } = useFocusRing2();
   const stateProps = useStateProps2({
@@ -423,7 +427,7 @@ var Checkbox = (_a) => {
     css: styles.container
   }, hoverProps), stateProps), /* @__PURE__ */ React10.createElement(Box6, __spreadValues(__spreadValues({
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -441,7 +445,7 @@ var Checkbox = (_a) => {
   }, stateProps)), props.children && /* @__PURE__ */ React10.createElement(Box6, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
-};
+});
 
 // src/Columns/Columns.tsx
 import React11, { Children } from "react";
@@ -592,7 +596,7 @@ var Headline = (_a) => {
   ]);
   const styles = useComponentStyles9("Headline", {
     variant,
-    size: size != null ? size : `level-${level}`
+    size: size ?? `level-${level}`
   });
   return /* @__PURE__ */ React15.createElement(Box8, __spreadProps(__spreadValues({
     as: `h${level}`
@@ -612,10 +616,10 @@ import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 
 // src/Overlay/Modal.tsx
-import React17, { forwardRef as forwardRef2 } from "react";
+import React17, { forwardRef as forwardRef3 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
-import { mergeProps as mergeProps2, useObjectRef } from "@react-aria/utils";
+import { mergeProps as mergeProps2, useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/Overlay/Underlay.tsx
 import React16 from "react";
@@ -634,9 +638,9 @@ var Underlay = (_a) => {
 };
 
 // src/Overlay/Modal.tsx
-var Modal = forwardRef2((_a, ref) => {
+var Modal = forwardRef3((_a, ref) => {
   var _b = _a, { children, open, dismissable, keyboardDismissable, onClose } = _b, props = __objRest(_b, ["children", "open", "dismissable", "keyboardDismissable", "onClose"]);
-  const modalRef = useObjectRef(ref);
+  const modalRef = useObjectRef2(ref);
   const { overlayProps, underlayProps } = useOverlay({
     isOpen: open,
     onClose,
@@ -672,7 +676,7 @@ var Overlay = (_a) => {
   var _b = _a, {
     children,
     open = false,
-    container = document.body
+    container
   } = _b, props = __objRest(_b, [
     "children",
     "open",
@@ -687,10 +691,10 @@ var Overlay = (_a) => {
 };
 
 // src/Overlay/Popover.tsx
-import React19, { forwardRef as forwardRef3, useRef as useRef2 } from "react";
+import React19, { forwardRef as forwardRef4, useRef as useRef2 } from "react";
 import { useModal as useModal2, useOverlay as useOverlay2 } from "@react-aria/overlays";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-var Popover = forwardRef3((_a, ref) => {
+var Popover = forwardRef4((_a, ref) => {
   var _b = _a, {
     children,
     open,
@@ -893,9 +897,9 @@ var Inline = (_a) => {
 };
 
 // src/Input/Input.tsx
-import React26, { forwardRef as forwardRef4 } from "react";
+import React26, { forwardRef as forwardRef5 } from "react";
 import { Box as Box12, useComponentStyles as useComponentStyles15 } from "@marigold/system";
-var Input = forwardRef4((_a, ref) => {
+var Input = forwardRef5((_a, ref) => {
   var _b = _a, { variant, size, type = "text" } = _b, props = __objRest(_b, ["variant", "size", "type"]);
   const styles = useComponentStyles15("Input", { variant, size });
   return /* @__PURE__ */ React26.createElement(Box12, __spreadProps(__spreadValues({}, props), {
@@ -1099,12 +1103,12 @@ var Message = (_a) => {
 };
 
 // src/NumberField/NumberField.tsx
-import React35, { forwardRef as forwardRef5 } from "react";
+import React35, { forwardRef as forwardRef6 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps6, useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { mergeProps as mergeProps6, useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
   Box as Box18,
@@ -1240,7 +1244,7 @@ var StepButton = (_a) => {
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = forwardRef5((_a, ref) => {
+var NumberField = forwardRef6((_a, ref) => {
   var _b = _a, {
     variant,
     size,
@@ -1268,7 +1272,7 @@ var NumberField = forwardRef5((_a, ref) => {
   }, rest);
   const showStepper = !hideStepper;
   const { locale } = useLocale();
-  const inputRef = useObjectRef2(ref);
+  const inputRef = useObjectRef3(ref);
   const state = useNumberFieldState(__spreadProps(__spreadValues({}, props), { locale }));
   const {
     labelProps,
@@ -1343,21 +1347,34 @@ import {
   __defaultTheme
 } from "@marigold/system";
 function MarigoldProvider({
+  children,
   theme,
-  children
+  selector,
+  normalizeDocument = true
 }) {
+  var _a;
   const outer = useTheme();
   const isTopLevel = outer.theme === __defaultTheme;
+  if (((_a = outer.theme) == null ? void 0 : _a.root) && !isTopLevel && !selector) {
+    throw new Error(`[MarigoldProvider] You cannot nest a MarigoldProvider inside another MarigoldProvider without a "selector"! 
+      Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`);
+  }
   return /* @__PURE__ */ React36.createElement(ThemeProvider, {
     theme
-  }, isTopLevel ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Global, null), /* @__PURE__ */ React36.createElement(OverlayProvider, null, children)) : children);
+  }, /* @__PURE__ */ React36.createElement(Global, {
+    normalizeDocument: isTopLevel && normalizeDocument,
+    selector
+  }), isTopLevel ? /* @__PURE__ */ React36.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React38, { useRef as useRef10 } from "react";
+import React38, {
+  forwardRef as forwardRef7
+} from "react";
 import { useHover as useHover4 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
+import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import {
   Box as Box20,
   useComponentStyles as useComponentStyles22,
@@ -1455,7 +1472,7 @@ var Icon2 = (_a) => {
     css
   }, props), checked ? /* @__PURE__ */ React38.createElement(Dot, null) : null);
 };
-var Radio = (_a) => {
+var Radio = forwardRef7((_a, ref) => {
   var _b = _a, { width, disabled } = _b, props = __objRest(_b, ["width", "disabled"]);
   const _a2 = useRadioGroupContext(), {
     variant,
@@ -1468,8 +1485,8 @@ var Radio = (_a) => {
     "error",
     "width"
   ]);
-  const ref = useRef10(null);
-  const { inputProps } = useRadio(__spreadValues({ isDisabled: disabled }, props), state, ref);
+  const inputRef = useObjectRef4(ref);
+  const { inputProps } = useRadio(__spreadValues({ isDisabled: disabled }, props), state, inputRef);
   const styles = useComponentStyles22("Radio", { variant: variant || props.variant, size: size || props.size }, { parts: ["container", "label", "radio"] });
   const { hoverProps, isHovered } = useHover4({});
   const { isFocusVisible, focusProps } = useFocusRing5();
@@ -1493,7 +1510,7 @@ var Radio = (_a) => {
     css: styles.container
   }, hoverProps), stateProps), /* @__PURE__ */ React38.createElement(Box20, __spreadValues(__spreadValues({
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -1510,11 +1527,14 @@ var Radio = (_a) => {
   }, stateProps)), /* @__PURE__ */ React38.createElement(Box20, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
-};
+});
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React42, { useRef as useRef12 } from "react";
+import React42, {
+  forwardRef as forwardRef9,
+  useRef as useRef11
+} from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { FocusScope as FocusScope3, useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useMessageFormatter } from "@react-aria/i18n";
@@ -1522,7 +1542,7 @@ import { DismissButton as DismissButton2, useOverlayPosition as useOverlayPositi
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSelectState } from "@react-stately/select";
 import { Item as Item2, Section } from "@react-stately/collections";
-import { mergeProps as mergeProps7 } from "@react-aria/utils";
+import { mergeProps as mergeProps7, useObjectRef as useObjectRef6 } from "@react-aria/utils";
 import {
   Box as Box24,
   useComponentStyles as useComponentStyles24,
@@ -1530,8 +1550,8 @@ import {
 } from "@marigold/system";
 
 // src/ListBox/ListBox.tsx
-import React41, { forwardRef as forwardRef6 } from "react";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
+import React41, { forwardRef as forwardRef8 } from "react";
+import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import {
   Box as Box23,
   useComponentStyles as useComponentStyles23
@@ -1549,11 +1569,11 @@ import { useListBoxSection } from "@react-aria/listbox";
 import { Box as Box22 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React39, { useRef as useRef11 } from "react";
+import React39, { useRef as useRef10 } from "react";
 import { useOption } from "@react-aria/listbox";
 import { Box as Box21, useStateProps as useStateProps7 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
-  const ref = useRef11(null);
+  const ref = useRef10(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption({
     key: item.key
   }, state, ref);
@@ -1594,9 +1614,9 @@ var ListBoxSection = ({ section, state }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = forwardRef6((_a, ref) => {
+var ListBox = forwardRef8((_a, ref) => {
   var _b = _a, { state, variant, size } = _b, props = __objRest(_b, ["state", "variant", "size"]);
-  const innerRef = useObjectRef3(ref);
+  const innerRef = useObjectRef5(ref);
   const { listBoxProps } = useListBox(props, state, innerRef);
   const styles = useComponentStyles23("ListBox", { variant, size }, { parts: ["container", "list", "option", "section", "sectionTitle"] });
   return /* @__PURE__ */ React41.createElement(ListBoxContext.Provider, {
@@ -1643,25 +1663,10 @@ var Chevron = ({ css }) => /* @__PURE__ */ React42.createElement(Box24, {
   strokeLinejoin: "round",
   d: "M19 9l-7 7-7-7"
 }));
-var Select = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width,
-    open,
-    disabled,
-    required,
-    error
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "open",
-    "disabled",
-    "required",
-    "error"
-  ]);
+var Select = forwardRef9((_a, ref) => {
+  var _b = _a, { variant, size, width, open, disabled, required, error } = _b, rest = __objRest(_b, ["variant", "size", "width", "open", "disabled", "required", "error"]);
   const formatMessage = useMessageFormatter(messages);
+  const buttonRef = useObjectRef6(ref);
   const props = __spreadValues({
     isOpen: open,
     isDisabled: disabled,
@@ -1670,7 +1675,6 @@ var Select = (_a) => {
     placeholder: rest.placeholder || formatMessage("placeholder")
   }, rest);
   const state = useSelectState(props);
-  const buttonRef = useRef12(null);
   const {
     labelProps,
     triggerProps,
@@ -1681,7 +1685,7 @@ var Select = (_a) => {
   } = useSelect(props, state, buttonRef);
   const { buttonProps } = useButton4(__spreadValues({ isDisabled: disabled }, triggerProps), buttonRef);
   const { focusProps, isFocusVisible } = useFocusRing6();
-  const overlayRef = useRef12(null);
+  const overlayRef = useRef11(null);
   const { overlayProps: positionProps } = useOverlayPosition2({
     targetRef: buttonRef,
     overlayRef,
@@ -1751,15 +1755,16 @@ var Select = (_a) => {
   }, menuProps)), /* @__PURE__ */ React42.createElement(DismissButton2, {
     onDismiss: state.close
   }))));
-};
+});
 Select.Option = Item2;
 Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React44, { useRef as useRef13 } from "react";
+import React44, { forwardRef as forwardRef10 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
+import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
 import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
@@ -1809,18 +1814,10 @@ var Thumb = (_a) => {
 };
 
 // src/Slider/Slider.tsx
-var Slider = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width = "100%"
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "width"
-  ]);
+var Slider = forwardRef10((_a, ref) => {
+  var _b = _a, { variant, size, width = "100%" } = _b, props = __objRest(_b, ["variant", "size", "width"]);
   const { formatOptions } = props;
-  const trackRef = useRef13(null);
+  const trackRef = useObjectRef7(ref);
   const numberFormatter = useNumberFormatter(formatOptions);
   const state = useSliderState(__spreadProps(__spreadValues({}, props), { numberFormatter }));
   const { groupProps, trackProps, labelProps, outputProps } = useSlider(__spreadValues({
@@ -1860,10 +1857,18 @@ var Slider = (_a) => {
     disabled: props.disabled,
     styles: styles.thumb
   })));
-};
+});
 
-// src/Stack/Stack.tsx
+// src/Split/Split.tsx
 import React45 from "react";
+import { Box as Box25 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React45.createElement(Box25, __spreadProps(__spreadValues({}, props), {
+  role: "separator",
+  css: { flexGrow: 1 }
+}));
+
+// src/Stack/Stack.tsx
+import React46 from "react";
 var ALIGNMENT_X2 = {
   left: "flex-start",
   center: "center",
@@ -1888,7 +1893,7 @@ var Stack = (_a) => {
     "alignY",
     "stretch"
   ]);
-  return /* @__PURE__ */ React45.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React46.createElement(Box, __spreadValues({
     css: {
       display: "flex",
       flexDirection: "column",
@@ -1902,15 +1907,16 @@ var Stack = (_a) => {
 };
 
 // src/Switch/Switch.tsx
-import React46, { useRef as useRef14 } from "react";
+import React47, { forwardRef as forwardRef11 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
+import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
   useComponentStyles as useComponentStyles26,
   useStateProps as useStateProps10
 } from "@marigold/system";
-var Switch = (_a) => {
+var Switch = forwardRef11((_a, ref) => {
   var _b = _a, {
     variant,
     size,
@@ -1928,7 +1934,7 @@ var Switch = (_a) => {
     "readOnly",
     "defaultChecked"
   ]);
-  const ref = useRef14(null);
+  const inputRef = useObjectRef8(ref);
   const props = __spreadValues({
     isSelected: checked,
     isDisabled: disabled,
@@ -1936,7 +1942,7 @@ var Switch = (_a) => {
     defaultSelected: defaultChecked
   }, rest);
   const state = useToggleState2(props);
-  const { inputProps } = useSwitch(props, state, ref);
+  const { inputProps } = useSwitch(props, state, inputRef);
   const { isFocusVisible, focusProps } = useFocusRing8();
   const stateProps = useStateProps10({
     checked: state.isSelected,
@@ -1945,7 +1951,7 @@ var Switch = (_a) => {
     focus: isFocusVisible
   });
   const styles = useComponentStyles26("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
-  return /* @__PURE__ */ React46.createElement(Box, {
+  return /* @__PURE__ */ React47.createElement(Box, {
     as: "label",
     __baseCSS: {
       display: "flex",
@@ -1956,9 +1962,9 @@ var Switch = (_a) => {
       width
     },
     css: styles.container
-  }, /* @__PURE__ */ React46.createElement(Box, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React47.createElement(Box, __spreadValues(__spreadValues({
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -1969,9 +1975,9 @@ var Switch = (_a) => {
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
     }
-  }, inputProps), focusProps)), props.children && /* @__PURE__ */ React46.createElement(Box, {
+  }, inputProps), focusProps)), props.children && /* @__PURE__ */ React47.createElement(Box, {
     css: styles.label
-  }, props.children), /* @__PURE__ */ React46.createElement(Box, __spreadValues({
+  }, props.children), /* @__PURE__ */ React47.createElement(Box, __spreadValues({
     __baseCSS: {
       position: "relative",
       width: 48,
@@ -1980,7 +1986,7 @@ var Switch = (_a) => {
       borderRadius: 20
     },
     css: styles.track
-  }, stateProps), /* @__PURE__ */ React46.createElement(Box, __spreadValues({
+  }, stateProps), /* @__PURE__ */ React47.createElement(Box, __spreadValues({
     __baseCSS: {
       display: "block",
       position: "absolute",
@@ -1999,10 +2005,10 @@ var Switch = (_a) => {
     },
     css: styles.thumb
   }, stateProps))));
-};
+});
 
 // src/Table/Table.tsx
-import React55, { useRef as useRef21 } from "react";
+import React56, { useRef as useRef18 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2013,7 +2019,7 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box30,
+  Box as Box31,
   useComponentStyles as useComponentStyles27
 } from "@marigold/system";
 
@@ -2023,21 +2029,21 @@ var TableContext = createContext6({});
 var useTableContext = () => useContext6(TableContext);
 
 // src/Table/TableBody.tsx
-import React47 from "react";
+import React48 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React47.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ React48.createElement("tbody", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableCell.tsx
-import React48, { useRef as useRef15 } from "react";
+import React49, { useRef as useRef12 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { Box as Box25, useStateProps as useStateProps11 } from "@marigold/system";
+import { Box as Box26, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
-  const ref = useRef15(null);
+  const ref = useRef12(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell({
@@ -2045,7 +2051,7 @@ var TableCell = ({ cell }) => {
   }, state, ref);
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React48.createElement(Box25, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React49.createElement(Box26, __spreadValues(__spreadValues({
     as: "td",
     ref,
     css: styles.cell
@@ -2053,11 +2059,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React49, { useRef as useRef16 } from "react";
+import React50, { useRef as useRef13 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { Box as Box26, useStateProps as useStateProps12 } from "@marigold/system";
+import { Box as Box27, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = (_a) => {
@@ -2085,7 +2091,7 @@ var mapCheckboxProps = (_a) => {
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef16(null);
+  const ref = useRef13(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2({
@@ -2094,7 +2100,7 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(useTableSelectionCheckbox({ key: cell.parentKey }, state));
   const { focusProps, isFocusVisible } = useFocusRing10();
   const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React49.createElement(Box26, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React50.createElement(Box27, __spreadValues(__spreadValues({
     as: "td",
     ref,
     __baseCSS: {
@@ -2103,18 +2109,32 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell
-  }, mergeProps10(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ React49.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, mergeProps10(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ React50.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/TableColumnHeader.tsx
-import React50, { useRef as useRef17 } from "react";
+import React51, { useRef as useRef14 } from "react";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { Box as Box27, useStateProps as useStateProps13 } from "@marigold/system";
+import { Box as Box28, useStateProps as useStateProps13 } from "@marigold/system";
+var SortIndicator = ({
+  direction = "ascending",
+  visible
+}) => /* @__PURE__ */ React51.createElement(Box28, {
+  as: "span",
+  role: "presentation",
+  "aria-hidden": "true",
+  css: {
+    color: "currentColor",
+    paddingInlineStart: "0.5ch",
+    visibility: visible ? "visible" : "hidden"
+  }
+}, direction === "ascending" ? "\u25B2" : "\u25BC");
 var TableColumnHeader = ({ column }) => {
-  const ref = useRef17(null);
+  var _a, _b;
+  const ref = useRef14(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader({
     node: column
@@ -2125,43 +2145,46 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React50.createElement(Box27, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(Box28, __spreadValues(__spreadValues({
     as: "th",
     colSpan: column.colspan,
     ref,
     css: styles.header
-  }, mergeProps11(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered);
+  }, mergeProps11(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered, column.props.allowsSorting && /* @__PURE__ */ React51.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
-import React51 from "react";
+import React52 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React51.createElement("thead", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ React52.createElement("thead", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React52, { useRef as useRef18 } from "react";
+import React53, { useRef as useRef15 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef18(null);
+  const ref = useRef15(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React52.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ React53.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
     ref
   }), children);
 };
 
 // src/Table/TableRow.tsx
-import React53, { useRef as useRef19 } from "react";
+import React54, { useRef as useRef16 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { Box as Box28, useStateProps as useStateProps14 } from "@marigold/system";
+import { Box as Box29, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
-  const ref = useRef19(null);
+  const ref = useRef16(null);
   const { state, styles } = useTableContext();
   const { rowProps, isPressed } = useTableRow({
     node: row
@@ -2177,7 +2200,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React53.createElement(Box28, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React54.createElement(Box29, __spreadValues(__spreadValues({
     as: "tr",
     ref,
     css: styles.row
@@ -2185,7 +2208,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React54, { useRef as useRef20 } from "react";
+import React55, { useRef as useRef17 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import {
@@ -2193,9 +2216,9 @@ import {
   useTableSelectAllCheckbox
 } from "@react-aria/table";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { Box as Box29, useStateProps as useStateProps15 } from "@marigold/system";
+import { Box as Box30, useStateProps as useStateProps15 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
-  const ref = useRef20(null);
+  const ref = useRef17(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2({
     node: column
@@ -2207,7 +2230,7 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React54.createElement(Box29, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React55.createElement(Box30, __spreadValues(__spreadValues({
     as: "th",
     ref,
     __baseCSS: {
@@ -2216,46 +2239,58 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header
-  }, mergeProps13(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ React54.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, mergeProps13(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ React55.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/Table.tsx
 var Table = (_a) => {
-  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
-  const tableRef = useRef21(null);
+  var _b = _a, {
+    variant,
+    size,
+    stretch
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "stretch"
+  ]);
+  const tableRef = useRef18(null);
   const state = useTableState(__spreadProps(__spreadValues({}, props), {
     showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
   }));
   const { gridProps } = useTable(props, state, tableRef);
   const styles = useComponentStyles27("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
   const { collection } = state;
-  return /* @__PURE__ */ React55.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ React56.createElement(TableContext.Provider, {
     value: { state, styles }
-  }, /* @__PURE__ */ React55.createElement(Box30, __spreadValues({
+  }, /* @__PURE__ */ React56.createElement(Box31, __spreadValues({
     as: "table",
     ref: tableRef,
+    __baseCSS: {
+      borderCollapse: "collapse",
+      width: stretch ? "100%" : void 0
+    },
     css: styles.table
-  }, gridProps), /* @__PURE__ */ React55.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React55.createElement(TableHeaderRow, {
+  }, gridProps), /* @__PURE__ */ React56.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React56.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map((column) => {
     var _a2;
-    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React55.createElement(TableSelectAllCell, {
+    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React56.createElement(TableSelectAllCell, {
       key: column.key,
       column
-    }) : /* @__PURE__ */ React55.createElement(TableColumnHeader, {
+    }) : /* @__PURE__ */ React56.createElement(TableColumnHeader, {
       key: column.key,
       column
     });
-  })))), /* @__PURE__ */ React55.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React55.createElement(TableRow, {
+  })))), /* @__PURE__ */ React56.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React56.createElement(TableRow, {
     key: row.key,
     row
   }, [...row.childNodes].map((cell) => {
     var _a2;
-    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React55.createElement(TableCheckboxCell, {
+    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React56.createElement(TableCheckboxCell, {
       key: cell.key,
       cell
-    }) : /* @__PURE__ */ React55.createElement(TableCell, {
+    }) : /* @__PURE__ */ React56.createElement(TableCell, {
       key: cell.key,
       cell
     });
@@ -2268,11 +2303,11 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React56 from "react";
+import React57 from "react";
 import {
   useComponentStyles as useComponentStyles28
 } from "@marigold/system";
-import { Box as Box31 } from "@marigold/system";
+import { Box as Box32 } from "@marigold/system";
 var Text = (_a) => {
   var _b = _a, {
     variant,
@@ -2297,7 +2332,7 @@ var Text = (_a) => {
     variant,
     size
   });
-  return /* @__PURE__ */ React56.createElement(Box31, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React57.createElement(Box32, __spreadProps(__spreadValues({
     as: "p"
   }, props), {
     css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
@@ -2305,16 +2340,17 @@ var Text = (_a) => {
 };
 
 // src/TextArea/TextArea.tsx
-import React57, { useRef as useRef22 } from "react";
+import React58, { forwardRef as forwardRef12 } from "react";
+import { useHover as useHover8 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
+import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import {
-  Box as Box32,
+  Box as Box33,
   useComponentStyles as useComponentStyles29,
   useStateProps as useStateProps16
 } from "@marigold/system";
-import { useHover as useHover8 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
-var TextArea = (_a) => {
+var TextArea = forwardRef12((_a, ref) => {
   var _b = _a, {
     variant,
     size,
@@ -2335,14 +2371,14 @@ var TextArea = (_a) => {
     "rows"
   ]);
   const { label, description, errorMessage } = props;
-  const ref = useRef22(null);
+  const textAreaRef = useObjectRef9(ref);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(__spreadValues({
     inputElementType: "textarea",
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
-  }, props), ref);
+  }, props), textAreaRef);
   const { hoverProps, isHovered } = useHover8({});
   const { focusProps, isFocusVisible } = useFocusRing14();
   const stateProps = useStateProps16({
@@ -2353,7 +2389,7 @@ var TextArea = (_a) => {
     error
   });
   const styles = useComponentStyles29("TextArea", { variant, size });
-  return /* @__PURE__ */ React57.createElement(FieldBase, {
+  return /* @__PURE__ */ React58.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2366,46 +2402,31 @@ var TextArea = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ React57.createElement(Box32, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React58.createElement(Box33, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
     css: styles,
-    ref,
+    ref: textAreaRef,
     rows
   }, inputProps), focusProps), hoverProps), stateProps)));
-};
+});
 
 // src/TextField/TextField.tsx
-import React58, { useRef as useRef23 } from "react";
+import React59, { forwardRef as forwardRef13 } from "react";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
+import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import { useStateProps as useStateProps17 } from "@marigold/system";
-var TextField = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width,
-    disabled,
-    required,
-    readOnly,
-    error
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "width",
-    "disabled",
-    "required",
-    "readOnly",
-    "error"
-  ]);
+var TextField = forwardRef13((_a, ref) => {
+  var _b = _a, { variant, size, width, disabled, required, readOnly, error } = _b, props = __objRest(_b, ["variant", "size", "width", "disabled", "required", "readOnly", "error"]);
   const { label, description, errorMessage, autoFocus } = props;
-  const ref = useRef23(null);
+  const inputRef = useObjectRef10(ref);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(__spreadValues({
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
-  }, props), ref);
+  }, props), inputRef);
   const { hoverProps, isHovered } = useHover9({});
   const { focusProps, isFocusVisible } = useFocusRing15({
     isTextInput: true,
@@ -2418,7 +2439,7 @@ var TextField = (_a) => {
     readOnly,
     error
   });
-  return /* @__PURE__ */ React58.createElement(FieldBase, {
+  return /* @__PURE__ */ React59.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2431,18 +2452,18 @@ var TextField = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ React58.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-    ref,
+  }, /* @__PURE__ */ React59.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    ref: inputRef,
     variant,
     size
   }, inputProps), focusProps), hoverProps), stateProps)));
-};
+});
 
 // src/Tiles/Tiles.tsx
-import React59 from "react";
-var Tiles = React59.forwardRef((_a, ref) => {
+import React60 from "react";
+var Tiles = React60.forwardRef((_a, ref) => {
   var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ React59.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React60.createElement(Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -2453,10 +2474,10 @@ var Tiles = React59.forwardRef((_a, ref) => {
 });
 
 // src/Tooltip/Tooltip.tsx
-import React61 from "react";
+import React62 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box33,
+  Box as Box34,
   useComponentStyles as useComponentStyles30
 } from "@marigold/system";
 
@@ -2466,7 +2487,7 @@ var TooltipContext = createContext7({});
 var useTooltipContext = () => useContext7(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React60, { useRef as useRef24 } from "react";
+import React61, { useRef as useRef19 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition as useOverlayPosition3 } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -2485,15 +2506,15 @@ var TooltipTrigger = (_a) => {
     "placement",
     "children"
   ]);
-  const [tooltipTrigger, tooltip] = React60.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React61.Children.toArray(children);
   const props = __spreadProps(__spreadValues({}, rest), {
     isDisabled: disabled,
     isOpen: open,
     delay,
     placement
   });
-  const tooltipTriggerRef = useRef24(null);
-  const overlayRef = useRef24(null);
+  const tooltipTriggerRef = useRef19(null);
+  const overlayRef = useRef19(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, tooltipTriggerRef);
   const {
@@ -2508,16 +2529,16 @@ var TooltipTrigger = (_a) => {
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React60.createElement(FocusableProvider, __spreadValues({
+  return /* @__PURE__ */ React61.createElement(FocusableProvider, __spreadValues({
     ref: tooltipTriggerRef
-  }, triggerProps), tooltipTrigger, /* @__PURE__ */ React60.createElement(TooltipContext.Provider, {
+  }, triggerProps), tooltipTrigger, /* @__PURE__ */ React61.createElement(TooltipContext.Provider, {
     value: __spreadValues(__spreadValues({
       state,
       overlayRef,
       arrowProps,
       placement: overlayPlacement
     }, tooltipProps), positionProps)
-  }, /* @__PURE__ */ React60.createElement(Overlay, {
+  }, /* @__PURE__ */ React61.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2527,11 +2548,11 @@ var Tooltip = ({ children, variant, size }) => {
   const _a = useTooltipContext(), { arrowProps, state, overlayRef, placement } = _a, rest = __objRest(_a, ["arrowProps", "state", "overlayRef", "placement"]);
   const { tooltipProps } = useTooltip({}, state);
   const styles = useComponentStyles30("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
-  return /* @__PURE__ */ React61.createElement(Box33, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+  return /* @__PURE__ */ React62.createElement(Box34, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }), /* @__PURE__ */ React61.createElement("div", null, children), /* @__PURE__ */ React61.createElement(Box33, __spreadProps(__spreadValues({}, arrowProps), {
+  }), /* @__PURE__ */ React62.createElement("div", null, children), /* @__PURE__ */ React62.createElement(Box34, __spreadProps(__spreadValues({}, arrowProps), {
     __baseCSS: {
       position: "absolute",
       height: 0,
@@ -2580,6 +2601,7 @@ export {
   SSRProvider,
   Select,
   Slider,
+  Split,
   Stack,
   Switch,
   Table,