@teamturing/react-kit 2.28.1 → 2.29.1

package/dist/core/Drawer/index.d.ts

@@ -8,11 +8,13 @@ import { UnstyledDrawerBodyProps } from './_UnstyledDrawerBody';
 import { UnstyledDrawerFooterProps } from './_UnstyledDrawerFooter';
 import { UnstyledDrawerHeaderProps } from './_UnstyledDrawerHeader';
 type DrawerSizeType = 'full' | 'l' | 'm' | 's';
+type DrawerDirectionType = 'right' | 'bottom';
 type Props = {
     isOpen?: boolean;
     onDismiss?: () => void;
     isOutsideClickDismissable?: boolean;
     size?: DrawerSizeType;
+    direction?: DrawerDirectionType;
     initialFocusRef?: RefObject<HTMLElement>;
 } & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
@@ -20,6 +22,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     onDismiss?: (() => void) | undefined;
     isOutsideClickDismissable?: boolean | undefined;
     size?: DrawerSizeType | undefined;
+    direction?: DrawerDirectionType | undefined;
     initialFocusRef?: RefObject<HTMLElement> | undefined;
 } & SxProp & {
     children?: import("react").ReactNode;

package/dist/core/GradientText/index.d.ts

@@ -270,7 +270,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
 } & {
     typography?: import("styled-system").ResponsiveValue<"m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
-} & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected">, "ref"> & {
+} & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected" | "text/weak">, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, Props>>;
 export default GradientText;

package/dist/index.js

