@teamturing/react-kit 2.25.0 → 2.26.0

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { UnstyledDrawerBodyProps } from './_UnstyledDrawerBody';
+type Props = {} & UnstyledDrawerBodyProps;
+declare const DrawerBody: ({ children, sx, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default DrawerBody;
+export type { Props as DrawerBodyProps };

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { UnstyledDrawerFooterProps } from './_UnstyledDrawerFooter';
+type Props = {} & UnstyledDrawerFooterProps;
+declare const DrawerFooter: ({ children, sx, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default DrawerFooter;
+export type { Props as DrawerFooterProps };

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { UnstyledDrawerHeaderProps } from './_UnstyledDrawerHeader';
+type Props = {} & UnstyledDrawerHeaderProps;
+declare const DrawerHeader: ({ children, sx, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default DrawerHeader;
+export type { Props as DrawerHeaderProps };

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { IconButtonProps } from '../IconButton';
+type Props = {} & IconButtonProps;
+declare const DrawerHeaderIconButton: ({ size, variant, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default DrawerHeaderIconButton;
+export type { Props as DrawerHeaderIconButtonProps };

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & HTMLAttributes<HTMLDivElement> & SxProp;
+declare const UnstyledDrawerBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
+export default UnstyledDrawerBody;
+export type { Props as UnstyledDrawerBodyProps };

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & HTMLAttributes<HTMLDivElement> & SxProp;
+declare const UnstyledDrawerFooter: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
+export default UnstyledDrawerFooter;
+export type { Props as UnstyledDrawerFooterProps };

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & HTMLAttributes<HTMLDivElement> & SxProp;
+declare const UnstyledDrawerHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
+export default UnstyledDrawerHeader;
+export type { Props as UnstyledDrawerHeaderProps };

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

@@ -0,0 +1,36 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { SxProp } from '../../utils/styled-system';
+import { DrawerBodyProps } from './DrawerBody';
+import { DrawerFooterProps } from './DrawerFooter';
+import { DrawerHeaderProps } from './DrawerHeader';
+import { DrawerHeaderIconButtonProps } from './DrawerHeaderIconButton';
+import { UnstyledDrawerBodyProps } from './_UnstyledDrawerBody';
+import { UnstyledDrawerFooterProps } from './_UnstyledDrawerFooter';
+import { UnstyledDrawerHeaderProps } from './_UnstyledDrawerHeader';
+type DrawerSizeType = 'full' | 'l' | 'm' | 's';
+type Props = {
+    isOpen?: boolean;
+    onDismiss?: () => void;
+    isOutsideClickDismissable?: boolean;
+    size?: DrawerSizeType;
+    initialFocusRef?: RefObject<HTMLElement>;
+} & SxProp;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    isOpen?: boolean | undefined;
+    onDismiss?: (() => void) | undefined;
+    isOutsideClickDismissable?: boolean | undefined;
+    size?: DrawerSizeType | undefined;
+    initialFocusRef?: RefObject<HTMLElement> | undefined;
+} & SxProp & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    UnstyledHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, UnstyledDrawerHeaderProps>>;
+    UnstyledBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, UnstyledDrawerBodyProps>>;
+    UnstyledFooter: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, UnstyledDrawerFooterProps>>;
+    Header: ({ children, sx, ...props }: PropsWithChildren<DrawerHeaderProps>) => import("react/jsx-runtime").JSX.Element;
+    HeaderIconButton: ({ size, variant, ...props }: PropsWithChildren<DrawerHeaderIconButtonProps>) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, sx, ...props }: PropsWithChildren<DrawerBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, sx, ...props }: PropsWithChildren<DrawerFooterProps>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export type { Props as DrawerProps, UnstyledDrawerHeaderProps, UnstyledDrawerBodyProps, UnstyledDrawerFooterProps, DrawerHeaderProps, DrawerHeaderIconButtonProps, DrawerBodyProps, DrawerFooterProps, };

package/dist/index.d.ts

@@ -25,6 +25,8 @@ export { default as DescriptionList } from './core/DescriptionList';
 export type { DescriptionListProps } from './core/DescriptionList';
 export { default as Dialog } from './core/Dialog';
 export type { DialogProps, UnstyledDialogHeaderProps, UnstyledDialogBodyProps, UnstyledDialogFooterProps, DialogHeaderProps, DialogHeaderTitleProps, DialogHeaderSubtitleProps, DialogBodyProps, DialogFooterProps, } from './core/Dialog';
+export { default as Drawer } from './core/Drawer';
+export type { DrawerProps, UnstyledDrawerHeaderProps, UnstyledDrawerBodyProps, UnstyledDrawerFooterProps, DrawerHeaderProps, DrawerHeaderIconButtonProps, DrawerBodyProps, DrawerFooterProps, } from './core/Drawer';
 export { default as EmptyState } from './core/EmptyState';
 export type { EmptyStateProps } from './core/EmptyState';
 export { default as Flash } from './core/Flash';

package/dist/index.js

@@ -1163,6 +1163,17 @@ const SvgAppleColor = props => /*#__PURE__*/React__namespace.createElement("svg"
   d: "M14.514 11.781c-.01-1.139.952-1.685.995-1.71-.54-.774-1.384-.882-1.683-.895-.718-.07-1.401.413-1.764.413s-.926-.401-1.52-.39a2.263 2.263 0 0 0-1.906 1.127c-.813 1.377-.209 3.418.584 4.535.386.547.847 1.161 1.452 1.14.585-.023.805-.37 1.51-.37.706 0 .904.37 1.521.36.628-.013 1.026-.56 1.409-1.107.443-.634.627-1.248.638-1.28-.014-.006-1.223-.46-1.236-1.823ZM13.354 8.436c.322-.38.54-.91.48-1.436-.463.017-1.024.303-1.356.681-.299.338-.56.878-.49 1.394.516.038 1.046-.257 1.366-.639Z"
 }));
 
+const SvgArrowDiagonal = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M9.297 10.841c.463.464 1.08.464 1.544 0a1.095 1.095 0 0 0 0-1.544L6.708 5.163h3.553c.618 0 1.081-.464 1.081-1.082 0-.309-.077-.54-.309-.772-.232-.232-.463-.309-.772-.309H4.08C3.463 3 3 3.463 3 4.081v6.18c0 .618.463 1.081 1.081 1.081.618 0 1.082-.463 1.082-1.081V6.708l4.134 4.133ZM13.159 14.704c-.464-.464-.464-1.082 0-1.545a1.095 1.095 0 0 1 1.544 0l4.134 4.133V13.74c0-.618.464-1.081 1.082-1.081.309 0 .54.077.772.309.232.232.309.463.309.772v6.18c0 .617-.463 1.081-1.081 1.081h-6.18a1.056 1.056 0 0 1-1.081-1.081c0-.618.463-1.082 1.081-1.082h3.553l-4.133-4.133Z"
+}));
+
 const SvgArrowDown = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -3926,6 +3937,19 @@ const SvgShieldCheck = props => /*#__PURE__*/React__namespace.createElement("svg
   d: "M21.1 4.3 12.4.7c-.2-.1-.5-.1-.8 0L2.9 4.3c-.4.1-.6.5-.6.9v8.3c0 3.8 4.8 7.5 9.3 9.8.3.1.6.1.9 0 4.5-2.3 9.3-6 9.3-9.8V5.2c-.1-.4-.3-.8-.7-.9Zm-3.7 5.5-5.8 5.8c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3L6.6 12c-.4-.4-.4-1.1 0-1.5.4-.4 1.1-.4 1.5 0l2.8 2.8 5.1-5c.4-.4 1.1-.4 1.5 0 .4.4.4 1.1-.1 1.5Z"
 }));
 
