@saas-ui/react 3.0.0-next.39 → 3.0.0-next.40

package/dist/components/card/card.recipe.js

@@ -23,6 +23,7 @@ export const cardSlotRecipe = defineSlotRecipe({
         },
         header: {
             padding: 'var(--card-padding)',
+            paddingBottom: 'calc(var(--card-padding) / 2)',
             display: 'flex',
             flexDirection: 'column',
             gap: '1',
@@ -33,7 +34,10 @@ export const cardSlotRecipe = defineSlotRecipe({
             display: 'flex',
             flexDirection: 'column',
             '&:is(.chakra-card__header + &)': {
-                paddingTop: 0,
+                paddingTop: 'calc(var(--card-padding) / 2)',
+            },
+            '&:has(+ .chakra-card__footer)': {
+                paddingBottom: 'calc(var(--card-padding) / 2)',
             },
         },
         footer: {
@@ -41,7 +45,7 @@ export const cardSlotRecipe = defineSlotRecipe({
             alignItems: 'center',
             gap: '2',
             padding: 'var(--card-padding)',
-            paddingTop: 0,
+            paddingTop: 'calc(var(--card-padding) / 2)',
         },
     },
     variants: {

package/dist/components/center/index.d.ts

@@ -1 +1 @@
-export { Center, type CenterProps, } from '@chakra-ui/react/center';
+export { Center, type CenterProps, AbsoluteCenter, type AbsoluteCenterProps, } from '@chakra-ui/react/center';

package/dist/components/center/index.js

@@ -1 +1 @@
-export { Center, } from '@chakra-ui/react/center';
+export { Center, AbsoluteCenter, } from '@chakra-ui/react/center';

package/dist/components/combobox/combobox.recipe.d.ts

@@ -47,6 +47,7 @@ export declare const comboboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 '--combobox-item-padding-x': "spacing.1";
                 '--combobox-item-padding-y': "spacing.0.5";
                 '--combobox-indicator-size': "sizes.3.5";
+                borderRadius: "panel.sm";
                 p: "0.5";
                 textStyle: "xs";
             };
@@ -54,6 +55,9 @@ export declare const comboboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 textStyle: "xs";
                 gap: "1";
             };
+            item: {
+                borderRadius: "calc({radii.panel.sm} - {sizes.0.5})";
+            };
         };
         sm: {
             root: {
@@ -68,13 +72,17 @@ export declare const comboboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 '--combobox-item-padding-x': "spacing.1.5";
                 '--combobox-item-padding-y': "spacing.1";
                 '--combobox-indicator-size': "sizes.4";
-                p: "0.5";
+                borderRadius: "panel.md";
+                p: "1";
                 textStyle: "xs";
             };
             trigger: {
                 textStyle: "xs";
                 gap: "1";
             };
+            item: {
+                borderRadius: "calc({radii.panel.md} - {sizes.0.5})";
+            };
         };
         md: {
             root: {
@@ -89,6 +97,7 @@ export declare const comboboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 '--combobox-item-padding-x': "spacing.2";
                 '--combobox-item-padding-y': "spacing.1.5";
                 '--combobox-indicator-size': "sizes.4";
+                borderRadius: "panel.lg";
                 p: "1";
                 textStyle: "sm";
             };
@@ -101,6 +110,9 @@ export declare const comboboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 textStyle: "sm";
                 gap: "2";
             };
+            item: {
+                borderRadius: "calc({radii.panel.lg} - {sizes.1})";
+            };
         };
         lg: {
             root: {
@@ -115,7 +127,8 @@ export declare const comboboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 '--combobox-item-padding-y': "spacing.2";
                 '--combobox-item-padding-x': "spacing.3";
                 '--combobox-indicator-size': "sizes.5";
-                p: "1.5";
+                borderRadius: "panel.lg";
+                p: "1";
                 textStyle: "md";
             };
             trigger: {
@@ -123,6 +136,9 @@ export declare const comboboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 py: "3";
                 gap: "2";
             };
+            item: {
+                borderRadius: "calc({radii.panel.lg} - {sizes.1})";
+            };
         };
     };
 }>;

