@saas-ui/react 3.0.0-alpha.16 → 3.0.0-alpha.18

package/dist/index.cjs

@@ -49,6 +49,7 @@ __export(src_exports, {
   Menu: () => menu_exports,
   Navbar: () => navbar_exports,
   NumberInput: () => NumberInput,
+  Pagination: () => pagination_exports,
   PasswordInput: () => PasswordInput,
   Persona: () => Persona,
   PersonaAvatar: () => PersonaAvatar2,
@@ -66,7 +67,7 @@ __export(src_exports, {
   Switch: () => Switch,
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
-  createSystem: () => import_react161.createSystem,
+  createSystem: () => import_react163.createSystem,
   defaultConfig: () => defaultConfig,
   defaultPresenceOptions: () => defaultPresenceOptions,
   defaultSystem: () => defaultSystem,
@@ -2269,7 +2270,7 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
     position: {
       static: {
         root: {
-          height: "100vh"
+          height: "100dvh"
         }
       },
       fullscreen: {
@@ -2280,18 +2281,12 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
       }
     },
     variant: {
-      plain: {},
-      raised: {
-        main: {
-          boxShadow: "xs",
-          zIndex: "layer-1"
-        }
-      }
+      plain: {}
     }
   },
   defaultVariants: {
     position: "static",
-    variant: "raised"
+    variant: "plain"
   }
 });
 
@@ -2302,7 +2297,6 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
   slots: ["root", "item", "header", "cell"],
   base: {
     root: {
-      py: 2,
       position: "relative"
     },
     item: {
@@ -2311,35 +2305,14 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
       alignItems: "center",
       justifyContent: "space-between",
       flex: 1,
-      cursor: "pointer",
       userSelect: "none",
-      transitionProperty: "common",
-      transitionDuration: "normal",
       borderRadius: "inherit",
       outline: "none",
-      _hover: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
       _focusVisible: {
         boxShadow: "outline"
       },
-      _focus: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
-      _active: {
-        bg: "blackAlpha.100",
-        _dark: {
-          bg: "whiteAlpha.100"
-        }
-      },
       _disabled: {
-        cursor: "inherit",
+        cursor: "disabled",
         opacity: 0.5,
         _hover: {
           bg: "transparent",
@@ -2361,50 +2334,92 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
       position: "sticky",
       fontSize: "md",
       fontWeight: "semibold",
-      color: "muted"
+      color: "fg.muted"
     },
     cell: {
-      display: "flex",
       flexShrink: 0
     }
   },
   variants: {
+    interactive: {
+      true: {
+        item: {
+          cursor: "button",
+          transitionProperty: "bg",
+          transitionDuration: "fast",
+          _hover: {
+            bg: "bg.subtle"
+          },
+          _active: {
+            bg: "bg.subtle"
+          }
+        }
+      }
+    },
+    variant: {
+      simple: {},
+      rounded: {
+        item: {
+          borderRadius: "md",
+          mb: 0.5
+        }
+      }
+    },
     size: {
       sm: {
         root: {
-          fontSize: "sm"
+          textStyle: "sm",
+          py: 0.5
         },
         item: {
           py: 1,
-          px: 1
+          px: 2,
+          gap: 1
         },
         header: {
           py: 1,
-          px: 1
-        },
-        cell: {
-          px: 1
+          px: 2
         }
       },
       md: {
         root: {
-          fontSize: "md"
+          textStyle: "md",
+          py: 1
         },
         item: {
           py: 2,
-          px: 2
+          px: 3,
+          gap: 2
         },
         header: {
           py: 2,
-          px: 2
-        },
-        cell: {
-          px: 2
+          px: 3
         }
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "rounded",
+      size: "sm",
+      css: {
+        root: {
+          p: 1
+        }
+      }
+    },
+    {
+      variant: "rounded",
+      size: "md",
+      css: {
+        root: {
+          p: 2
+        }
+      }
+    }
+  ],
   defaultVariants: {
+    variant: "simple",
     size: "md"
   }
 });
@@ -2487,7 +2502,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
       top: 0,
       insetX: 0,
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       transitionTimingFunction: "ease-in-out",
       _hidden: {
         transform: "translateY(-100%)"
@@ -2523,7 +2538,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
       boxSizing: "border-box",
       borderRadius: "md",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       lineHeight: 1,
       _focusVisible: {
         outline: "none",
@@ -4569,7 +4584,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
       display: "inline-flex",
       alignItems: "center",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       cursor: "text",
       _hover: {
         bg: "bg.muted"
@@ -4584,7 +4599,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
       py: "1",
       px: "1",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       width: "full",
       focusVisibleRing: "inside",
       focusRingWidth: "2px",
@@ -8939,7 +8954,7 @@ var defaultConfig = (0, import_react97.mergeConfigs)(import_react97.defaultBaseC
 var defaultSystem = (0, import_react97.createSystem)(defaultConfig);
 
 // src/index.ts
-var import_react161 = require("@chakra-ui/react");
+var import_react163 = require("@chakra-ui/react");
 
 // src/provider/sui-provider.tsx
 var React = __toESM(require("react"), 1);
@@ -9223,6 +9238,14 @@ var CheckIcon = createIcon({
   displayName: "CheckIcon",
   path: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
 });
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
 
 // src/components/close-button/close-button.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -9706,15 +9729,91 @@ var MenuItemText = import_react136.Menu.ItemText;
 var MenuItemCommand = import_react136.Menu.ItemCommand;
 var MenuTrigger = import_react136.Menu.Trigger;
 
+// src/components/pagination/pagination.tsx
+var pagination_exports = {};
+__export(pagination_exports, {
+  Context: () => Context,
+  Ellipsis: () => Ellipsis,
+  Item: () => Item,
+  Items: () => Items,
+  NextButton: () => NextButton,
+  NextTrigger: () => NextTrigger,
+  PageText: () => PageText,
+  PrevButton: () => PrevButton,
+  PrevTrigger: () => PrevTrigger,
+  Root: () => Root
+});
+var import_react137 = require("react");
+var import_react138 = require("@chakra-ui/react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var [RootPropsProvider, useRootProps] = (0, import_react138.createContext)({
+  name: "RootPropsProvider"
+});
+var variantMap = {
+  outline: { default: "ghost", ellipsis: "plain", current: "outline" },
+  solid: { default: "outline", ellipsis: "outline", current: "solid" },
+  subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }
+};
+var Root = (0, import_react137.forwardRef)(
+  function PaginationRoot(props, ref) {
+    const { size = "sm", variant = "outline", ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Root, { ref, type: "button", ...rest }) });
+  }
+);
+var Ellipsis = (0, import_react137.forwardRef)(function PaginationEllipsis(props, ref) {
+  var _a7;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EllipsisIcon, {}) }) });
+});
+var Item = (0, import_react137.forwardRef)(
+  function PaginationItem(props, ref) {
+    const { page } = (0, import_react138.usePaginationContext)();
+    const { size, variantMap: variantMap2 } = useRootProps();
+    const current = page === props.value;
+    const variant = current ? variantMap2.current : variantMap2.default;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Button, { variant, size, children: props.value }) });
+  }
+);
+var PrevButton = (0, import_react137.forwardRef)(function PaginationPrevTrigger(props, ref) {
+  var _a7;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.IconButton, { variant: variantMap2.default, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronLeftIcon, {}) }) });
+});
+var NextButton = (0, import_react137.forwardRef)(function PaginationNextTrigger(props, ref) {
+  var _a7;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.IconButton, { variant: variantMap2.default, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) });
+});
+var Items = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+    return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { type: "page", value: page.value, ...props }, index);
+  }) });
+};
+var PageText = (0, import_react137.forwardRef)(
+  function PaginationPageText(props, ref) {
+    const { format = "compact", ...rest } = props;
+    const { page, pages, pageRange, count } = (0, import_react138.usePaginationContext)();
+    const content = (0, import_react137.useMemo)(() => {
+      if (format === "short") return `${page} / ${pages.length}`;
+      if (format === "compact") return `${page} of ${pages.length}`;
+      return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
+    }, [format, page, pages.length, pageRange, count]);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Text, { fontWeight: "medium", ref, ...rest, children: content });
+  }
+);
+var PrevTrigger = import_react138.Pagination.PrevTrigger;
+var NextTrigger = import_react138.Pagination.NextTrigger;
+var Context = import_react138.Pagination.Context;
+
 // src/components/password-input/password-input.tsx