+const SvgSidebar = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M3.5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h17a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-17Zm-1 3a1 1 0 0 1 1-1h3v14h-3a1 1 0 0 1-1-1V6Zm6 13h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-12v14Z",
+  clipRule: "evenodd"
+}));
+
 const SvgSiren = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4563,6 +4587,7 @@ var icons = /*#__PURE__*/Object.freeze({
   AiSadIcon: SvgAiSad,
   AlarmIcon: SvgAlarm,
   AppleColorIcon: SvgAppleColor,
+  ArrowDiagonalIcon: SvgArrowDiagonal,
   ArrowDownIcon: SvgArrowDown,
   ArrowLeftCircleIcon: SvgArrowLeftCircle,
   ArrowLeftIcon: SvgArrowLeft,
@@ -4733,6 +4758,7 @@ var icons = /*#__PURE__*/Object.freeze({
   SettingIcon: SvgSetting,
   ShareIcon: SvgShare,
   ShieldCheckIcon: SvgShieldCheck,
+  SidebarIcon: SvgSidebar,
   SirenIcon: SvgSiren,
   SkipbackIcon: SvgSkipback,
   SkipforwardIcon: SvgSkipforward,
@@ -7022,7 +7048,7 @@ const BaseActionList = styled__default.default.ul`
 
   ${sx}
 `;
-var index$b = Object.assign(ActionList, {
+var index$c = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
@@ -16293,7 +16319,7 @@ const BaseAvatar = styled__default.default(Image)`
 })}
   ${sx}
 `;
-var index$a = /*#__PURE__*/React.forwardRef(Avatar);
+var index$b = /*#__PURE__*/React.forwardRef(Avatar);
 
 const BadgeAttacher = ({
   children,
@@ -16705,7 +16731,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$9 = Object.assign(Breadcrumbs, {
+var index$a = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -17275,7 +17301,8 @@ const BaseChip = styled__default.default.span(({
   theme
 }) => ({
   position: 'relative',
-  width: 'fit-content',
+  width: 'max-content',
+  whiteSpace: 'nowrap',
   borderRadius: theme.radii.full,
   outline: 'none',
   display: 'flex',
@@ -17661,7 +17688,7 @@ const DatagridWrapper = styled__default.default.div`
 const BaseDatagrid = styled__default.default.div`
   width: inherit;
 `;
-var index$8 = Object.assign(Datagrid, {
+var index$9 = Object.assign(Datagrid, {
   Header: DatagridHeader,
   Subheader: DatagridSubheader,
   Body: DatagridBody,
@@ -17769,6 +17796,7 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
   $disabled,
   theme
 }) => ({
+  'width': 'fit-content',
   'position': 'relative',
   'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',
@@ -18772,7 +18800,7 @@ const Dialog = ({
       height: '100%',
       zIndex: 9999
     },
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket$1, {
       ref: overlayRef
     }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
       ref: dialogRef,
@@ -18829,7 +18857,7 @@ const Dialog = ({
     })]
   }) : null;
 };
-const Blanket = styled__default.default.span`
+const Blanket$1 = styled__default.default.span`
   &:before {
     position: fixed;
     top: 0;
@@ -18856,7 +18884,7 @@ const BaseDialog = styled__default.default.div(({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
+var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   UnstyledHeader: UnstyledDialogHeader,
   UnstyledBody: UnstyledDialogBody,
   UnstyledFooter: UnstyledDialogFooter,
@@ -18867,6 +18895,269 @@ var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   Footer: DialogFooter
 });
 
+const MotionView = motion(View);
+
+const UnstyledDrawerBody = styled__default.default.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  overflow-y: auto;
+
+  ${sx}
+`;
+
+const DrawerBody = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDrawerBody, {
+  ...props,
+  sx: {
+    p: 5,
+    ...sx
+  },
+  children: children
+});
+
+const UnstyledDrawerFooter = styled__default.default.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+
+  ${sx}
+`;
+
+const DrawerFooter = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDrawerFooter, {
+  ...props,
+  sx: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexWrap: 'wrap-reverse',
+    px: 5,
+    py: 4,
+    borderTopWidth: 1,
+    borderTopStyle: 'solid',
+    borderTopColor: 'border/neutral',
+    rowGap: 1,
+    columnGap: 2,
+    ...sx
+  },
+  children: children
+});
+
+const UnstyledDrawerHeader = styled__default.default.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+
+  ${sx}
+`;
+
+const DrawerHeader = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDrawerHeader, {
+  ...props,
+  sx: {
+    pl: 5,
+    pr: 16,
+    py: 2,
+    minHeight: 56,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'border/neutral',
+    display: 'flex',
+    flexDirection: 'column',
+    columnGap: 1,
+    flexWrap: 'nowrap',
+    ...sx
+  },
+  children: children
+});
+
+const DrawerHeaderIconButton = ({
+  size = 'm',
+  variant = 'plain-bold',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+  size: size,
+  variant: variant,
+  ...props
+});
+
+const Drawer = ({
+  children,
+  isOpen,
+  onDismiss,
+  isOutsideClickDismissable = true,
+  size = 'm',
+  initialFocusRef,
+  sx
+}, ref) => {
+  const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
+  const blanketRef = React.useRef(null);
+  const drawerRef = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => drawerRef.current);
+  const handleOutsideClick = React.useCallback(e => {
+    if (drawerRef.current && blanketRef.current && e.target instanceof Node && !drawerRef.current.contains(e.target) && blanketRef.current.contains(e.target)) {
+      handleDismiss?.();
+    }
+  }, [handleDismiss, drawerRef, blanketRef]);
+  const handleKeyDown = React.useCallback(event => {
+    switch (event.key) {
+      case 'Escape':
+        handleDismiss?.();
+        event.stopPropagation();
+        break;
+    }
+  }, [handleDismiss]);
+  useFocusTrap({
+    containerRef: drawerRef,
+    initialFocusRef: initialFocusRef || closeButtonRef,
+    disabled: !isOpen
+  });
+  React.useEffect(() => {
+    if (isOpen && isOutsideClickDismissable) {
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
+    children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
+        initial: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        exit: {
+          opacity: 0
+        },
+        transition: {
+          duration: 0.25,
+          ease: easeInOut
+        },
+        sx: {
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999
+        },
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
+          ref: blanketRef
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
+        initial: {
+          x: '100%'
+        },
+        animate: {
+          x: 0
+        },
+        exit: {
+          x: '100%'
+        },
+        transition: {
+          duration: 0.25,
+          ease: easeInOut
+        },
+        sx: {
+          position: 'fixed',
+          display: 'flex',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 9999,
+          width: ['100%', '100%', 'fit-content']
+        },
+        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
+          },
+          onKeyDown: handleKeyDown,
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 2,
+              right: 5
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              ref: closeButtonRef,
+              icon: SvgClose,
+              variant: 'plain-bold',
+              size: 'm',
+              onClick: handleDismiss
+            })
+          }), children]
+        })
+      })]
+    }) : null
+  });
+};
+const Blanket = styled__default.default.span`
+  &:before {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    cursor: default;
+    content: '';
+    background: ${({
+  theme
+}) => theme.colors.dim};
+  }
+`;
+const BaseDrawer = styled__default.default.div(({
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  boxShadow: theme.shadows['shadow/overlay'],
+  backgroundColor: theme.colors['surface/overlay'],
+  outline: 'none',
+  overflow: 'hidden',
+  margin: 'auto',
+  height: '100%',
+  marginRight: 0
+}), sx);
+var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
+  UnstyledHeader: UnstyledDrawerHeader,
+  UnstyledBody: UnstyledDrawerBody,
+  UnstyledFooter: UnstyledDrawerFooter,
+  Header: DrawerHeader,
+  HeaderIconButton: DrawerHeaderIconButton,
+  Body: DrawerBody,
+  Footer: DrawerFooter
+});
+
 const EmptyState = ({
   title,
   icon: Icon = SvgDocument,
@@ -36133,8 +36424,6 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   }
 }), sx);
 
