@marigold/components 1.0.1 → 1.2.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,
@@ -289,6 +290,7 @@ var import_react10 = __toESM(require("react"));
 var import_checkbox3 = require("@react-aria/checkbox");
 var import_focus2 = require("@react-aria/focus");
 var import_interactions = require("@react-aria/interactions");
+var import_utils2 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
 var import_system7 = require("@marigold/system");
 
@@ -411,7 +413,7 @@ var Icon = (_a) => {
     css
   }, props), indeterminate ? /* @__PURE__ */ import_react10.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react10.default.createElement(CheckMark, null) : null);
 };
-var Checkbox = (_a) => {
+var Checkbox = (0, import_react10.forwardRef)((_a, ref) => {
   var _b = _a, {
     size,
     variant,
@@ -433,7 +435,7 @@ var Checkbox = (_a) => {
     "required",
     "error"
   ]);
-  const ref = import_react10.default.useRef(null);
+  const inputRef = (0, import_utils2.useObjectRef)(ref);
   const checkboxProps = {
     isIndeterminate: indeterminate,
     isDisabled: disabled,
@@ -444,14 +446,17 @@ var Checkbox = (_a) => {
   const groupState = useCheckboxGroupContext();
   const { inputProps } = groupState ? (0, import_checkbox3.useCheckboxGroupItem)(__spreadProps(__spreadValues(__spreadValues({}, props), checkboxProps), {
     value: props.value
-  }), groupState, ref) : (0, import_checkbox3.useCheckbox)(__spreadValues(__spreadValues({
+  }), groupState, inputRef) : (0, import_checkbox3.useCheckbox)(__spreadValues(__spreadValues({
     isSelected: checked,
     defaultSelected: defaultChecked
   }, checkboxProps), props), (0, import_toggle.useToggleState)(__spreadValues({
     isSelected: checked,
     defaultSelected: defaultChecked
-  }, props)), ref);
-  const styles = (0, import_system7.useComponentStyles)("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 = (0, import_system7.useComponentStyles)("Checkbox", {
+    variant: (groupState == null ? void 0 : groupState.variant) || variant,
+    size: (groupState == null ? void 0 : groupState.size) || size
+  }, { parts: ["container", "label", "checkbox"] });
   const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
   const { isFocusVisible, focusProps } = (0, import_focus2.useFocusRing)();
   const stateProps = (0, import_system7.useStateProps)({
@@ -474,7 +479,7 @@ var Checkbox = (_a) => {
     css: styles.container
   }, hoverProps), stateProps), /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues(__spreadValues({
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -492,7 +497,7 @@ var Checkbox = (_a) => {
   }, stateProps)), props.children && /* @__PURE__ */ import_react10.default.createElement(import_system7.Box, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
-};
+});
 
 // src/Columns/Columns.tsx
 var import_react11 = __toESM(require("react"));
@@ -632,7 +637,7 @@ var Headline = (_a) => {
   ]);
   const styles = (0, import_system10.useComponentStyles)("Headline", {
     variant,
-    size: size != null ? size : `level-${level}`
+    size: size ?? `level-${level}`
   });
   return /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, __spreadProps(__spreadValues({
     as: `h${level}`
@@ -655,7 +660,7 @@ var import_overlays4 = require("@react-stately/overlays");
 var import_react18 = __toESM(require("react"));
 var import_focus3 = require("@react-aria/focus");
 var import_overlays = require("@react-aria/overlays");
-var import_utils2 = require("@react-aria/utils");
+var import_utils3 = require("@react-aria/utils");
 
 // src/Overlay/Underlay.tsx
 var import_react17 = __toESM(require("react"));
@@ -676,7 +681,7 @@ var Underlay = (_a) => {
 // src/Overlay/Modal.tsx
 var Modal = (0, import_react18.forwardRef)((_a, ref) => {
   var _b = _a, { children, open, dismissable, keyboardDismissable, onClose } = _b, props = __objRest(_b, ["children", "open", "dismissable", "keyboardDismissable", "onClose"]);
-  const modalRef = (0, import_utils2.useObjectRef)(ref);
+  const modalRef = (0, import_utils3.useObjectRef)(ref);
   const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)({
     isOpen: open,
     onClose,
@@ -700,7 +705,7 @@ var Modal = (0, import_react18.forwardRef)((_a, ref) => {
       pointerEvents: "none"
     },
     ref: modalRef
-  }, (0, import_utils2.mergeProps)(props, overlayProps, modalProps)), /* @__PURE__ */ import_react18.default.createElement("div", {
+  }, (0, import_utils3.mergeProps)(props, overlayProps, modalProps)), /* @__PURE__ */ import_react18.default.createElement("div", {
     style: { pointerEvents: "auto" }
   }, children)));
 });
@@ -712,7 +717,7 @@ var Overlay = (_a) => {
   var _b = _a, {
     children,
     open = false,
-    container = document.body
+    container
   } = _b, props = __objRest(_b, [
     "children",
     "open",
@@ -729,7 +734,7 @@ var Overlay = (_a) => {
 // src/Overlay/Popover.tsx
 var import_react20 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
-var import_utils3 = require("@react-aria/utils");
+var import_utils4 = require("@react-aria/utils");
 var Popover = (0, import_react20.forwardRef)((_a, ref) => {
   var _b = _a, {
     children,
@@ -761,7 +766,7 @@ var Popover = (0, import_react20.forwardRef)((_a, ref) => {
   }, /* @__PURE__ */ import_react20.default.createElement(import_system.Box, __spreadValues({
     ref: popoverRef,
     role: "presentation"
-  }, (0, import_utils3.mergeProps)(props, overlayProps, modalProps, style)), children));
+  }, (0, import_utils4.mergeProps)(props, overlayProps, modalProps, style)), children));
 });
 
 // src/Dialog/DialogTrigger.tsx
@@ -1030,7 +1035,7 @@ var MenuTrigger = ({ disabled, children }) => {
 var import_react31 = __toESM(require("react"));
 var import_focus4 = require("@react-aria/focus");
 var import_menu3 = require("@react-aria/menu");
-var import_utils4 = require("@react-aria/utils");
+var import_utils5 = require("@react-aria/utils");
 var import_system18 = require("@marigold/system");
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = (0, import_react31.useRef)(null);
@@ -1053,7 +1058,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
       }
     },
     css
-  }, (0, import_utils4.mergeProps)(menuItemProps, focusProps)), stateProps), item.rendered);
+  }, (0, import_utils5.mergeProps)(menuItemProps, focusProps)), stateProps), item.rendered);
 };
 
 // src/Menu/Menu.tsx
