@marigold/components 10.1.0 → 10.1.2

package/dist/index.js

@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Accordion: () => Accordion,
   AccordionItem: () => AccordionItem,
   ActionMenu: () => ActionMenu,
@@ -75,10 +75,11 @@ __export(src_exports, {
   Multiselect: () => Multiselect,
   NumberField: () => _NumberField,
   OverlayContainerProvider: () => OverlayContainerProvider,
+  Pagination: () => _Pagination,
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components61.RouterProvider,
+  RouterProvider: () => import_react_aria_components62.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -107,7 +108,7 @@ __export(src_exports, {
   usePortalContainer: () => usePortalContainer,
   useTheme: () => import_system18.useTheme
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/hooks.ts
 var import_data = require("@react-stately/data");
@@ -743,10 +744,17 @@ var import_system15 = require("@marigold/system");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var _Section = ({ header: header2, children, ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components6.Section, { ...props, className: (0, import_system15.cn)(classNames2.section, classNames2.header), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components6.Header, { children: header2 }),
-    children
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_react_aria_components6.ListBoxSection,
+    {
+      ...props,
+      className: (0, import_system15.cn)(classNames2.section, classNames2.header),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components6.Header, { children: header2 }),
+        children
+      ]
+    }
+  );
 };
 
 // src/ListBox/ListBox.tsx
@@ -2137,11 +2145,13 @@ var _Calendar = ({
   readOnly,
   size,
   variant,
+  dateUnavailable,
   ...rest
 }) => {
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
+    isDateUnavailable: dateUnavailable,
     ...rest
   };
   const classNames2 = (0, import_system52.useClassNames)({ component: "Calendar" });
@@ -2339,7 +2349,7 @@ var import_system58 = require("@marigold/system");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
   const className = (0, import_system58.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react_aria_components36.Section, { ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react_aria_components36.MenuSection, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(_Header, { className: className.section, children: title }),
     children
   ] });
@@ -2386,6 +2396,7 @@ var ActionMenu = ({
 
 // src/SectionMessage/SectionMessage.tsx
 var import_react38 = require("react");
+var import_button2 = require("@react-aria/button");
 var import_system63 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
@@ -2484,19 +2495,27 @@ var SectionMessage = ({
   size,
   children,
   closeButton,
+  close,
+  onCloseChange,
   ...props
 }) => {
+  const buttonRef = (0, import_react38.useRef)(null);
   const classNames2 = (0, import_system63.useClassNames)({
     component: "SectionMessage",
     variant,
     size
   });
   const Icon4 = icons[variant];
-  const [isVisible, setIsVisible] = (0, import_react38.useState)(true);
+  const [internalVisible, setInternalVisible] = (0, import_react38.useState)(true);
+  const isCurrentlyVisible = close != null ? close : internalVisible;
+  const { buttonProps } = (0, import_button2.useButton)(props, buttonRef);
   const handleClose = () => {
-    setIsVisible(false);
+    onCloseChange && close && onCloseChange(close);
+    if (close === void 0) {
+      setInternalVisible(false);
+    }
   };
-  if (!isVisible) return null;
+  if (!isCurrentlyVisible) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
     "div",
     {
@@ -2517,6 +2536,8 @@ var SectionMessage = ({
         closeButton && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           "button",
           {
+            ...buttonProps,
+            ref: buttonRef,
             "aria-label": "close",
             className: "h-5 w-5 cursor-pointer border-none p-0 leading-normal outline-0 [grid-area:close]",
             onClick: handleClose,
@@ -2765,22 +2786,349 @@ var _NumberField = (0, import_react40.forwardRef)(
   }
 );
 
-// src/Radio/Radio.tsx
+// src/Pagination/Pagination.tsx
+var import_react44 = require("react");
+
+// src/Pagination/Ellipsis.tsx
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var Ellipsis = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    "span",
+    {
+      className: "text-text-base flex h-8 w-8 items-center justify-center",
+      "aria-label": "These pages are hidden",
+      children: "\u2026"
+    }
+  );
+};
+
+// src/Pagination/NavigationButton.tsx
+var import_react41 = __toESM(require("react"));
+var import_button3 = require("@react-aria/button");
+var import_system68 = require("@marigold/system");
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var NavigationButton = (props) => {
+  const ref = import_react41.default.useRef(null);
+  const classNames2 = (0, import_system68.useClassNames)({
+    component: "Pagination"
+  });
+  let { buttonProps } = (0, import_button3.useButton)(props, ref);
+  let {
+    children,
+    isSelected,
+    isDisabled,
+    registerRef,
+    controlLabel,
+    position,
+    ...rest
+  } = props;
+  (0, import_react41.useEffect)(() => {
+    if (registerRef) {
+      registerRef(ref.current);
+      return () => registerRef(null);
+    }
+  }, [registerRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    "button",
+    {
+      ref,
+      ...buttonProps,
+      ...rest,
+      disabled: isDisabled,
+      className: (0, import_system68.cn)(classNames2, controlLabel && "w-24 px-2"),
+      "data-selected": isSelected,
+      children: [
+        position === "left" && children,
+        controlLabel,
+        position === "right" && children
+      ]
+    }
+  );
+};
+
+// src/Pagination/PageButton.tsx
 var import_react42 = require("react");
-var import_react_aria_components44 = require("react-aria-components");
+var import_button4 = require("@react-aria/button");
 var import_system69 = require("@marigold/system");
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var PageButton = (props) => {
+  const ref = (0, import_react42.useRef)(null);
+  const classNames2 = (0, import_system69.useClassNames)({
+    component: "Pagination"
+  });
+  let { buttonProps } = (0, import_button4.useButton)(props, ref);
+  let { page, selected, registerRef, isDisabled } = props;
+  (0, import_react42.useEffect)(() => {
+    if (registerRef) {
+      registerRef(ref.current);
+      return () => registerRef(null);
+    }
+  }, [registerRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    "button",
+    {
+      ref,
+      ...buttonProps,
+      "aria-label": `Page ${page}`,
+      "aria-current": selected ? "page" : void 0,
+      className: classNames2,
+      "data-selected": selected,
+      disabled: isDisabled,
+      tabIndex: selected === true ? 0 : -1,
+      children: page
+    }
+  );
+};
+
+// src/Pagination/useKeyboardNavigation.tsx
+var import_react43 = require("react");
+var import_interactions = require("@react-aria/interactions");
+var NavigationTypes = {
+  Prev: "prev",
+  Next: "next",
+  Page: "page",
+  Ellipsis: "ellipsis"
+};
+var useKeyboardNavigation = ({
+  page,
+  totalPages,
+  onChange = () => {
+  }
+}) => {
+  const containerRef = (0, import_react43.useRef)(null);
+  const [focusedItem, setFocusedItem] = (0, import_react43.useState)({
+    type: "page",
+    value: page
+  });
+  const navigationItems = (0, import_react43.useRef)([]);
+  const buttonRefs = (0, import_react43.useRef)(/* @__PURE__ */ new Map());
+  const isItemDisabled = (0, import_react43.useCallback)(
+    (item) => {
+      if (item.type === NavigationTypes.Prev) return page <= 1;
+      if (item.type === NavigationTypes.Next) return page >= totalPages;
+      return item.type === NavigationTypes.Ellipsis;
+    },
+    [page, totalPages]
+  );
+  const findNextFocusableItem = (0, import_react43.useCallback)(
+    (current, direction) => {
+      const items = navigationItems.current.filter(
+        (item) => !isItemDisabled(item)
+      );
+      const currentIndex = items.findIndex(
+        (item) => item.type === current.type && item.value === current.value
+      );
+      if (currentIndex === -1) {
+        return items[0] || { type: NavigationTypes.Page, value: page };
+      }
+      const nextIndex = direction === "next" ? (currentIndex + 1) % items.length : (currentIndex - 1 + items.length) % items.length;
+      return items[nextIndex];
+    },
+    [isItemDisabled, page]
+  );
+  const focusItem = (0, import_react43.useCallback)(
+    (item) => {
+      if (isItemDisabled(item)) return;
+      const key = `${item.type}-${item.value}`;
+      const element = buttonRefs.current.get(key);
+      if (element && typeof element.focus === "function") {
+        element.focus();
+        setFocusedItem(item);
+      }
+    },
+    [isItemDisabled]
+  );
+  const { keyboardProps } = (0, import_interactions.useKeyboard)({
+    onKeyDown: (e) => {
+      let newFocusedItem = focusedItem;
+      switch (e.key) {
+        case "ArrowLeft":
+          newFocusedItem = findNextFocusableItem(focusedItem, "prev");
+          break;
+        case "ArrowRight":
+          newFocusedItem = findNextFocusableItem(focusedItem, "next");
+          break;
+        case "Home":
+          newFocusedItem = navigationItems.current.find((item) => !isItemDisabled(item)) || focusedItem;
+          break;
+        case "End":
+          newFocusedItem = [...navigationItems.current].reverse().find((item) => !isItemDisabled(item)) || focusedItem;
+          break;
+        case "Enter":
+        case " ":
+          if (isItemDisabled(focusedItem)) return;
+          if (focusedItem.type === NavigationTypes.Page && typeof focusedItem.value === "number") {
+            onChange(focusedItem.value);
+          } else if (focusedItem.type === NavigationTypes.Prev && page > 1) {
+            onChange(page - 1);
+          } else if (focusedItem.type === NavigationTypes.Next && page < totalPages) {
+            onChange(page + 1);
+          }
+          break;
+        default:
+          return;
+      }
+      if (newFocusedItem !== focusedItem) {
+        focusItem(newFocusedItem);
+      }
+    }
+  });
+  const registerRef = (0, import_react43.useCallback)(
+    (type, value, ref) => {
+      const key = `${type}-${value}`;
+      if (ref) {
+        buttonRefs.current.set(key, ref);
+      } else {
+        buttonRefs.current.delete(key);
+      }
+    },
+    []
+  );
+  const setNavigationItems = (0, import_react43.useCallback)((items) => {
+    navigationItems.current = items;
+  }, []);
+  return {
+    containerRef,
+    keyboardProps,
+    registerRef,
+    setNavigationItems,
+    setFocusedItem
+  };
+};
+
+// src/Pagination/usePageRange.tsx
+var usePageRange = ({ currentPage, totalPages }) => {
+  const getPageRange = () => {
+    if (totalPages <= 7) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = [1];
+    if (currentPage <= 4) {
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("ellipsis");
+    } else if (currentPage >= totalPages - 3) {
+      pages.push("ellipsis");
+      for (let i = totalPages - 4; i < totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push("ellipsis");
+      for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("ellipsis");
+    }
+    pages.push(totalPages);
+    return pages;
+  };
+  return getPageRange();
+};
+
+// src/Pagination/Pagination.tsx
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var _Pagination = ({
+  defaultPage = 1,
+  page,
+  totalItems,
+  pageSize,
+  onChange = () => {
+  },
+  controlLabels
+}) => {
+  const [currentPage, setCurrentPage] = (0, import_react44.useState)(page != null ? page : defaultPage);
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+    onChange(newPage);
+  };
+  const { registerRef, keyboardProps, setNavigationItems, setFocusedItem } = useKeyboardNavigation({
+    page: currentPage,
+    totalPages,
+    onChange: handlePageChange
+  });
+  const pageRange = usePageRange({ currentPage, totalPages });
+  (0, import_react44.useEffect)(() => {
+    const items = [
+      { type: NavigationTypes.Prev, value: currentPage - 1 },
+      ...pageRange.map((value) => ({
+        type: typeof value === "number" ? NavigationTypes.Page : NavigationTypes.Ellipsis,
+        value
+      })),
+      { type: NavigationTypes.Next, value: currentPage + 1 }
+    ];
+    setNavigationItems(items);
+  }, [pageRange, currentPage, setNavigationItems]);
+  (0, import_react44.useEffect)(() => {
+    setFocusedItem({ type: NavigationTypes.Page, value: currentPage });
+  }, [currentPage, setFocusedItem]);
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages || totalPages === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    "nav",
+    {
+      className: "flex items-center justify-center space-x-2",
+      "aria-label": `Page ${currentPage} of ${totalPages}`,
+      ...keyboardProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          NavigationButton,
+          {
+            onPress: () => handlePageChange(Math.max(1, currentPage - 1)),
+            "aria-label": "Page previous",
+            isDisabled: isFirstPage,
+            registerRef: (ref) => registerRef(NavigationTypes.Prev, currentPage - 1, ref),
+            controlLabel: controlLabels == null ? void 0 : controlLabels[0],
+            position: "left",
+            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronLeft, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
+          (pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            PageButton,
+            {
+              page: pageNumber,
+              selected: pageNumber === currentPage,
+              onPress: () => handlePageChange(pageNumber),
+              registerRef: (ref) => registerRef(NavigationTypes.Page, pageNumber, ref)
+            },
+            pageNumber
+          )
+        ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          NavigationButton,
+          {
+            onPress: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
+            "aria-label": "Page next",
+            isDisabled: isLastPage,
+            registerRef: (ref) => registerRef(NavigationTypes.Next, currentPage + 1, ref),
+            controlLabel: controlLabels == null ? void 0 : controlLabels[1],
+            position: "right",
+            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronRight, { className: "h-5 w-5" })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/Radio/Radio.tsx
+var import_react46 = require("react");
+var import_react_aria_components44 = require("react-aria-components");
+var import_system71 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react41 = require("react");
-var RadioGroupContext = (0, import_react41.createContext)(
+var import_react45 = require("react");
+var RadioGroupContext = (0, import_react45.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react41.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react45.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 var import_react_aria_components43 = require("react-aria-components");
-var import_system68 = require("@marigold/system");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_system70 = require("@marigold/system");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size,
@@ -2796,7 +3144,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = (0, import_system68.useClassNames)({ component: "Radio", variant, size });
+  const classNames2 = (0, import_system70.useClassNames)({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2804,7 +3152,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     FieldBase,
     {
       as: import_react_aria_components43.RadioGroup,
@@ -2815,18 +3163,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system68.cn)(
+          className: (0, import_system70.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2834,33 +3182,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
   "div",
   {
-    className: (0, import_system69.cn)(
+    className: (0, import_system71.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react42.forwardRef)(
+var _Radio = (0, import_react46.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = (0, import_system69.useClassNames)({
+    const classNames2 = (0, import_system71.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       import_react_aria_components44.Radio,
       {
         ref,
-        className: (0, import_system69.cn)(
+        className: (0, import_system71.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2869,18 +3217,18 @@ var _Radio = (0, import_react42.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system69.cn)(
+              className: (0, import_system71.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: classNames2.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -2889,10 +3237,10 @@ var _Radio = (0, import_react42.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react43 = require("react");
+var import_react47 = require("react");
 var import_react_aria_components45 = require("react-aria-components");
-var import_jsx_runtime80 = require("react/jsx-runtime");
-var _SearchField = (0, import_react43.forwardRef)(
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var _SearchField = (0, import_react47.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2901,7 +3249,7 @@ var _SearchField = (0, import_react43.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       SearchInput,
       {
         ref,
@@ -2912,11 +3260,11 @@ var _SearchField = (0, import_react43.forwardRef)(
 );
 
 // src/Select/Select.tsx
-var import_react44 = require("react");
+var import_react48 = require("react");
 var import_react_aria_components46 = require("react-aria-components");
-var import_system70 = require("@marigold/system");
-var import_jsx_runtime81 = require("react/jsx-runtime");
-var _Select = (0, import_react44.forwardRef)(
+var import_system72 = require("@marigold/system");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var _Select = (0, import_react48.forwardRef)(
   ({
     disabled,
     required,
@@ -2936,22 +3284,22 @@ var _Select = (0, import_react44.forwardRef)(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = (0, import_system70.useClassNames)({ component: "Select", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(FieldBase, { as: import_react_aria_components46.Select, ref, variant, size, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    const classNames2 = (0, import_system72.useClassNames)({ component: "Select", variant, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(FieldBase, { as: import_react_aria_components46.Select, ref, variant, size, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
         import_react_aria_components46.Button,
         {
-          className: (0, import_system70.cn)(
+          className: (0, import_system72.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react_aria_components46.SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronDown, { className: (0, import_system70.cn)("size-4", classNames2.icon) })
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react_aria_components46.SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChevronDown, { className: (0, import_system72.cn)("size-4", classNames2.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -2959,38 +3307,38 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
-var import_react47 = require("react");
+var import_react51 = require("react");
 var import_react_aria_components48 = require("react-aria-components");
-var import_system72 = require("@marigold/system");
+var import_system74 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react45 = require("react");
-var SelectListContext = (0, import_react45.createContext)(
+var import_react49 = require("react");
+var SelectListContext = (0, import_react49.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react45.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react49.useContext)(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-var import_react46 = require("react");
+var import_react50 = require("react");
 var import_react_aria_components47 = require("react-aria-components");
-var import_system71 = require("@marigold/system");
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var _SelectListItem = (0, import_react46.forwardRef)(
+var import_system73 = require("@marigold/system");
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var _SelectListItem = (0, import_react50.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       import_react_aria_components47.GridListItem,
       {
         textValue,
         ...props,
-        className: (0, import_system71.cn)(
+        className: (0, import_system73.cn)(
           "items-center group-data-[layout=grid]/list:flex-row",
           classNames2 == null ? void 0 : classNames2.option
         ),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(_Checkbox, { slot: "selection" }),
+        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_Checkbox, { slot: "selection" }),
           children
         ] })
       }
@@ -2999,21 +3347,21 @@ var _SelectListItem = (0, import_react46.forwardRef)(
 );
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var _SelectList = (0, import_react47.forwardRef)(
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var _SelectList = (0, import_react51.forwardRef)(
   ({ onChange, ...rest }, ref) => {
-    const classNames2 = (0, import_system72.useClassNames)({ component: "ListBox" });
+    const classNames2 = (0, import_system74.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       import_react_aria_components48.GridList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: (0, import_system72.cn)(
+        className: (0, import_system74.cn)(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -3025,29 +3373,29 @@ var _SelectList = (0, import_react47.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "div",
   {
     ...props,
-    className: (0, import_system73.cn)(["sticky h-[--height] overflow-auto", import_system73.width[width]]),
-    style: (0, import_system73.createVar)({ height }),
+    className: (0, import_system75.cn)(["sticky h-[--height] overflow-auto", import_system75.width[width]]),
+    style: (0, import_system75.createVar)({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-var import_react48 = require("react");
+var import_react52 = require("react");
 var import_react_aria_components49 = require("react-aria-components");
-var import_system74 = require("@marigold/system");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var _Slider = (0, import_react48.forwardRef)(
+var import_system76 = require("@marigold/system");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var _Slider = (0, import_react52.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -3057,7 +3405,7 @@ var _Slider = (0, import_react48.forwardRef)(
     label,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system74.useClassNames)({
+    const classNames2 = (0, import_system76.useClassNames)({
       component: "Slider",
       variant,
       size
@@ -3066,38 +3414,38 @@ var _Slider = (0, import_react48.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
       FieldBase,
       {
         as: import_react_aria_components49.Slider,
-        className: (0, import_system74.cn)(
+        className: (0, import_system76.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          import_system74.width[width]
+          import_system76.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(_Label, { children: props.children && props.children || label && label }),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system74.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(_Label, { children: props.children && props.children || label && label }),
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system76.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             import_react_aria_components49.SliderTrack,
             {
-              className: (0, import_system74.cn)("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              className: (0, import_system76.cn)("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   "div",
                   {
-                    className: (0, import_system74.cn)(
+                    className: (0, import_system76.cn)(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames2.track
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   "div",
                   {
-                    className: (0, import_system74.cn)(
+                    className: (0, import_system76.cn)(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames2.selectedTrack
                     ),
@@ -3107,10 +3455,10 @@ var _Slider = (0, import_react48.forwardRef)(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   import_react_aria_components49.SliderThumb,
                   {
-                    className: (0, import_system74.cn)("top-1/2 cursor-pointer", classNames2.thumb),
+                    className: (0, import_system76.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: thumbLabels == null ? void 0 : thumbLabels[i]
@@ -3127,12 +3475,12 @@ var _Slider = (0, import_react48.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var Split = () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { role: "separator", className: "grow" });
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var Split = () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system75 = require("@marigold/system");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_system77 = require("@marigold/system");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -3142,14 +3490,14 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     "div",
     {
-      className: (0, import_system75.cn)(
+      className: (0, import_system77.cn)(
         "flex flex-col",
-        import_system75.gapSpace[space],
-        alignX && ((_b = (_a = import_system75.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system75.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system77.gapSpace[space],
+        alignX && ((_b = (_a = import_system77.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system77.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -3159,11 +3507,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react49 = require("react");
+var import_react53 = require("react");
 var import_react_aria_components50 = require("react-aria-components");
-var import_system76 = require("@marigold/system");
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var _Switch = (0, import_react49.forwardRef)(
+var import_system78 = require("@marigold/system");
+var import_jsx_runtime92 = require("react/jsx-runtime");
+var _Switch = (0, import_react53.forwardRef)(
   ({
     variant,
     size,
@@ -3174,37 +3522,37 @@ var _Switch = (0, import_react49.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system76.useClassNames)({ component: "Switch", size, variant });
+    const classNames2 = (0, import_system78.useClassNames)({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
       import_react_aria_components50.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system76.cn)(
-          import_system76.width[width],
+        className: (0, import_system78.cn)(
+          import_system78.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
             "div",
             {
-              className: (0, import_system76.cn)(
+              className: (0, import_system78.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                 "div",
                 {
-                  className: (0, import_system76.cn)(
+                  className: (0, import_system78.cn)(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3223,24 +3571,24 @@ var _Switch = (0, import_react49.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react57 = require("react");
+var import_react61 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system82 = require("@marigold/system");
+var import_system84 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react50 = require("react");
-var TableContext = (0, import_react50.createContext)({});
-var useTableContext = () => (0, import_react50.useContext)(TableContext);
+var import_react54 = require("react");
+var TableContext = (0, import_react54.createContext)({});
+var useTableContext = () => (0, import_react54.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 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_runtime89.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       "td",
       {
         className: classNames2 == null ? void 0 : classNames2.cell,
@@ -3250,18 +3598,18 @@ var TableBody = ({ children, emptyState }) => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react51 = require("react");
+var import_react55 = 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_system77 = require("@marigold/system");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_system79 = require("@marigold/system");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react51.useRef)(null);
+  const ref = (0, import_react55.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3281,12 +3629,12 @@ var TableCell = ({ cell, align = "left" }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus2.useFocusRing)();
-  const stateProps = (0, import_system77.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  const stateProps = (0, import_system79.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system77.cn)(classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system79.cn)(classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils3.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
@@ -3296,11 +3644,11 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react52 = require("react");
+var import_react56 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils4 = require("@react-aria/utils");
-var import_system78 = require("@marigold/system");
+var import_system80 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3323,9 +3671,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react52.useRef)(null);
+  const ref = (0, import_react56.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3339,34 +3687,34 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system78.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  const stateProps = (0, import_system80.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system78.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system80.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils4.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react53 = require("react");
+var import_react57 = require("react");
 var import_focus4 = require("@react-aria/focus");
-var import_interactions = require("@react-aria/interactions");
+var import_interactions2 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils6 = require("@react-aria/utils");
-var import_system79 = require("@marigold/system");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_system81 = require("@marigold/system");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
   width = "auto",
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react53.useRef)(null);
+  const ref = (0, import_react57.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3375,24 +3723,24 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
+  const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system79.useStateProps)({
+  const stateProps = (0, import_system81.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system79.cn)("cursor-default", import_system79.width[width], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system81.cn)("cursor-default", import_system81.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_runtime92.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "invisible", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(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_runtime96.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "invisible", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -3400,10 +3748,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     "thead",
     {
       ...rowGroupProps,
@@ -3414,29 +3762,29 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react54 = require("react");
+var import_react58 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react54.useRef)(null);
+  const ref = (0, import_react58.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react55 = require("react");
+var import_react59 = require("react");
 var import_focus5 = require("@react-aria/focus");
-var import_interactions2 = require("@react-aria/interactions");
+var import_interactions3 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils7 = require("@react-aria/utils");
-var import_system80 = require("@marigold/system");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_system82 = require("@marigold/system");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react55.useRef)(null);
+  const ref = (0, import_react59.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system80.useClassNames)({
+  const classNames2 = (0, import_system82.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3451,21 +3799,21 @@ var TableRow = ({ children, row }) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_interactions2.useHover)({
+  const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system80.useStateProps)({
+  const stateProps = (0, import_system82.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system80.cn)(
+      className: (0, import_system82.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3479,19 +3827,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react56 = require("react");
+var import_react60 = require("react");
 var import_focus6 = require("@react-aria/focus");
-var import_interactions3 = require("@react-aria/interactions");
+var import_interactions4 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils8 = require("@react-aria/utils");
-var import_system81 = require("@marigold/system");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_system83 = require("@marigold/system");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react56.useRef)(null);
+  const ref = (0, import_react60.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3501,27 +3849,27 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
-  const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
+  const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system81.useStateProps)({
+  const stateProps = (0, import_system83.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system81.cn)(import_system81.width[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system83.cn)(import_system83.width[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils8.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size,
@@ -3533,7 +3881,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react57.useRef)(null);
+  const tableRef = (0, import_react61.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3544,21 +3892,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system82.useClassNames)({
+  const classNames2 = (0, import_system84.useClassNames)({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system82.cn)(
+          className: (0, import_system84.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -3566,10 +3914,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(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__ */ (0, import_jsx_runtime97.jsx)(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3577,7 +3925,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3588,12 +3936,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(TableBody, { emptyState, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(TableBody, { emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(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__ */ (0, import_jsx_runtime97.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3618,8 +3966,8 @@ Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
 var import_react_aria_components51 = require("react-aria-components");
-var import_system83 = require("@marigold/system");
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_system85 = require("@marigold/system");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var _Text = ({
   variant,
   size,
@@ -3633,29 +3981,30 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const theme = (0, import_system83.useTheme)();
-  const classNames2 = (0, import_system83.useClassNames)({
+  const theme = (0, import_system85.useTheme)();
+  const classNames2 = (0, import_system85.useClassNames)({
     component: "Text",
     variant,
     size
   });
   const Component = props.slot ? import_react_aria_components51.Text : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+  const elementType = props.slot ? { elementType: as } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     Component,
     {
       ...props,
-      elementType: props.slot ? as : void 0,
-      className: (0, import_system83.cn)(
+      ...elementType,
+      className: (0, import_system85.cn)(
         "text-[--color] outline-[--outline]",
         classNames2,
-        fontStyle && import_system83.textStyle[fontStyle],
-        align && import_system83.textAlign[align],
-        cursor && import_system83.cursorStyle[cursor],
-        weight && import_system83.fontWeight[weight],
-        fontSize && import_system83.textSize[fontSize]
+        fontStyle && import_system85.textStyle[fontStyle],
+        align && import_system85.textAlign[align],
+        cursor && import_system85.cursorStyle[cursor],
+        weight && import_system85.fontWeight[weight],
+        fontSize && import_system85.textSize[fontSize]
       ),
-      style: (0, import_system83.createVar)({
-        color: color && (0, import_system83.getColor)(
+      style: (0, import_system85.createVar)({
+        color: color && (0, import_system85.getColor)(
           theme,
           color,
           color
@@ -3668,11 +4017,11 @@ var _Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react58 = require("react");
+var import_react62 = require("react");
 var import_react_aria_components52 = require("react-aria-components");
-var import_system84 = require("@marigold/system");
-var import_jsx_runtime99 = require("react/jsx-runtime");
-var _TextArea = (0, import_react58.forwardRef)(
+var import_system86 = require("@marigold/system");
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var _TextArea = (0, import_react62.forwardRef)(
   ({
     variant,
     size,
@@ -3683,7 +4032,7 @@ var _TextArea = (0, import_react58.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system84.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system86.useClassNames)({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3691,15 +4040,15 @@ var _TextArea = (0, import_react58.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_aria_components52.TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria_components52.TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react59 = require("react");
+var import_react63 = require("react");
 var import_react_aria_components53 = require("react-aria-components");
-var import_jsx_runtime100 = require("react/jsx-runtime");
-var _TextField = (0, import_react59.forwardRef)(
+var import_jsx_runtime104 = require("react/jsx-runtime");
+var _TextField = (0, import_react63.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -3708,13 +4057,13 @@ var _TextField = (0, import_react59.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(FieldBase, { as: import_react_aria_components53.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(FieldBase, { as: import_react_aria_components53.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system85 = require("@marigold/system");
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_system87 = require("@marigold/system");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3727,17 +4076,17 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system85.cn)(
+      className: (0, import_system87.cn)(
         "grid",
-        import_system85.gapSpace[space],
+        import_system87.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system85.createVar)({ column, tilesWidth }),
+      style: (0, import_system87.createVar)({ column, tilesWidth }),
       children
     }
   );
@@ -3745,11 +4094,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_react_aria_components55 = require("react-aria-components");
-var import_system86 = require("@marigold/system");
+var import_system88 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react_aria_components54 = require("react-aria-components");
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3763,26 +4112,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react_aria_components54.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_react_aria_components54.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = (0, import_system86.useClassNames)({ component: "Tooltip", variant, size });
+  const classNames2 = (0, import_system88.useClassNames)({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
     import_react_aria_components55.Tooltip,
     {
       ...props,
-      className: (0, import_system86.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system88.cn)("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria_components55.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react_aria_components55.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3794,273 +4143,285 @@ _Tooltip.Trigger = _TooltipTrigger;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react60 = require("react");
+var import_react_aria_components57 = require("react-aria-components");
+var import_system90 = require("@marigold/system");
+
+// src/XLoader/BaseLoader.tsx
 var import_react_aria_components56 = require("react-aria-components");
-var import_system87 = require("@marigold/system");
-var import_jsx_runtime104 = require("react/jsx-runtime");
-var LoadingModes = {
-  FullSize: "fullsize",
-  Inline: "inline"
+var import_system89 = require("@marigold/system");
+var import_jsx_runtime108 = require("react/jsx-runtime");
+var BaseLoader = ({
+  variant,
+  size,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const className = (0, import_system89.useClassNames)({ component: "XLoader", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+    import_react_aria_components56.ProgressBar,
+    {
+      className: className.container,
+      isIndeterminate: true,
+      "aria-label": ariaLabel || children ? ariaLabel : "Loading...",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 150 150",
+            fill: "currentColor",
+            className: className.loader,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "1.0s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.9s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.8s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.7s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.6s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.5s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.4s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.3s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.2s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.1s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                "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__ */ (0, import_jsx_runtime108.jsx)(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.0s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        children ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react_aria_components56.Label, { className: className.label, children }) : null
+      ]
+    }
+  );
 };
-var Loader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
-  import_system87.SVG,
-  {
-    id: "XLoader",
-    xmlns: "http://www.w3.org/2000/svg",
-    size: 150,
-    viewBox: "0 0 150 150",
-    ...props,
-    ...ref,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "1.0s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.9s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.8s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.7s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.6s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.5s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.4s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.3s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.2s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.1s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-        "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__ */ (0, import_jsx_runtime104.jsx)(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.0s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      )
-    ]
-  }
-));
-var LoaderFullSize = (0, import_react60.forwardRef)(
-  ({ children, ...rest }, ref) => {
-    const className = (0, import_system87.useClassNames)({
-      component: "Underlay",
-      variant: "modal",
-      className: "fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-screen items-center justify-center bg-gray-950/30 cursor-progress"
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_react_aria_components56.ModalOverlay, { defaultOpen: true, className, isKeyboardDismissDisabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_react_aria_components56.Modal, { children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_react_aria_components56.Dialog, { className: "text-text-inverted outline-0", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(Stack, { space: 2, alignX: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Loader, { ...rest, ...ref, color: "text-inverted", size: 80 }),
-      children
-    ] }) }) }) });
-  }
-);
-var LoaderInline = (0, import_react60.forwardRef)(
-  ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "text-text-inverted flex h-full w-full items-center justify-center bg-gray-950/30", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(Stack, { space: 2, alignX: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Loader, { ...rest, ...ref, color: "text-inverted", size: 80 }),
-      children
-    ] }) });
-  }
-);
-var XLoader = (0, import_react60.forwardRef)(
-  ({ mode, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_jsx_runtime104.Fragment, { children: mode === LoadingModes.FullSize ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(LoaderFullSize, { ...rest, ...ref }) : mode === LoadingModes.Inline ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(LoaderInline, { ...rest, ...ref }) : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Loader, { ...rest, ...ref }) });
-  }
-);
+
+// src/XLoader/XLoader.tsx
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var LoaderFullSize = (props) => {
+  const className = (0, import_system90.useClassNames)({
+    component: "Underlay",
+    variant: "modal",
+    className: "fixed left-0 top-0 z-10 h-[--visual-viewport-height] w-screen"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.ModalOverlay, { defaultOpen: true, className, isKeyboardDismissDisabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Modal, { className: "grid h-[--visual-viewport-height] cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react_aria_components57.Dialog, { className: "outline-0", "aria-label": "Fullscreen Loader", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { ...props }) }) }) });
+};
+var LoaderInline = (props) => {
+  const className = (0, import_system90.useClassNames)({
+    component: "Underlay",
+    variant: "modal",
+    className: "flex size-full items-center justify-center"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { ...props }) });
+};
+var XLoader = ({ mode, variant, ...props }) => mode === "fullsize" ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(LoaderFullSize, { variant: variant != null ? variant : "inverted", ...props }) : mode === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(LoaderInline, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components60 = require("react-aria-components");
-var import_system90 = require("@marigold/system");
+var import_react_aria_components61 = require("react-aria-components");
+var import_system93 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react61 = require("react");
-var TabContext = (0, import_react61.createContext)({});
-var useTabContext = () => (0, import_react61.useContext)(TabContext);
+var import_react64 = require("react");
+var TabContext = (0, import_react64.createContext)({});
+var useTabContext = () => (0, import_react64.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components57 = require("react-aria-components");
-var import_system88 = require("@marigold/system");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_react_aria_components58 = require("react-aria-components");
+var import_system91 = require("@marigold/system");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-    import_react_aria_components57.Tab,
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    import_react_aria_components58.Tab,
     {
       ...props,
-      className: (0, import_system88.cn)(
+      className: (0, import_system91.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4070,49 +4431,49 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components58 = require("react-aria-components");
-var import_system89 = require("@marigold/system");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_react_aria_components59 = require("react-aria-components");
+var import_system92 = require("@marigold/system");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
-    import_react_aria_components58.TabList,
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_react_aria_components59.TabList,
     {
       ...props,
-      className: (0, import_system89.cn)("flex", import_system89.gapSpace[space], classNames2.tabsList),
+      className: (0, import_system92.cn)("flex", import_system92.gapSpace[space], classNames2.tabsList),
       children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components59 = require("react-aria-components");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_react_aria_components60 = require("react-aria-components");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react_aria_components59.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_react_aria_components60.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = (0, import_system90.useClassNames)({
+  const classNames2 = (0, import_system93.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react_aria_components60.Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_react_aria_components61.Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
 _Tabs.Item = _Tab;
 
 // src/RouterProvider/RouterProvider.tsx
-var import_react_aria_components61 = require("react-aria-components");
+var import_react_aria_components62 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4160,6 +4521,7 @@ var import_react_aria_components61 = require("react-aria-components");
   Multiselect,
   NumberField,
   OverlayContainerProvider,
+  Pagination,
   Popover,
   Radio,
   RadioGroup,