@saas-ui/react 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/index.js

@@ -1,14 +1,118 @@
+import {
+  Tooltip
+} from "./chunk-QSNSWCTM.js";
+import {
+  colors
+} from "./chunk-3MO37LYW.js";
+import {
+  SegmentedControl
+} from "./chunk-SKXSBAOS.js";
+import {
+  SearchInput
+} from "./chunk-LIYUBUOP.js";
+import {
+  namespace_exports as namespace_exports3
+} from "./chunk-S3CQW7GD.js";
+import {
+  sidebar_exports,
+  useSidebar,
+  useSidebarItemStyles,
+  useSidebarStyles
+} from "./chunk-GGAKUS66.js";
+import {
+  steps_exports
+} from "./chunk-6LOMIKR5.js";
+import {
+  Switch
+} from "./chunk-SA3OGTOO.js";
+import {
+  Toaster,
+  toast
+} from "./chunk-HELHPHIQ.js";
+import {
+  loading_overlay_exports,
+  useLoadingOverlayStyles
+} from "./chunk-7VSTNV2B.js";
+import {
+  Spinner
+} from "./chunk-32JGENDB.js";
+import {
+  menu_exports
+} from "./chunk-JGHXJ3PI.js";
+import {
+  navbar_exports
+} from "./chunk-Q6SNJJO2.js";
+import {
+  NumberInput
+} from "./chunk-ULAJ3JEO.js";
+import {
+  PasswordInput
+} from "./chunk-CD2JUFI2.js";
+import {
+  Persona,
+  PersonaAvatar,
+  defaultPresenceOptions
+} from "./chunk-M7FOBCOV.js";
+import {
+  PinInput
+} from "./chunk-2EUACKRH.js";
+import {
+  Radio,
+  RadioGroup
+} from "./chunk-WYLMBMAH.js";
+import {
+  namespace_exports
+} from "./chunk-CB52LBJK.js";
+import {
+  namespace_exports as namespace_exports2
+} from "./chunk-H6TFEHY4.js";
+import {
+  EmptyState
+} from "./chunk-FJFNGSPL.js";
+import {
+  grid_list_exports
+} from "./chunk-NSD5HRIP.js";
+import {
+  IconBadge
+} from "./chunk-I2RXEKTB.js";
+import "./chunk-KTLWEUNW.js";
+import {
+  InputGroup
+} from "./chunk-PKI6YH2V.js";
+import {
+  Link
+} from "./chunk-TZBAM4AD.js";
 import {
   SuiContext,
   SuiProvider,
   useLink,
   useSui
-} from "./chunk-KHRLZUV4.js";
+} from "./chunk-O2WVT2BP.js";
+import {
+  AppShell
+} from "./chunk-6ZNR6N2K.js";
+import {
+  Avatar,
+  AvatarGroup
+} from "./chunk-UCQ3LZIE.js";
+import {
+  breadcrumb_exports
+} from "./chunk-TT4C5VXB.js";
+import {
+  Checkbox
+} from "./chunk-L356FPLY.js";
+import {
+  Button
+} from "./chunk-BCNPBZZK.js";
+import {
+  CloseButton
+} from "./chunk-FZW2DYK3.js";
+import "./chunk-VDXTEASE.js";
+import {
+  Command
+} from "./chunk-4TR3AOMG.js";
 import "./chunk-RTMS5TJN.js";
 
-// src/index.ts
-export * from "@saas-ui/core";
-
 // src/preset.ts
 import { createSystem, defaultBaseConfig, mergeConfigs } from "@chakra-ui/react";
 