-const MotionView = motion(View);
-
 const Pagination = ({
   pages: propPages,
   currentPageIndex,
@@ -38221,11 +38510,8 @@ const opacity$1 = {
   opacity50: 0.5
 };
 
-const accentOpacity = {
-  accent: opacity$1.opacity50
-};
 const opacity = {
-  ...accentOpacity
+  disabled: opacity$1.opacity50
 };
 
 const rounding = {
@@ -39054,18 +39340,19 @@ const useTabState = ({
   return [selectedIndex, handleSelect];
 };
 
-exports.ActionList = index$b;
+exports.ActionList = index$c;
 exports.AnimatePresence = AnimatePresence;
-exports.Avatar = index$a;
+exports.Avatar = index$b;
 exports.BadgeAttacher = BadgeAttacher;
-exports.Breadcrumbs = index$9;
+exports.Breadcrumbs = index$a;
 exports.Button = Button;
 exports.Checkbox = Checkbox$1;
 exports.Chip = Chip;
 exports.CounterBadge = CounterBadge;
-exports.Datagrid = index$8;
+exports.Datagrid = index$9;
 exports.DescriptionList = DescriptionList;
-exports.Dialog = index$7;
+exports.Dialog = index$8;
+exports.Drawer = index$7;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
 exports.Flash = index$6;

package/dist/theme/index.d.ts

@@ -295,7 +295,7 @@ declare const theme: {
         'shadow/overlay': string;
     };
     opacity: {
-        readonly accent: number;
+        readonly disabled: number;
     };
 };
 export default theme;

package/esm/core/Chip/index.js

@@ -23,7 +23,8 @@ const BaseChip = styled.span(({
   theme
 }) => ({
   position: 'relative',
-  width: 'fit-content',
+  width: 'max-content',
+  whiteSpace: 'nowrap',
   borderRadius: theme.radii.full,
   outline: 'none',
   display: 'flex',

package/esm/core/Drawer/DrawerBody.js

@@ -0,0 +1,17 @@
+import UnstyledDrawerBody from './_UnstyledDrawerBody.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DrawerBody = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDrawerBody, {
+  ...props,
+  sx: {
+    p: 5,
+    ...sx
+  },
+  children: children
+});
+
+export { DrawerBody as default };

package/esm/core/Drawer/DrawerFooter.js

@@ -0,0 +1,27 @@
+import UnstyledDrawerFooter from './_UnstyledDrawerFooter.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DrawerFooter = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDrawerFooter, {
+  ...props,
+  sx: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexWrap: 'wrap-reverse',
+    px: 5,
+    py: 4,
+    borderTopWidth: 1,
+    borderTopStyle: 'solid',
+    borderTopColor: 'border/neutral',
+    rowGap: 1,
+    columnGap: 2,
+    ...sx
+  },
+  children: children
+});
+
+export { DrawerFooter as default };

package/esm/core/Drawer/DrawerHeader.js

@@ -0,0 +1,27 @@
+import UnstyledDrawerHeader from './_UnstyledDrawerHeader.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DrawerHeader = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDrawerHeader, {
+  ...props,
+  sx: {
+    pl: 5,
+    pr: 16,
+    py: 2,
+    minHeight: 56,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'border/neutral',
+    display: 'flex',
+    flexDirection: 'column',
+    columnGap: 1,
+    flexWrap: 'nowrap',
+    ...sx
+  },
+  children: children
+});
+
+export { DrawerHeader as default };