@@ -1139,7 +1144,7 @@ var import_focus6 = require("@react-aria/focus");
 var import_interactions5 = require("@react-aria/interactions");
 var import_i18n = require("@react-aria/i18n");
 var import_numberfield = require("@react-aria/numberfield");
-var import_utils6 = require("@react-aria/utils");
+var import_utils7 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
 var import_system24 = require("@marigold/system");
 
@@ -1223,7 +1228,7 @@ var FieldBase = ({
 var import_react36 = __toESM(require("react"));
 var import_button3 = require("@react-aria/button");
 var import_interactions4 = require("@react-aria/interactions");
-var import_utils5 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_system23 = require("@marigold/system");
 var Plus = () => /* @__PURE__ */ import_react36.default.createElement(import_system23.Box, {
   as: "svg",
@@ -1264,7 +1269,7 @@ var StepButton = (_a) => {
       cursor: props.isDisabled ? "not-allowed" : "pointer"
     },
     css
-  }, (0, import_utils5.mergeProps)(buttonProps, hoverProps)), stateProps), /* @__PURE__ */ import_react36.default.createElement(Icon3, null));
+  }, (0, import_utils6.mergeProps)(buttonProps, hoverProps)), stateProps), /* @__PURE__ */ import_react36.default.createElement(Icon3, null));
 };
 
 // src/NumberField/NumberField.tsx
@@ -1296,7 +1301,7 @@ var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
   }, rest);
   const showStepper = !hideStepper;
   const { locale } = (0, import_i18n.useLocale)();