@@ -308,6 +412,7 @@ import { defineRecipe } from "@chakra-ui/react";
 var buttonRecipe = defineRecipe({
   className: "chakra-button",
   base: {
+    colorPalette: "gray",
     display: "inline-flex",
     appearance: "none",
     alignItems: "center",
@@ -404,6 +509,7 @@ var buttonRecipe = defineRecipe({
         "--btn-shadow": "shadows.sm",
         boxShadow: "0 0 0 1px rgba(0,0,0,0.4) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)",
         textShadow: "0 1px 2px rgba(0,0,0,0.3)",
+        overflow: "clip",
         _after: {
           content: '""',
           position: "absolute",
@@ -827,11 +933,6 @@ var inputRecipe = defineRecipe10({
   },
   variants: {
     size: {
-      "2xs": {
-        textStyle: "xs",
-        px: "2",
-        "--input-height": "sizes.7"
-      },
       xs: {
         textStyle: "xs",
         px: "2",
@@ -856,11 +957,6 @@ var inputRecipe = defineRecipe10({
         textStyle: "md",
         px: "4.5",
         "--input-height": "sizes.12"
-      },
-      "2xl": {
-        textStyle: "lg",
-        px: "5",
-        "--input-height": "sizes.16"
       }
     },
     variant: {
@@ -1431,8 +1527,8 @@ var recipes = {
   checkmark: checkmarkRecipe,
   radiomark: radiomarkRecipe,
   // Saas UI
-  command: commandRecipe,
-  iconBadge: iconBadgeRecipe
+  suiCommand: commandRecipe,
+  suiIconBadge: iconBadgeRecipe
 };
 
 // src/theme/semantic-tokens/colors.ts
@@ -1510,11 +1606,14 @@ var semanticColors = defineSemanticTokens.colors({
     DEFAULT: {
       value: { _light: "{colors.black}", _dark: "{colors.gray.50}" }
     },
+    muted: {
+      value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" }
+    },
     subtle: {
       value: { _light: "{colors.gray.600}", _dark: "{colors.gray.400}" }
     },
-    muted: {
-      value: { _light: "{colors.gray.400}", _dark: "{colors.gray.500}" }
+    emphasized: {
+      value: { _light: "{colors.gray.800}", _dark: "{colors.gray.200}" }
     },
     inverted: {
       value: { _light: "{colors.gray.50}", _dark: "{colors.black}" }
@@ -1536,12 +1635,12 @@ var semanticColors = defineSemanticTokens.colors({
     DEFAULT: {
       value: { _light: "{colors.gray.200}", _dark: "{colors.gray.800}" }
     },
-    subtle: {
-      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
-    },
     muted: {
       value: { _light: "{colors.gray.50}", _dark: "{colors.gray.950}" }
     },
+    subtle: {
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
+    },
     emphasized: {
       value: { _light: "{colors.gray.300}", _dark: "{colors.gray.700}" }
     },
@@ -1569,19 +1668,22 @@ var semanticColors = defineSemanticTokens.colors({
       value: { _light: "white", _dark: "white" }
     },
     fg: {
-      value: { _light: "{colors.purple.700}", _dark: "{colors.purple.300}" }
+      value: { _light: "{colors.indigo.700}", _dark: "{colors.indigo.300}" }
     },
     muted: {
-      value: { _light: "{colors.purple.50}", _dark: "{colors.purple.950}" }
+      value: { _light: "{colors.indigo.50}", _dark: "{colors.indigo.950}" }
     },
     subtle: {
-      value: { _light: "{colors.purple.100}", _dark: "{colors.purple.900}" }
+      value: { _light: "{colors.indigo.100}", _dark: "{colors.indigo.900}" }
     },
     emphasized: {
-      value: { _light: "{colors.purple.200}", _dark: "{colors.purple.800}" }
+      value: { _light: "{colors.indigo.200}", _dark: "{colors.indigo.800}" }
     },
     solid: {
-      value: { _light: "{colors.purple.600}", _dark: "{colors.purple.600}" }
+      value: { _light: "{colors.indigo.600}", _dark: "{colors.indigo.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.indigo.600}", _dark: "{colors.indigo.600}" }
     }
   },
   neutral: {
@@ -1602,6 +1704,32 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: { _light: "{colors.gray.900}", _dark: "{colors.white}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.gray.600}", _dark: "{colors.gray.600}" }
+    }
+  },
+  slate: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.slate.900}", _dark: "{colors.slate.200}" }
+    },
+    muted: {
+      value: { _light: "{colors.slate.100}", _dark: "{colors.slate.900}" }
+    },
+    subtle: {
+      value: { _light: "{colors.slate.200}", _dark: "{colors.slate.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.slate.300}", _dark: "{colors.slate.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.slate.500}", _dark: "{colors.slate.500}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.slate.600}", _dark: "{colors.slate.600}" }
     }
   },
   gray: {
@@ -1622,6 +1750,55 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.gray.600}", _dark: "{colors.gray.600}" }
+    }
+  },
+  zinc: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.zinc.900}", _dark: "{colors.zinc.200}" }
+    },
+    muted: {
+      value: { _light: "{colors.zinc.100}", _dark: "{colors.zinc.900}" }
+    },
+    subtle: {
+      value: { _light: "{colors.zinc.200}", _dark: "{colors.zinc.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.zinc.300}", _dark: "{colors.zinc.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.zinc.500}", _dark: "{colors.zinc.500}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.zinc.600}", _dark: "{colors.zinc.600}" }
+    }
+  },
+  stone: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.stone.900}", _dark: "{colors.stone.200}" }
+    },
+    muted: {
+      value: { _light: "{colors.stone.100}", _dark: "{colors.stone.900}" }
+    },
+    subtle: {
+      value: { _light: "{colors.stone.200}", _dark: "{colors.stone.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.stone.300}", _dark: "{colors.stone.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.stone.500}", _dark: "{colors.stone.500}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.stone.600}", _dark: "{colors.stone.600}" }
     }
   },
   red: {
@@ -1642,6 +1819,9 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: { _light: "{colors.red.600}", _dark: "{colors.red.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.red.600}", _dark: "{colors.red.600}" }
     }
   },
   orange: {
@@ -1661,7 +1841,79 @@ var semanticColors = defineSemanticTokens.colors({
       value: { _light: "{colors.orange.200}", _dark: "{colors.orange.800}" }
     },
     solid: {
-      value: { _light: "{colors.orange.600}", _dark: "{colors.orange.500}" }
+      value: { _light: "{colors.orange.600}", _dark: "{colors.orange.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.orange.600}", _dark: "{colors.orange.600}" }
+    }
+  },
+  amber: {
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.amber.700}", _dark: "{colors.amber.300}" }
+    },
+    muted: {
+      value: { _light: "{colors.amber.50}", _dark: "{colors.amber.950}" }
+    },
+    subtle: {
+      value: { _light: "{colors.amber.100}", _dark: "{colors.amber.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.amber.200}", _dark: "{colors.amber.800}" }
+    },
+    solid: {
+      value: { _light: "{colors.amber.400}", _dark: "{colors.amber.400}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.amber.400}", _dark: "{colors.amber.400}" }
+    }
+  },
+  yellow: {
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.yellow.700}", _dark: "{colors.yellow.300}" }
+    },
+    muted: {
+      value: { _light: "{colors.yellow.50}", _dark: "{colors.yellow.950}" }
+    },
+    subtle: {
+      value: { _light: "{colors.yellow.100}", _dark: "{colors.yellow.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.yellow.200}", _dark: "{colors.yellow.800}" }
+    },
+    solid: {
+      value: { _light: "{colors.yellow.400}", _dark: "{colors.yellow.400}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.yellow.400}", _dark: "{colors.yellow.400}" }
+    }
+  },
+  lime: {
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.lime.700}", _dark: "{colors.lime.300}" }
+    },
+    muted: {
+      value: { _light: "{colors.lime.50}", _dark: "{colors.lime.950}" }
+    },
+    subtle: {
+      value: { _light: "{colors.lime.100}", _dark: "{colors.lime.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.lime.200}", _dark: "{colors.lime.800}" }
+    },
+    solid: {
+      value: { _light: "{colors.lime.400}", _dark: "{colors.lime.400}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.lime.400}", _dark: "{colors.lime.400}" }
     }
   },
   green: {
@@ -1682,66 +1934,124 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: { _light: "{colors.green.600}", _dark: "{colors.green.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.green.600}", _dark: "{colors.green.600}" }
     }
   },