@@ -19081,6 +19081,7 @@ const Drawer = ({
   onDismiss,
   isOutsideClickDismissable = true,
   size = 'm',
+  direction = 'right',
   initialFocusRef,
   sx
 }, ref) => {
@@ -19143,15 +19144,27 @@ const Drawer = ({
           ref: blanketRef
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
-        initial: {
-          x: '100%'
-        },
-        animate: {
-          x: 0
-        },
-        exit: {
-          x: '100%'
-        },
+        ...(direction === 'right' ? {
+          initial: {
+            x: '100%'
+          },
+          animate: {
+            x: 0
+          },
+          exit: {
+            x: '100%'
+          }
+        } : direction === 'bottom' ? {
+          initial: {
+            y: '100%'
+          },
+          animate: {
+            y: 0
+          },
+          exit: {
+            y: '100%'
+          }
+        } : {}),
         transition: {
           duration: 0.25,
           ease: easeInOut
@@ -19159,29 +19172,27 @@ const Drawer = ({
         sx: {
           position: 'fixed',
           display: 'flex',
-          top: 0,
-          right: 0,
-          bottom: 0,
           zIndex: 9999,
-          width: ['100%', '100%', 'fit-content']
+          ...(direction === 'right' ? {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: ['100%', '100%', 'fit-content']
+          } : direction === 'bottom' ? {
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%'
+          } : {})
         },
         children: /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDrawer, {
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
           tabIndex: -1,
-          sx: {
-            ...(size === 's' ? {
-              width: ['calc(100% - 32px)', 400, 400]
-            } : size === 'm' ? {
-              width: ['100%', '100%', 640]
-            } : size === 'l' ? {
-              width: ['100%', '100%', 860]
-            } : size === 'full' ? {
-              width: ['100%', '100%', 'calc(100vw - 80px)']
-            } : {}),
-            ...sx
-          },
+          size: size,
+          direction: direction,
+          sx: sx,
           onKeyDown: handleKeyDown,
           children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
             sx: {
@@ -19231,6 +19242,52 @@ const BaseDrawer = styled__default.default.div(({
   margin: 'auto',
   height: '100%',
   marginRight: 0
+}), ({
+  direction
+}) => direction === 'right' ? variant({
+  prop: 'size',
+  variants: {
+    s: {
+      width: ['calc(100% - 32px)', 400, 400]
+    },
+    m: {
+      width: ['100%', '100%', 640]
+    },
+    l: {
+      width: ['100%', '100%', 860]
+    },
+    full: {
+      width: ['100%', '100%', 'calc(100vw - 80px)']
+    }
+  }
+}) : variant({
+  prop: 'size',
+  variants: {
+    s: {
+      height: '40dvh',
+      maxHeight: '40dvh'
+    },
+    m: {
+      height: '60dvh',
+      maxHeight: '60dvh'
+    },
+    l: {
+      height: '80dvh',
+      maxHeight: '80dvh'
+    },
+    full: {
+      height: 'calc(100dvh - 80px)',
+      maxHeight: 'calc(100dvh - 80px)'
+    }
+  }
+}), variant({
+  prop: 'direction',
+  variants: {
+    right: {},
+    bottom: {
+      width: '100% !important'
+    }
+  }
 }), sx);
 var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,
@@ -34685,7 +34742,9 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(theme.space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift({
+      crossAxis: true
+    })],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({
@@ -38463,7 +38522,8 @@ const textColor = {
   'text/success': palette.green500,
   'text/warning': palette.yellow500,
   'text/danger': palette.red500,
-  'text/selected': palette.gray900
+  'text/selected': palette.gray900,
+  'text/weak': palette.gray300
 };
 const bgColor = {
   'bg/secondary': palette.violet50,
@@ -38681,7 +38741,8 @@ const direction = {
   directionToRight: 'to right',
   directionToLeft: 'to left',
   directionToRightBottom: 'to right bottom',
-  directionToTop: 'to top'
+  directionToTop: 'to top',
+  directionToBottom: 'to bottom'
 };
 
 const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
@@ -38699,12 +38760,15 @@ const overlayGradient = {
   'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
   'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
   'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/subtlest/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListWhite'),
   'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
   'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
   'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListWhite'),
   'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
   'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
-  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack'),
+  'overlay/bold/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListBlack')
 };
 const gradient = {
   ...textGradient,

package/dist/theme/index.d.ts

@@ -275,17 +275,21 @@ declare const theme: {
         'text/warning': "#FFC107";
         'text/danger': "#F22735";
         'text/selected': "#33373B";
+        'text/weak': "#D1D5DB";
     };
     gradients: {
         readonly 'overlay/subtlest/toright': string;
         readonly 'overlay/subtlest/toleft': string;
         readonly 'overlay/subtlest/totop': string;
+        readonly 'overlay/subtlest/tobottom': string;
         readonly 'overlay/floating/toright': string;
         readonly 'overlay/floating/toleft': string;
         readonly 'overlay/floating/totop': string;
+        readonly 'overlay/floating/tobottom': string;
         readonly 'overlay/bold/toright': string;
         readonly 'overlay/bold/toleft': string;
         readonly 'overlay/bold/totop': string;
+        readonly 'overlay/bold/tobottom': string;
         readonly 'border/accent/violet': string;
         readonly 'bg/accent/violet': string;
         readonly 'bg/accent/neutral': string;

package/esm/core/Drawer/index.js

@@ -1,6 +1,7 @@
 import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import SvgClose from '../../packages/icons/esm/Close.js';
 import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
 import IconButton from '../IconButton/index.js';
@@ -14,6 +15,7 @@ import UnstyledDrawerBody from './_UnstyledDrawerBody.js';
 import UnstyledDrawerFooter from './_UnstyledDrawerFooter.js';
 import UnstyledDrawerHeader from './_UnstyledDrawerHeader.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 import { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 import { easeInOut } from '../../node_modules/framer-motion/dist/es/easing/ease.js';
 
@@ -23,6 +25,7 @@ const Drawer = ({
   onDismiss,
   isOutsideClickDismissable = true,
   size = 'm',
+  direction = 'right',
   initialFocusRef,
   sx
 }, ref) => {
@@ -85,15 +88,27 @@ const Drawer = ({
           ref: blanketRef
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
-        initial: {
-          x: '100%'
-        },
-        animate: {
-          x: 0
-        },
-        exit: {
-          x: '100%'
-        },
+        ...(direction === 'right' ? {
+          initial: {
+            x: '100%'
+          },
+          animate: {
+            x: 0
+          },
+          exit: {
+            x: '100%'
+          }
+        } : direction === 'bottom' ? {
+          initial: {
+            y: '100%'
+          },
+          animate: {
+            y: 0
+          },
+          exit: {
+            y: '100%'
+          }
+        } : {}),
         transition: {
           duration: 0.25,
           ease: easeInOut
@@ -101,29 +116,27 @@ const Drawer = ({
         sx: {
           position: 'fixed',
           display: 'flex',
-          top: 0,
-          right: 0,
-          bottom: 0,
           zIndex: 9999,
-          width: ['100%', '100%', 'fit-content']
+          ...(direction === 'right' ? {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: ['100%', '100%', 'fit-content']
+          } : direction === 'bottom' ? {
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%'
+          } : {})
         },
         children: /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDrawer, {
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
           tabIndex: -1,
-          sx: {
-            ...(size === 's' ? {
-              width: ['calc(100% - 32px)', 400, 400]
-            } : size === 'm' ? {
-              width: ['100%', '100%', 640]
-            } : size === 'l' ? {
-              width: ['100%', '100%', 860]
-            } : size === 'full' ? {
-              width: ['100%', '100%', 'calc(100vw - 80px)']
-            } : {}),
-            ...sx
-          },
+          size: size,
+          direction: direction,
+          sx: sx,
           onKeyDown: handleKeyDown,
           children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
             sx: {
@@ -173,6 +186,52 @@ const BaseDrawer = styled.div(({
   margin: 'auto',
   height: '100%',
   marginRight: 0
+}), ({
+  direction
+}) => direction === 'right' ? variant({
+  prop: 'size',
+  variants: {
+    s: {
+      width: ['calc(100% - 32px)', 400, 400]
+    },
+    m: {
+      width: ['100%', '100%', 640]
+    },
+    l: {
+      width: ['100%', '100%', 860]
+    },
+    full: {
+      width: ['100%', '100%', 'calc(100vw - 80px)']
+    }
+  }
+}) : variant({
+  prop: 'size',
+  variants: {
+    s: {
+      height: '40dvh',
+      maxHeight: '40dvh'
+    },
+    m: {
+      height: '60dvh',
+      maxHeight: '60dvh'
+    },
+    l: {
+      height: '80dvh',
+      maxHeight: '80dvh'
+    },
+    full: {
+      height: 'calc(100dvh - 80px)',
+      maxHeight: 'calc(100dvh - 80px)'
+    }
+  }
+}), variant({
+  prop: 'direction',
+  variants: {
+    right: {},
+    bottom: {
+      width: '100% !important'
+    }
+  }
 }), sx);
 var index = Object.assign( /*#__PURE__*/forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,

package/esm/core/OverlayPopper/index.js

@@ -29,7 +29,9 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(theme.space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift({
+      crossAxis: true
+    })],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({

package/esm/packages/token-studio/esm/foundation/gradient/direction/index.js

@@ -2,7 +2,8 @@ const direction = {
   directionToRight: 'to right',
   directionToLeft: 'to left',
   directionToRightBottom: 'to right bottom',
-  directionToTop: 'to top'
+  directionToTop: 'to top',
+  directionToBottom: 'to bottom'
 };
 
 export { direction as default };

package/esm/packages/token-studio/esm/token/color/index.js

@@ -17,7 +17,8 @@ const textColor = {
   'text/success': palette.green500,
   'text/warning': palette.yellow500,
   'text/danger': palette.red500,
-  'text/selected': palette.gray900
+  'text/selected': palette.gray900,
+  'text/weak': palette.gray300
 };
 const bgColor = {
   'bg/secondary': palette.violet50,

package/esm/packages/token-studio/esm/token/gradient/index.js

@@ -16,12 +16,15 @@ const overlayGradient = {
   'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
   'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
   'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/subtlest/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListWhite'),
   'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
   'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
   'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListWhite'),
   'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
   'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
-  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack'),
+  'overlay/bold/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListBlack')
 };
 const gradient = {
   ...textGradient,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.28.1",
+  "version": "2.29.1",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -56,7 +56,7 @@
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
     "@teamturing/icons": "^1.41.0",
-    "@teamturing/token-studio": "^1.6.0",
+    "@teamturing/token-studio": "^1.7.0",
     "@teamturing/utils": "^1.3.0",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "49e0faeb615a1860be291a9b7a60ec4201f9b877"
+  "gitHead": "22854552108cb3fe3d9d2ab9e829301fe85e6df9"
 }