-  const inputRef = (0, import_utils6.useObjectRef)(ref);
+  const inputRef = (0, import_utils7.useObjectRef)(ref);
   const state = (0, import_numberfield2.useNumberFieldState)(__spreadProps(__spreadValues({}, props), { locale }));
   const {
     labelProps,
@@ -1344,7 +1349,7 @@ var NumberField = (0, import_react37.forwardRef)((_a, ref) => {
       }
     },
     css: styles.group
-  }, (0, import_utils6.mergeProps)(groupProps, focusProps, hoverProps)), stateProps), showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, __spreadValues({
+  }, (0, import_utils7.mergeProps)(groupProps, focusProps, hoverProps)), stateProps), showStepper && /* @__PURE__ */ import_react37.default.createElement(StepButton, __spreadValues({
     direction: "down",
     css: styles.stepper
   }, decrementButtonProps)), /* @__PURE__ */ import_react37.default.createElement(Input, __spreadValues(__spreadValues({
@@ -1366,14 +1371,24 @@ var import_react38 = __toESM(require("react"));
 var import_overlays7 = require("@react-aria/overlays");
 var import_system25 = require("@marigold/system");
 function MarigoldProvider({
+  children,
   theme,
-  children
+  selector,
+  normalizeDocument = true
 }) {
+  var _a;
   const outer = (0, import_system25.useTheme)();
   const isTopLevel = outer.theme === import_system25.__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__ */ import_react38.default.createElement(import_system25.ThemeProvider, {
     theme
-  }, isTopLevel ? /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement(import_system25.Global, null), /* @__PURE__ */ import_react38.default.createElement(import_overlays7.OverlayProvider, null, children)) : children);
+  }, /* @__PURE__ */ import_react38.default.createElement(import_system25.Global, {
+    normalizeDocument: isTopLevel && normalizeDocument,
+    selector
+  }), isTopLevel ? /* @__PURE__ */ import_react38.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
@@ -1381,6 +1396,7 @@ 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_utils8 = require("@react-aria/utils");
 var import_system28 = require("@marigold/system");
 
 // src/Radio/Context.ts
@@ -1471,7 +1487,7 @@ var Icon2 = (_a) => {
     css
   }, props), checked ? /* @__PURE__ */ import_react41.default.createElement(Dot, null) : null);
 };
-var Radio = (_a) => {
+var Radio = (0, import_react41.forwardRef)((_a, ref) => {
   var _b = _a, { width, disabled } = _b, props = __objRest(_b, ["width", "disabled"]);
   const _a2 = useRadioGroupContext(), {
     variant,
@@ -1484,8 +1500,8 @@ var Radio = (_a) => {
     "error",
     "width"
   ]);
-  const ref = (0, import_react41.useRef)(null);
-  const { inputProps } = (0, import_radio3.useRadio)(__spreadValues({ isDisabled: disabled }, props), state, ref);
+  const inputRef = (0, import_utils8.useObjectRef)(ref);
+  const { inputProps } = (0, import_radio3.useRadio)(__spreadValues({ isDisabled: disabled }, props), state, inputRef);
   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)({});
   const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
@@ -1509,7 +1525,7 @@ var Radio = (_a) => {
     css: styles.container
   }, hoverProps), stateProps), /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues(__spreadValues({
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -1526,7 +1542,7 @@ var Radio = (_a) => {
   }, stateProps)), /* @__PURE__ */ import_react41.default.createElement(import_system28.Box, __spreadValues({
     css: styles.label
   }, stateProps), props.children));
-};
+});
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
@@ -1538,12 +1554,12 @@ var import_overlays8 = require("@react-aria/overlays");
 var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
 var import_collections2 = require("@react-stately/collections");
-var import_utils8 = require("@react-aria/utils");
+var import_utils10 = require("@react-aria/utils");
 var import_system32 = require("@marigold/system");
 
 // src/ListBox/ListBox.tsx
 var import_react45 = __toESM(require("react"));
-var import_utils7 = require("@react-aria/utils");
+var import_utils9 = require("@react-aria/utils");
 var import_system31 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