-  blue: {
+  emerald: {
     contrast: {
       value: { _light: "white", _dark: "white" }
     },
     fg: {
-      value: { _light: "{colors.blue.700}", _dark: "{colors.blue.300}" }
+      value: { _light: "{colors.emerald.700}", _dark: "{colors.emerald.300}" }
     },
     muted: {
-      value: { _light: "{colors.blue.50}", _dark: "{colors.blue.950}" }
+      value: { _light: "{colors.emerald.50}", _dark: "{colors.emerald.950}" }
     },
     subtle: {
-      value: { _light: "{colors.blue.100}", _dark: "{colors.blue.900}" }
+      value: { _light: "{colors.emerald.100}", _dark: "{colors.emerald.900}" }
     },
     emphasized: {
-      value: { _light: "{colors.blue.200}", _dark: "{colors.blue.800}" }
+      value: { _light: "{colors.emerald.200}", _dark: "{colors.emerald.800}" }
     },
     solid: {
-      value: { _light: "{colors.blue.600}", _dark: "{colors.blue.600}" }
+      value: { _light: "{colors.emerald.600}", _dark: "{colors.emerald.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.emerald.600}", _dark: "{colors.emerald.600}" }
     }
   },
-  yellow: {
+  teal: {
     contrast: {
-      value: { _light: "black", _dark: "black" }
+      value: { _light: "white", _dark: "white" }
     },
     fg: {
-      value: { _light: "{colors.yellow.700}", _dark: "{colors.yellow.300}" }
+      value: { _light: "{colors.teal.700}", _dark: "{colors.teal.300}" }
     },
     muted: {
-      value: { _light: "{colors.yellow.50}", _dark: "{colors.yellow.950}" }
+      value: { _light: "{colors.teal.50}", _dark: "{colors.teal.950}" }
     },
     subtle: {
-      value: { _light: "{colors.yellow.100}", _dark: "{colors.yellow.900}" }
+      value: { _light: "{colors.teal.100}", _dark: "{colors.teal.900}" }
     },
     emphasized: {
-      value: { _light: "{colors.yellow.200}", _dark: "{colors.yellow.800}" }
+      value: { _light: "{colors.teal.200}", _dark: "{colors.teal.800}" }
     },
     solid: {
-      value: { _light: "{colors.yellow.300}", _dark: "{colors.yellow.300}" }
+      value: { _light: "{colors.teal.600}", _dark: "{colors.teal.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.teal.600}", _dark: "{colors.teal.600}" }
     }
   },
-  teal: {
+  cyan: {
     contrast: {
       value: { _light: "white", _dark: "white" }
     },
     fg: {
-      value: { _light: "{colors.teal.700}", _dark: "{colors.teal.300}" }
+      value: { _light: "{colors.cyan.700}", _dark: "{colors.cyan.300}" }
     },
     muted: {
-      value: { _light: "{colors.teal.50}", _dark: "{colors.teal.950}" }
+      value: { _light: "{colors.cyan.50}", _dark: "{colors.cyan.950}" }
     },
     subtle: {
-      value: { _light: "{colors.teal.100}", _dark: "{colors.teal.900}" }
+      value: { _light: "{colors.cyan.100}", _dark: "{colors.cyan.900}" }
     },
     emphasized: {
-      value: { _light: "{colors.teal.200}", _dark: "{colors.teal.800}" }
+      value: { _light: "{colors.cyan.200}", _dark: "{colors.cyan.800}" }
     },
     solid: {
-      value: { _light: "{colors.teal.600}", _dark: "{colors.teal.600}" }
+      value: { _light: "{colors.cyan.600}", _dark: "{colors.cyan.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.cyan.600}", _dark: "{colors.cyan.600}" }
+    }
+  },
+  sky: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.sky.700}", _dark: "{colors.sky.300}" }
+    },
+    muted: {
+      value: { _light: "{colors.sky.50}", _dark: "{colors.sky.950}" }
+    },
+    subtle: {
+      value: { _light: "{colors.sky.100}", _dark: "{colors.sky.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.sky.200}", _dark: "{colors.sky.800}" }
+    },
+    solid: {
+      value: { _light: "{colors.sky.600}", _dark: "{colors.sky.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.sky.600}", _dark: "{colors.sky.600}" }
+    }
+  },
+  blue: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.blue.700}", _dark: "{colors.blue.300}" }
+    },
+    muted: {
+      value: { _light: "{colors.blue.50}", _dark: "{colors.blue.950}" }
+    },
+    subtle: {
+      value: { _light: "{colors.blue.100}", _dark: "{colors.blue.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.blue.200}", _dark: "{colors.blue.800}" }
+    },
+    solid: {
+      value: { _light: "{colors.blue.600}", _dark: "{colors.blue.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.blue.600}", _dark: "{colors.blue.600}" }
     }
   },
   indigo: {
@@ -1762,6 +2072,32 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: { _light: "{colors.indigo.600}", _dark: "{colors.indigo.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.indigo.600}", _dark: "{colors.indigo.600}" }
+    }
+  },
+  violet: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.violet.700}", _dark: "{colors.violet.300}" }
+    },
+    muted: {
+      value: { _light: "{colors.violet.50}", _dark: "{colors.violet.950}" }
+    },
+    subtle: {
+      value: { _light: "{colors.violet.100}", _dark: "{colors.violet.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.violet.200}", _dark: "{colors.violet.800}" }
+    },
+    solid: {
+      value: { _light: "{colors.violet.600}", _dark: "{colors.violet.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.violet.600}", _dark: "{colors.violet.600}" }
     }
   },
   purple: {
@@ -1782,6 +2118,32 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: { _light: "{colors.purple.600}", _dark: "{colors.purple.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.purple.600}", _dark: "{colors.purple.600}" }
+    }
+  },
+  fuchsia: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.fuchsia.700}", _dark: "{colors.fuchsia.300}" }
+    },
+    muted: {
+      value: { _light: "{colors.fuchsia.50}", _dark: "{colors.fuchsia.950}" }
+    },
+    subtle: {
+      value: { _light: "{colors.fuchsia.100}", _dark: "{colors.fuchsia.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.fuchsia.200}", _dark: "{colors.fuchsia.800}" }
+    },
+    solid: {
+      value: { _light: "{colors.fuchsia.600}", _dark: "{colors.fuchsia.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.fuchsia.600}", _dark: "{colors.fuchsia.600}" }
     }
   },
   pink: {
@@ -1802,26 +2164,32 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: { _light: "{colors.pink.600}", _dark: "{colors.pink.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.pink.600}", _dark: "{colors.pink.600}" }
     }
   },
