@smg-automotive/components 25.11.0-chakra-v3.3 → 25.11.0-dbojovic-vsst-4320-select-menu-migration.1

package/dist/cjs/components/drawer/DrawerBody.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+import { DrawerBodyProps } from '@chakra-ui/react';
+export declare const DrawerBody: FC<PropsWithChildren<DrawerBodyProps>>;
+//# sourceMappingURL=DrawerBody.d.ts.map

package/dist/cjs/components/drawer/DrawerBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerBody.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/DrawerBody.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAA0B,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE3E,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAI7D,CAAC"}

package/dist/cjs/components/drawer/DrawerContent.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import { DrawerContentProps as ChakraDrawerContentProps } from '@chakra-ui/react';
+interface Props extends ChakraDrawerContentProps {
+    withCloseButton?: boolean;
+}
+export declare const DrawerContent: FC<PropsWithChildren<Props>>;
+export {};
+//# sourceMappingURL=DrawerContent.d.ts.map

package/dist/cjs/components/drawer/DrawerContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/DrawerContent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAEL,kBAAkB,IAAI,wBAAwB,EAC/C,MAAM,kBAAkB,CAAC;AAI1B,UAAU,KAAM,SAAQ,wBAAwB;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAetD,CAAC"}

package/dist/cjs/components/drawer/DrawerOverlay.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const DrawerOverlay: FC<PropsWithChildren>;
+//# sourceMappingURL=DrawerOverlay.d.ts.map

package/dist/cjs/components/drawer/DrawerOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/DrawerOverlay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIrD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAE/C,CAAC"}

package/dist/cjs/components/drawer/index.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+import { DrawerRootProps } from '@chakra-ui/react';
+import { DrawerOverlay } from './DrawerOverlay';
+import { DrawerContent } from './DrawerContent';
+import { DrawerBody } from './DrawerBody';
+interface DrawerProps extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const Drawer: FC<PropsWithChildren<DrawerProps>>;
+export type { DrawerProps };
+export { DrawerOverlay, DrawerContent, DrawerBody };
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAEL,eAAe,EAEhB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,cAAc,CAAC;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAYrD,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

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

@@ -14,6 +14,7 @@ export * from './count';
 export * from './datePicker';
 export * from './devOverlay';
 export * from './dialog';
+export * from './drawer';
 export * from './energyLabel';
 export * from './errorPage';
 export * from './flex';

package/dist/cjs/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/cjs/components/menu/index.d.ts

@@ -1,5 +1,5 @@
 import { FC, JSX, ReactElement } from 'react';