@@ -1605,7 +1621,7 @@ var ListBoxSection = ({ section, state }) => {
 // src/ListBox/ListBox.tsx
 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 innerRef = (0, import_utils9.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_react45.default.createElement(ListBoxContext.Provider, {
@@ -1652,25 +1668,10 @@ var Chevron = ({ css }) => /* @__PURE__ */ import_react46.default.createElement(
   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 = (0, import_react46.forwardRef)((_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 = (0, import_i18n2.useMessageFormatter)(messages);
+  const buttonRef = (0, import_utils10.useObjectRef)(ref);
   const props = __spreadValues({
     isOpen: open,
     isDisabled: disabled,
@@ -1679,7 +1680,6 @@ var Select = (_a) => {
     placeholder: rest.placeholder || formatMessage("placeholder")
   }, rest);
   const state = (0, import_select2.useSelectState)(props);
-  const buttonRef = (0, import_react46.useRef)(null);
   const {
     labelProps,
     triggerProps,
@@ -1735,7 +1735,7 @@ var Select = (_a) => {
     },
     css: styles.button,
     ref: buttonRef
-  }, (0, import_utils8.mergeProps)(buttonProps, focusProps)), stateProps), /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, __spreadValues({
+  }, (0, import_utils10.mergeProps)(buttonProps, focusProps)), stateProps), /* @__PURE__ */ import_react46.default.createElement(import_system32.Box, __spreadValues({
     css: {
       overflow: "hidden",
       whiteSpace: "nowrap"
@@ -1760,7 +1760,7 @@ var Select = (_a) => {
   }, menuProps)), /* @__PURE__ */ import_react46.default.createElement(import_overlays8.DismissButton, {
     onDismiss: state.close
   }))));
-};
+});
 Select.Option = import_collections2.Item;
 Select.Section = import_collections2.Section;
 
@@ -1769,12 +1769,13 @@ 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_utils12 = require("@react-aria/utils");
 var import_system34 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
 var import_react47 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
-var import_utils9 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_system33 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
@@ -1814,22 +1815,14 @@ var Thumb = (_a) => {
     as: "input",
     type: "range",
     ref: inputRef
-  }, (0, import_utils9.mergeProps)(inputProps, focusProps))))));
+  }, (0, import_utils11.mergeProps)(inputProps, focusProps))))));
 };
 
 // src/Slider/Slider.tsx
-var Slider = (_a) => {
-  var _b = _a, {
-    variant,
-    size,
-    width = "100%"
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "width"
-  ]);
+var Slider = (0, import_react48.forwardRef)((_a, ref) => {
+  var _b = _a, { variant, size, width = "100%" } = _b, props = __objRest(_b, ["variant", "size", "width"]);
   const { formatOptions } = props;
-  const trackRef = (0, import_react48.useRef)(null);
+  const trackRef = (0, import_utils12.useObjectRef)(ref);
   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({
@@ -1869,10 +1862,18 @@ var Slider = (_a) => {
     disabled: props.disabled,
     styles: styles.thumb
   })));
-};
+});
 
-// src/Stack/Stack.tsx
+// 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_react50 = __toESM(require("react"));
 var ALIGNMENT_X2 = {
   left: "flex-start",
   center: "center",
@@ -1897,7 +1898,7 @@ var Stack = (_a) => {
     "alignY",
     "stretch"
   ]);
-  return /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues({
     css: {
       display: "flex",
       flexDirection: "column",
@@ -1911,12 +1912,13 @@ var Stack = (_a) => {
 };
 
 // src/Switch/Switch.tsx
-var import_react50 = __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_utils13 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system35 = require("@marigold/system");
-var Switch = (_a) => {
+var import_system36 = require("@marigold/system");
+var Switch = (0, import_react51.forwardRef)((_a, ref) => {
   var _b = _a, {
     variant,
     size,
@@ -1934,7 +1936,7 @@ var Switch = (_a) => {
     "readOnly",
     "defaultChecked"
   ]);
-  const ref = (0, import_react50.useRef)(null);
+  const inputRef = (0, import_utils13.useObjectRef)(ref);
   const props = __spreadValues({
     isSelected: checked,
     isDisabled: disabled,
@@ -1942,16 +1944,16 @@ var Switch = (_a) => {
     defaultSelected: defaultChecked
   }, rest);
   const state = (0, import_toggle2.useToggleState)(props);
-  const { inputProps } = (0, import_switch.useSwitch)(props, state, ref);
+  const { inputProps } = (0, import_switch.useSwitch)(props, state, inputRef);
   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_react50.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",
@@ -1962,9 +1964,9 @@ var Switch = (_a) => {
       width
     },
     css: styles.container
-  }, /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as: "input",
-    ref,
+    ref: inputRef,
     css: {
       position: "absolute",
       width: "100%",
@@ -1975,9 +1977,9 @@ var Switch = (_a) => {
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
     }
-  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
+  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     css: styles.label
-  }, props.children), /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues({
+  }, props.children), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       position: "relative",
       width: 48,
@@ -1986,7 +1988,7 @@ var Switch = (_a) => {
       borderRadius: 20
     },
     css: styles.track
-  }, stateProps), /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues({
+  }, stateProps), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       display: "block",
       position: "absolute",
@@ -2005,55 +2007,55 @@ var Switch = (_a) => {
     },
     css: styles.thumb
   }, stateProps))));