package/esm/core/Drawer/DrawerHeaderIconButton.js

@@ -0,0 +1,14 @@
+import IconButton from '../IconButton/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DrawerHeaderIconButton = ({
+  size = 'm',
+  variant = 'plain-bold',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+  size: size,
+  variant: variant,
+  ...props
+});
+
+export { DrawerHeaderIconButton as default };

package/esm/core/Drawer/_UnstyledDrawerBody.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+
+const UnstyledDrawerBody = styled.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  overflow-y: auto;
+
+  ${sx}
+`;
+
+export { UnstyledDrawerBody as default };

package/esm/core/Drawer/_UnstyledDrawerFooter.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+
+const UnstyledDrawerFooter = styled.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+
+  ${sx}
+`;
+
+export { UnstyledDrawerFooter as default };

package/esm/core/Drawer/_UnstyledDrawerHeader.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+
+const UnstyledDrawerHeader = styled.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+
+  ${sx}
+`;
+
+export { UnstyledDrawerHeader as default };

package/esm/core/Drawer/index.js

@@ -0,0 +1,187 @@
+import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
+import SvgClose from '../../packages/icons/esm/Close.js';
+import styled from 'styled-components';
+import useFocusTrap from '../../hook/useFocusTrap.js';
+import { sx } from '../../utils/styled-system/index.js';
+import IconButton from '../IconButton/index.js';
+import MotionView from '../MotionView/index.js';
+import View from '../View/index.js';
+import DrawerBody from './DrawerBody.js';
+import DrawerFooter from './DrawerFooter.js';
+import DrawerHeader from './DrawerHeader.js';
+import DrawerHeaderIconButton from './DrawerHeaderIconButton.js';
+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 { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { easeInOut } from '../../node_modules/framer-motion/dist/es/easing/ease.js';
+
+const Drawer = ({
+  children,
+  isOpen,
+  onDismiss,
+  isOutsideClickDismissable = true,
+  size = 'm',
+  initialFocusRef,
+  sx
+}, ref) => {
+  const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
+  const blanketRef = useRef(null);
+  const drawerRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  useImperativeHandle(ref, () => drawerRef.current);
+  const handleOutsideClick = useCallback(e => {
+    if (drawerRef.current && blanketRef.current && e.target instanceof Node && !drawerRef.current.contains(e.target) && blanketRef.current.contains(e.target)) {
+      handleDismiss?.();
+    }
+  }, [handleDismiss, drawerRef, blanketRef]);
+  const handleKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'Escape':
+        handleDismiss?.();
+        event.stopPropagation();
+        break;
+    }
+  }, [handleDismiss]);
+  useFocusTrap({
+    containerRef: drawerRef,
+    initialFocusRef: initialFocusRef || closeButtonRef,
+    disabled: !isOpen
+  });
+  useEffect(() => {
+    if (isOpen && isOutsideClickDismissable) {
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
+    children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
+        initial: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        exit: {
+          opacity: 0
+        },
+        transition: {
+          duration: 0.25,
+          ease: easeInOut
+        },
+        sx: {
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999
+        },
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
+          ref: blanketRef
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
+        initial: {
+          x: '100%'
+        },
+        animate: {
+          x: 0
+        },
+        exit: {
+          x: '100%'
+        },
+        transition: {
+          duration: 0.25,
+          ease: easeInOut
+        },
+        sx: {
+          position: 'fixed',
+          display: 'flex',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 9999,
+          width: ['100%', '100%', 'fit-content']
+        },
+        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
+          },
+          onKeyDown: handleKeyDown,
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 2,
+              right: 5
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              ref: closeButtonRef,
+              icon: SvgClose,
+              variant: 'plain-bold',
+              size: 'm',
+              onClick: handleDismiss
+            })
+          }), children]
+        })
+      })]
+    }) : null
+  });
+};
+const Blanket = styled.span`
+  &:before {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    cursor: default;
+    content: '';
+    background: ${({
+  theme
+}) => theme.colors.dim};
+  }
+`;
+const BaseDrawer = styled.div(({
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  boxShadow: theme.shadows['shadow/overlay'],
+  backgroundColor: theme.colors['surface/overlay'],
+  outline: 'none',
+  overflow: 'hidden',
+  margin: 'auto',
+  height: '100%',
+  marginRight: 0
+}), sx);
+var index = Object.assign( /*#__PURE__*/forwardRef(Drawer), {
+  UnstyledHeader: UnstyledDrawerHeader,
+  UnstyledBody: UnstyledDrawerBody,
+  UnstyledFooter: UnstyledDrawerFooter,
+  Header: DrawerHeader,
+  HeaderIconButton: DrawerHeaderIconButton,
+  Body: DrawerBody,
+  Footer: DrawerFooter
+});
+
+export { index as default };

package/esm/core/IconButton/index.js

@@ -33,6 +33,7 @@ const BaseIconButton = styled(UnstyledButton)(({
   $disabled,
   theme
 }) => ({
+  'width': 'fit-content',
   'position': 'relative',
   'borderRadius': theme.radii.full,
   'transition': 'background-color 100ms, color 100ms',

package/esm/index.js

@@ -9,6 +9,7 @@ export { default as CounterBadge } from './core/CounterBadge/index.js';
 export { default as Datagrid } from './core/Datagrid/index.js';
 export { default as DescriptionList } from './core/DescriptionList/index.js';
 export { default as Dialog } from './core/Dialog/index.js';
+export { default as Drawer } from './core/Drawer/index.js';
 export { default as EmptyState } from './core/EmptyState/index.js';
 export { default as Flash } from './core/Flash/index.js';
 export { default as FormControl } from './core/FormControl/index.js';

package/esm/packages/icons/esm/ArrowDiagonal.js

@@ -0,0 +1,15 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgArrowDiagonal = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M9.297 10.841c.463.464 1.08.464 1.544 0a1.095 1.095 0 0 0 0-1.544L6.708 5.163h3.553c.618 0 1.081-.464 1.081-1.082 0-.309-.077-.54-.309-.772-.232-.232-.463-.309-.772-.309H4.08C3.463 3 3 3.463 3 4.081v6.18c0 .618.463 1.081 1.081 1.081.618 0 1.082-.463 1.082-1.081V6.708l4.134 4.133ZM13.159 14.704c-.464-.464-.464-1.082 0-1.545a1.095 1.095 0 0 1 1.544 0l4.134 4.133V13.74c0-.618.464-1.081 1.082-1.081.309 0 .54.077.772.309.232.232.309.463.309.772v6.18c0 .617-.463 1.081-1.081 1.081h-6.18a1.056 1.056 0 0 1-1.081-1.081c0-.618.463-1.082 1.081-1.082h3.553l-4.133-4.133Z"
+}));
+
+export { SvgArrowDiagonal as default };

package/esm/packages/icons/esm/Sidebar.js

@@ -0,0 +1,17 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgSidebar = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M3.5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h17a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-17Zm-1 3a1 1 0 0 1 1-1h3v14h-3a1 1 0 0 1-1-1V6Zm6 13h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-12v14Z",
+  clipRule: "evenodd"
+}));
+
+export { SvgSidebar as default };

package/esm/packages/icons/esm/index.js

@@ -3,6 +3,7 @@ export { default as AiColorIcon } from './AiColor.js';
 export { default as AiSadIcon } from './AiSad.js';
 export { default as AlarmIcon } from './Alarm.js';
 export { default as AppleColorIcon } from './AppleColor.js';
+export { default as ArrowDiagonalIcon } from './ArrowDiagonal.js';
 export { default as ArrowDownIcon } from './ArrowDown.js';
 export { default as ArrowLeftIcon } from './ArrowLeft.js';
 export { default as ArrowLeftCircleIcon } from './ArrowLeftCircle.js';
@@ -173,6 +174,7 @@ export { default as SetIcon } from './Set.js';
 export { default as SettingIcon } from './Setting.js';
 export { default as ShareIcon } from './Share.js';
 export { default as ShieldCheckIcon } from './ShieldCheck.js';
+export { default as SidebarIcon } from './Sidebar.js';
 export { default as SirenIcon } from './Siren.js';
 export { default as SkipbackIcon } from './Skipback.js';
 export { default as SkipforwardIcon } from './Skipforward.js';

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

@@ -1,10 +1,7 @@
 import opacity$1 from '../../foundation/opacity/index.js';
 
-const accentOpacity = {
-  accent: opacity$1.opacity50
-};
 const opacity = {
-  ...accentOpacity
+  disabled: opacity$1.opacity50
 };
 
-export { accentOpacity, opacity as default };
+export { opacity as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "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",
@@ -55,8 +55,8 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.38.2",
-    "@teamturing/token-studio": "^1.5.0",
+    "@teamturing/icons": "^1.39.0",
+    "@teamturing/token-studio": "^1.6.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": "49372114babdc4079f06ad66cd3cd5c7321bc621"
+  "gitHead": "5ffda9f34ed0398c6de4786338f54af08adc875e"
 }