@marigold/components 7.5.4 → 7.6.0

package/dist/index.mjs

@@ -2096,12 +2096,13 @@ var _Menu = ({
   size,
   disabled,
   open,
+  placement,
   ...props
 }) => {
   const classNames2 = useClassNames34({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs22(MenuTrigger, { ...props, children: [
     /* @__PURE__ */ jsx58(_Button, { variant: "menu", disabled, children: label }),
-    /* @__PURE__ */ jsx58(_Popover, { open, children: /* @__PURE__ */ jsx58(Menu, { ...props, className: classNames2.container, children }) })
+    /* @__PURE__ */ jsx58(_Popover, { open, placement, children: /* @__PURE__ */ jsx58(Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -2652,26 +2653,90 @@ var _Select = forwardRef19(
 _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
+// src/SelectList/SelectList.tsx
+import {
+  forwardRef as forwardRef21
+} from "react";
+import { GridList as SelectList } from "react-aria-components";
+import { cn as cn40, useClassNames as useClassNames43 } from "@marigold/system";
+
+// src/SelectList/Context.ts
+import { createContext as createContext7, useContext as useContext13 } from "react";
+var SelectListContext = createContext7(
+  {}
+);
+var useSelectListContext = () => useContext13(SelectListContext);
+
+// src/SelectList/SelectListItem.tsx
+import { forwardRef as forwardRef20 } from "react";
+import { GridListItem as SelectListItem } from "react-aria-components";
+import { cn as cn39 } from "@marigold/system";
+import { Fragment as Fragment8, jsx as jsx70, jsxs as jsxs30 } from "react/jsx-runtime";
+var _SelectListItem = forwardRef20(
+  ({ children, ...props }, ref) => {
+    let textValue = typeof children === "string" ? children : void 0;
+    const { classNames: classNames2 } = useSelectListContext();
+    return /* @__PURE__ */ jsx70(
+      SelectListItem,
+      {
+        textValue,
+        ...props,
+        className: cn39("flex items-center", classNames2 == null ? void 0 : classNames2.option),
+        ref,
+        children: ({ selectionMode }) => /* @__PURE__ */ jsxs30(Fragment8, { children: [
+          selectionMode === "multiple" && /* @__PURE__ */ jsx70(FieldGroup, { children: /* @__PURE__ */ jsx70(_Checkbox, { slot: "selection" }) }),
+          children
+        ] })
+      }
+    );
+  }
+);
+
+// src/SelectList/SelectList.tsx
+import { jsx as jsx71 } from "react/jsx-runtime";
+var _SelectList = forwardRef21(
+  ({ onChange, ...rest }, ref) => {
+    const classNames2 = useClassNames43({ component: "ListBox" });
+    const props = {
+      onSelectionChange: onChange,
+      ...rest
+    };
+    return /* @__PURE__ */ jsx71(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx71("div", { className: classNames2.container, children: /* @__PURE__ */ jsx71(
+      SelectList,
+      {
+        ...props,
+        ref,
+        className: cn40(
+          "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
+          classNames2.list
+        ),
+        children: props.children
+      }
+    ) }) });
+  }
+);
+_SelectList.Item = _SelectListItem;
+
 // src/Scrollable/Scrollable.tsx
-import { cn as cn39, createVar as createVar10, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { cn as cn41, createVar as createVar10, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx70(
+}) => /* @__PURE__ */ jsx72(
   "div",
   {
     ...props,
-    className: cn39(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    className: cn41(["sticky h-[--height] overflow-auto", twWidth2[width]]),
     style: createVar10({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -2679,12 +2744,12 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn40,
+  cn as cn42,
   width as twWidth3,
-  useClassNames as useClassNames43
+  useClassNames as useClassNames44
 } from "@marigold/system";
-import { jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
-var _Slider = forwardRef20(
+import { jsx as jsx73, jsxs as jsxs31 } from "react/jsx-runtime";
+var _Slider = forwardRef22(
   ({
     thumbLabels,
     variant,
@@ -2693,7 +2758,7 @@ var _Slider = forwardRef20(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames43({
+    const classNames2 = useClassNames44({
       component: "Slider",
       variant,
       size
@@ -2702,10 +2767,10 @@ var _Slider = forwardRef20(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs31(
       Slider,
       {
-        className: cn40(
+        className: cn42(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -2713,16 +2778,16 @@ var _Slider = forwardRef20(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx71(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx71(SliderOutput, { className: cn40("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx73(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx73(SliderOutput, { className: cn42("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx73(
             SliderTrack,
             {
-              className: cn40("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx71(
+              className: cn42("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx73(
                 SliderThumb,
                 {
-                  className: cn40("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn42("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2737,16 +2802,16 @@ var _Slider = forwardRef20(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx72("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx74 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx74("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn41,
+  cn as cn43,
   gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -2757,10 +2822,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
-      className: cn41(
+      className: cn43(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -2774,15 +2839,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn42,
+  cn as cn44,
   width as twWidth4,
-  useClassNames as useClassNames44
+  useClassNames as useClassNames45
 } from "@marigold/system";
-import { jsx as jsx74, jsxs as jsxs31 } from "react/jsx-runtime";
-var _Switch = forwardRef21(
+import { jsx as jsx76, jsxs as jsxs32 } from "react/jsx-runtime";
+var _Switch = forwardRef23(
   ({
     variant,
     size,
@@ -2793,37 +2858,37 @@ var _Switch = forwardRef21(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames44({ component: "Switch", size, variant });
+    const classNames2 = useClassNames45({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       Switch,
       {
         ...props,
         ref,
-        className: cn42(
+        className: cn44(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx74(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx74("div", { className: "relative", children: /* @__PURE__ */ jsx74(
+          /* @__PURE__ */ jsx76(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx76("div", { className: "relative", children: /* @__PURE__ */ jsx76(
             "div",
             {
-              className: cn42(
+              className: cn44(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx74(
+              children: /* @__PURE__ */ jsx76(
                 "div",
                 {
-                  className: cn42(
+                  className: cn44(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2852,19 +2917,19 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn48, useClassNames as useClassNames46 } from "@marigold/system";
+import { cn as cn50, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext7, useContext as useContext13 } from "react";
-var TableContext = createContext7({});
-var useTableContext = () => useContext13(TableContext);
+import { createContext as createContext8, useContext as useContext14 } from "react";
+var TableContext = createContext8({});
+var useTableContext = () => useContext14(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx75("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx77("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -2872,8 +2937,8 @@ import { useRef as useRef4 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn43, useStateProps as useStateProps2 } from "@marigold/system";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { cn as cn45, useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef4(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -2896,11 +2961,11 @@ var TableCell = ({ cell, align = "left" }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx78(
     "td",
     {
       ref,
-      className: cn43(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn45(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -2914,7 +2979,7 @@ import { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn44, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn46, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2937,7 +3002,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef5(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -2954,14 +3019,14 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing3();
   const stateProps = useStateProps3({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx79(
     "td",
     {
       ref,
-      className: cn44("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn46("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx77(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx79(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -2973,9 +3038,9 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn45, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn47, useStateProps as useStateProps4 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
-import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs33 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto",
@@ -2997,18 +3062,18 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: cn45("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn47("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx78(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx78(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx78(SortDown, { className: "inline-block" }))
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx80(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx80(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx80(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3016,10 +3081,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx81(
     "thead",
     {
       ...rowGroupProps,
@@ -3032,12 +3097,12 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef7 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef7(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx80("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx82("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3046,13 +3111,13 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn46, useClassNames as useClassNames45, useStateProps as useStateProps5 } from "@marigold/system";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { cn as cn48, useClassNames as useClassNames46, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames45({
+  const classNames2 = useClassNames46({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3077,11 +3142,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx83(
     "tr",
     {
       ref,
-      className: cn46(
+      className: cn48(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3104,11 +3169,11 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn47,
+  cn as cn49,
   width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto",
@@ -3130,21 +3195,21 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx84(
     "th",
     {
       ref,
-      className: cn47(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn49(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx82(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx84(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3162,21 +3227,21 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames46({
+  const classNames2 = useClassNames47({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx85(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs34(
         "table",
         {
           ref: tableRef,
-          className: cn48(
+          className: cn50(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3184,10 +3249,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx83(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx83(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx85(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx85(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c, _d, _e;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx83(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx85(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3195,7 +3260,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx83(
+                ) : /* @__PURE__ */ jsx85(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3206,12 +3271,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs33(TableBody, { children: [
+            /* @__PURE__ */ jsxs34(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx83(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx85(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
                   const currentColumn = collection.columns[index];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx83(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx83(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx85(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx85(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3236,7 +3301,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn49,
+  cn as cn51,
   createVar as createVar11,
   cursorStyle,
   fontWeight,
@@ -3244,10 +3309,10 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames47,
+  useClassNames as useClassNames48,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3261,16 +3326,16 @@ var Text2 = ({
   ...props
 }) => {
   const theme = useTheme3();
-  const classNames2 = useClassNames47({
+  const classNames2 = useClassNames48({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx86(
     "p",
     {
       ...props,
-      className: cn49(
+      className: cn51(
         "text-[--color] outline-[--outline]",
         classNames2,
         fontStyle && textStyle[fontStyle],
@@ -3293,11 +3358,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames48 } from "@marigold/system";
-import { jsx as jsx85 } from "react/jsx-runtime";
-var _TextArea = forwardRef22(
+import { useClassNames as useClassNames49 } from "@marigold/system";
+import { jsx as jsx87 } from "react/jsx-runtime";
+var _TextArea = forwardRef24(
   ({
     variant,
     size,
@@ -3308,7 +3373,7 @@ var _TextArea = forwardRef22(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames48({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames49({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3316,15 +3381,15 @@ var _TextArea = forwardRef22(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx85(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx85(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx87(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx87(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx86 } from "react/jsx-runtime";
-var _TextField = forwardRef23(
+import { jsx as jsx88 } from "react/jsx-runtime";
+var _TextField = forwardRef25(
   ({
     variant,
     size,
@@ -3341,13 +3406,13 @@ var _TextField = forwardRef23(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx86(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx86(_Input, { ref }) });
+    return /* @__PURE__ */ jsx88(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx88(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn50, createVar as createVar12, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { cn as cn52, createVar as createVar12, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3360,11 +3425,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx89(
     "div",
     {
       ...props,
-      className: cn50(
+      className: cn52(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3378,11 +3443,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn51, useClassNames as useClassNames49 } from "@marigold/system";
+import { cn as cn53, useClassNames as useClassNames50 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3396,26 +3461,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx88(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx90(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx89, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs35 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames49({ component: "Tooltip", variant, size });
+  const classNames2 = useClassNames50({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     Tooltip,
     {
       ...props,
-      className: cn51("group/tooltip", classNames2.container),
+      className: cn53("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ jsx89(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx89("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx89("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ jsx91(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx91("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx91("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3427,10 +3492,10 @@ _Tooltip.Trigger = _TooltipTrigger;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx90, jsxs as jsxs35 } from "react/jsx-runtime";
-var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
+import { jsx as jsx92, jsxs as jsxs36 } from "react/jsx-runtime";
+var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
   SVG5,
   {
     id: "XLoader",
@@ -3440,13 +3505,13 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx90("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_5_",
           d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3459,12 +3524,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_18_",
           d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3477,12 +3542,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_19_",
           d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3495,12 +3560,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_20_",
           d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3513,12 +3578,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_21_",
           d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3531,12 +3596,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_22_",
           d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3549,12 +3614,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_23_",
           d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3567,12 +3632,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_24_",
           d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3585,12 +3650,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_25_",
           d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3603,12 +3668,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_26_",
           d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3621,12 +3686,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         "path",
         {
           id: "XMLID_27_",
           d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx90(
+          children: /* @__PURE__ */ jsx92(
             "animate",
             {
               attributeName: "opacity",
@@ -3645,24 +3710,24 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames50 } from "@marigold/system";
+import { useClassNames as useClassNames51 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext8, useContext as useContext14 } from "react";
-var TabContext = createContext8({});
-var useTabContext = () => useContext14(TabContext);
+import { createContext as createContext9, useContext as useContext15 } from "react";
+var TabContext = createContext9({});
+var useTabContext = () => useContext15(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn52 } from "@marigold/system";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { cn as cn54 } from "@marigold/system";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx93(
     Tab,
     {
       ...props,
-      className: cn52(
+      className: cn54(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3673,15 +3738,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn53, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { cn as cn55, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx94(
     TabList,
     {
       ...props,
-      className: cn53("flex", gapSpace8[space], classNames2.tabsList),
+      className: cn55("flex", gapSpace8[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3689,25 +3754,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx93(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx95(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames50({
+  const classNames2 = useClassNames51({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx94(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx94(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx96(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx96(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -3768,6 +3833,7 @@ export {
   Scrollable,
   _SearchField as SearchField,
   _Select as Select,
+  _SelectList as SelectList,
   _Slider as Slider,
   Split,
   Stack,