-  cyan: {
+  rose: {
     contrast: {
       value: { _light: "white", _dark: "white" }
     },
     fg: {
-      value: { _light: "{colors.cyan.700}", _dark: "{colors.cyan.300}" }
+      value: { _light: "{colors.rose.700}", _dark: "{colors.rose.300}" }
     },
     muted: {
-      value: { _light: "{colors.cyan.50}", _dark: "{colors.cyan.950}" }
+      value: { _light: "{colors.rose.50}", _dark: "{colors.rose.950}" }
     },
     subtle: {
-      value: { _light: "{colors.cyan.100}", _dark: "{colors.cyan.900}" }
+      value: { _light: "{colors.rose.100}", _dark: "{colors.rose.900}" }
     },
     emphasized: {
-      value: { _light: "{colors.cyan.200}", _dark: "{colors.cyan.800}" }
+      value: { _light: "{colors.rose.200}", _dark: "{colors.rose.800}" }
     },
     solid: {
-      value: { _light: "{colors.cyan.600}", _dark: "{colors.cyan.600}" }
+      value: { _light: "{colors.rose.600}", _dark: "{colors.rose.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.rose.600}", _dark: "{colors.rose.600}" }
     }
   }
 });
@@ -1938,7 +2306,7 @@ var appShellSlotRecipe = defineSlotRecipe({
 import { defineSlotRecipe as defineSlotRecipe2 } from "@chakra-ui/react";
 var gridListSlotRecipe = defineSlotRecipe2({
   className: "sui-grid-list",
-  slots: ["root", "item", "header", "icon"],
+  slots: ["root", "item", "header", "cell"],
   base: {
     root: {
       py: 2,
@@ -2002,7 +2370,7 @@ var gridListSlotRecipe = defineSlotRecipe2({
       fontWeight: "semibold",
       color: "muted"
     },
-    icon: {
+    cell: {
       display: "flex",
       flexShrink: 0
     }
@@ -2114,7 +2482,7 @@ var loadingOverlaySlotRecipe = defineSlotRecipe3({
 import { defineSlotRecipe as defineSlotRecipe4 } from "@chakra-ui/react";
 var navbarSlotRecipe = defineSlotRecipe4({
   className: "sui-navbar",
-  slots: ["root", "content", "brand", "item"],
+  slots: ["root", "content", "brand", "item", "link"],
   base: {
     root: {
       display: "flex",
@@ -2151,7 +2519,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
       whiteSpace: "nowrap",
       boxSizing: "border-box"
     },
-    item: {
+    link: {
       bg: "transparent",
       color: "currentColor",
       display: "inline-flex",
@@ -2207,7 +2575,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
           },
           gap: 4
         },
-        item: {
+        link: {
           px: 3,
           h: 8
         }
@@ -2318,7 +2686,7 @@ var personaSlotRecipe = defineSlotRecipe5({
 import { defineSlotRecipe as defineSlotRecipe6 } from "@chakra-ui/react";
 var sidebarNavItemSlotRecipe = defineSlotRecipe6({
   className: "sui-sidebar-nav-item",
-  slots: ["item", "button"],
+  slots: ["item", "button", "endElement"],
   base: {
     item: {
       position: "relative"
@@ -2338,7 +2706,14 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
       focusVisibleRing: "outside",
       "& > svg": {
         boxSize: 4
+      },
+      '&:has([data-slot="endElement"])': {
+        pe: 0
       }
+    },
+    endElement: {
+      display: "flex",
+      gap: "1px"
     }
   },
   variants: {
@@ -2366,10 +2741,10 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
         button: {
           borderRadius: "md",
           px: 2,
-          height: 8,
-          "&:has(:nth-child(3))": {
-            pe: 0
-          }
+          height: 8
+        },
+        endElement: {
+          pe: "1"
         }
       }
     }
@@ -2397,8 +2772,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
     "groupTitle",
     "groupEndElement",
     "groupContent",
-    "item",
-    "itemEndElement",
     "track"
   ],
   base: {
@@ -2607,6 +2980,9 @@ var sidebarSlotRecipe = defineSlotRecipe7({
         },
         footer: {
           px: 3
+        },
+        groupEndElement: {
+          pe: "1"
         }
       }
     }
@@ -4635,6 +5011,7 @@ var menuSlotRecipe = defineSlotRecipe27({
       bg: "bg.panel",
       boxShadow: "lg",
       color: "fg",
+      maxHeight: "var(--available-height)",
       "--menu-z-index": "zIndex.dropdown",
       zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
       borderRadius: "l2",
@@ -7641,13 +8018,13 @@ var slotRecipes = {
   status: statusSlotRecipe,
   timeline: timelineSlotRecipe,
   // Saas UI Recipes
-  appShell: appShellSlotRecipe,
-  loadingOverlay: loadingOverlaySlotRecipe,
-  persona: personaSlotRecipe,
-  gridList: gridListSlotRecipe,
-  navbar: navbarSlotRecipe,
-  sidebar: sidebarSlotRecipe,
-  sidebarNavItem: sidebarNavItemSlotRecipe
+  suiAppShell: appShellSlotRecipe,
+  suiLoadingOverlay: loadingOverlaySlotRecipe,
+  suiPersona: personaSlotRecipe,
+  suiGridList: gridListSlotRecipe,
+  suiNavbar: navbarSlotRecipe,
+  suiSidebar: sidebarSlotRecipe,
+  suiSidebarNavItem: sidebarNavItemSlotRecipe
 };
 
 // src/theme/text-styles.ts
@@ -7733,187 +8110,9 @@ var borders = defineTokens4.borders({
   xl: { value: "8px solid" }
 });
 
-// src/theme/tokens/colors.ts
-import { defineTokens as defineTokens5 } from "@chakra-ui/react";
-var colors = defineTokens5.colors({
-  transparent: { value: "transparent" },
-  current: { value: "currentColor" },
-  black: { value: "#09090B" },
-  white: { value: "#FFFFFF" },
-  whiteAlpha: {
-    50: { value: "rgba(255, 255, 255, 0.04)" },
-    100: { value: "rgba(255, 255, 255, 0.06)" },
-    200: { value: "rgba(255, 255, 255, 0.08)" },
-    300: { value: "rgba(255, 255, 255, 0.16)" },
-    400: { value: "rgba(255, 255, 255, 0.24)" },
-    500: { value: "rgba(255, 255, 255, 0.36)" },
-    600: { value: "rgba(255, 255, 255, 0.48)" },
-    700: { value: "rgba(255, 255, 255, 0.64)" },
-    800: { value: "rgba(255, 255, 255, 0.80)" },
-    900: { value: "rgba(255, 255, 255, 0.92)" },
-    950: { value: "rgba(255, 255, 255, 0.95)" }
-  },
-  blackAlpha: {
-    50: { value: "rgba(0, 0, 0, 0.04)" },
-    100: { value: "rgba(0, 0, 0, 0.06)" },
-    200: { value: "rgba(0, 0, 0, 0.08)" },
-    300: { value: "rgba(0, 0, 0, 0.16)" },
-    400: { value: "rgba(0, 0, 0, 0.24)" },
-    500: { value: "rgba(0, 0, 0, 0.36)" },
-    600: { value: "rgba(0, 0, 0, 0.48)" },
-    700: { value: "rgba(0, 0, 0, 0.64)" },
-    800: { value: "rgba(0, 0, 0, 0.80)" },
-    900: { value: "rgba(0, 0, 0, 0.92)" },
-    950: { value: "rgba(0, 0, 0, 0.95)" }
-  },
-  gray: {
-    50: { value: "#fafafa" },
-    100: { value: "#f4f4f5" },
-    200: { value: "#e4e4e7" },
-    300: { value: "#d4d4d8" },
-    400: { value: "#a1a1aa" },
-    500: { value: "#71717a" },
-    600: { value: "#52525b" },
-    700: { value: "#3f3f46" },
-    800: { value: "#27272a" },
-    900: { value: "#18181b" },
-    950: { value: "#111111" }
-  },
-  red: {
-    50: { value: "#fef2f2" },
-    100: { value: "#fee2e2" },
-    200: { value: "#fecaca" },
-    300: { value: "#fca5a5" },
-    400: { value: "#f87171" },
-    500: { value: "#ef4444" },
-    600: { value: "#dc2626" },
-    700: { value: "#991919" },
-    800: { value: "#511111" },
-    900: { value: "#300c0c" },
-    950: { value: "#1f0808" }
-  },
-  orange: {
-    50: { value: "#fff7ed" },
-    100: { value: "#ffedd5" },
-    200: { value: "#fed7aa" },
-    300: { value: "#fdba74" },
-    400: { value: "#fb923c" },
-    500: { value: "#f97316" },
-    600: { value: "#ea580c" },
-    700: { value: "#92310a" },
-    800: { value: "#6c2710" },
-    900: { value: "#3b1106" },
-    950: { value: "#220a04" }
-  },
-  yellow: {
-    50: { value: "#fefce8" },
-    100: { value: "#fef9c3" },
-    200: { value: "#fef08a" },
-    300: { value: "#fde047" },
-    400: { value: "#facc15" },
-    500: { value: "#eab308" },
-    600: { value: "#ca8a04" },
-    700: { value: "#845209" },
-    800: { value: "#713f12" },
-    900: { value: "#422006" },
-    950: { value: "#281304" }
-  },
-  green: {
-    50: { value: "#f0fdf4" },
-    100: { value: "#dcfce7" },
-    200: { value: "#bbf7d0" },
-    300: { value: "#86efac" },
-    400: { value: "#4ade80" },
-    500: { value: "#22c55e" },
-    600: { value: "#16a34a" },
-    700: { value: "#116932" },
-    800: { value: "#124a28" },
-    900: { value: "#042713" },
-    950: { value: "#03190c" }
-  },
-  teal: {
-    50: { value: "#f0fdfa" },
-    100: { value: "#ccfbf1" },
-    200: { value: "#99f6e4" },
-    300: { value: "#5eead4" },
-    400: { value: "#2dd4bf" },
-    500: { value: "#14b8a6" },
-    600: { value: "#0d9488" },
-    700: { value: "#0c5d56" },
-    800: { value: "#114240" },
-    900: { value: "#032726" },
-    950: { value: "#021716" }
-  },
-  blue: {
-    50: { value: "#eff6ff" },
-    100: { value: "#dbeafe" },
-    200: { value: "#bfdbfe" },
-    300: { value: "#a3cfff" },
-    400: { value: "#60a5fa" },
-    500: { value: "#3b82f6" },
-    600: { value: "#2563eb" },
-    700: { value: "#173da6" },
-    800: { value: "#1a3478" },
-    900: { value: "#14204a" },
-    950: { value: "#0c142e" }
-  },
-  cyan: {
-    50: { value: "#ecfeff" },
-    100: { value: "#cffafe" },
-    200: { value: "#a5f3fc" },
-    300: { value: "#67e8f9" },
-    400: { value: "#22d3ee" },
-    500: { value: "#06b6d4" },
-    600: { value: "#0891b2" },
-    700: { value: "#0c5c72" },
-    800: { value: "#134152" },
-    900: { value: "#072a38" },
-    950: { value: "#051b24" }
-  },
-  indigo: {
-    50: { value: "#eef2ff" },
-    100: { value: "#e0e7ff" },
-    200: { value: "#c7d2fe" },
-    300: { value: "#a5b4fc" },
-    400: { value: "#818cf8" },
-    500: { value: "#6366f1" },
-    600: { value: "#4f46e5" },
-    700: { value: "#4338ca" },
-    800: { value: "#3730a3" },
-    900: { value: "#312e81" },
-    950: { value: "#1e1b4b" }
-  },
-  purple: {
-    50: { value: "#faf5ff" },
-    100: { value: "#f3e8ff" },
-    200: { value: "#e9d5ff" },
-    300: { value: "#d8b4fe" },
-    400: { value: "#c084fc" },
-    500: { value: "#a855f7" },
-    600: { value: "#9333ea" },
-    700: { value: "#641ba3" },
-    800: { value: "#4a1772" },
-    900: { value: "#2f0553" },
-    950: { value: "#1a032e" }
-  },
-  pink: {
-    50: { value: "#fdf2f8" },
-    100: { value: "#fce7f3" },
-    200: { value: "#fbcfe8" },
-    300: { value: "#f9a8d4" },
-    400: { value: "#f472b6" },
-    500: { value: "#ec4899" },
-    600: { value: "#db2777" },
-    700: { value: "#a41752" },
-    800: { value: "#6d0e34" },
-    900: { value: "#45061f" },
-    950: { value: "#2c0514" }
-  }
-});
-
 // src/theme/tokens/cursor.ts
-import { defineTokens as defineTokens6 } from "@chakra-ui/react";
-var cursor = defineTokens6.cursor({
+import { defineTokens as defineTokens5 } from "@chakra-ui/react";
+var cursor = defineTokens5.cursor({
   button: { value: "pointer" },
   checkbox: { value: "default" },
   disabled: { value: "not-allowed" },
@@ -7925,8 +8124,8 @@ var cursor = defineTokens6.cursor({
 });
 
 // src/theme/tokens/durations.ts
-import { defineTokens as defineTokens7 } from "@chakra-ui/react";
-var durations = defineTokens7.durations({
+import { defineTokens as defineTokens6 } from "@chakra-ui/react";
+var durations = defineTokens6.durations({
   fastest: { value: "50ms" },
   faster: { value: "100ms" },
   fast: { value: "150ms" },
@@ -7937,8 +8136,8 @@ var durations = defineTokens7.durations({
 });
 
 // src/theme/tokens/easings.ts
-import { defineTokens as defineTokens8 } from "@chakra-ui/react";
-var easings = defineTokens8.easings({
+import { defineTokens as defineTokens7 } from "@chakra-ui/react";
+var easings = defineTokens7.easings({
   "ease-in": { value: "cubic-bezier(0.42, 0, 1, 1)" },
   "ease-out": { value: "cubic-bezier(0, 0, 0.58, 1)" },
   "ease-in-out": { value: "cubic-bezier(0.42, 0, 0.58, 1)" },
@@ -7948,8 +8147,8 @@ var easings = defineTokens8.easings({
 });
 
 // src/theme/tokens/font-sizes.ts
-import { defineTokens as defineTokens9 } from "@chakra-ui/react";
-var fontSizes = defineTokens9.fontSizes({
+import { defineTokens as defineTokens8 } from "@chakra-ui/react";
+var fontSizes = defineTokens8.fontSizes({
   "2xs": { value: scaleToken("0.65rem") },
   xs: { value: scaleToken("0.725rem") },
   sm: { value: scaleToken("0.875rem") },
@@ -7967,8 +8166,8 @@ var fontSizes = defineTokens9.fontSizes({
 });
 
 // src/theme/tokens/font-weights.ts
-import { defineTokens as defineTokens10 } from "@chakra-ui/react";
-var fontWeights = defineTokens10.fontWeights({
+import { defineTokens as defineTokens9 } from "@chakra-ui/react";
+var fontWeights = defineTokens9.fontWeights({
   thin: { value: "100" },
   extralight: { value: "200" },
   light: { value: "300" },
@@ -7981,9 +8180,9 @@ var fontWeights = defineTokens10.fontWeights({
 });
 
 // src/theme/tokens/fonts.ts
-import { defineTokens as defineTokens11 } from "@chakra-ui/react";
+import { defineTokens as defineTokens10 } from "@chakra-ui/react";
 var fallback = `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-var fonts = defineTokens11.fonts({
+var fonts = defineTokens10.fonts({
   heading: {
     value: `Inter Variable, Inter, ${fallback}`
   },
@@ -8155,8 +8354,8 @@ var keyframes = defineKeyframes({
 });
 
 // src/theme/tokens/letter-spacing.ts
-import { defineTokens as defineTokens12 } from "@chakra-ui/react";
-var letterSpacings = defineTokens12.letterSpacings({
+import { defineTokens as defineTokens11 } from "@chakra-ui/react";
+var letterSpacings = defineTokens11.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   wide: { value: "0.025em" },
@@ -8165,8 +8364,8 @@ var letterSpacings = defineTokens12.letterSpacings({
 });
 
 // src/theme/tokens/line-heights.ts
-import { defineTokens as defineTokens13 } from "@chakra-ui/react";
-var lineHeights = defineTokens13.lineHeights({
+import { defineTokens as defineTokens12 } from "@chakra-ui/react";
+var lineHeights = defineTokens12.lineHeights({
   shorter: { value: scaleToken("1.25") },
   short: { value: scaleToken("1.375") },
   moderate: { value: scaleToken("1.5") },
@@ -8183,8 +8382,8 @@ var lineHeights = defineTokens13.lineHeights({
 });
 
 // src/theme/tokens/radius.ts
-import { defineTokens as defineTokens14 } from "@chakra-ui/react";
-var radii = defineTokens14.radii({
+import { defineTokens as defineTokens13 } from "@chakra-ui/react";
+var radii = defineTokens13.radii({
   "2xs": {
     value: radiusToken("0.0625rem")
   },
@@ -8200,11 +8399,11 @@ var radii = defineTokens14.radii({
 });
 
 // src/theme/tokens/sizes.ts
-import { defineTokens as defineTokens16 } from "@chakra-ui/react";
+import { defineTokens as defineTokens15 } from "@chakra-ui/react";
 
 // src/theme/tokens/spacing.ts
-import { defineTokens as defineTokens15 } from "@chakra-ui/react";
-var spacing = defineTokens15.spacing({
+import { defineTokens as defineTokens14 } from "@chakra-ui/react";
+var spacing = defineTokens14.spacing({
   0.5: { value: scaleToken("0.125rem") },
   1: { value: scaleToken("0.25rem") },
   1.5: { value: scaleToken("0.375rem") },
@@ -8240,7 +8439,7 @@ var spacing = defineTokens15.spacing({
 });
 
 // src/theme/tokens/sizes.ts
-var largeSizes = defineTokens16.sizes({
+var largeSizes = defineTokens15.sizes({
   "3xs": { value: "14rem" },
   "2xs": { value: "16rem" },
   xs: { value: "20rem" },
@@ -8256,7 +8455,7 @@ var largeSizes = defineTokens16.sizes({
   "7xl": { value: "80rem" },
   "8xl": { value: "90rem" }
 });
-var namedSizes = defineTokens16.sizes({
+var namedSizes = defineTokens15.sizes({
   max: { value: "max-content" },
   min: { value: "min-content" },
   fit: { value: "fit-content" },
@@ -8271,7 +8470,7 @@ var namedSizes = defineTokens16.sizes({
   vw: { value: "100vw" },
   vh: { value: "100vh" }
 });
-var fractionalSizes = defineTokens16.sizes({
+var fractionalSizes = defineTokens15.sizes({
   "1/2": { value: "50%" },
   "1/3": { value: "33.333333%" },
   "2/3": { value: "66.666667%" },
@@ -8298,7 +8497,7 @@ var fractionalSizes = defineTokens16.sizes({
   "10/12": { value: "83.333333%" },
   "11/12": { value: "91.666667%" }
 });
-var sizes = defineTokens16.sizes({
+var sizes = defineTokens15.sizes({
   ...largeSizes,
   ...spacing,
   ...fractionalSizes,
@@ -8306,8 +8505,8 @@ var sizes = defineTokens16.sizes({
 });
 
 // src/theme/tokens/z-indices.ts
-import { defineTokens as defineTokens17 } from "@chakra-ui/react";
-var zIndices = defineTokens17.zIndex({
+import { defineTokens as defineTokens16 } from "@chakra-ui/react";
+var zIndices = defineTokens16.zIndex({
   // Local elements, eg a badge of an avatar.
   "layer-1": {
     value: 1
@@ -8388,11 +8587,51 @@ var defaultSystem = createSystem(defaultConfig);
 // src/index.ts
 import { createSystem as createSystem2 } from "@chakra-ui/react";
 export {
+  AppShell,
+  Avatar,
+  AvatarGroup,
+  breadcrumb_exports as Breadcrumb,
+  Button,
+  Checkbox,
+  CloseButton,
+  Command,
+  namespace_exports as Dialog,
+  namespace_exports2 as Drawer,
+  EmptyState,
+  grid_list_exports as GridList,
+  IconBadge,
+  InputGroup,
+  Link,
+  loading_overlay_exports as LoadingOverlay,
+  menu_exports as Menu,
+  navbar_exports as Navbar,
+  NumberInput,
+  PasswordInput,
+  Persona,
+  PersonaAvatar,
+  PinInput,
+  Radio,
+  RadioGroup,
+  SearchInput,
+  SegmentedControl,
+  namespace_exports3 as Select,
+  sidebar_exports as Sidebar,
+  Spinner,
+  steps_exports as Steps,
   SuiContext,
   SuiProvider,
+  Switch,
+  Toaster,
+  Tooltip,
   createSystem2 as createSystem,
   defaultConfig,
+  defaultPresenceOptions,
   defaultSystem,
+  toast,
   useLink,
+  useLoadingOverlayStyles,
+  useSidebar,
+  useSidebarItemStyles,
+  useSidebarStyles,
   useSui
 };