-};
+});
 
 // src/Table/Table.tsx
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system41 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react51 = require("react");
-var TableContext = (0, import_react51.createContext)({});
-var useTableContext = () => (0, import_react51.useContext)(TableContext);
+var import_react52 = require("react");
+var TableContext = (0, import_react52.createContext)({});
+var useTableContext = () => (0, import_react52.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
-var import_react52 = __toESM(require("react"));
+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_react52.default.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ import_react53.default.createElement("tbody", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableCell.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
 var import_focus11 = require("@react-aria/focus");
-var import_utils10 = require("@react-aria/utils");
-var import_system36 = require("@marigold/system");
+var import_utils14 = require("@react-aria/utils");
+var import_system37 = require("@marigold/system");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react53.useRef)(null);
+  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)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react53.default.createElement(import_system36.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,
     css: styles.cell
-  }, (0, import_utils10.mergeProps)(gridCellProps, focusProps)), stateProps), cell.rendered);
+  }, (0, import_utils14.mergeProps)(gridCellProps, focusProps)), stateProps), cell.rendered);
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var import_focus12 = require("@react-aria/focus");
-var import_utils11 = require("@react-aria/utils");
-var import_system37 = require("@marigold/system");
+var import_utils15 = require("@react-aria/utils");
+var import_system38 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = (_a) => {
@@ -2081,7 +2083,7 @@ var mapCheckboxProps = (_a) => {
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react54.useRef)(null);
+  const ref = (0, import_react55.useRef)(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)({
@@ -2089,8 +2091,8 @@ var TableCheckboxCell = ({ 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_system37.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react54.default.createElement(import_system37.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: {
@@ -2099,65 +2101,82 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell
-  }, (0, import_utils11.mergeProps)(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ import_react54.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, (0, import_utils15.mergeProps)(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ import_react55.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react55 = __toESM(require("react"));
+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_system38 = require("@marigold/system");
+var import_utils17 = 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 }) => {
-  const ref = (0, import_react55.useRef)(null);
+  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_system38.useStateProps)({
+  const stateProps = (0, import_system39.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react55.default.createElement(import_system38.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react56.default.createElement(import_system39.Box, __spreadValues(__spreadValues({
     as: "th",
     colSpan: column.colspan,
     ref,
     css: styles.header
-  }, (0, import_utils13.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered);
+  }, (0, import_utils17.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_react56 = __toESM(require("react"));
+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_react56.default.createElement("thead", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ import_react57.default.createElement("thead", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_table6 = require("@react-aria/table");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react57.useRef)(null);
+  const ref = (0, import_react58.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react57.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ import_react58.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
     ref
   }), children);
 };
 
 // src/Table/TableRow.tsx
-var import_react58 = __toESM(require("react"));
+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_system39 = require("@marigold/system");
+var import_utils18 = require("@react-aria/utils");
+var import_system40 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react58.useRef)(null);
+  const ref = (0, import_react59.useRef)(null);
   const { state, styles } = useTableContext();
   const { rowProps, isPressed } = (0, import_table7.useTableRow)({
     node: row
@@ -2166,29 +2185,29 @@ var TableRow = ({ children, row }) => {
   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_system39.useStateProps)({
+  const stateProps = (0, import_system40.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ import_react58.default.createElement(import_system39.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react59.default.createElement(import_system40.Box, __spreadValues(__spreadValues({
     as: "tr",
     ref,
     css: styles.row
-  }, (0, import_utils14.mergeProps)(rowProps, focusProps, hoverProps)), stateProps), children);
+  }, (0, import_utils18.mergeProps)(rowProps, focusProps, hoverProps)), stateProps), children);
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react59 = __toESM(require("react"));
+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_system40 = require("@marigold/system");
+var import_utils19 = require("@react-aria/utils");
+var import_system41 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
-  const ref = (0, import_react59.useRef)(null);
+  const ref = (0, import_react60.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)({
     node: column
@@ -2196,11 +2215,11 @@ var TableSelectAllCell = ({ column }) => {
   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_system40.useStateProps)({
+  const stateProps = (0, import_system41.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react59.default.createElement(import_system40.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react60.default.createElement(import_system41.Box, __spreadValues(__spreadValues({
     as: "th",
     ref,
     __baseCSS: {
@@ -2209,46 +2228,58 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header
-  }, (0, import_utils15.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ import_react59.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, (0, import_utils19.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 tableRef = (0, import_react60.useRef)(null);
+  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 { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const styles = (0, import_system41.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  const styles = (0, import_system42.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
   const { collection } = state;
-  return /* @__PURE__ */ import_react60.default.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ import_react61.default.createElement(TableContext.Provider, {
     value: { state, styles }
-  }, /* @__PURE__ */ import_react60.default.createElement(import_system41.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react61.default.createElement(import_system42.Box, __spreadValues({
     as: "table",
     ref: tableRef,
+    __baseCSS: {
+      borderCollapse: "collapse",
+      width: stretch ? "100%" : void 0
+    },
     css: styles.table
-  }, gridProps), /* @__PURE__ */ import_react60.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react60.default.createElement(TableHeaderRow, {
+  }, gridProps), /* @__PURE__ */ import_react61.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react61.default.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map((column) => {
     var _a2;
-    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react60.default.createElement(TableSelectAllCell, {
+    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableSelectAllCell, {
       key: column.key,
       column
-    }) : /* @__PURE__ */ import_react60.default.createElement(TableColumnHeader, {
+    }) : /* @__PURE__ */ import_react61.default.createElement(TableColumnHeader, {
       key: column.key,
       column
     });
-  })))), /* @__PURE__ */ import_react60.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react60.default.createElement(TableRow, {
+  })))), /* @__PURE__ */ import_react61.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react61.default.createElement(TableRow, {
     key: row.key,
     row
   }, [...row.childNodes].map((cell) => {
     var _a2;
-    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react60.default.createElement(TableCheckboxCell, {
+    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableCheckboxCell, {
       key: cell.key,
       cell
-    }) : /* @__PURE__ */ import_react60.default.createElement(TableCell, {
+    }) : /* @__PURE__ */ import_react61.default.createElement(TableCell, {
       key: cell.key,
       cell
     });
@@ -2261,9 +2292,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react61 = __toESM(require("react"));
-var import_system42 = require("@marigold/system");
+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,
@@ -2284,11 +2315,11 @@ var Text = (_a) => {
     "outline",
     "children"
   ]);
-  const styles = (0, import_system42.useComponentStyles)("Text", {
+  const styles = (0, import_system43.useComponentStyles)("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ import_react61.default.createElement(import_system43.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react62.default.createElement(import_system44.Box, __spreadProps(__spreadValues({
     as: "p"
   }, props), {
     css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
@@ -2296,12 +2327,13 @@ var Text = (_a) => {
 };
 
 // src/TextArea/TextArea.tsx
-var import_react62 = __toESM(require("react"));
-var import_textfield = require("@react-aria/textfield");
-var import_system44 = require("@marigold/system");
+var import_react63 = __toESM(require("react"));
 var import_interactions10 = require("@react-aria/interactions");
 var import_focus16 = require("@react-aria/focus");
-var TextArea = (_a) => {
+var import_textfield = require("@react-aria/textfield");
+var import_utils21 = require("@react-aria/utils");
+var import_system45 = require("@marigold/system");
+var TextArea = (0, import_react63.forwardRef)((_a, ref) => {
   var _b = _a, {
     variant,
     size,
@@ -2322,25 +2354,25 @@ var TextArea = (_a) => {
     "rows"
   ]);
   const { label, description, errorMessage } = props;
-  const ref = (0, import_react62.useRef)(null);
+  const textAreaRef = (0, import_utils21.useObjectRef)(ref);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(__spreadValues({
     inputElementType: "textarea",
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
-  }, props), ref);
+  }, props), textAreaRef);
   const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-  const stateProps = (0, import_system44.useStateProps)({
+  const stateProps = (0, import_system45.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  const styles = (0, import_system44.useComponentStyles)("TextArea", { variant, size });
-  return /* @__PURE__ */ import_react62.default.createElement(FieldBase, {
+  const styles = (0, import_system45.useComponentStyles)("TextArea", { variant, size });
+  return /* @__PURE__ */ import_react63.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2353,59 +2385,44 @@ var TextArea = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ import_react62.default.createElement(import_system44.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react63.default.createElement(import_system45.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
     css: styles,
-    ref,
+    ref: textAreaRef,
     rows
   }, inputProps), focusProps), hoverProps), stateProps)));
-};
+});
 
 // src/TextField/TextField.tsx
-var import_react63 = __toESM(require("react"));
+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_system45 = require("@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 import_utils22 = require("@react-aria/utils");
+var import_system46 = require("@marigold/system");
+var TextField = (0, import_react64.forwardRef)((_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 = (0, import_react63.useRef)(null);
+  const inputRef = (0, import_utils22.useObjectRef)(ref);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadValues({
     isDisabled: disabled,
     isRequired: required,
     isReadOnly: readOnly,
     validationState: error ? "invalid" : "valid"
-  }, props), ref);
+  }, props), inputRef);
   const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)({
     isTextInput: true,
     autoFocus
   });
-  const stateProps = (0, import_system45.useStateProps)({
+  const stateProps = (0, import_system46.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react63.default.createElement(FieldBase, {
+  return /* @__PURE__ */ import_react64.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2418,18 +2435,18 @@ var TextField = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ import_react63.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-    ref,
+  }, /* @__PURE__ */ import_react64.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+    ref: inputRef,
     variant,
     size
   }, inputProps), focusProps), hoverProps), stateProps)));
-};
+});
 
 // src/Tiles/Tiles.tsx
-var import_react64 = __toESM(require("react"));
-var Tiles = import_react64.default.forwardRef((_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_react64.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react65.default.createElement(import_system.Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -2440,17 +2457,17 @@ var Tiles = import_react64.default.forwardRef((_a, ref) => {
 });
 
 // src/Tooltip/Tooltip.tsx
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system46 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
-var import_react65 = require("react");
-var TooltipContext = (0, import_react65.createContext)({});
-var useTooltipContext = () => (0, import_react65.useContext)(TooltipContext);
+var import_react66 = require("react");
+var TooltipContext = (0, import_react66.createContext)({});
+var useTooltipContext = () => (0, import_react66.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react66 = __toESM(require("react"));
+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");
@@ -2469,15 +2486,15 @@ var TooltipTrigger = (_a) => {
     "placement",
     "children"
   ]);
-  const [tooltipTrigger, tooltip] = import_react66.default.Children.toArray(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_react66.useRef)(null);
-  const overlayRef = (0, import_react66.useRef)(null);
+  const tooltipTriggerRef = (0, import_react67.useRef)(null);
+  const overlayRef = (0, import_react67.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(props, state, tooltipTriggerRef);
   const {
@@ -2492,16 +2509,16 @@ var TooltipTrigger = (_a) => {
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ import_react66.default.createElement(import_focus18.FocusableProvider, __spreadValues({
+  return /* @__PURE__ */ import_react67.default.createElement(import_focus18.FocusableProvider, __spreadValues({
     ref: tooltipTriggerRef
-  }, triggerProps), tooltipTrigger, /* @__PURE__ */ import_react66.default.createElement(TooltipContext.Provider, {
+  }, triggerProps), tooltipTrigger, /* @__PURE__ */ import_react67.default.createElement(TooltipContext.Provider, {
     value: __spreadValues(__spreadValues({
       state,
       overlayRef,
       arrowProps,
       placement: overlayPlacement
     }, tooltipProps), positionProps)
-  }, /* @__PURE__ */ import_react66.default.createElement(Overlay, {
+  }, /* @__PURE__ */ import_react67.default.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2510,12 +2527,12 @@ var TooltipTrigger = (_a) => {
 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_system46.useComponentStyles)("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
-  return /* @__PURE__ */ import_react67.default.createElement(import_system46.Box, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+  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_react67.default.createElement("div", null, children), /* @__PURE__ */ import_react67.default.createElement(import_system46.Box, __spreadProps(__spreadValues({}, arrowProps), {
+  }), /* @__PURE__ */ import_react68.default.createElement("div", null, children), /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, __spreadProps(__spreadValues({}, arrowProps), {
     __baseCSS: {
       position: "absolute",
       height: 0,
@@ -2565,6 +2582,7 @@ Tooltip.Trigger = TooltipTrigger;
   SSRProvider,
   Select,
   Slider,
+  Split,
   Stack,
   Switch,
   Table,