@marigold/components 9.0.0 → 9.0.1

package/dist/index.js

@@ -412,8 +412,7 @@ var Aspect = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react15 = require("react");
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_react_aria_components10 = require("react-aria-components");
 var import_system17 = require("@marigold/system");
 
@@ -807,7 +806,7 @@ var Underlay = ({
     import_react_aria_components8.ModalOverlay,
     {
       className: ({ isEntering, isExiting }) => (0, import_system15.cn)(
-        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur ",
+        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
         classNames2
@@ -874,7 +873,7 @@ var AutocompleteInput = ({
   onClear,
   ref
 }) => {
-  const state = import_react16.default.useContext(import_react_aria_components10.ComboBoxStateContext);
+  const state = import_react15.default.useContext(import_react_aria_components10.ComboBoxStateContext);
   const classNames2 = (0, import_system17.useClassNames)({ component: "ComboBox" });
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SearchInput,
@@ -936,16 +935,16 @@ var _Autocomplete = (0, import_react15.forwardRef)(
 _Autocomplete.Item = _ListBox.Item;
 
 // src/ComboBox/ComboBox.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_react_aria_components12 = require("react-aria-components");
 var import_system19 = require("@marigold/system");
 
 // src/Button/Button.tsx
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_react_aria_components11 = require("react-aria-components");
 var import_system18 = require("@marigold/system");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var _Button = (0, import_react17.forwardRef)(
+var _Button = (0, import_react16.forwardRef)(
   ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
     const classNames2 = (0, import_system18.useClassNames)({
       component: "Button",
@@ -972,7 +971,7 @@ var _Button = (0, import_react17.forwardRef)(
 
 // src/ComboBox/ComboBox.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var _ComboBox = (0, import_react18.forwardRef)(
+var _ComboBox = (0, import_react17.forwardRef)(
   ({
     variant,
     size,
@@ -1116,7 +1115,7 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_react_aria_components13 = require("react-aria-components");
 var import_system26 = require("@marigold/system");
 
@@ -1132,9 +1131,9 @@ var CheckboxField = ({ children, labelWidth }) => {
 };
 
 // src/Checkbox/Context.tsx
-var import_react19 = require("react");
-var CheckboxGroupContext = (0, import_react19.createContext)(null);
-var useCheckboxGroupContext = () => (0, import_react19.useContext)(CheckboxGroupContext);
+var import_react18 = require("react");
+var CheckboxGroupContext = (0, import_react18.createContext)(null);
+var useCheckboxGroupContext = () => (0, import_react18.useContext)(CheckboxGroupContext);
 
 // src/Checkbox/Checkbox.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -1171,7 +1170,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     }
   );
 };
-var _Checkbox = (0, import_react20.forwardRef)(
+var _Checkbox = (0, import_react19.forwardRef)(
   ({
     error,
     disabled,
@@ -1197,7 +1196,6 @@ var _Checkbox = (0, import_react20.forwardRef)(
     };
     const { labelWidth } = useFieldGroupContext();
     const group = useCheckboxGroupContext();
-    console.log(group);
     const classNames2 = (0, import_system26.useClassNames)({
       component: "Checkbox",
       variant: variant || (group == null ? void 0 : group.variant),
@@ -1276,7 +1274,7 @@ var _CheckboxGroup = ({
 };
 
 // src/Columns/Columns.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_system28 = require("@marigold/system");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Columns = ({
@@ -1287,9 +1285,9 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (import_react21.Children.count(children) !== columns.length) {
+  if (import_react20.Children.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${import_react21.Children.count(
+      `Columns: expected ${columns.length} children, got ${import_react20.Children.count(
         children
       )}`
     );
@@ -1303,7 +1301,7 @@ var Columns = ({
         import_system28.gapSpace[space]
       ),
       ...props,
-      children: import_react21.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: import_react20.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           className: (0, import_system28.cn)(
@@ -1360,7 +1358,7 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_react_aria_components18 = require("react-aria-components");
 var import_system31 = require("@marigold/system");
 
@@ -1403,14 +1401,14 @@ var _Headline = ({
 };
 
 // src/Dialog/DialogTrigger.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_react_aria_components17 = require("react-aria-components");
 
 // src/Overlay/Modal.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 var import_react_aria_components16 = require("react-aria-components");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var _Modal = (0, import_react22.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var _Modal = (0, import_react21.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
@@ -1442,7 +1440,7 @@ var _DialogTrigger = ({
     isOpen: open,
     ...rest
   };
-  const children = import_react23.Children.toArray(props.children);
+  const children = import_react22.Children.toArray(props.children);
   const [dialogTrigger, dialog] = children;
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
@@ -1464,7 +1462,7 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var CloseButton = ({ className }) => {
-  const { close } = (0, import_react24.useContext)(import_react_aria_components18.OverlayTriggerStateContext);
+  const { close } = (0, import_react23.useContext)(import_react_aria_components18.OverlayTriggerStateContext);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "button",
     {
@@ -1493,7 +1491,7 @@ var _Dialog = ({
   ...props
 }) => {
   const classNames2 = (0, import_system31.useClassNames)({ component: "Dialog", variant, size });
-  let state = (0, import_react24.useContext)(import_react_aria_components18.OverlayTriggerStateContext);
+  let state = (0, import_react23.useContext)(import_react_aria_components18.OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
     children = children({
@@ -1639,7 +1637,7 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_react_aria_components24 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
@@ -1699,7 +1697,7 @@ var _DateInput = ({ variant, size, action, ...props }) => {
 
 // src/DateField/DateField.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var _DateField = (0, import_react25.forwardRef)(
+var _DateField = (0, import_react24.forwardRef)(
   ({
     variant,
     size,
@@ -1732,7 +1730,7 @@ var _DateField = (0, import_react25.forwardRef)(
 );
 
 // src/Calendar/Calendar.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 var import_react_aria_components31 = require("react-aria-components");
 var import_system44 = require("@marigold/system");
 
@@ -1742,21 +1740,21 @@ var import_system41 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_react_aria_components25 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
 var import_system40 = require("@marigold/system");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
-  const state = (0, import_react26.useContext)(import_react_aria_components25.CalendarStateContext);
+  const state = (0, import_react25.useContext)(import_react_aria_components25.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
   const { locale } = (0, import_i18n3.useLocale)();
   const dayFormatter = (0, import_i18n3.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
-  const weekDays = (0, import_react26.useMemo)(() => {
+  const weekDays = (0, import_react25.useMemo)(() => {
     const weekStart = (0, import_date.startOfWeek)((0, import_date.today)(state.timeZone), locale);
     return [...new Array(7).keys()].map((index) => {
       const date = weekStart.add({ days: index });
@@ -1788,7 +1786,7 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var import_react_aria_components27 = require("react-aria-components");
 var import_icons = require("@marigold/icons");
 var import_system42 = require("@marigold/system");
@@ -1816,7 +1814,7 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react27.useContext)(import_react_aria_components27.CalendarStateContext);
+  const state = (0, import_react26.useContext)(import_react_aria_components27.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = (0, import_system42.useClassNames)({ component: "Select" });
@@ -1880,11 +1878,11 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_react_aria_components29 = require("react-aria-components");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react28.useContext)(import_react_aria_components29.CalendarStateContext);
+  const state = (0, import_react27.useContext)(import_react_aria_components29.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
@@ -1918,12 +1916,12 @@ var MonthListBox = ({ setSelectedDropdown }) => {
 var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
 var import_i18n5 = require("@react-aria/i18n");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react29.useContext)(import_react_aria_components30.CalendarStateContext);
+  const state = (0, import_react28.useContext)(import_react_aria_components30.CalendarStateContext);
   const years = [];
   let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
@@ -1936,8 +1934,8 @@ var YearListBox = ({ setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = (0, import_react29.useRef)(null);
-  (0, import_react29.useEffect)(() => {
+  const activeButtonRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
       activeButton == null ? void 0 : activeButton.scrollIntoView({
@@ -2002,7 +2000,7 @@ var _Calendar = ({
     ...rest
   };
   const classNames2 = (0, import_system44.useClassNames)({ component: "Calendar" });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react30.useState)();
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react29.useState)();
   const ViewMap = {
     month: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MonthListBox_default, { setSelectedDropdown }),
     year: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(YearListBox_default, { setSelectedDropdown })
@@ -2044,11 +2042,11 @@ var _Calendar = ({
 };
 
 // src/DatePicker/DatePicker.tsx
-var import_react31 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_react_aria_components32 = require("react-aria-components");
 var import_system45 = require("@marigold/system");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var _DatePicker = import_react31.default.forwardRef(
+var _DatePicker = import_react30.default.forwardRef(
   ({
     disabled,
     required,
@@ -2130,11 +2128,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 );
 
 // src/Link/Link.tsx
-var import_react32 = require("react");
+var import_react31 = require("react");
 var import_react_aria_components33 = require("react-aria-components");
 var import_system47 = require("@marigold/system");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var _Link = (0, import_react32.forwardRef)(
+var _Link = (0, import_react31.forwardRef)(
   ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = (0, import_system47.useClassNames)({
       component: "Link",
@@ -2149,9 +2147,9 @@ var _Link = (0, import_react32.forwardRef)(
 var import_system48 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react33 = require("react");
-var ListContext = (0, import_react33.createContext)({});
-var useListContext = () => (0, import_react33.useContext)(ListContext);
+var import_react32 = require("react");
+var ListContext = (0, import_react32.createContext)({});
+var useListContext = () => (0, import_react32.useContext)(ListContext);
 
 // src/List/ListItem.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
@@ -2242,9 +2240,9 @@ var ActionMenu = ({
 var import_system55 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
-var import_react34 = require("react");
-var SectionMessageContext = (0, import_react34.createContext)({});
-var useSectionMessageContext = () => (0, import_react34.useContext)(SectionMessageContext);
+var import_react33 = require("react");
+var SectionMessageContext = (0, import_react33.createContext)({});
+var useSectionMessageContext = () => (0, import_react33.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
 var import_system53 = require("@marigold/system");
@@ -2370,7 +2368,7 @@ SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
-var import_react35 = require("react");
+var import_react34 = require("react");
 var import_data2 = require("@react-stately/data");
 
 // src/TagGroup/Tag.tsx
@@ -2438,7 +2436,7 @@ var Multiselect = ({
   children,
   ...props
 }) => {
-  const items = import_react35.Children.map(children, ({ props: props2 }) => props2);
+  const items = import_react34.Children.map(children, ({ props: props2 }) => props2);
   const list = (0, import_data2.useListData)({
     initialItems: items,
     initialSelectedKeys: props.defaultSelectedKeys,
@@ -2457,7 +2455,7 @@ var Multiselect = ({
     }
     list.setSelectedKeys(next);
   };
-  const [value, setValue] = (0, import_react35.useState)("");
+  const [value, setValue] = (0, import_react34.useState)("");
   const selectItem = (key) => {
     if (list.selectedKeys !== "all") {
       const next = list.selectedKeys.add(key);
@@ -2498,7 +2496,7 @@ var Multiselect = ({
 Multiselect.Item = Item2;
 
 // src/NumberField/NumberField.tsx
-var import_react36 = require("react");
+var import_react35 = require("react");
 var import_react_aria_components41 = require("react-aria-components");
 var import_system59 = require("@marigold/system");
 
@@ -2542,7 +2540,7 @@ var _StepButton = ({ direction, className, ...props }) => {
 
 // src/NumberField/NumberField.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var _NumberField = (0, import_react36.forwardRef)(
+var _NumberField = (0, import_react35.forwardRef)(
   ({
     variant,
     size,
@@ -2597,16 +2595,16 @@ var _NumberField = (0, import_react36.forwardRef)(
 );
 
 // src/Radio/Radio.tsx
-var import_react38 = require("react");
+var import_react37 = require("react");
 var import_react_aria_components43 = require("react-aria-components");
 var import_system61 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react37 = require("react");
-var RadioGroupContext = (0, import_react37.createContext)(
+var import_react36 = require("react");
+var RadioGroupContext = (0, import_react36.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react37.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react36.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 var import_react_aria_components42 = require("react-aria-components");
@@ -2679,7 +2677,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx
     children: checked ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react38.forwardRef)(
+var _Radio = (0, import_react37.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
     const classNames2 = (0, import_system61.useClassNames)({
@@ -2720,10 +2718,10 @@ var _Radio = (0, import_react38.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react39 = require("react");
+var import_react38 = require("react");
 var import_react_aria_components44 = require("react-aria-components");
 var import_jsx_runtime72 = require("react/jsx-runtime");
-var _SearchField = (0, import_react39.forwardRef)(
+var _SearchField = (0, import_react38.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2743,11 +2741,11 @@ var _SearchField = (0, import_react39.forwardRef)(
 );
 
 // src/Select/Select.tsx
-var import_react40 = require("react");
+var import_react39 = require("react");
 var import_react_aria_components45 = require("react-aria-components");
 var import_system62 = require("@marigold/system");
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var _Select = (0, import_react40.forwardRef)(
+var _Select = (0, import_react39.forwardRef)(
   ({
     disabled,
     required,
@@ -2801,23 +2799,23 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
-var import_react43 = require("react");
+var import_react42 = require("react");
 var import_react_aria_components47 = require("react-aria-components");
 var import_system64 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react41 = require("react");
-var SelectListContext = (0, import_react41.createContext)(
+var import_react40 = require("react");
+var SelectListContext = (0, import_react40.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react41.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react40.useContext)(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-var import_react42 = require("react");
+var import_react41 = require("react");
 var import_react_aria_components46 = require("react-aria-components");
 var import_system63 = require("@marigold/system");
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var _SelectListItem = (0, import_react42.forwardRef)(
+var _SelectListItem = (0, import_react41.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
@@ -2839,7 +2837,7 @@ var _SelectListItem = (0, import_react42.forwardRef)(
 
 // src/SelectList/SelectList.tsx
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var _SelectList = (0, import_react43.forwardRef)(
+var _SelectList = (0, import_react42.forwardRef)(
   ({ onChange, ...rest }, ref) => {
     const classNames2 = (0, import_system64.useClassNames)({ component: "ListBox" });
     const props = {
@@ -2881,11 +2879,11 @@ var Scrollable = ({
 );
 
 // src/Slider/Slider.tsx
-var import_react44 = require("react");
+var import_react43 = require("react");
 var import_react_aria_components48 = require("react-aria-components");
 var import_system66 = require("@marigold/system");
 var import_jsx_runtime77 = require("react/jsx-runtime");
-var _Slider = (0, import_react44.forwardRef)(
+var _Slider = (0, import_react43.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -2970,11 +2968,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react45 = require("react");
+var import_react44 = require("react");
 var import_react_aria_components49 = require("react-aria-components");
 var import_system68 = require("@marigold/system");
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var _Switch = (0, import_react45.forwardRef)(
+var _Switch = (0, import_react44.forwardRef)(
   ({
     variant,
     size,
@@ -3009,7 +3007,7 @@ var _Switch = (0, import_react45.forwardRef)(
             "div",
             {
               className: (0, import_system68.cn)(
-                "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
+                "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed",
                 classNames2.track
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -3034,33 +3032,45 @@ var _Switch = (0, import_react45.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react53 = require("react");
+var import_react52 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system75 = require("@marigold/system");
+var import_system74 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react46 = require("react");
-var TableContext = (0, import_react46.createContext)({});
-var useTableContext = () => (0, import_react46.useContext)(TableContext);
+var import_react45 = require("react");
+var TableContext = (0, import_react45.createContext)({});
+var useTableContext = () => (0, import_react45.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
 var import_jsx_runtime81 = require("react/jsx-runtime");
-var TableBody = ({ children }) => {
+var TableBody = ({ children, emptyState }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
+  const { state, classNames: classNames2 } = useTableContext();
+  if (state.collection.size === 0 && emptyState) {
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      "td",
+      {
+        className: classNames2 == null ? void 0 : classNames2.cell,
+        colSpan: state.collection.size,
+        role: "rowheader",
+        children: emptyState()
+      }
+    ) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react47 = require("react");
+var import_react46 = require("react");
 var import_focus2 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils3 = require("@react-aria/utils");
 var import_system69 = require("@marigold/system");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react47.useRef)(null);
+  const ref = (0, import_react46.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3095,7 +3105,7 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react48 = require("react");
+var import_react47 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils4 = require("@react-aria/utils");
@@ -3124,7 +3134,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react48.useRef)(null);
+  const ref = (0, import_react47.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3152,14 +3162,13 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react49 = require("react");
+var import_react48 = require("react");
 var import_focus4 = require("@react-aria/focus");
 var import_interactions = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils6 = require("@react-aria/utils");
 var import_icons3 = require("@marigold/icons");
 var import_system71 = require("@marigold/system");
-var import_system72 = require("@marigold/system");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
@@ -3167,7 +3176,7 @@ var TableColumnHeader = ({
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react49.useRef)(null);
+  const ref = (0, import_react48.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3187,13 +3196,13 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system71.cn)("cursor-default", import_system72.width[width], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system71.cn)("cursor-default", import_system71.width[width], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils6.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortDown, { className: "inline-block" }))
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "invisible", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_icons3.SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -3215,29 +3224,29 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react50 = require("react");
+var import_react49 = require("react");
 var import_table6 = require("@react-aria/table");
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react50.useRef)(null);
+  const ref = (0, import_react49.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react51 = require("react");
+var import_react50 = require("react");
 var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils7 = require("@react-aria/utils");
-var import_system73 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react51.useRef)(null);
+  const ref = (0, import_react50.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system73.useClassNames)({
+  const classNames2 = (0, import_system72.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3255,7 +3264,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system73.useStateProps)({
+  const stateProps = (0, import_system72.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
@@ -3266,7 +3275,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: (0, import_system73.cn)(
+      className: (0, import_system72.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3280,19 +3289,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react52 = require("react");
+var import_react51 = require("react");
 var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils8 = require("@react-aria/utils");
-var import_system74 = require("@marigold/system");
+var import_system73 = require("@marigold/system");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react52.useRef)(null);
+  const ref = (0, import_react51.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3304,7 +3313,7 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system74.useStateProps)({
+  const stateProps = (0, import_system73.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3312,7 +3321,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: (0, import_system74.cn)(import_system74.width[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system73.cn)(import_system73.width[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils8.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -3330,10 +3339,11 @@ var Table = ({
   selectionMode = "none",
   disableKeyboardNavigation = false,
   stickyHeader,
+  emptyState,
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react53.useRef)(null);
+  const tableRef = (0, import_react52.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3344,7 +3354,7 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system75.useClassNames)({
+  const classNames2 = (0, import_system74.useClassNames)({
     component: "Table",
     variant,
     size
@@ -3358,7 +3368,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: (0, import_system75.cn)(
+          className: (0, import_system74.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -3388,7 +3398,7 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(TableBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(TableBody, { emptyState, children: [
               ...collection.rows.map(
                 (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
@@ -3417,7 +3427,7 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_system76 = require("@marigold/system");
+var import_system75 = require("@marigold/system");
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var Text2 = ({
   variant,
@@ -3431,8 +3441,8 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system76.useTheme)();
-  const classNames2 = (0, import_system76.useClassNames)({
+  const theme = (0, import_system75.useTheme)();
+  const classNames2 = (0, import_system75.useClassNames)({
     component: "Text",
     variant,
     size
@@ -3441,17 +3451,17 @@ var Text2 = ({
     "p",
     {
       ...props,
-      className: (0, import_system76.cn)(
+      className: (0, import_system75.cn)(
         "text-[--color] outline-[--outline]",
         classNames2,
-        fontStyle && import_system76.textStyle[fontStyle],
-        align && import_system76.textAlign[align],
-        cursor && import_system76.cursorStyle[cursor],
-        weight && import_system76.fontWeight[weight],
-        fontSize && import_system76.textSize[fontSize]
+        fontStyle && import_system75.textStyle[fontStyle],
+        align && import_system75.textAlign[align],
+        cursor && import_system75.cursorStyle[cursor],
+        weight && import_system75.fontWeight[weight],
+        fontSize && import_system75.textSize[fontSize]
       ),
-      style: (0, import_system76.createVar)({
-        color: color && (0, import_system76.getColor)(
+      style: (0, import_system75.createVar)({
+        color: color && (0, import_system75.getColor)(
           theme,
           color,
           color
@@ -3464,11 +3474,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react54 = require("react");
+var import_react53 = require("react");
 var import_react_aria_components50 = require("react-aria-components");
-var import_system77 = require("@marigold/system");
+var import_system76 = require("@marigold/system");
 var import_jsx_runtime91 = require("react/jsx-runtime");
-var _TextArea = (0, import_react54.forwardRef)(
+var _TextArea = (0, import_react53.forwardRef)(
   ({
     variant,
     size,
@@ -3479,7 +3489,7 @@ var _TextArea = (0, import_react54.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system77.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system76.useClassNames)({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3492,10 +3502,10 @@ var _TextArea = (0, import_react54.forwardRef)(
 );
 
 // src/TextField/TextField.tsx
-var import_react55 = require("react");
+var import_react54 = require("react");
 var import_react_aria_components51 = require("react-aria-components");
 var import_jsx_runtime92 = require("react/jsx-runtime");
-var _TextField = (0, import_react55.forwardRef)(
+var _TextField = (0, import_react54.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -3509,7 +3519,7 @@ var _TextField = (0, import_react55.forwardRef)(
 );
 
 // src/Tiles/Tiles.tsx
-var import_system78 = require("@marigold/system");
+var import_system77 = require("@marigold/system");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
@@ -3527,13 +3537,13 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: (0, import_system78.cn)(
+      className: (0, import_system77.cn)(
         "grid",
-        import_system78.gapSpace[space],
+        import_system77.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system78.createVar)({ column, tilesWidth }),
+      style: (0, import_system77.createVar)({ column, tilesWidth }),
       children
     }
   );
@@ -3541,7 +3551,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_react_aria_components53 = require("react-aria-components");
-var import_system79 = require("@marigold/system");
+var import_system78 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react_aria_components52 = require("react-aria-components");
@@ -3569,13 +3579,13 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames2 = (0, import_system79.useClassNames)({ component: "Tooltip", variant, size });
+  const classNames2 = (0, import_system78.useClassNames)({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     import_react_aria_components53.Tooltip,
     {
       ...props,
-      className: (0, import_system79.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system78.cn)("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components53.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
@@ -3590,11 +3600,11 @@ _Tooltip.Trigger = _TooltipTrigger;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react56 = require("react");
-var import_system80 = require("@marigold/system");
+var import_react55 = require("react");
+var import_system79 = require("@marigold/system");
 var import_jsx_runtime96 = require("react/jsx-runtime");
-var XLoader = (0, import_react56.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-  import_system80.SVG,
+var XLoader = (0, import_react55.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  import_system79.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3808,16 +3818,16 @@ var XLoader = (0, import_react56.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 
 // src/Tabs/Tabs.tsx
 var import_react_aria_components57 = require("react-aria-components");
-var import_system83 = require("@marigold/system");
+var import_system82 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react57 = require("react");
-var TabContext = (0, import_react57.createContext)({});
-var useTabContext = () => (0, import_react57.useContext)(TabContext);
+var import_react56 = require("react");
+var TabContext = (0, import_react56.createContext)({});
+var useTabContext = () => (0, import_react56.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
 var import_react_aria_components54 = require("react-aria-components");
-var import_system81 = require("@marigold/system");
+var import_system80 = require("@marigold/system");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3825,7 +3835,7 @@ var _Tab = (props) => {
     import_react_aria_components54.Tab,
     {
       ...props,
-      className: (0, import_system81.cn)(
+      className: (0, import_system80.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3836,7 +3846,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 var import_react_aria_components55 = require("react-aria-components");
-var import_system82 = require("@marigold/system");
+var import_system81 = require("@marigold/system");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3844,7 +3854,7 @@ var _TabList = ({ space = 2, ...props }) => {
     import_react_aria_components55.TabList,
     {
       ...props,
-      className: (0, import_system82.cn)("flex", import_system82.gapSpace[space], classNames2.tabsList),
+      className: (0, import_system81.cn)("flex", import_system81.gapSpace[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3865,7 +3875,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = (0, import_system83.useClassNames)({
+  const classNames2 = (0, import_system82.useClassNames)({
     component: "Tabs",
     size,
     variant