@saas-ui/react 3.0.0-next.2 → 3.0.0-next.4

package/dist/index.cjs

@@ -77,6 +77,7 @@ __export(index_exports, {
   Grid: () => import_grid.Grid,
   GridList: () => grid_list_exports,
   Group: () => import_group3.Group,
+  HStack: () => import_stack3.HStack,
   Heading: () => import_typography.Heading,
   Highlight: () => import_highlight.Highlight,
   HoverCard: () => hover_card_exports,
@@ -131,6 +132,7 @@ __export(index_exports, {
   Spacer: () => import_spacer.Spacer,
   Spinner: () => Spinner,
   Stack: () => import_stack3.Stack,
+  StackSeparator: () => import_stack3.StackSeparator,
   Stat: () => stat_exports,
   Status: () => Status,
   Steps: () => steps_exports,
@@ -148,12 +150,26 @@ __export(index_exports, {
   Toggle: () => import_toggle.Toggle,
   ToggleTip: () => ToggleTip,
   Tooltip: () => Tooltip,
+  VStack: () => import_stack3.VStack,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   Wrap: () => import_wrap.Wrap,
-  createSystem: () => import_react88.createSystem,
+  chakra: () => import_styled_system72.chakra,
+  createSystem: () => import_styled_system72.createSystem,
   defaultConfig: () => defaultConfig,
   defaultPersonaPresenceOptions: () => defaultPersonaPresenceOptions,
   defaultSystem: () => defaultSystem,
+  defineAnimationStyles: () => import_styled_system72.defineAnimationStyles,
+  defineConditions: () => import_styled_system72.defineConditions,
+  defineConfig: () => import_styled_system72.defineConfig,
+  defineGlobalStyles: () => import_styled_system72.defineGlobalStyles,
+  defineKeyframes: () => import_styled_system72.defineKeyframes,
+  defineLayerStyles: () => import_styled_system72.defineLayerStyles,
+  defineRecipe: () => import_styled_system72.defineRecipe,
+  defineSemanticTokens: () => import_styled_system72.defineSemanticTokens,
+  defineSlotRecipe: () => import_styled_system72.defineSlotRecipe,
+  defineStyle: () => import_styled_system72.defineStyle,
+  defineTextStyles: () => import_styled_system72.defineTextStyles,
+  defineTokens: () => import_styled_system72.defineTokens,
   toast: () => toast,
   useDataListStyles: () => import_data_list.useDataListStyles,
   useEnvironmentContext: () => import_env.useEnvironmentContext,
@@ -3222,7 +3238,6 @@ var cardSlotRecipe = (0, import_styled_system28.defineSlotRecipe)({
 // src/components/checkbox-card/checkbox-card.recipe.ts
 var import_anatomy8 = require("@chakra-ui/react/anatomy");
 var import_styled_system29 = require("@chakra-ui/react/styled-system");
-var _a, _b, _c, _d, _e, _f, _g;
 var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
   slots: import_anatomy8.checkboxCardAnatomy.keys(),
   className: "chakra-checkbox-card",
@@ -3295,7 +3310,7 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
           py: "1.5",
           borderTopWidth: "1px"
         },
-        indicator: (_a = checkmarkRecipe.variants) == null ? void 0 : _a.size.sm
+        indicator: checkmarkRecipe.variants?.size.sm
       },
       md: {
         root: {
@@ -3310,7 +3325,7 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
           py: "2",
           borderTopWidth: "1px"
         },
-        indicator: (_b = checkmarkRecipe.variants) == null ? void 0 : _b.size.md
+        indicator: checkmarkRecipe.variants?.size.md
       },
       lg: {
         root: {
@@ -3325,7 +3340,7 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
           py: "2",
           borderTopWidth: "1px"
         },
-        indicator: (_c = checkmarkRecipe.variants) == null ? void 0 : _c.size.lg
+        indicator: checkmarkRecipe.variants?.size.lg
       }
     },
     variant: {
@@ -3342,7 +3357,7 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
             bg: "bg.muted"
           }
         },
-        indicator: (_d = checkmarkRecipe.variants) == null ? void 0 : _d.variant.solid
+        indicator: checkmarkRecipe.variants?.variant.solid
       },
       subtle: {
         root: {
@@ -3354,7 +3369,7 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
             color: "colorPalette.fg"
           }
         },
-        indicator: (_e = checkmarkRecipe.variants) == null ? void 0 : _e.variant.plain
+        indicator: checkmarkRecipe.variants?.variant.plain
       },
       outline: {
         root: {
@@ -3366,7 +3381,7 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
             borderColor: "colorPalette.solid"
           }
         },
-        indicator: (_f = checkmarkRecipe.variants) == null ? void 0 : _f.variant.solid
+        indicator: checkmarkRecipe.variants?.variant.solid
       },
       solid: {
         root: {
@@ -3377,7 +3392,7 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
             borderColor: "colorPalette.solid"
           }
         },
-        indicator: (_g = checkmarkRecipe.variants) == null ? void 0 : _g.variant.inverted
+        indicator: checkmarkRecipe.variants?.variant.inverted
       }
     },
     justify: {
@@ -3425,7 +3440,6 @@ var checkboxCardSlotRecipe = (0, import_styled_system29.defineSlotRecipe)({
 // src/components/checkbox/checkbox.recipe.ts
 var import_anatomy9 = require("@chakra-ui/react/anatomy");
 var import_styled_system30 = require("@chakra-ui/react/styled-system");
-var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n;
 var checkboxSlotRecipe = (0, import_styled_system30.defineSlotRecipe)({
   slots: import_anatomy9.checkboxAnatomy.keys(),
   className: "chakra-checkbox",
@@ -3452,33 +3466,33 @@ var checkboxSlotRecipe = (0, import_styled_system30.defineSlotRecipe)({
       xs: {
         root: { gap: "1.5" },
         label: { textStyle: "xs" },
-        control: (_b2 = (_a2 = checkmarkRecipe.variants) == null ? void 0 : _a2.size) == null ? void 0 : _b2.xs
+        control: checkmarkRecipe.variants?.size?.xs
       },
       sm: {
         root: { gap: "2" },
         label: { textStyle: "sm" },
-        control: (_d2 = (_c2 = checkmarkRecipe.variants) == null ? void 0 : _c2.size) == null ? void 0 : _d2.sm
+        control: checkmarkRecipe.variants?.size?.sm
       },
       md: {
         root: { gap: "2.5" },
         label: { textStyle: "sm" },
-        control: (_f2 = (_e2 = checkmarkRecipe.variants) == null ? void 0 : _e2.size) == null ? void 0 : _f2.md
+        control: checkmarkRecipe.variants?.size?.md
       },
       lg: {
         root: { gap: "3" },
         label: { textStyle: "md" },
-        control: (_h = (_g2 = checkmarkRecipe.variants) == null ? void 0 : _g2.size) == null ? void 0 : _h.lg
+        control: checkmarkRecipe.variants?.size?.lg
       }
     },
     variant: {
       outline: {
-        control: (_j = (_i = checkmarkRecipe.variants) == null ? void 0 : _i.variant) == null ? void 0 : _j.outline
+        control: checkmarkRecipe.variants?.variant?.outline
       },
       solid: {
-        control: (_l = (_k = checkmarkRecipe.variants) == null ? void 0 : _k.variant) == null ? void 0 : _l.solid
+        control: checkmarkRecipe.variants?.variant?.solid
       },
       subtle: {
-        control: (_n = (_m = checkmarkRecipe.variants) == null ? void 0 : _m.variant) == null ? void 0 : _n.subtle
+        control: checkmarkRecipe.variants?.variant?.subtle
       }
     }
   },
@@ -5149,7 +5163,6 @@ var selectSlotRecipe = (0, import_styled_system43.defineSlotRecipe)({
 });
 
 // src/components/native-select/native-select.recipe.ts
-var _a3, _b3;
 var nativeSelectSlotRecipe = (0, import_styled_system44.defineSlotRecipe)({
   className: "chakra-native-select",
   slots: import_anatomy22.nativeSelectAnatomy.keys(),
@@ -5203,10 +5216,10 @@ var nativeSelectSlotRecipe = (0, import_styled_system44.defineSlotRecipe)({
   variants: {
     variant: {
       outline: {
-        field: (_a3 = selectSlotRecipe.variants) == null ? void 0 : _a3.variant.outline.trigger
+        field: selectSlotRecipe.variants?.variant.outline.trigger
       },
       subtle: {
-        field: (_b3 = selectSlotRecipe.variants) == null ? void 0 : _b3.variant.subtle.trigger
+        field: selectSlotRecipe.variants?.variant.subtle.trigger
       },
       plain: {
         field: {
@@ -5963,7 +5976,6 @@ var progressSlotRecipe = (0, import_styled_system50.defineSlotRecipe)({
 // src/components/radio-card/radio-card.recipe.ts
 var import_anatomy28 = require("@chakra-ui/react/anatomy");
 var import_styled_system51 = require("@chakra-ui/react/styled-system");
-var _a4, _b4, _c3, _d3, _e3, _f3, _g3;
 var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
   className: "chakra-radio-card",
   slots: import_anatomy28.radioCardAnatomy.keys(),
@@ -6049,7 +6061,7 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
           py: "1.5",
           borderTopWidth: "1px"
         },
-        itemIndicator: (_a4 = radiomarkRecipe.variants) == null ? void 0 : _a4.size.sm
+        itemIndicator: radiomarkRecipe.variants?.size.sm
       },
       md: {
         item: {
@@ -6064,7 +6076,7 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
           py: "2",
           borderTopWidth: "1px"
         },
-        itemIndicator: (_b4 = radiomarkRecipe.variants) == null ? void 0 : _b4.size.md
+        itemIndicator: radiomarkRecipe.variants?.size.md
       },
       lg: {
         item: {
@@ -6079,7 +6091,7 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
           py: "2",
           borderTopWidth: "1px"
         },
-        itemIndicator: (_c3 = radiomarkRecipe.variants) == null ? void 0 : _c3.size.lg
+        itemIndicator: radiomarkRecipe.variants?.size.lg
       }
     },
     variant: {
@@ -6092,7 +6104,7 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
             borderColor: "colorPalette.muted"
           }
         },
-        itemIndicator: (_d3 = radiomarkRecipe.variants) == null ? void 0 : _d3.variant.solid
+        itemIndicator: radiomarkRecipe.variants?.variant.solid
       },
       subtle: {
         item: {
@@ -6104,7 +6116,7 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
             color: "colorPalette.fg"
           }
         },
-        itemIndicator: (_e3 = radiomarkRecipe.variants) == null ? void 0 : _e3.variant.outline
+        itemIndicator: radiomarkRecipe.variants?.variant.outline
       },
       outline: {
         item: {
@@ -6115,7 +6127,7 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
             borderColor: "colorPalette.solid"
           }
         },
-        itemIndicator: (_f3 = radiomarkRecipe.variants) == null ? void 0 : _f3.variant.solid
+        itemIndicator: radiomarkRecipe.variants?.variant.solid
       },
       solid: {
         item: {
@@ -6126,7 +6138,7 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
             borderColor: "colorPalette.solid"
           }
         },
-        itemIndicator: (_g3 = radiomarkRecipe.variants) == null ? void 0 : _g3.variant.inverted
+        itemIndicator: radiomarkRecipe.variants?.variant.inverted
       }
     },
     justify: {
@@ -6174,7 +6186,6 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
 // src/components/radio-group/radio-group.recipe.ts
 var import_anatomy29 = require("@chakra-ui/react/anatomy");
 var import_styled_system52 = require("@chakra-ui/react/styled-system");
-var _a5, _b5, _c4, _d4, _e4, _f4, _g4, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
 var radioGroupSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
   className: "chakra-radio-group",
   slots: import_anatomy29.radioGroupAnatomy.keys(),
@@ -6200,31 +6211,31 @@ var radioGroupSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
   variants: {
     variant: {
       outline: {
-        itemControl: (_b5 = (_a5 = radiomarkRecipe.variants) == null ? void 0 : _a5.variant) == null ? void 0 : _b5.outline
+        itemControl: radiomarkRecipe.variants?.variant?.outline
       },
       subtle: {
-        itemControl: (_d4 = (_c4 = radiomarkRecipe.variants) == null ? void 0 : _c4.variant) == null ? void 0 : _d4.subtle
+        itemControl: radiomarkRecipe.variants?.variant?.subtle
       },
       solid: {
-        itemControl: (_f4 = (_e4 = radiomarkRecipe.variants) == null ? void 0 : _e4.variant) == null ? void 0 : _f4.solid
+        itemControl: radiomarkRecipe.variants?.variant?.solid
       }
     },
     size: {
       xs: {
         item: { textStyle: "xs", gap: "1.5" },
-        itemControl: (_h2 = (_g4 = radiomarkRecipe.variants) == null ? void 0 : _g4.size) == null ? void 0 : _h2.xs
+        itemControl: radiomarkRecipe.variants?.size?.xs
       },
       sm: {
         item: { textStyle: "sm", gap: "2" },
-        itemControl: (_j2 = (_i2 = radiomarkRecipe.variants) == null ? void 0 : _i2.size) == null ? void 0 : _j2.sm
+        itemControl: radiomarkRecipe.variants?.size?.sm
       },
       md: {
         item: { textStyle: "sm", gap: "2.5" },
-        itemControl: (_l2 = (_k2 = radiomarkRecipe.variants) == null ? void 0 : _k2.size) == null ? void 0 : _l2.md
+        itemControl: radiomarkRecipe.variants?.size?.md
       },
       lg: {
         item: { textStyle: "md", gap: "3" },
-        itemControl: (_n2 = (_m2 = radiomarkRecipe.variants) == null ? void 0 : _m2.size) == null ? void 0 : _n2.lg
+        itemControl: radiomarkRecipe.variants?.size?.lg
       }
     }
   },
@@ -6642,6 +6653,7 @@ var sidebarSlotRecipe = (0, import_styled_system55.defineSlotRecipe)({
       fontSize: "xs",
       transitionProperty: "common",
       transitionDuration: "fast",
+      // @ts-expect-error
       _groupCollapsible: {
         cursor: "button",
         userSelect: "none",
@@ -7951,8 +7963,7 @@ var tabsSlotRecipe = (0, import_styled_system62.defineSlotRecipe)({
 // src/components/tag/tag.recipe.ts
 var import_anatomy39 = require("@chakra-ui/react/anatomy");
 var import_styled_system63 = require("@chakra-ui/react/styled-system");
-var _a6;
-var badgeVariant = (_a6 = badgeRecipe.variants) == null ? void 0 : _a6.variant;
+var badgeVariant = badgeRecipe.variants?.variant;
 var tagSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
   slots: import_anatomy39.tagAnatomy.keys(),
   className: "chakra-tag",
@@ -8085,16 +8096,16 @@ var tagSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
     },
     variant: {
       subtle: {
-        root: badgeVariant == null ? void 0 : badgeVariant.subtle
+        root: badgeVariant?.subtle
       },
       solid: {
-        root: badgeVariant == null ? void 0 : badgeVariant.solid
+        root: badgeVariant?.solid
       },
       outline: {
-        root: badgeVariant == null ? void 0 : badgeVariant.outline
+        root: badgeVariant?.outline
       },
       surface: {
-        root: badgeVariant == null ? void 0 : badgeVariant.surface
+        root: badgeVariant?.surface
       }
     }
   },
@@ -9279,7 +9290,6 @@ var createFocusRing = (selector) => {
   return {
     values: ["outside", "inside", "mixed", "none"],
     transform(value, { token }) {
-      var _a8;
       const focusRingColor = token("colors.colorPalette.focusRing");
       const styles = {
         inside: {
@@ -9317,7 +9327,7 @@ var createFocusRing = (selector) => {
           }
         }
       };
-      return (_a8 = styles[value]) != null ? _a8 : {};
+      return styles[value] ?? {};
     }
   };
 };
@@ -9373,15 +9383,14 @@ var defaultThemeConfig = (0, import_react30.defineConfig)({
 
 // src/preset.ts
 var defaultConfig = (0, import_react31.mergeConfigs)(import_react31.defaultBaseConfig, defaultThemeConfig);
-var _a7;
 defaultConfig.utilities = Object.assign(
-  (_a7 = defaultConfig.utilities) != null ? _a7 : {},
+  defaultConfig.utilities ?? {},
   utilities
 );
 var defaultSystem = (0, import_react31.createSystem)(defaultConfig);
 
 // src/index.ts
-var import_react88 = require("@chakra-ui/react");
+var import_styled_system72 = require("@chakra-ui/react/styled-system");
 
 // src/provider/sui-provider.tsx
 var React = __toESM(require("react"), 1);
@@ -9404,7 +9413,7 @@ var useSui = () => React.useContext(SuiContext);
 var import_react33 = require("@chakra-ui/react");
 function useLink() {
   const context = useSui();
-  if (context == null ? void 0 : context.linkComponent) {
+  if (context?.linkComponent) {
     return context.linkComponent;
   }
   return import_react33.chakra.a;
@@ -9617,8 +9626,7 @@ var IconButton = (0, import_react34.forwardRef)(
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var CloseButton = (0, import_react35.forwardRef)(
   function CloseButton2(props, ref) {
-    var _a8;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) });
   }
 );
 
@@ -10000,7 +10008,6 @@ __export(dialog_exports, {
   Content: () => Content2,
   Context: () => Context,
   Description: () => Description,
-  DialogContext: () => import_dialog2.DialogContext,
   Footer: () => Footer,
   Header: () => Header,
   Root: () => Root4,
@@ -10010,7 +10017,6 @@ __export(dialog_exports, {
 var import_react47 = require("react");
 var import_dialog = require("@chakra-ui/react/dialog");
 var import_portal2 = require("@chakra-ui/react/portal");
-var import_dialog2 = require("@ark-ui/react/dialog");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Content2 = (0, import_react47.forwardRef)(
   function DialogContent(props, ref) {
@@ -10060,7 +10066,7 @@ __export(drawer_exports, {
   Trigger: () => Trigger2
 });
 var import_react48 = require("react");
-var import_dialog3 = require("@ark-ui/react/dialog");
+var import_dialog2 = require("@ark-ui/react/dialog");
 var import_react49 = require("@chakra-ui/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Content3 = (0, import_react48.forwardRef)(
@@ -10083,7 +10089,7 @@ var Backdrop2 = import_react49.Drawer.Backdrop;
 var Description2 = import_react49.Drawer.Description;
 var Title2 = import_react49.Drawer.Title;
 var ActionTrigger2 = import_react49.Drawer.ActionTrigger;
-var Context2 = import_dialog3.DialogContext;
+var Context2 = import_dialog2.DialogContext;
 
 // src/components/editable/index.ts
 var import_editable = require("@chakra-ui/react/editable");
@@ -10156,7 +10162,7 @@ var List = React6.forwardRef(
   function FileUploadList(props, ref) {
     const { showSize, clearable, files, ...rest } = props;
     const fileUpload = (0, import_file_upload.useFileUploadContext)();
-    const acceptedFiles = files != null ? files : fileUpload.acceptedFiles;
+    const acceptedFiles = files ?? fileUpload.acceptedFiles;
     if (acceptedFiles.length === 0) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_file_upload.FileUpload.ItemGroup, { ref, ...rest, children: acceptedFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Item2,
@@ -10315,10 +10321,10 @@ var IconBadge = React8.forwardRef(
 var import_image = require("@chakra-ui/react/image");
 
 // src/components/info-tip/info-tip.tsx
-var React11 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 
 // src/components/toggle-tip/toggle-tip.tsx
-var React10 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 
 // src/components/popover/popover.tsx
 var popover_exports = {};
@@ -10328,6 +10334,7 @@ __export(popover_exports, {
   CloseButton: () => CloseButton6,
   CloseTrigger: () => CloseTrigger3,
   Content: () => Content5,
+  Context: () => Context3,
   Description: () => Description3,
   Footer: () => Footer3,
   Header: () => Header3,
@@ -10335,22 +10342,27 @@ __export(popover_exports, {
   Title: () => Title3,
   Trigger: () => Trigger5
 });
-var React9 = __toESM(require("react"), 1);
+var import_react54 = require("react");
 var import_popover = require("@chakra-ui/react/popover");
 var import_portal4 = require("@chakra-ui/react/portal");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Content5 = React9.forwardRef(
+var Content5 = (0, import_react54.forwardRef)(
   function PopoverContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_portal4.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover.Popover.Content, { ref, ...rest }) }) });
+    const portalled = props.portalled ?? false;
+    const portalRef = props.portalRef ?? void 0;
+    const children = props.children ?? null;
+    delete props.portalled;
+    delete props.portalRef;
+    delete props.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_portal4.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover.Popover.Content, { ref, ...props, children }) }) });
   }
 );
-var Arrow2 = React9.forwardRef(
+var Arrow2 = (0, import_react54.forwardRef)(
   function PopoverArrow(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover.Popover.Arrow, { ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover.Popover.ArrowTip, {}) });
   }
 );
-var CloseButton6 = React9.forwardRef(function PopoverCloseTrigger(props, ref) {
+var CloseButton6 = (0, import_react54.forwardRef)(function PopoverCloseTrigger(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_popover.Popover.CloseTrigger,
     {
@@ -10372,10 +10384,11 @@ var Header3 = import_popover.Popover.Header;
 var Root8 = import_popover.Popover.Root;
 var Body3 = import_popover.Popover.Body;
 var Trigger5 = import_popover.Popover.Trigger;
+var Context3 = import_popover.Popover.Context;
 
 // src/components/toggle-tip/toggle-tip.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var ToggleTip = React10.forwardRef(
+var ToggleTip = React9.forwardRef(
   function ToggleTip2(props, ref) {
     const {
       showArrow,
@@ -10409,10 +10422,10 @@ var ToggleTip = React10.forwardRef(
 
 // src/components/info-tip/info-tip.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var InfoTip = React11.forwardRef(
+var InfoTip = React10.forwardRef(
   function InfoTip2(props, ref) {
     const { children, icon, "aria-label": ariaLabel = "Info", ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToggleTip, { content: children, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { variant: "ghost", "aria-label": ariaLabel, size: "2xs", children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InfoIcon, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToggleTip, { content: children, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { variant: "ghost", "aria-label": ariaLabel, size: "2xs", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InfoIcon, {}) }) });
   }
 );
 
@@ -10429,15 +10442,15 @@ __export(loading_overlay_exports, {
   Spinner: () => LoadingOverlaySpinner,
   Text: () => LoadingOverlayText
 });
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_presence = require("@ark-ui/react/presence");
-var import_react57 = require("@chakra-ui/react");
+var import_react58 = require("@chakra-ui/react");
 
 // src/components/spinner/spinner.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_spinner = require("@chakra-ui/react/spinner");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Spinner = (0, import_react54.forwardRef)(
+var Spinner = (0, import_react55.forwardRef)(
   function Spinner2(props, ref) {
     const { loading, children, ...rest } = props;
     if (loading === false) {
@@ -10448,22 +10461,22 @@ var Spinner = (0, import_react54.forwardRef)(
 );
 
 // src/components/loading-overlay/loading-overlay.context.ts
-var import_react55 = require("@chakra-ui/react");
+var import_react56 = require("@chakra-ui/react");
 var {
   useStyles: useLoadingOverlayStyles,
   withContext: withContext4,
   withProvider: withProvider3
-} = (0, import_react55.createSlotRecipeContext)({
+} = (0, import_react56.createSlotRecipeContext)({
   key: "suiLoadingOverlay"
 });
 
 // src/components/loading-overlay/loading-overlay.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var LoadingOverlay = (0, import_react56.forwardRef)(
+var LoadingOverlay = (0, import_react57.forwardRef)(
   (props, ref) => {
     const { children, loading = true, ...rest } = props;
     const [presenceProps, rootProps] = (0, import_presence.splitPresenceProps)(rest);
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react57.chakra.div, { ref, ...rootProps, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_presence.Presence, { present: loading, ...presenceProps, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react58.chakra.div, { ref, ...rootProps, children }) });
   }
 );
 var LoadingOverlayRoot = withProvider3(
@@ -10489,16 +10502,16 @@ __export(navbar_exports, {
   Link: () => NavbarLink,
   Root: () => NavbarRoot
 });
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_navbar = require("@saas-ui/core/navbar");
 
 // src/components/navbar/navbar.context.ts
-var import_react58 = require("@chakra-ui/react");
+var import_react59 = require("@chakra-ui/react");
 var {
   withProvider: withProvider4,
   withContext: withContext5,
   useStyles: useNavbarStyles
-} = (0, import_react58.createSlotRecipeContext)({
+} = (0, import_react59.createSlotRecipeContext)({
   key: "suiNavbar"
 });
 
@@ -10516,12 +10529,9 @@ var NavbarContent = withContext5(
   import_navbar.Navbar.Content,
   "content"
 );
-var NavbarItem = withContext5(
-  import_navbar.Navbar.Item,
-  "item"
-);
+var NavbarItem = withContext5(import_navbar.Navbar.Item, "item");
 var NavbarLink = withContext5(
-  (0, import_react59.forwardRef)((props, ref) => {
+  (0, import_react60.forwardRef)((props, ref) => {
     const Link3 = useLink();
     const { active, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_navbar.Navbar.Link, { asChild: true, ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Link3, { "data-active": active ? "" : void 0, ...props }) });
@@ -10533,10 +10543,10 @@ var NavbarLink = withContext5(
 );
 
 // src/components/native-select/native-select.tsx
-var React13 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_native_select = require("@chakra-ui/react/native-select");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var NativeSelect = React13.forwardRef(
+var NativeSelect = React12.forwardRef(
   function NativeSelect2(props, ref) {
     const { icon = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDownIcon, {}), placeholder, children, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_native_select.NativeSelect.Root, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_native_select.NativeSelect.Field, { placeholder, children: [
@@ -10547,10 +10557,10 @@ var NativeSelect = React13.forwardRef(
 );
 
 // src/components/number-input/number-input.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_number_input = require("@chakra-ui/react/number-input");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var NumberInput = (0, import_react60.forwardRef)(
+var NumberInput = (0, import_react61.forwardRef)(
   function NumberInput2(props, ref) {
     const {
       hideControls,
@@ -10598,29 +10608,29 @@ __export(menu_exports, {
   Trigger: () => MenuTrigger,
   TriggerItem: () => MenuTriggerItem
 });
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_center = require("@chakra-ui/react/center");
 var import_menu = require("@chakra-ui/react/menu");
 var import_portal5 = require("@chakra-ui/react/portal");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var MenuContent = (0, import_react61.forwardRef)(
+var MenuContent = (0, import_react62.forwardRef)(
   function MenuContent2(props, ref) {
     const { portalled = true, portalRef, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_portal5.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_menu.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_menu.Menu.Content, { ref, ...rest }) }) });
   }
 );
-var MenuArrow = (0, import_react61.forwardRef)(
+var MenuArrow = (0, import_react62.forwardRef)(
   function MenuArrow2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_menu.Menu.Arrow, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_menu.Menu.ArrowTip, {}) });
   }
 );
-var MenuCheckboxItem = (0, import_react61.forwardRef)(function MenuCheckboxItem2(props, ref) {
+var MenuCheckboxItem = (0, import_react62.forwardRef)(function MenuCheckboxItem2(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_menu.Menu.CheckboxItem, { ref, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_menu.Menu.ItemIndicator, { hidden: false, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckIcon, {}) }),
     props.children
   ] });
 });
-var MenuRadioItem = (0, import_react61.forwardRef)(
+var MenuRadioItem = (0, import_react62.forwardRef)(
   function MenuRadioItem2(props, ref) {
     const { children, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_menu.Menu.RadioItem, { ps: "8", ref, ...rest, children: [
@@ -10629,7 +10639,7 @@ var MenuRadioItem = (0, import_react61.forwardRef)(
     ] });
   }
 );
-var MenuItemGroup = (0, import_react61.forwardRef)(
+var MenuItemGroup = (0, import_react62.forwardRef)(
   function MenuItemGroup2(props, ref) {
     const { title, children, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_menu.Menu.ItemGroup, { ref, ...rest, children: [
@@ -10638,7 +10648,7 @@ var MenuItemGroup = (0, import_react61.forwardRef)(
     ] });
   }
 );
-var MenuTriggerItem = (0, import_react61.forwardRef)(
+var MenuTriggerItem = (0, import_react62.forwardRef)(
   function MenuTriggerItem2(props, ref) {
     const { startIcon, children, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_menu.Menu.TriggerItem, { ref, ...rest, children: [
@@ -10648,7 +10658,7 @@ var MenuTriggerItem = (0, import_react61.forwardRef)(
     ] });
   }
 );
-var MenuButton = (0, import_react61.forwardRef)(
+var MenuButton = (0, import_react62.forwardRef)(
   function MenuButton2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_button.Button, { ...props }) });
   }
@@ -10673,43 +10683,43 @@ __export(page_exports, {
   Root: () => PageRoot,
   Title: () => PageTitle
 });
-var import_react63 = __toESM(require("react"), 1);
-var import_react64 = require("@chakra-ui/react");
+var import_react64 = __toESM(require("react"), 1);
+var import_react65 = require("@chakra-ui/react");
 
 // src/components/page/page.context.ts
-var import_react62 = require("@chakra-ui/react");
+var import_react63 = require("@chakra-ui/react");
 var {
   withProvider: withProvider5,
   withContext: withContext6,
   useStyles: usePageStyles,
   useClassNames
-} = (0, import_react62.createSlotRecipeContext)({
+} = (0, import_react63.createSlotRecipeContext)({
   key: "suiPage"
 });
-var [PageProvider, usePageContext] = (0, import_react62.createContext)();
+var [PageProvider, usePageContext] = (0, import_react63.createContext)();
 
 // src/components/page/page.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var PageRoot = withProvider5(
-  (0, import_react63.forwardRef)(function PageRoot2(props, ref) {
+  (0, import_react64.forwardRef)(function PageRoot2(props, ref) {
     const { loading, skeleton, children, ...containerProps } = props;
     const context = {
       loading,
       skeleton
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PageProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react64.chakra.main, { ref, ...containerProps, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PageProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react65.chakra.main, { ref, ...containerProps, children }) });
   }),
   "root"
 );
 var PageHeader = withContext6(
-  (0, import_react63.forwardRef)(function PageHeader2(props, ref) {
+  (0, import_react64.forwardRef)(function PageHeader2(props, ref) {
     const { nav, title, description, actions, footer, css, ...rest } = props;
     const styles = usePageStyles();
     const classNames = useClassNames();
     let heading;
     if (title || description) {
       heading = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react64.chakra.div,
+        import_react65.chakra.div,
         {
           gridArea: "heading",
           className: classNames.heading,
@@ -10721,15 +10731,15 @@ var PageHeader = withContext6(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react64.chakra.header, { ref, css, ...rest, className: props.className, children: [
-      import_react63.default.isValidElement(nav) ? import_react63.default.cloneElement(nav, {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react65.chakra.header, { ref, css, ...rest, className: props.className, children: [
+      import_react64.default.isValidElement(nav) ? import_react64.default.cloneElement(nav, {
         gridArea: "nav"
       }) : null,
       heading,
-      import_react63.default.isValidElement(actions) ? import_react63.default.cloneElement(actions, {
+      import_react64.default.isValidElement(actions) ? import_react64.default.cloneElement(actions, {
         gridArea: "actions"
       }) : null,
-      import_react63.default.isValidElement(footer) ? import_react63.default.cloneElement(footer, {
+      import_react64.default.isValidElement(footer) ? import_react64.default.cloneElement(footer, {
         gridArea: "footer"
       }) : null
     ] });
@@ -10749,14 +10759,14 @@ var PageDescription = withContext6(
   "description"
 );
 var PageBody = withContext6(
-  (0, import_react63.forwardRef)((props, ref) => {
+  (0, import_react64.forwardRef)((props, ref) => {
     const { children, ...rest } = props;
     const { loading, skeleton } = usePageContext();
     let content = children;
     if (loading) {
       content = skeleton || /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(loading_overlay_exports.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(loading_overlay_exports.Spinner, {}) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react64.chakra.div, { ref, ...rest, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react65.chakra.div, { ref, ...rest, children: content });
   }),
   "body"
 );
@@ -10765,7 +10775,7 @@ PageBody.displayName = "PageBody";
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
-  Context: () => Context3,
+  Context: () => Context4,
   Ellipsis: () => Ellipsis2,
   Item: () => Item3,
   Items: () => Items,
@@ -10776,7 +10786,7 @@ __export(pagination_exports, {
   PrevTrigger: () => PrevTrigger,
   Root: () => Root9
 });
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_pagination = require("@chakra-ui/react/pagination");
 var import_typography3 = require("@chakra-ui/react/typography");
 var import_utils7 = require("@saas-ui/core/utils");
@@ -10789,18 +10799,17 @@ var variantMap = {
   solid: { default: "outline", ellipsis: "outline", current: "solid" },
   subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }
 };
-var Root9 = (0, import_react65.forwardRef)(
+var Root9 = (0, import_react66.forwardRef)(
   function PaginationRoot(props, ref) {
     const { size = "sm", variant = "outline", ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.Root, { ref, type: "button", ...rest }) });
   }
 );
-var Ellipsis2 = (0, import_react65.forwardRef)(function PaginationEllipsis(props, ref) {
-  var _a8;
+var Ellipsis2 = (0, import_react66.forwardRef)(function PaginationEllipsis(props, ref) {
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_button.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EllipsisIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_button.Button, { as: "span", variant: variantMap2.ellipsis, size, children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EllipsisIcon, {}) }) });
 });
-var Item3 = (0, import_react65.forwardRef)(
+var Item3 = (0, import_react66.forwardRef)(
   function PaginationItem(props, ref) {
     const { page } = (0, import_pagination.usePaginationContext)();
     const { size, variantMap: variantMap2 } = useRootProps();
@@ -10809,26 +10818,24 @@ var Item3 = (0, import_react65.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_button.Button, { variant, size, children: props.value }) });
   }
 );
-var PrevButton = (0, import_react65.forwardRef)(function PaginationPrevTrigger(props, ref) {
-  var _a8;
+var PrevButton = (0, import_react66.forwardRef)(function PaginationPrevTrigger(props, ref) {
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronLeftIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { variant: variantMap2.default, size, children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronLeftIcon, {}) }) });
 });
-var NextButton = (0, import_react65.forwardRef)(function PaginationNextTrigger(props, ref) {
-  var _a8;
+var NextButton = (0, import_react66.forwardRef)(function PaginationNextTrigger(props, ref) {
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { variant: variantMap2.default, size, children: (_a8 = props.children) != null ? _a8 : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { variant: variantMap2.default, size, children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_pagination.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
     return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Ellipsis2, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Item3, { type: "page", value: page.value, ...props }, index);
   }) });
 };
-var PageText = (0, import_react65.forwardRef)(
+var PageText = (0, import_react66.forwardRef)(
   function PaginationPageText(props, ref) {
     const { format = "compact", ...rest } = props;
     const { page, pages, pageRange, count } = (0, import_pagination.usePaginationContext)();
-    const content = (0, import_react65.useMemo)(() => {
+    const content = (0, import_react66.useMemo)(() => {
       if (format === "short") return `${page} / ${pages.length}`;
       if (format === "compact") return `${page} of ${pages.length}`;
       return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
@@ -10838,17 +10845,17 @@ var PageText = (0, import_react65.forwardRef)(
 );
 var PrevTrigger = import_pagination.Pagination.PrevTrigger;
 var NextTrigger = import_pagination.Pagination.NextTrigger;
-var Context3 = import_pagination.Pagination.Context;
+var Context4 = import_pagination.Pagination.Context;
 
 // src/components/password-input/password-input.tsx
-var import_react68 = require("react");
-var import_react69 = require("@chakra-ui/react");
+var import_react69 = require("react");
+var import_react70 = require("@chakra-ui/react");
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
-var import_react67 = __toESM(require("react"), 1);
+var import_react68 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-icons/lib/iconContext.mjs
-var import_react66 = __toESM(require("react"), 1);
+var import_react67 = __toESM(require("react"), 1);
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -10856,7 +10863,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react66.default.createContext && /* @__PURE__ */ import_react66.default.createContext(DefaultContext);
+var IconContext = import_react67.default.createContext && /* @__PURE__ */ import_react67.default.createContext(DefaultContext);
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
 var _excluded = ["attr", "size", "title"];
@@ -10945,12 +10952,12 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ import_react67.default.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react68.default.createElement(node.tag, _objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function GenIcon(data) {
-  return (props) => /* @__PURE__ */ import_react67.default.createElement(IconBase, _extends({
+  return (props) => /* @__PURE__ */ import_react68.default.createElement(IconBase, _extends({
     attr: _objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
@@ -10965,7 +10972,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ import_react67.default.createElement("svg", _extends({
+    return /* @__PURE__ */ import_react68.default.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -10977,9 +10984,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ import_react67.default.createElement("title", null, title), props.children);
+    }), title && /* @__PURE__ */ import_react68.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? /* @__PURE__ */ import_react67.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react68.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 }
 
 // ../../node_modules/react-icons/lu/index.mjs
@@ -10992,7 +10999,7 @@ function LuEye(props) {
 
 // src/components/password-input/password-input.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react68.forwardRef)(
+var PasswordInput = (0, import_react69.forwardRef)(
   function PasswordInput2(props, ref) {
     const {
       rootProps,
@@ -11002,12 +11009,12 @@ var PasswordInput = (0, import_react68.forwardRef)(
       visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LuEyeOff, {}) },
       ...rest
     } = props;
-    const [visible, setVisible] = (0, import_react69.useControllableState)({
+    const [visible, setVisible] = (0, import_react70.useControllableState)({
       value: visibleProp,
       defaultValue: defaultVisible || false,
       onChange: onVisibleChange
     });
-    const inputRef = (0, import_react68.useRef)(null);
+    const inputRef = (0, import_react69.useRef)(null);
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       import_input2.InputGroup,
       {
@@ -11030,7 +11037,7 @@ var PasswordInput = (0, import_react68.forwardRef)(
           import_input2.Input,
           {
             ...rest,
-            ref: (0, import_react69.mergeRefs)(ref, inputRef),
+            ref: (0, import_react70.mergeRefs)(ref, inputRef),
             type: visible ? "text" : "password"
           }
         )
@@ -11038,7 +11045,7 @@ var PasswordInput = (0, import_react68.forwardRef)(
     );
   }
 );
-var VisibilityTrigger = (0, import_react68.forwardRef)(
+var VisibilityTrigger = (0, import_react69.forwardRef)(
   function VisibilityTrigger2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconButton,
@@ -11059,30 +11066,30 @@ var VisibilityTrigger = (0, import_react68.forwardRef)(
 );
 
 // src/components/persona/persona.tsx
-var React18 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
-var import_react71 = require("react");
-var import_react72 = require("@chakra-ui/react");
+var import_react72 = require("react");
+var import_react73 = require("@chakra-ui/react");
 var import_utils8 = require("@saas-ui/core/utils");
 
 // src/components/persona/persona.context.ts
-var import_react70 = require("@chakra-ui/react");
+var import_react71 = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider: withProvider6,
   withContext: withContext7
-} = (0, import_react70.createSlotRecipeContext)({
+} = (0, import_react71.createSlotRecipeContext)({
   key: "suiPersona"
 });
 
 // src/components/persona/persona-primitive.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var PersonaRoot = withProvider6(
-  (0, import_react71.forwardRef)((props, ref) => {
+  (0, import_react72.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_react72.chakra.div,
+      import_react73.chakra.div,
       {
         ref,
         ...rest,
@@ -11099,11 +11106,11 @@ var PersonaRoot = withProvider6(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react71.forwardRef)(
+var PersonaAvatar = (0, import_react72.forwardRef)(
   (props, ref) => {
     const {
       name,
-      getInitials: getInitials2 = (name2) => name2 == null ? void 0 : name2[0],
+      getInitials: getInitials2 = (name2) => name2?.[0],
       icon,
       loading,
       onError,
@@ -11136,7 +11143,7 @@ var PersonaTertiaryLabel = withContext7(
 
 // src/components/persona/persona.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var Persona = React18.forwardRef(
+var Persona = React17.forwardRef(
   (props, ref) => {
     const {
       name,
@@ -11195,7 +11202,7 @@ var Persona = React18.forwardRef(
   }
 );
 Persona.displayName = "Persona";
-var PersonaAvatar2 = React18.forwardRef(function PersonaAvatar3(props, ref) {
+var PersonaAvatar2 = React17.forwardRef(function PersonaAvatar3(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Persona, { ref, ...props, hideDetails: true });
 });
 
@@ -11224,11 +11231,11 @@ var defaultPersonaPresenceOptions = {
 };
 
 // src/components/pin-input/pin-input.tsx
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_group2 = require("@chakra-ui/react/group");
 var import_pin_input = require("@chakra-ui/react/pin-input");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var PinInput = (0, import_react73.forwardRef)(
+var PinInput = (0, import_react74.forwardRef)(
   function PinInput2(props, ref) {
     const {
       pinLength = 4,
@@ -11252,10 +11259,10 @@ var import_progress = require("@chakra-ui/react/progress");
 var import_progress_circle = require("@chakra-ui/react/progress-circle");
 
 // src/components/radio/radio.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_radio_group = require("@chakra-ui/react/radio-group");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Radio = (0, import_react74.forwardRef)(
+var Radio = (0, import_react75.forwardRef)(
   function Radio2(props, ref) {
     const { children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_radio_group.RadioGroup.Item, { ref: rootRef, ...rest, children: [
@@ -11278,10 +11285,10 @@ __export(radio_card_exports, {
   Label: () => RadioCardLabel,
   Root: () => RadioCardRoot
 });
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_radio_card = require("@chakra-ui/react/radio-card");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var RadioCardItem = (0, import_react75.forwardRef)(
+var RadioCardItem = (0, import_react76.forwardRef)(
   function RadioCardItem2(props, ref) {
     const {
       inputProps,
@@ -11294,7 +11301,7 @@ var RadioCardItem = (0, import_react75.forwardRef)(
       ...rest
     } = props;
     const hasContent = label || description || icon;
-    const ContentWrapper = indicator ? import_radio_card.RadioCard.ItemContent : import_react75.Fragment;
+    const ContentWrapper = indicator ? import_radio_card.RadioCard.ItemContent : import_react76.Fragment;
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_radio_card.RadioCard.Item, { ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radio_card.RadioCard.ItemHiddenInput, { ref, ...inputProps }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_radio_card.RadioCard.ItemControl, { children: [
@@ -11319,11 +11326,11 @@ var RadioCardItemIndicator = import_radio_card.RadioCard.ItemIndicator;
 var import_rating_group = require("@chakra-ui/react/rating-group");
 
 // src/components/search-input/search-input.tsx
-var import_react76 = __toESM(require("react"), 1);
-var import_react77 = require("@chakra-ui/react");
+var import_react77 = __toESM(require("react"), 1);
+var import_react78 = require("@chakra-ui/react");
 var import_utils9 = require("@saas-ui/core/utils");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var SearchInput = (0, import_react76.forwardRef)(
+var SearchInput = (0, import_react77.forwardRef)(
   (props, ref) => {
     const {
       placeholder = "Search",
@@ -11341,18 +11348,18 @@ var SearchInput = (0, import_react76.forwardRef)(
       disabled,
       ...inputProps
     } = props;
-    const inputRef = import_react76.default.useRef(null);
-    const [value, setValue] = (0, import_react77.useControllableState)({
+    const inputRef = import_react77.default.useRef(null);
+    const [value, setValue] = (0, import_react78.useControllableState)({
       value: valueProp,
       defaultValue: defaultValueProp
     });
-    const onChange = import_react76.default.useCallback(
+    const onChange = import_react77.default.useCallback(
       (e) => {
         setValue(e.target.value);
       },
       [setValue]
     );
-    const onKeyDown = import_react76.default.useCallback(
+    const onKeyDown = import_react77.default.useCallback(
       (event) => {
         if (event.key === "Escape") {
           setValue("");
@@ -11362,16 +11369,15 @@ var SearchInput = (0, import_react76.forwardRef)(
       [onResetProp, setValue]
     );
     const onReset = () => {
-      var _a8;
       setValue("");
-      onResetProp == null ? void 0 : onResetProp();
-      (_a8 = inputRef.current) == null ? void 0 : _a8.focus();
+      onResetProp?.();
+      inputRef.current?.focus();
     };
     const showReset = value && !props.disabled;
     const endElement = showReset ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react77.Group, { width, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react78.Group, { width, children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_react77.InputElement,
+        import_react78.InputElement,
         {
           placement: "start",
           px: "0",
@@ -11381,7 +11387,7 @@ var SearchInput = (0, import_react76.forwardRef)(
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_react77.Input,
+        import_react78.Input,
         {
           type: "text",
           placeholder,
@@ -11389,7 +11395,7 @@ var SearchInput = (0, import_react76.forwardRef)(
           size,
           value,
           disabled,
-          ref: (0, import_react77.mergeRefs)(ref, inputRef),
+          ref: (0, import_react78.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)",
@@ -11397,15 +11403,15 @@ var SearchInput = (0, import_react76.forwardRef)(
           ...inputProps
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react77.InputElement, { placement: "end", children: endElement })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react78.InputElement, { placement: "end", children: endElement })
     ] });
   }
 );
-var SearchInputResetButton = (0, import_react76.forwardRef)(
+var SearchInputResetButton = (0, import_react77.forwardRef)(
   (props, ref) => {
     const { children = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CloseIcon, {}), ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react77.IconButton,
+      import_react78.IconButton,
       {
         ref,
         variant: "ghost",
@@ -11435,11 +11441,11 @@ __export(namespace_exports, {
 });
 
 // src/components/select/select.tsx
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_portal6 = require("@chakra-ui/react/portal");
 var import_select2 = require("@chakra-ui/react/select");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var SelectTrigger = (0, import_react78.forwardRef)(
+var SelectTrigger = (0, import_react79.forwardRef)(
   function SelectTrigger2(props, ref) {
     const { children, clearable, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_select2.Select.Control, { ...rest, children: [
@@ -11451,7 +11457,7 @@ var SelectTrigger = (0, import_react78.forwardRef)(
     ] });
   }
 );
-var SelectClearTrigger = (0, import_react78.forwardRef)(function SelectClearTrigger2(props, ref) {
+var SelectClearTrigger = (0, import_react79.forwardRef)(function SelectClearTrigger2(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select2.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     CloseButton,
     {
@@ -11463,13 +11469,13 @@ var SelectClearTrigger = (0, import_react78.forwardRef)(function SelectClearTrig
     }
   ) });
 });
-var SelectContent = (0, import_react78.forwardRef)(
+var SelectContent = (0, import_react79.forwardRef)(
   function SelectContent2(props, ref) {
     const { portalled = true, portalRef, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_portal6.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select2.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select2.Select.Content, { ...rest, ref }) }) });
   }
 );
-var SelectItem = (0, import_react78.forwardRef)(
+var SelectItem = (0, import_react79.forwardRef)(
   function SelectItem2(props, ref) {
     const { item, children, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_select2.Select.Item, { item, ...rest, ref, children: [
@@ -11478,7 +11484,7 @@ var SelectItem = (0, import_react78.forwardRef)(
     ] }, item.value);
   }
 );
-var SelectValueText = (0, import_react78.forwardRef)(function SelectValueText2(props, ref) {
+var SelectValueText = (0, import_react79.forwardRef)(function SelectValueText2(props, ref) {
   const { children, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select2.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select2.Select.Context, { children: (select) => {
     const items = select.selectedItems;
@@ -11489,7 +11495,7 @@ var SelectValueText = (0, import_react78.forwardRef)(function SelectValueText2(p
     return `${items.length} selected`;
   } }) });
 });
-var SelectRoot = (0, import_react78.forwardRef)(function SelectRoot2(props, ref) {
+var SelectRoot = (0, import_react79.forwardRef)(function SelectRoot2(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_select2.Select.Root,
     {
@@ -11499,7 +11505,7 @@ var SelectRoot = (0, import_react78.forwardRef)(function SelectRoot2(props, ref)
     }
   );
 });
-var SelectItemGroup = (0, import_react78.forwardRef)(
+var SelectItemGroup = (0, import_react79.forwardRef)(
   function SelectItemGroup2(props, ref) {
     const { children, label, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_select2.Select.ItemGroup, { ...rest, ref, children: [
@@ -11515,7 +11521,7 @@ var SelectItemText = import_select2.Select.ItemText;
 var import_separator = require("@chakra-ui/react/separator");
 
 // src/components/skeleton/skeleton.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_box = require("@chakra-ui/react/box");
 var import_skeleton = require("@chakra-ui/react/skeleton");
 var import_stack = require("@chakra-ui/react/stack");
@@ -11524,7 +11530,7 @@ var SkeletonCircle = (props) => {
   const { size, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_box.Circle, { size, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_skeleton.Skeleton, { ...rest }) });
 };
-var SkeletonText = (0, import_react79.forwardRef)(
+var SkeletonText = (0, import_react80.forwardRef)(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, gap, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_stack.Stack, { gap, width: "full", ref, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -11542,7 +11548,7 @@ var SkeletonText = (0, import_react79.forwardRef)(
 var Skeleton = import_skeleton.Skeleton;
 
 // src/components/segmented-control/segmented-control.tsx
-var import_react80 = require("react");
+var import_react81 = require("react");
 var import_for = require("@chakra-ui/react/for");
 var import_segment_group = require("@chakra-ui/react/segment-group");
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -11552,9 +11558,9 @@ function normalize(items) {
     return item;
   });
 }
-var SegmentedControl = (0, import_react80.forwardRef)(function SegmentedControl2(props, ref) {
+var SegmentedControl = (0, import_react81.forwardRef)(function SegmentedControl2(props, ref) {
   const { items, ...rest } = props;
-  const data = (0, import_react80.useMemo)(() => normalize(items), [items]);
+  const data = (0, import_react81.useMemo)(() => normalize(items), [items]);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_segment_group.SegmentGroup.Root, { ref, ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_segment_group.SegmentGroup.Indicator, {}),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_for.For, { each: data, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
@@ -11597,21 +11603,21 @@ __export(sidebar_exports, {
 var import_sidebar = require("@saas-ui/core/sidebar");
 
 // src/components/sidebar/sidebar.context.ts
-var import_react81 = require("@chakra-ui/react");
+var import_react82 = require("@chakra-ui/react");
 var {
   withContext: withContext8,
   useRecipeResult,
   StylesProvider,
   ClassNamesProvider,
   useStyles: useSidebarStyles
-} = (0, import_react81.createSlotRecipeContext)({
+} = (0, import_react82.createSlotRecipeContext)({
   key: "suiSidebar"
 });
 var {
   withProvider: withItemProvider,
   withContext: withItemContext,
   useStyles: useSidebarItemStyles
-} = (0, import_react81.createSlotRecipeContext)({
+} = (0, import_react82.createSlotRecipeContext)({
   key: "suiSidebarNavItem"
 });
 
@@ -11708,26 +11714,25 @@ var import_sidebar2 = require("@saas-ui/core/sidebar");
 var import_skip_nav = require("@chakra-ui/react/skip-nav");
 
 // src/components/slider/slider.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_slider = require("@chakra-ui/react/slider");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var Slider = (0, import_react82.forwardRef)(
+var Slider = (0, import_react83.forwardRef)(
   function Slider2(props, ref) {
-    var _a8;
     const { marks: marksProp, label, ...rest } = props;
-    const value = (_a8 = props.defaultValue) != null ? _a8 : props.value;
-    const marks = marksProp == null ? void 0 : marksProp.map((mark) => {
+    const value = props.defaultValue ?? props.value;
+    const marks = marksProp?.map((mark) => {
       if (typeof mark === "number") return { value: mark, label: void 0 };
       return mark;
     });
-    const hasMarkLabel = !!(marks == null ? void 0 : marks.some((mark) => mark.label));
+    const hasMarkLabel = !!marks?.some((mark) => mark.label);
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_slider.Slider.Root, { ref, thumbAlignment: "center", ...rest, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.Label, { fontWeight: "medium", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_slider.Slider.Control, { mb: hasMarkLabel ? "4" : void 0, children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.Track, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.Range, {}) }),
-        value == null ? void 0 : value.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.Thumb, { index, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.HiddenInput, {}) }, index))
+        value?.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.Thumb, { index, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.HiddenInput, {}) }, index))
       ] }),
-      (marks == null ? void 0 : marks.length) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.MarkerGroup, { children: marks.map((mark, index) => {
+      marks?.length && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_slider.Slider.MarkerGroup, { children: marks.map((mark, index) => {
         const value2 = typeof mark === "number" ? mark : mark.value;
         const label2 = typeof mark === "number" ? void 0 : mark.label;
         return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_slider.Slider.Marker, { value: value2, children: [
@@ -11740,10 +11745,10 @@ var Slider = (0, import_react82.forwardRef)(
 );
 
 // src/components/status/status.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 var import_status = require("@chakra-ui/react/status");
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var Status = (0, import_react83.forwardRef)(
+var Status = (0, import_react84.forwardRef)(
   function Status2(props, ref) {
     const { children, value, ...rest } = props;
     const color = value ? `status.${value}` : void 0;
@@ -11765,18 +11770,18 @@ __export(stat_exports, {
   ValueText: () => StatValueText,
   ValueUnit: () => ValueUnit
 });
-var React20 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_badge4 = require("@chakra-ui/react/badge");
 var import_format = require("@chakra-ui/react/format");
 var import_stat = require("@chakra-ui/react/stat");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var StatValueText = React20.forwardRef(
+var StatValueText = React19.forwardRef(
   function StatValueText2(props, ref) {
     const { value, formatOptions, children, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_stat.Stat.ValueText, { ...rest, ref, children: children || value != null && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_format.FormatNumber, { value, ...formatOptions }) });
   }
 );
-var StatUpTrend = React20.forwardRef(
+var StatUpTrend = React19.forwardRef(
   function StatUpTrend2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_badge4.Badge, { colorPalette: "green", gap: "0", ...props, ref, children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_stat.Stat.UpIndicator, {}),
@@ -11784,7 +11789,7 @@ var StatUpTrend = React20.forwardRef(
     ] });
   }
 );
-var StatDownTrend = React20.forwardRef(
+var StatDownTrend = React19.forwardRef(
   function StatDownTrend2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_badge4.Badge, { colorPalette: "red", gap: "0", ...props, ref, children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_stat.Stat.DownIndicator, {}),
@@ -11858,16 +11863,16 @@ var StepsPrevTrigger = (props) => {
 };
 
 // src/components/switch/switch.tsx
-var import_react84 = require("react");
+var import_react85 = require("react");
 var import_switch = require("@chakra-ui/react/switch");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var Switch = (0, import_react84.forwardRef)(
+var Switch = (0, import_react85.forwardRef)(
   function Switch2(props, ref) {
     const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_switch.Switch.Root, { ref: rootRef, ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_switch.Switch.HiddenInput, { ref, ...inputProps }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_switch.Switch.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_switch.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_switch.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_switch.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_switch.Switch.ThumbIndicator, { fallback: thumbLabel?.off, children: thumbLabel?.on }) }),
         trackLabel && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_switch.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
       ] }),
       children != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_switch.Switch.Label, { children })
@@ -11882,10 +11887,10 @@ var import_table = require("@chakra-ui/react/table");
 var import_tabs = require("@chakra-ui/react/tabs");
 
 // src/components/tag/tag.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_tag = require("@chakra-ui/react/tag");
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var Tag = (0, import_react85.forwardRef)(
+var Tag = (0, import_react86.forwardRef)(
   function Tag2(props, ref) {
     const {
       startElement,
@@ -11908,7 +11913,7 @@ var Tag = (0, import_react85.forwardRef)(
 var import_timeline = require("@chakra-ui/react/timeline");
 
 // src/components/toaster/toaster.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_portal7 = require("@chakra-ui/react/portal");
 var import_stack2 = require("@chakra-ui/react/stack");
 var import_toast = require("@chakra-ui/react/toast");
@@ -11920,7 +11925,7 @@ var defaultOptions = {
 var toast = (0, import_toast.createToaster)(defaultOptions);
 var Toaster = (props) => {
   const { closable: defaultClosable = true, ...options } = props || {};
-  const toaster = (0, import_react86.useMemo)(() => {
+  const toaster = (0, import_react87.useMemo)(() => {
     toast = (0, import_toast.createToaster)({
       ...defaultOptions,
       ...options
@@ -11928,8 +11933,7 @@ var Toaster = (props) => {
     return toast;
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_portal7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_toast.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => {
-    var _a8;
-    const closable = ((_a8 = toast2.meta) == null ? void 0 : _a8.closable) === false ? false : defaultClosable && toast2.type !== "loading";
+    const closable = toast2.meta?.closable === false ? false : defaultClosable && toast2.type !== "loading";
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(ToastRoot, { children: [
       toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Spinner, { size: "sm", color: "colorPalette.solid", mt: "0.5" }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_toast.Toast.Indicator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_stack2.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
@@ -11942,9 +11946,9 @@ var Toaster = (props) => {
   } }) });
 };
 function ToastRoot(props) {
-  const [rect, setRect] = (0, import_react86.useState)();
-  const rectCallbackRef = (0, import_react86.useCallback)((el) => {
-    setRect(el == null ? void 0 : el.getBoundingClientRect());
+  const [rect, setRect] = (0, import_react87.useState)();
+  const rectCallbackRef = (0, import_react87.useCallback)((el) => {
+    setRect(el?.getBoundingClientRect());
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     import_toast.Toast.Root,
@@ -11952,7 +11956,7 @@ function ToastRoot(props) {
       ref: rectCallbackRef,
       width: { md: "sm" },
       css: {
-        "--toast-height": `${rect == null ? void 0 : rect.height}px`
+        "--toast-height": `${rect?.height}px`
       },
       children: props.children
     }
@@ -11960,11 +11964,11 @@ function ToastRoot(props) {
 }
 
 // src/components/tooltip/tooltip.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_portal8 = require("@chakra-ui/react/portal");
 var import_tooltip = require("@chakra-ui/react/tooltip");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var Tooltip = (0, import_react87.forwardRef)(
+var Tooltip = (0, import_react88.forwardRef)(
   function Tooltip2(props, ref) {
     const {
       showArrow,
@@ -12110,6 +12114,7 @@ var import_wrap = require("@chakra-ui/react/wrap");
   Grid,
   GridList,
   Group,
+  HStack,
   Heading,
   Highlight,
   HoverCard,
@@ -12164,6 +12169,7 @@ var import_wrap = require("@chakra-ui/react/wrap");
   Spacer,
   Spinner,
   Stack,
+  StackSeparator,
   Stat,
   Status,
   Steps,
@@ -12181,12 +12187,26 @@ var import_wrap = require("@chakra-ui/react/wrap");
   Toggle,
   ToggleTip,
   Tooltip,
+  VStack,
   VisuallyHidden,
   Wrap,
+  chakra,
   createSystem,
   defaultConfig,
   defaultPersonaPresenceOptions,
   defaultSystem,
+  defineAnimationStyles,
+  defineConditions,
+  defineConfig,
+  defineGlobalStyles,
+  defineKeyframes,
+  defineLayerStyles,
+  defineRecipe,
+  defineSemanticTokens,
+  defineSlotRecipe,
+  defineStyle,
+  defineTextStyles,
+  defineTokens,
   toast,
   useDataListStyles,
   useEnvironmentContext,