-import { MenuRootProps, MenuTriggerProps } from '@chakra-ui/react';
+import { MenuContentProps, MenuRootProps, MenuTriggerProps } from '@chakra-ui/react';
 interface MenuItem {
     text: JSX.Element | string;
     value: string;
@@ -11,6 +11,7 @@ export interface MenuProps {
     fontWeightTitle?: MenuTriggerProps['fontWeight'];
     offset?: [number, number];
     menuColor?: MenuTriggerProps['color'];
+    menuOptionColor?: MenuContentProps['color'];
     showChevron?: boolean;
     icon?: ReactElement;
     iconSpacing?: MenuTriggerProps['gap'];

package/dist/cjs/components/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,aAAa,EACb,gBAAgB,EAGjB,MAAM,kBAAkB,CAAC;AAI1B,UAAU,QAAQ;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0D9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAGjB,MAAM,kBAAkB,CAAC;AAI1B,UAAU,QAAQ;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;CAC3E;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAgE9B,CAAC"}

package/dist/cjs/index.js

@@ -59,6 +59,7 @@ var sizes = react$1.defineTokens.sizes({
     '6xl': { value: '20rem' },
     '7xl': { value: '30rem' },
     '8xl': { value: '45rem' },
+    half: { value: '50%' },
     full: { value: '100%' },
     fit: { value: 'fit-content' },
     container: {
@@ -145,6 +146,9 @@ var durations = react$1.defineTokens.durations({
     normal: {
         value: '200ms',
     },
+    slow: {
+        value: '350ms',
+    },
 });
 
 var cursor = react$1.defineTokens.cursor({
@@ -326,7 +330,8 @@ var aspectRatios = react$1.defineTokens.aspectRatios({
 var animations = react$1.defineTokens.animations({
     skeletonPulse: { value: 'skeletonPulse 1.6s linear infinite' },
     spin: { value: 'spin 0.8s linear infinite' },
-    'fade-in': { value: 'fade-in var(--fade-in-duration, 0.1s) ease-out' },
+    'fade-in': { value: 'fade-in var(--fade-in-duration, 0.1s) ease-in' },
+    'fade-out': { value: 'fade-out var(--fade-out-duration, 0.1s) ease-out' },
 });
 
 var textStyles = react$1.defineTextStyles({
@@ -1903,6 +1908,249 @@ var energyLabelRecipe = react$1.defineSlotRecipe({
     },
 });
 
+var drawerRecipe = react$1.defineSlotRecipe({
+    slots: ['root', 'backdrop', 'positioner', 'content', 'body', 'closeTrigger'],
+    className: 'chakra-drawer',
+    base: {
+        root: {},
+        backdrop: {
+            position: 'fixed',
+            insetInlineStart: '0',
+            top: '0',
+            width: 'full',
+            height: 'full',
+            zIndex: 'overlay',
+            _open: {
+                animation: 'fade-in',
+            },
+            _closed: {
+                animation: 'fade-out',
+            },
+        },
+        positioner: {
+            display: 'flex',
+            width: 'full',
+            height: 'full',
+            position: 'fixed',
+            insetInlineStart: '0',
+            top: '0',
+            zIndex: 'modal',
+        },
+        content: {
+            bg: 'white',
+            boxShadow: 'xs',
+        },
+        body: {
+            flex: 1,
+            padding: 'lg',
+            overflowY: 'auto',
+        },
+        closeTrigger: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 'xs',
+            height: 'xs',
+            borderRadius: 'sm',
+            color: 'gray.800',
+            fontSize: 'base',
+            cursor: 'pointer',
+            _hover: {
+                bg: 'gray.100',
+            },
+        },
+    },
+    variants: {
+        placement: {
+            top: {
+                positioner: {
+                    alignItems: 'flex-start',
+                    justifyContent: 'stretch',
+                },
+            },
+            bottom: {
+                positioner: {
+                    alignItems: 'flex-end',
+                    justifyContent: 'stretch',
+                },
+            },
+            left: {
+                positioner: {
+                    alignItems: 'stretch',
+                    justifyContent: 'flex-start',
+                },
+            },
+            right: {
+                positioner: {
+                    alignItems: 'stretch',
+                    justifyContent: 'flex-end',
+                },
+            },
+        },
+        size: {
+            xl: {
+                content: {
+                    width: '4xl',
+                },
+            },
+            half: {
+                content: {
+                    width: 'half',
+                },
+            },
+            full: {
+                content: {
+                    width: 'full',
+                },
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            placement: 'top',
+            size: 'xl',
+            css: {
+                content: {
+                    width: 'full',
+                    height: '2xl',
+                    _open: {
+                        animationName: 'slide-in-from-top',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-top',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'top',
+            size: 'half',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'half',
+                    _open: {
+                        animationName: 'slide-in-from-top',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-top',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'top',
+            size: 'full',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'full',
+                    _open: {
+                        animationName: 'slide-in-from-top',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-top',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'right',
+            css: {
+                content: {
+                    _open: {
+                        animationName: 'slide-in-from-right',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-right',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'bottom',
+            size: 'xl',
+            css: {
+                content: {
+                    width: 'full',
+                    height: '2xl',
+                    _open: {
+                        animationName: 'slide-in-from-bottom',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-bottom',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'bottom',
+            size: 'half',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'half',
+                    _open: {
+                        animationName: 'slide-in-from-bottom',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-bottom',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'bottom',
+            size: 'full',
+            css: {
+                content: {
+                    width: 'full',
+                    height: 'full',
+                    _open: {
+                        animationName: 'slide-in-from-bottom',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-bottom',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+        {
+            placement: 'left',
+            css: {
+                content: {
+                    _open: {
+                        animationName: 'slide-in-from-left',
+                        animationDuration: 'slow',
+                    },
+                    _closed: {
+                        animationName: 'slide-out-to-left',
+                        animationDuration: 'fast',
+                    },
+                },
+            },
+        },
+    ],
+    defaultVariants: {
+        placement: 'right',
+        size: 'half',
+    },
+});
+
 var baseStyleDialog$1 = react$1.defineStyle({
     _open: {
         animationName: 'fade-in',
@@ -2483,6 +2731,7 @@ var slotRecipes = {
     input: inputSlotRecipe,
     select: selectSlotRecipe,
     dialogFilter: dialogFilterRecipe,
+    drawer: drawerRecipe,
     alert: alertRecipe,
     popoverFilter: popoverFilterRecipe,
     numberInput: numberInputRecipe,
@@ -2929,6 +3178,38 @@ var keyframes = react$1.defineKeyframes({
             scale: '0.95',
         },
     },
+    'slide-in-from-top': {
+        from: { transform: 'translateY(-100%)' },
+        to: { transform: 'translateY(0)' },
+    },
+    'slide-in-from-right': {
+        from: { transform: 'translateX(100%)' },
+        to: { transform: 'translateX(0)' },
+    },
+    'slide-in-from-bottom': {
+        from: { transform: 'translateY(100%)' },
+        to: { transform: 'translateY(0)' },
+    },
+    'slide-in-from-left': {
+        from: { transform: 'translateX(-100%)' },
+        to: { transform: 'translateX(0)' },
+    },
+    'slide-out-to-top': {
+        from: { transform: 'translateY(0)' },
+        to: { transform: 'translateY(-100%)' },
+    },
+    'slide-out-to-right': {
+        from: { transform: 'translateX(0)' },
+        to: { transform: 'translateX(100%)' },
+    },
+    'slide-out-to-bottom': {
+        from: { transform: 'translateY(0)' },
+        to: { transform: 'translateY(100%)' },
+    },
+    'slide-out-to-left': {
+        from: { transform: 'translateX(0)' },
+        to: { transform: 'translateX(-100%)' },
+    },
 });
 
 var globalCss = react$1.defineGlobalStyles({
@@ -5488,6 +5769,30 @@ var Dialog = function (_a) {
                             primaryActionButton ? (React.createElement(Button, { variant: "primary", onClick: primaryActionButton.action, width: { base: 'full', sm: 'fit' } }, primaryActionButton.label)) : null))))))));
 };
 
+var DrawerOverlay = function (props) {
+    return React.createElement(react$1.Drawer.Backdrop, __assign({}, props));
+};
+
+var DrawerContent = function (props) {
+    var children = props.children, withCloseButton = props.withCloseButton, drawerContentProps = __rest(props, ["children", "withCloseButton"]);
+    return (React.createElement(react$1.Drawer.Positioner, null,
+        React.createElement(react$1.Drawer.Content, __assign({}, drawerContentProps),
+            withCloseButton ? (React.createElement(react$1.Drawer.CloseTrigger, { asChild: true, fontSize: "base" },
+                React.createElement(CloseIcon, null))) : null,
+            children)));
+};
+
+var DrawerBody = function (props) {
+    var children = props.children, drawerBodyProps = __rest(props, ["children"]);
+    return React.createElement(react$1.Drawer.Body, __assign({}, drawerBodyProps), children);
+};
+
+var Drawer = function (props) {
+    var children = props.children, isOpen = props.isOpen, onClose = props.onClose, drawerProps = __rest(props, ["children", "isOpen", "onClose"]);
+    return (React.createElement(react$1.Drawer.Root, __assign({ open: isOpen, onOpenChange: function (e) { return !e.open && onClose(); } }, drawerProps),
+        React.createElement(react$1.Portal, null, children)));
+};
+
 var Text = react$1.Text;
 Text.displayName = 'Text';
 
@@ -6794,14 +7099,16 @@ var Chip = function (_a) {
 Chip.displayName = 'Chip';
 
 var Menu = function (_a) {
-    var title = _a.title, items = _a.items, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement;
+    var title = _a.title, items = _a.items, _b = _a.fontWeightTitle, fontWeightTitle = _b === void 0 ? 'regular' : _b, _c = _a.offset, offset = _c === void 0 ? [8, 0] : _c, menuColor = _a.menuColor, menuOptionColor = _a.menuOptionColor, _d = _a.showChevron, showChevron = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconSpacing, iconSpacing = _e === void 0 ? 'sm' : _e, placement = _a.placement;
     var recipe = react$1.useSlotRecipe({ key: 'menu' });
     var styles = recipe();
     var _f = offset[0], mainAxis = _f === void 0 ? 0 : _f, _g = offset[1], crossAxis = _g === void 0 ? 0 : _g;
     return (React.createElement(react$1.Menu.Root, { positioning: { placement: placement, offset: { mainAxis: mainAxis, crossAxis: crossAxis } } },
         React.createElement(react$1.Menu.Context, null, function (_a) {
             var open = _a.open;
-            return (React.createElement(react$1.Menu.Trigger, { css: styles.trigger, gap: iconSpacing, fontWeight: fontWeightTitle, color: open ? 'blue.700' : menuColor },
+            // menuColor takes precedence over the open state color
+            var color = menuColor || (open ? 'blue.700' : undefined);
+            return (React.createElement(react$1.Menu.Trigger, { css: styles.trigger, gap: iconSpacing, fontWeight: fontWeightTitle, color: color },
                 icon,
                 title,
                 showChevron ? (React.createElement(ChevronDownSmallIcon, { transition: "transform", transform: open ? 'rotate(180deg)' : 'rotate(0deg)' })) : null));
@@ -6810,7 +7117,7 @@ var Menu = function (_a) {
             React.createElement(react$1.Menu.Positioner, null,
                 React.createElement(react$1.Menu.Content, { css: styles.content }, items.map(function (_a) {
                     var onClick = _a.onClick, text = _a.text, value = _a.value;
-                    return (React.createElement(react$1.Menu.Item, __assign({ key: "menuItem-".concat(value), value: value, onSelect: onClick, css: styles.item }, (menuColor && { color: menuColor })), text));
+                    return (React.createElement(react$1.Menu.Item, __assign({ key: "menuItem-".concat(value), value: value, onSelect: onClick, css: styles.item }, (menuOptionColor && { color: menuOptionColor })), text));
                 }))))));
 };
 
@@ -8347,6 +8654,10 @@ exports.DoubleChevronUpIcon = DoubleChevronUpIcon;
 exports.DoubleLineIcon = DoubleLineIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragIcon = DragIcon;
+exports.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerContent = DrawerContent;
+exports.DrawerOverlay = DrawerOverlay;
 exports.DriveSystemIcon = DriveSystemIcon;
 exports.DriveSystemLargeIcon = DriveSystemLargeIcon;
 exports.DriveTypeIcon = DriveTypeIcon;