-var import_react139 = require("react");
-var import_react140 = require("@chakra-ui/react");
+var import_react141 = require("react");
+var import_react142 = require("@chakra-ui/react");
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
-var import_react138 = __toESM(require("react"), 1);
+var import_react140 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-icons/lib/iconContext.mjs
-var import_react137 = __toESM(require("react"), 1);
+var import_react139 = __toESM(require("react"), 1);
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -9722,7 +9821,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react137.default.createContext && /* @__PURE__ */ import_react137.default.createContext(DefaultContext);
+var IconContext = import_react139.default.createContext && /* @__PURE__ */ import_react139.default.createContext(DefaultContext);
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
 var _excluded = ["attr", "size", "title"];
@@ -9811,12 +9910,12 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ import_react138.default.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react140.default.createElement(node.tag, _objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function GenIcon(data) {
-  return (props) => /* @__PURE__ */ import_react138.default.createElement(IconBase, _extends({
+  return (props) => /* @__PURE__ */ import_react140.default.createElement(IconBase, _extends({
     attr: _objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
@@ -9831,7 +9930,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ import_react138.default.createElement("svg", _extends({
+    return /* @__PURE__ */ import_react140.default.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -9843,9 +9942,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ import_react138.default.createElement("title", null, title), props.children);
+    }), title && /* @__PURE__ */ import_react140.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? /* @__PURE__ */ import_react138.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react140.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 }
 
 // ../../node_modules/react-icons/lu/index.mjs
@@ -9857,28 +9956,28 @@ function LuEye(props) {
 }
 
 // src/components/password-input/password-input.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react139.forwardRef)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react141.forwardRef)(
   function PasswordInput2(props, ref) {
     const {
       rootProps,
       defaultVisible,
       visible: visibleProp,
       onVisibleChange,
-      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LuEyeOff, {}) },
+      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LuEyeOff, {}) },
       ...rest
     } = props;
-    const [visible, setVisible] = (0, import_react140.useControllableState)({
+    const [visible, setVisible] = (0, import_react142.useControllableState)({
       value: visibleProp,
       defaultValue: defaultVisible || false,
       onChange: onVisibleChange
     });
-    const inputRef = (0, import_react139.useRef)(null);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    const inputRef = (0, import_react141.useRef)(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       InputGroup,
       {
         width: "full",
-        endElement: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        endElement: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           VisibilityTrigger,
           {
             disabled: rest.disabled,
@@ -9892,11 +9991,11 @@ var PasswordInput = (0, import_react139.forwardRef)(
           }
         ),
         ...rootProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_react140.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_react142.Input,
           {
             ...rest,
-            ref: (0, import_react140.mergeRefs)(ref, inputRef),
+            ref: (0, import_react142.mergeRefs)(ref, inputRef),
             type: visible ? "text" : "password"
           }
         )
@@ -9904,10 +10003,10 @@ var PasswordInput = (0, import_react139.forwardRef)(
     );
   }
 );
-var VisibilityTrigger = (0, import_react139.forwardRef)(
+var VisibilityTrigger = (0, import_react141.forwardRef)(
   function VisibilityTrigger2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_react140.IconButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_react142.IconButton,
       {
         tabIndex: -1,
         ref,
@@ -9928,27 +10027,27 @@ var VisibilityTrigger = (0, import_react139.forwardRef)(
 var React7 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
-var import_react142 = require("react");
-var import_react143 = require("@chakra-ui/react");
+var import_react144 = require("react");
+var import_react145 = require("@chakra-ui/react");
 var import_utils8 = require("@saas-ui/core/utils");
 
 // src/components/persona/persona.context.ts
-var import_react141 = require("@chakra-ui/react");
+var import_react143 = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider: withProvider5,
   withContext: withContext6
-} = (0, import_react141.createSlotRecipeContext)({
+} = (0, import_react143.createSlotRecipeContext)({
   key: "suiPersona"
 });
 
 // src/components/persona/persona-primitive.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var PersonaRoot = withProvider5(
-  (0, import_react142.forwardRef)((props, ref) => {
+  (0, import_react144.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react143.chakra.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react145.chakra.div,
       {
         ref,
         ...rest,
@@ -9965,7 +10064,7 @@ var PersonaRoot = withProvider5(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react142.forwardRef)(
+var PersonaAvatar = (0, import_react144.forwardRef)(
   (props, ref) => {
     const {
       name,
@@ -9978,10 +10077,10 @@ var PersonaAvatar = (0, import_react142.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react143.Avatar.Root, { ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react143.Avatar.Fallback, { children: getInitials2(name) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        import_react143.Avatar.Image,
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react145.Avatar.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react145.Avatar.Fallback, { children: getInitials2(name) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react145.Avatar.Image,
         {
           src,
           srcSet,
@@ -10013,7 +10112,7 @@ var PersonaTertiaryLabel = withContext6(
 );
 
 // src/components/persona/persona.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Persona = React7.forwardRef(
   (props, ref) => {
     const {
@@ -10036,7 +10135,7 @@ var Persona = React7.forwardRef(
       srcSet,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       PersonaRoot,
       {
         ref,
@@ -10045,7 +10144,7 @@ var Persona = React7.forwardRef(
         size,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             PersonaAvatar,
             {
               name,
@@ -10056,13 +10155,13 @@ var Persona = React7.forwardRef(
               onError,
               src,
               srcSet,
-              children: presence ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PersonaPresenceBadge, { children: presenceIcon }) : null
+              children: presence ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PersonaPresenceBadge, { children: presenceIcon }) : null
             }
           ),
-          !hideDetails && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PersonaDetails, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PersonaLabel, { children: label || name }),
-            secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PersonaSecondaryLabel, { children: secondaryLabel }),
-            tertiaryLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PersonaTertiaryLabel, { children: tertiaryLabel }),
+          !hideDetails && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(PersonaDetails, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PersonaLabel, { children: label || name }),
+            secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PersonaSecondaryLabel, { children: secondaryLabel }),
+            tertiaryLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PersonaTertiaryLabel, { children: tertiaryLabel }),
             children
           ] })
         ]
@@ -10072,7 +10171,7 @@ var Persona = React7.forwardRef(
 );
 Persona.displayName = "Persona";
 var PersonaAvatar2 = React7.forwardRef(function PersonaAvatar3(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Persona, { ref, ...props, hideDetails: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Persona, { ref, ...props, hideDetails: true });
 });
 
 // src/components/persona/presence.ts
@@ -10100,10 +10199,10 @@ var defaultPresenceOptions = {
 };
 
 // src/components/pin-input/pin-input.tsx
-var import_react144 = require("react");
-var import_react145 = require("@chakra-ui/react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var PinInput = (0, import_react144.forwardRef)(
+var import_react146 = require("react");
+var import_react147 = require("@chakra-ui/react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var PinInput = (0, import_react146.forwardRef)(
   function PinInput2(props, ref) {
     const {
       pinLength = 4,
@@ -10113,35 +10212,35 @@ var PinInput = (0, import_react144.forwardRef)(
       gap = attached ? 0 : 2,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react145.PinInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react145.PinInput.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react145.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react145.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react145.PinInput.Input, { index }, index)) }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react147.PinInput.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.PinInput.Input, { index }, index)) }) })
     ] });
   }
 );
 
 // src/components/radio/radio.tsx
-var import_react146 = require("react");
-var import_react147 = require("@chakra-ui/react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Radio = (0, import_react146.forwardRef)(
+var import_react148 = require("react");
+var import_react149 = require("@chakra-ui/react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Radio = (0, import_react148.forwardRef)(
   function Radio2(props, ref) {
     const { children, inputProps, rootRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react147.RadioGroup.Item, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.RadioGroup.ItemIndicator, {}),
-      children && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react147.RadioGroup.ItemText, { children })
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react149.RadioGroup.Item, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemIndicator, {}),
+      children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.RadioGroup.ItemText, { children })
     ] });
   }
 );
-var RadioGroup = import_react147.RadioGroup.Root;
+var RadioGroup = import_react149.RadioGroup.Root;
 
 // src/components/search-input/search-input.tsx
-var import_react148 = __toESM(require("react"), 1);
-var import_react149 = require("@chakra-ui/react");
+var import_react150 = __toESM(require("react"), 1);
+var import_react151 = require("@chakra-ui/react");
 var import_utils9 = require("@saas-ui/core/utils");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var SearchInput = (0, import_react148.forwardRef)(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var SearchInput = (0, import_react150.forwardRef)(
   (props, ref) => {
     const {
       placeholder = "Search",
@@ -10150,7 +10249,7 @@ var SearchInput = (0, import_react148.forwardRef)(
       size,
       variant,
       width = "full",
-      icon = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SearchIcon, {}),
+      icon = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SearchIcon, {}),
       resetIcon,
       endElement: endElementProp,
       onChange: onChangeProp,
@@ -10159,18 +10258,18 @@ var SearchInput = (0, import_react148.forwardRef)(
       disabled,
       ...inputProps
     } = props;
-    const inputRef = import_react148.default.useRef(null);
-    const [value, setValue] = (0, import_react149.useControllableState)({
+    const inputRef = import_react150.default.useRef(null);
+    const [value, setValue] = (0, import_react151.useControllableState)({
       value: valueProp,
       defaultValue: defaultValueProp
     });
-    const onChange = import_react148.default.useCallback(
+    const onChange = import_react150.default.useCallback(
       (e) => {
         setValue(e.target.value);
       },
       [setValue]
     );
-    const onKeyDown = import_react148.default.useCallback(
+    const onKeyDown = import_react150.default.useCallback(
       (event) => {
         if (event.key === "Escape") {
           setValue("");
@@ -10186,10 +10285,10 @@ var SearchInput = (0, import_react148.forwardRef)(
       (_a7 = inputRef.current) == null ? void 0 : _a7.focus();
     };
     const showReset = value && !props.disabled;
-    const endElement = showReset ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react149.Group, { width, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react149.InputElement,
+    const endElement = showReset ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.Group, { width, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react151.InputElement,
         {
           placement: "start",
           px: "0",
@@ -10198,8 +10297,8 @@ var SearchInput = (0, import_react148.forwardRef)(
           children: icon
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react149.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react151.Input,
         {
           type: "text",
           placeholder,
@@ -10207,7 +10306,7 @@ var SearchInput = (0, import_react148.forwardRef)(
           size,
           value,
           disabled,
-          ref: (0, import_react149.mergeRefs)(ref, inputRef),
+          ref: (0, import_react151.mergeRefs)(ref, inputRef),
           onChange: (0, import_utils9.callAll)(onChange, onChangeProp),
           onKeyDown: (0, import_utils9.callAll)(onKeyDown, onKeyDownProp),
           ps: "calc(var(--input-height) - var(--input-height) / 10)",
@@ -10215,15 +10314,15 @@ var SearchInput = (0, import_react148.forwardRef)(
           ...inputProps
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react149.InputElement, { placement: "end", children: endElement })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.InputElement, { placement: "end", children: endElement })
     ] });
   }
 );
-var SearchInputResetButton = (0, import_react148.forwardRef)(
+var SearchInputResetButton = (0, import_react150.forwardRef)(
   (props, ref) => {
-    const { children = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CloseIcon, {}), ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_react149.IconButton,
+    const { children = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, {}), ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_react151.IconButton,
       {
         ref,
         variant: "ghost",
@@ -10253,23 +10352,23 @@ __export(namespace_exports3, {
 });
 
 // src/components/select/select.tsx
-var import_react150 = require("react");
-var import_react151 = require("@chakra-ui/react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var SelectTrigger = (0, import_react150.forwardRef)(
+var import_react152 = require("react");
+var import_react153 = require("@chakra-ui/react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SelectTrigger = (0, import_react152.forwardRef)(
   function SelectTrigger2(props, ref) {
     const { children, clearable, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.Select.Control, { ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.Trigger, { ref, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.Select.IndicatorGroup, { children: [
-        clearable && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectClearTrigger, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.Indicator, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.Control, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Trigger, { ref, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.IndicatorGroup, { children: [
+        clearable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectClearTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Indicator, {})
       ] })
     ] });
   }
 );
-var SelectClearTrigger = (0, import_react150.forwardRef)(function SelectClearTrigger2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var SelectClearTrigger = (0, import_react152.forwardRef)(function SelectClearTrigger2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     CloseButton,
     {
       size: "xs",
@@ -10280,24 +10379,24 @@ var SelectClearTrigger = (0, import_react150.forwardRef)(function SelectClearTri
     }
   ) });
 });
-var SelectContent = (0, import_react150.forwardRef)(
+var SelectContent = (0, import_react152.forwardRef)(
   function SelectContent2(props, ref) {
     const { portalled = true, portalRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.Content, { ...rest, ref }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Content, { ...rest, ref }) }) });
   }
 );
-var SelectItem = (0, import_react150.forwardRef)(
+var SelectItem = (0, import_react152.forwardRef)(
   function SelectItem2(props, ref) {
     const { item, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.Select.Item, { item, ...rest, ref, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.Item, { item, ...rest, ref, children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.ItemIndicator, {})
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ItemIndicator, {})
     ] }, item.value);
   }
 );
-var SelectValueText = (0, import_react150.forwardRef)(function SelectValueText2(props, ref) {
+var SelectValueText = (0, import_react152.forwardRef)(function SelectValueText2(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.Context, { children: (select) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.Context, { children: (select) => {
     const items = select.selectedItems;
     if (items.length === 0) return props.placeholder;
     if (children) return children(items);
@@ -10306,9 +10405,9 @@ var SelectValueText = (0, import_react150.forwardRef)(function SelectValueText2(
     return `${items.length} selected`;
   } }) });
 });
-var SelectRoot = (0, import_react150.forwardRef)(function SelectRoot2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react151.Select.Root,
+var SelectRoot = (0, import_react152.forwardRef)(function SelectRoot2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react153.Select.Root,
     {
       ...props,
       ref,
@@ -10316,41 +10415,41 @@ var SelectRoot = (0, import_react150.forwardRef)(function SelectRoot2(props, ref
     }
   );
 });
-var SelectItemGroup = (0, import_react150.forwardRef)(
+var SelectItemGroup = (0, import_react152.forwardRef)(
   function SelectItemGroup2(props, ref) {
     const { children, label, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react151.Select.ItemGroup, { ...rest, ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react151.Select.ItemGroupLabel, { children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.Select.ItemGroup, { ...rest, ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.Select.ItemGroupLabel, { children: label }),
       children
     ] });
   }
 );
-var SelectLabel = import_react151.Select.Label;
-var SelectItemText = import_react151.Select.ItemText;
+var SelectLabel = import_react153.Select.Label;
+var SelectItemText = import_react153.Select.ItemText;
 
 // src/components/segmented-control/segmented-control.tsx
-var import_react152 = require("react");
-var import_react153 = require("@chakra-ui/react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react154 = require("react");
+var import_react155 = require("@chakra-ui/react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function normalize(items) {
   return items.map((item) => {
     if (typeof item === "string") return { value: item, label: item };
     return item;
   });
 }
-var SegmentedControl = (0, import_react152.forwardRef)(function SegmentedControl2(props, ref) {
+var SegmentedControl = (0, import_react154.forwardRef)(function SegmentedControl2(props, ref) {
   const { items, ...rest } = props;
-  const data = (0, import_react152.useMemo)(() => normalize(items), [items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react153.SegmentGroup.Root, { ref, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.SegmentGroup.Indicator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-      import_react153.SegmentGroup.Item,
+  const data = (0, import_react154.useMemo)(() => normalize(items), [items]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react155.SegmentGroup.Root, { ref, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.Indicator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      import_react155.SegmentGroup.Item,
       {
         value: item.value,
         disabled: item.disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.SegmentGroup.ItemText, { children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react153.SegmentGroup.ItemHiddenInput, {})
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.ItemText, { children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react155.SegmentGroup.ItemHiddenInput, {})
         ]
       },
       item.value
@@ -10382,28 +10481,28 @@ __export(sidebar_exports, {
 var import_sidebar = require("@saas-ui/core/sidebar");
 
 // src/components/sidebar/sidebar.context.ts
-var import_react154 = require("@chakra-ui/react");
+var import_react156 = require("@chakra-ui/react");
 var {
   withContext: withContext7,
   useRecipeResult,
   StylesProvider,
   ClassNamesProvider,
   useStyles: useSidebarStyles
-} = (0, import_react154.createSlotRecipeContext)({
+} = (0, import_react156.createSlotRecipeContext)({
   key: "suiSidebar"
 });
 var {
   withProvider: withItemProvider,
   withContext: withItemContext,
   useStyles: useSidebarItemStyles
-} = (0, import_react154.createSlotRecipeContext)({
+} = (0, import_react156.createSlotRecipeContext)({
   key: "suiSidebarNavItem"
 });
 
 // src/components/sidebar/sidebar.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var SidebarProvider = function SidebarProvider2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_sidebar.Sidebar.Provider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RecipeProvider, { ...props, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_sidebar.Sidebar.Provider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RecipeProvider, { ...props, children: props.children }) });
 };
 function RecipeProvider(props) {
   const { mode } = (0, import_sidebar.useSidebar)();
@@ -10411,7 +10510,7 @@ function RecipeProvider(props) {
     ...props,
     mode
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ClassNamesProvider, { value: classNames, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ClassNamesProvider, { value: classNames, children: props.children }) });
 }
 var SidebarRoot = withContext7(
   import_sidebar.Sidebar.Root,
@@ -10499,99 +10598,99 @@ __export(steps_exports, {
   NextTrigger: () => StepsNextTrigger,
   PrevTrigger: () => StepsPrevTrigger,
   Root: () => StepsRoot,
-  useContext: () => import_react155.useStepsContext
+  useContext: () => import_react157.useStepsContext
 });
-var import_react155 = require("@chakra-ui/react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react157 = require("@chakra-ui/react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var StepsItem = (props) => {
   const { title, description, completedIcon, icon, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react155.Steps.Item, { ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react155.Steps.Trigger, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_react155.Steps.Status,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Item, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Trigger, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_react157.Steps.Status,
         {
-          complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckIcon, {}),
-          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Number, {})
+          complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckIcon, {}),
+          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {})
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StepInfo, { title, description })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StepInfo, { title, description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Separator, {})
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Separator, {})
   ] });
 };
 var StepInfo = (props) => {
   const { title, description } = props;
   if (title && description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react155.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Title, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Title, { children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Description, { children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
   ] });
 };
 var StepsIndicator = (props) => {
-  const { icon = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Number, {}), completedIcon } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.Status, { complete: completedIcon, incomplete: icon }) });
+  const { icon = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {}), completedIcon } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Status, { complete: completedIcon, incomplete: icon }) });
 };
-var StepsList = import_react155.Steps.List;
-var StepsRoot = import_react155.Steps.Root;
-var StepsContent = import_react155.Steps.Content;
-var StepsCompletedContent = import_react155.Steps.CompletedContent;
+var StepsList = import_react157.Steps.List;
+var StepsRoot = import_react157.Steps.Root;
+var StepsContent = import_react157.Steps.Content;
+var StepsCompletedContent = import_react157.Steps.CompletedContent;
 var StepsNextTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.NextTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.NextTrigger, { ...props });
 };
 var StepsPrevTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react155.Steps.PrevTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.PrevTrigger, { ...props });
 };
 
 // src/components/switch/switch.tsx
-var import_react156 = require("@chakra-ui/react");
-var import_react157 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Switch = (0, import_react157.forwardRef)(
+var import_react158 = require("@chakra-ui/react");
+var import_react159 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Switch = (0, import_react159.forwardRef)(
   function Switch2(props, ref) {
     const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react156.Switch.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react156.Switch.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react156.Switch.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react156.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react156.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
-        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react156.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Control, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
+        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
       ] }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react156.Switch.Label, { children })
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Label, { children })
     ] });
   }
 );
 
 // src/components/toaster/toaster.tsx
-var import_react158 = require("@chakra-ui/react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var toast = (0, import_react158.createToaster)({
+var import_react160 = require("@chakra-ui/react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var toast = (0, import_react160.createToaster)({
   placement: "bottom-end",
   pauseOnPageIdle: true
 });
 var Toaster = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
     var _a7;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Toast.Root, { width: { md: "sm" }, children: [
-      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Toast.Indicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
-        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Toast.Title, { children: toast2.title }),
-        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Toast.Description, { children: toast2.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Toast.Root, { width: { md: "sm" }, children: [
+      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Indicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
+        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.Description, { children: toast2.description })
       ] }),
-      toast2.action && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Toast.ActionTrigger, { children: toast2.action.label }),
-      ((_a7 = toast2.meta) == null ? void 0 : _a7.closable) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Toast.CloseTrigger, {})
+      toast2.action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.ActionTrigger, { children: toast2.action.label }),
+      ((_a7 = toast2.meta) == null ? void 0 : _a7.closable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Toast.CloseTrigger, {})
     ] });
   } }) });
 };
 
 // src/components/tooltip/tooltip.tsx
-var import_react159 = require("react");
-var import_react160 = require("@chakra-ui/react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Tooltip = (0, import_react159.forwardRef)(
+var import_react161 = require("react");
+var import_react162 = require("@chakra-ui/react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Tooltip = (0, import_react161.forwardRef)(
   function Tooltip2(props, ref) {
     const {
       showArrow,
@@ -10604,10 +10703,10 @@ var Tooltip = (0, import_react159.forwardRef)(
       ...rest
     } = props;
     if (disabled) return children;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Tooltip.Root, { ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Tooltip.Trigger, { asChild: true, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react160.Tooltip.Content, { ref, ...contentProps, children: [
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react160.Tooltip.ArrowTip, {}) }),
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Tooltip.Root, { ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react162.Tooltip.Content, { ref, ...contentProps, children: [
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.Arrow, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react162.Tooltip.ArrowTip, {}) }),
         content
       ] }) }) })
     ] });
@@ -10634,6 +10733,7 @@ var Tooltip = (0, import_react159.forwardRef)(
   Menu,
   Navbar,
   NumberInput,
+  Pagination,
   PasswordInput,
   Persona,
   PersonaAvatar,