package/dist/components/combobox/combobox.recipe.js

@@ -79,15 +79,12 @@ export const comboboxSlotRecipe = defineSlotRecipe({
         },
         content: {
             layerStyle: 'overlay',
-            boxShadow: 'md',
-            borderWidth: '1px',
-            borderColor: 'border',
             display: 'flex',
             flexDirection: 'column',
             '--menu-z-index': 'zIndex.layer-3',
             zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
             outline: 0,
-            maxH: '96',
+            maxH: 'var(--available-height)',
             overflowY: 'auto',
             _open: {
                 animationStyle: 'slide-fade-in',
@@ -193,6 +190,7 @@ export const comboboxSlotRecipe = defineSlotRecipe({
                     '--combobox-item-padding-x': 'spacing.1',
                     '--combobox-item-padding-y': 'spacing.0.5',
                     '--combobox-indicator-size': 'sizes.3.5',
+                    borderRadius: 'panel.sm',
                     p: '0.5',
                     textStyle: 'xs',
                 },
@@ -200,6 +198,9 @@ export const comboboxSlotRecipe = defineSlotRecipe({
                     textStyle: 'xs',
                     gap: '1',
                 },
+                item: {
+                    borderRadius: 'calc({radii.panel.sm} - {sizes.0.5})',
+                },
             },
             sm: {
                 root: {
@@ -214,13 +215,17 @@ export const comboboxSlotRecipe = defineSlotRecipe({
                     '--combobox-item-padding-x': 'spacing.1.5',
                     '--combobox-item-padding-y': 'spacing.1',
                     '--combobox-indicator-size': 'sizes.4',
-                    p: '0.5',
+                    borderRadius: 'panel.md',
+                    p: '1',
                     textStyle: 'xs',
                 },
                 trigger: {
                     textStyle: 'xs',
                     gap: '1',
                 },
+                item: {
+                    borderRadius: 'calc({radii.panel.md} - {sizes.0.5})',
+                },
             },
             md: {
                 root: {
@@ -235,6 +240,7 @@ export const comboboxSlotRecipe = defineSlotRecipe({
                     '--combobox-item-padding-x': 'spacing.2',
                     '--combobox-item-padding-y': 'spacing.1.5',
                     '--combobox-indicator-size': 'sizes.4',
+                    borderRadius: 'panel.lg',
                     p: '1',
                     textStyle: 'sm',
                 },
@@ -247,6 +253,9 @@ export const comboboxSlotRecipe = defineSlotRecipe({
                     textStyle: 'sm',
                     gap: '2',
                 },
+                item: {
+                    borderRadius: 'calc({radii.panel.lg} - {sizes.1})',
+                },
             },
             lg: {
                 root: {
@@ -261,7 +270,8 @@ export const comboboxSlotRecipe = defineSlotRecipe({
                     '--combobox-item-padding-y': 'spacing.2',
                     '--combobox-item-padding-x': 'spacing.3',
                     '--combobox-indicator-size': 'sizes.5',
-                    p: '1.5',
+                    borderRadius: 'panel.lg',
+                    p: '1',
                     textStyle: 'md',
                 },
                 trigger: {
@@ -269,6 +279,9 @@ export const comboboxSlotRecipe = defineSlotRecipe({
                     py: '3',
                     gap: '2',
                 },
+                item: {
+                    borderRadius: 'calc({radii.panel.lg} - {sizes.1})',
+                },
             },
         },
     },

package/dist/components/data-list/data-list.recipe.d.ts

@@ -11,7 +11,7 @@ export declare const dataListSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
                 gap: "4";
             };
             itemLabel: {
-                minWidth: "120px";
+                minWidth: "var(--label-width, 120px)";
             };
         };
         vertical: {

package/dist/components/data-list/data-list.recipe.js

@@ -29,7 +29,7 @@ export const dataListSlotRecipe = defineSlotRecipe({
                     gap: '4',
                 },
                 itemLabel: {
-                    minWidth: '120px',
+                    minWidth: 'var(--label-width, 120px)',
                 },
             },
             vertical: {

package/dist/components/dialog/dialog.recipe.js

@@ -55,12 +55,18 @@ export const dialogSlotRecipe = defineSlotRecipe({
             flex: 0,
             px: '6',
             py: '4',
+            paddingBottom: '2',
         },
         body: {
             flex: '1',
             px: '6',
-            pt: '2',
-            pb: '6',
+            py: '4',
+            '&:is(.chakra-dialog__header + &)': {
+                paddingTop: '2',
+            },
+            '&:has(+ .chakra-dialog__footer)': {
+                paddingBottom: '2',
+            },
         },
         footer: {
             display: 'flex',

package/dist/components/empty-state/empty-state.d.ts

@@ -1,7 +1,7 @@
 import { EmptyState as ChakraEmptyState } from '@chakra-ui/react';
 export interface EmptyStateProps extends ChakraEmptyState.RootProps {
     title: string;
-    description?: string;
+    description?: React.ReactNode;
     icon?: React.ReactNode;
 }
 export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/empty-state/empty-state.js

@@ -7,5 +7,6 @@ const EmptyStateActions = (props) => {
 };
 export const EmptyState = forwardRef(function EmptyState(props, ref) {
     const { title, description, icon, children, ...rest } = props;
-    return (_jsx(ChakraEmptyState.Root, { ref: ref, ...rest, children: _jsxs(ChakraEmptyState.Content, { children: [icon && (_jsx(ChakraEmptyState.Indicator, { children: icon })), _jsx(ChakraEmptyState.Title, { children: title }), description ? (_jsx(ChakraEmptyState.Description, { children: description })) : null, _jsx(EmptyStateActions, { children: children })] }) }));
+    const as = typeof description === 'string' ? 'p' : 'div';
+    return (_jsx(ChakraEmptyState.Root, { ref: ref, ...rest, children: _jsxs(ChakraEmptyState.Content, { children: [icon && (_jsx(ChakraEmptyState.Indicator, { children: icon })), _jsx(ChakraEmptyState.Title, { children: title }), description ? (_jsx(ChakraEmptyState.Description, { as: as, children: description })) : null, _jsx(EmptyStateActions, { children: children })] }) }));
 });

package/dist/components/empty-state/empty-state.recipe.d.ts

@@ -76,6 +76,7 @@ export declare const emptyStateSlotRecipe: import("@chakra-ui/react").SlotRecipe
         center: {
             content: {
                 alignItems: "center";
+                textAlign: "center";
             };
         };
     };

package/dist/components/empty-state/empty-state.recipe.js

@@ -18,6 +18,7 @@ export const emptyStateSlotRecipe = defineSlotRecipe({
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            gap: '0.25rem',
         },
         indicator: {
             display: 'flex',
@@ -34,6 +35,11 @@ export const emptyStateSlotRecipe = defineSlotRecipe({
         description: {
             textStyle: 'sm',
             color: 'fg.muted',
+            '&:is(div)': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '0.5rem',
+            },
         },
         actions: {
             display: 'flex',
@@ -119,6 +125,7 @@ export const emptyStateSlotRecipe = defineSlotRecipe({
             center: {
                 content: {
                     alignItems: 'center',
+                    textAlign: 'center',
                 },
             },
         },

package/dist/components/popover/popover.recipe.js

@@ -20,7 +20,6 @@ export const popoverSlotRecipe = defineSlotRecipe({
             },
             '--popover-z-index': 'zIndex.layer-2',
             zIndex: 'calc(var(--popover-z-index) + var(--layer-index, 0))',
-            borderWidth: '1px',
             outline: '0',
             transformOrigin: 'var(--transform-origin)',
             _open: {

package/dist/components/progress-circle/progress-circle.recipe.d.ts

@@ -2,7 +2,7 @@ export declare const progressCircleSlotRecipe: import("@chakra-ui/react").SlotRe
     size: {
         xs: {
             circle: {
-                '--size': "6";
+                '--size': "sizes.4";
                 '--thickness': "3px";
             };
             valueText: {
@@ -11,7 +11,7 @@ export declare const progressCircleSlotRecipe: import("@chakra-ui/react").SlotRe
         };
         sm: {
             circle: {
-                '--size': "32px";
+                '--size': "sizes.6";
                 '--thickness': "5px";
             };
             valueText: {
@@ -20,7 +20,7 @@ export declare const progressCircleSlotRecipe: import("@chakra-ui/react").SlotRe
         };
         md: {
             circle: {
-                '--size': "40px";
+                '--size': "sizes.10";
                 '--thickness': "6px";
             };
             valueText: {
@@ -29,7 +29,7 @@ export declare const progressCircleSlotRecipe: import("@chakra-ui/react").SlotRe
         };
         lg: {
             circle: {
-                '--size': "48px";
+                '--size': "sizes.14";
                 '--thickness': "7px";
             };
             valueText: {
@@ -38,7 +38,7 @@ export declare const progressCircleSlotRecipe: import("@chakra-ui/react").SlotRe
         };
         xl: {
             circle: {
-                '--size': "64px";
+                '--size': "sizes.16";
                 '--thickness': "8px";
             };
             valueText: {

package/dist/components/progress-circle/progress-circle.recipe.js

@@ -40,7 +40,7 @@ export const progressCircleSlotRecipe = defineSlotRecipe({
         size: {
             xs: {
                 circle: {
-                    '--size': '6',
+                    '--size': 'sizes.4',
                     '--thickness': '3px',
                 },
                 valueText: {
@@ -49,7 +49,7 @@ export const progressCircleSlotRecipe = defineSlotRecipe({
             },
             sm: {
                 circle: {
-                    '--size': '32px',
+                    '--size': 'sizes.6',
                     '--thickness': '5px',
                 },
                 valueText: {
@@ -58,7 +58,7 @@ export const progressCircleSlotRecipe = defineSlotRecipe({
             },
             md: {
                 circle: {
-                    '--size': '40px',
+                    '--size': 'sizes.10',
                     '--thickness': '6px',
                 },
                 valueText: {
@@ -67,7 +67,7 @@ export const progressCircleSlotRecipe = defineSlotRecipe({
             },
             lg: {
                 circle: {
-                    '--size': '48px',
+                    '--size': 'sizes.14',
                     '--thickness': '7px',
                 },
                 valueText: {
@@ -76,7 +76,7 @@ export const progressCircleSlotRecipe = defineSlotRecipe({
             },
             xl: {
                 circle: {
-                    '--size': '64px',
+                    '--size': 'sizes.16',
                     '--thickness': '8px',
                 },
                 valueText: {

package/dist/components/tabs/tabs.recipe.d.ts

@@ -172,7 +172,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
             trigger: {
                 justifyContent: "center";
                 color: "fg.muted";
-                borderRadius: "var(--tabs-trigger-radius)";
+                borderRadius: "calc({radii.md} - 1px)";
                 _hover: {
                     color: "fg.subtle";
                 };

package/dist/components/tabs/tabs.recipe.js

@@ -240,7 +240,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
                 trigger: {
                     justifyContent: 'center',
                     color: 'fg.muted',
-                    borderRadius: 'var(--tabs-trigger-radius)',
+                    borderRadius: 'calc({radii.md} - 1px)',
                     _hover: {
                         color: 'fg.subtle',
                     },

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { defaultSystem, defaultConfig } from './preset.ts';
 export { createSystem, defineAnimationStyles, defineConditions, defineConfig, defineGlobalStyles, defineKeyframes, defineLayerStyles, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineStyle, defineTextStyles, defineTokens, chakra, createRecipeContext, createSlotRecipeContext, useRecipe, useSlotRecipe, useChakraContext, useToken, } from '@chakra-ui/react/styled-system';
-export type { RecipeProps, SlotRecipeProps, RecipeDefinition, SlotRecipeDefinition, HTMLChakraProps, } from '@chakra-ui/react/styled-system';
+export type { RecipeProps, SlotRecipeProps, RecipeDefinition, SlotRecipeDefinition, HTMLChakraProps, SystemConfig, ConditionalValue, SystemStyleObject, } from '@chakra-ui/react/styled-system';
 export { useMediaQuery, useBreakpoint, useBreakpointValue, useControllableState, useDisclosure, createListCollection, createContext, mergeRefs, } from '@chakra-ui/react';
 export type { UseDisclosureProps, UseDisclosureReturn, UseControllableStateProps, UseBreakpointOptions, UseBreakpointValueOptions, } from '@chakra-ui/react';
 export { SuiProvider, SuiContext, useLink, useSui } from './provider/index.ts';
@@ -96,7 +96,7 @@ export { ToggleTip, type ToggleTipProps, } from './components/toggle-tip/index.t
 export { AspectRatio, type AspectRatioProps, } from './components/aspect-ratio/index.ts';
 export { Bleed, type BleedProps } from './components/bleed/index.ts';
 export { Box, type BoxProps, Span, type SpanProps, } from './components/box/index.ts';
-export { Center, type CenterProps } from './components/center/index.ts';
+export { Center, type CenterProps, AbsoluteCenter, type AbsoluteCenterProps, } from './components/center/index.ts';
 export { ClientOnly } from './components/client-only/index.ts';
 export { ColorPicker } from './components/color-picker/index.ts';
 export { ColorSwatch } from './components/color-swatch/index.ts';
@@ -120,3 +120,4 @@ export { Em, type EmProps, Strong, type StrongProps, Text, type TextProps, } fro
 export { VisuallyHidden } from './components/visually-hidden/index.ts';
 export { Wrap, type WrapProps } from './components/wrap/index.ts';
 export { Flex, type FlexProps } from './components/flex/index.ts';
+export type { ColorPalette } from './theme/tokens/colors.ts';

package/dist/index.js

@@ -91,7 +91,7 @@ export { ToggleTip, } from "./components/toggle-tip/index.js";
 export { AspectRatio, } from "./components/aspect-ratio/index.js";
 export { Bleed } from "./components/bleed/index.js";
 export { Box, Span, } from "./components/box/index.js";
-export { Center } from "./components/center/index.js";
+export { Center, AbsoluteCenter, } from "./components/center/index.js";
 export { ClientOnly } from "./components/client-only/index.js";
 export { ColorPicker } from "./components/color-picker/index.js";
 export { ColorSwatch } from "./components/color-swatch/index.js";

package/dist/theme/slot-recipes.d.ts

@@ -786,6 +786,7 @@ export declare const slotRecipes: {
                     '--combobox-item-padding-x': "spacing.1";
                     '--combobox-item-padding-y': "spacing.0.5";
                     '--combobox-indicator-size': "sizes.3.5";
+                    borderRadius: "panel.sm";
                     p: "0.5";
                     textStyle: "xs";
                 };
@@ -793,6 +794,9 @@ export declare const slotRecipes: {
                     textStyle: "xs";
                     gap: "1";
                 };
+                item: {
+                    borderRadius: "calc({radii.panel.sm} - {sizes.0.5})";
+                };
             };
             sm: {
                 root: {
@@ -807,13 +811,17 @@ export declare const slotRecipes: {
                     '--combobox-item-padding-x': "spacing.1.5";
                     '--combobox-item-padding-y': "spacing.1";
                     '--combobox-indicator-size': "sizes.4";
-                    p: "0.5";
+                    borderRadius: "panel.md";
+                    p: "1";
                     textStyle: "xs";
                 };
                 trigger: {
                     textStyle: "xs";
                     gap: "1";
                 };
+                item: {
+                    borderRadius: "calc({radii.panel.md} - {sizes.0.5})";
+                };
             };
             md: {
                 root: {
@@ -828,6 +836,7 @@ export declare const slotRecipes: {
                     '--combobox-item-padding-x': "spacing.2";
                     '--combobox-item-padding-y': "spacing.1.5";
                     '--combobox-indicator-size': "sizes.4";
+                    borderRadius: "panel.lg";
                     p: "1";
                     textStyle: "sm";
                 };
@@ -840,6 +849,9 @@ export declare const slotRecipes: {
                     textStyle: "sm";
                     gap: "2";
                 };
+                item: {
+                    borderRadius: "calc({radii.panel.lg} - {sizes.1})";
+                };
             };
             lg: {
                 root: {
@@ -854,7 +866,8 @@ export declare const slotRecipes: {
                     '--combobox-item-padding-y': "spacing.2";
                     '--combobox-item-padding-x': "spacing.3";
                     '--combobox-indicator-size': "sizes.5";
-                    p: "1.5";
+                    borderRadius: "panel.lg";
+                    p: "1";
                     textStyle: "md";
                 };
                 trigger: {
@@ -862,6 +875,9 @@ export declare const slotRecipes: {
                     py: "3";
                     gap: "2";
                 };
+                item: {
+                    borderRadius: "calc({radii.panel.lg} - {sizes.1})";
+                };
             };
         };
     }>;
@@ -878,7 +894,7 @@ export declare const slotRecipes: {
                     gap: "4";
                 };
                 itemLabel: {
-                    minWidth: "120px";
+                    minWidth: "var(--label-width, 120px)";
                 };
             };
             vertical: {
@@ -1314,6 +1330,7 @@ export declare const slotRecipes: {
             center: {
                 content: {
                     alignItems: "center";
+                    textAlign: "center";
                 };
             };
         };
@@ -2052,7 +2069,7 @@ export declare const slotRecipes: {
         size: {
             xs: {
                 circle: {
-                    '--size': "6";
+                    '--size': "sizes.4";
                     '--thickness': "3px";
                 };
                 valueText: {
@@ -2061,7 +2078,7 @@ export declare const slotRecipes: {
             };
             sm: {
                 circle: {
-                    '--size': "32px";
+                    '--size': "sizes.6";
                     '--thickness': "5px";
                 };
                 valueText: {
@@ -2070,7 +2087,7 @@ export declare const slotRecipes: {
             };
             md: {
                 circle: {
-                    '--size': "40px";
+                    '--size': "sizes.10";
                     '--thickness': "6px";
                 };
                 valueText: {
@@ -2079,7 +2096,7 @@ export declare const slotRecipes: {
             };
             lg: {
                 circle: {
-                    '--size': "48px";
+                    '--size': "sizes.14";
                     '--thickness': "7px";
                 };
                 valueText: {
@@ -2088,7 +2105,7 @@ export declare const slotRecipes: {
             };
             xl: {
                 circle: {
-                    '--size': "64px";
+                    '--size': "sizes.16";
                     '--thickness': "8px";
                 };
                 valueText: {
@@ -3226,7 +3243,7 @@ export declare const slotRecipes: {
                 trigger: {
                     justifyContent: "center";
                     color: "fg.muted";
-                    borderRadius: "var(--tabs-trigger-radius)";
+                    borderRadius: "calc({radii.md} - 1px)";
                     _hover: {
                         color: "fg.subtle";
                     };

package/dist/theme/tokens/colors.d.ts

@@ -1,3 +1,4 @@
+export type ColorPalette = 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
 export declare const colors: {
     transparent: {
         value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.39",
+  "version": "3.0.0-next.40",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -62,8 +62,8 @@
   "dependencies": {
     "@ark-ui/react": "^5.9.1",
     "next-themes": "^0.4.6",
-    "@saas-ui/core": "3.0.0-next.11",
-    "@saas-ui/hooks": "3.0.0-next.3"
+    "@saas-ui/hooks": "3.0.0-next.3",
+    "@saas-ui/core": "3.0.0-next.11"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.20.0",