@teamturing/react-kit 2.19.2 → 2.19.4

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    renderBadge: (badgeProps: Pick<HTMLAttributes<HTMLElement>, 'style'>) => ReactNode;
+} & SxProp;
+declare const BadgeAttacher: ({ children, renderBadge, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default BadgeAttacher;
+export type { Props as BadgeAttacherProps };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+import { ResponsiveValue } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+type CounterBadgeVariantType = 'red';
+type CounterBadgeSizeType = 'm';
+type Props = {
+    variant?: ResponsiveValue<CounterBadgeVariantType>;
+    size?: ResponsiveValue<CounterBadgeSizeType>;
+    /**
+     * maxCounter보다 큰 숫자가 children에 명시되면, {maxCounter+} 형식으로 표기됩니다.
+     */
+    maxCounter?: number;
+    children?: string | number;
+} & SxProp & Pick<HTMLAttributes<HTMLSpanElement>, 'style'>;
+declare const CounterBadge: ({ variant, size, children: propChildren, maxCounter, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CounterBadge;
+export type { Props as CounterBadgeProps };

package/dist/core/Dialog/DialogBody.d.ts

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

package/dist/core/Dialog/DialogFooter.d.ts

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

package/dist/core/Dialog/DialogHeader.d.ts

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

package/dist/core/Dialog/DialogHeaderSubtitle.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from '../Text';
+type Props = {} & TextProps;
+declare const DialogHeaderSubtitle: ({ typography, color, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default DialogHeaderSubtitle;
+export type { Props as DialogHeaderSubtitleProps };

package/dist/core/Dialog/DialogHeaderTitle.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from '../Text';
+type Props = {} & TextProps;
+declare const DialogHeaderTitle: ({ typography, color, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default DialogHeaderTitle;
+export type { Props as DialogHeaderTitleProps };

package/dist/core/Dialog/_UnstyledDialogBody.d.ts

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

package/dist/core/Dialog/_UnstyledDialogFooter.d.ts

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

package/dist/core/Dialog/_UnstyledDialogHeader.d.ts

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

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

@@ -1,16 +1,34 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
 import { SxProp } from '../../utils/styled-system';
+import { DialogBodyProps } from './DialogBody';
+import { DialogFooterProps } from './DialogFooter';
+import { DialogHeaderProps } from './DialogHeader';
+import { DialogHeaderSubtitleProps } from './DialogHeaderSubtitle';
+import { DialogHeaderTitleProps } from './DialogHeaderTitle';
+import { UnstyledDialogBodyProps } from './_UnstyledDialogBody';
+import { UnstyledDialogFooterProps } from './_UnstyledDialogFooter';
+import { UnstyledDialogHeaderProps } from './_UnstyledDialogHeader';
+type DialogSizeType = 'l' | 'm' | 's';
 type Props = {
     isOpen?: boolean;
     onDismiss?: () => void;
-    size?: 'l' | 's';
+    size?: DialogSizeType;
 } & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
     onDismiss?: (() => void) | undefined;
-    size?: "s" | "l" | undefined;
+    size?: DialogSizeType | undefined;
 } & SxProp & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    UnstyledHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, UnstyledDialogHeaderProps>>;
+    UnstyledBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, UnstyledDialogBodyProps>>;
+    UnstyledFooter: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, UnstyledDialogFooterProps>>;
+    Header: ({ children, sx, ...props }: PropsWithChildren<DialogHeaderProps>) => import("react/jsx-runtime").JSX.Element;
+    HeaderTitle: ({ typography, color, ...props }: PropsWithChildren<DialogHeaderTitleProps>) => import("react/jsx-runtime").JSX.Element;
+    HeaderSubtitle: ({ typography, color, ...props }: PropsWithChildren<DialogHeaderSubtitleProps>) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, sx, ...props }: PropsWithChildren<DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, sx, ...props }: PropsWithChildren<DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
+};
 export default _default;
-export type { Props as DialogProps };
+export type { Props as DialogProps, UnstyledDialogHeaderProps, UnstyledDialogBodyProps, UnstyledDialogFooterProps, DialogHeaderProps, DialogHeaderTitleProps, DialogHeaderSubtitleProps, DialogBodyProps, DialogFooterProps, };

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export { default as AnimatePresence } from './core/AnimatePresence';
 export type { AnimatePresenceProps } from './core/AnimatePresence';
 export { default as Avatar } from './core/Avatar';
 export type { AvatarProps } from './core/Avatar';
+export { default as BadgeAttacher } from './core/BadgeAttacher';
+export type { BadgeAttacherProps } from './core/BadgeAttacher';
 export { default as Breadcrumbs } from './core/Breadcrumbs';
 export type { BreadcrumbsProps } from './core/Breadcrumbs';
 export { default as Button } from './core/Button';
@@ -15,12 +17,14 @@ export { default as Checkbox } from './core/Checkbox';
 export type { CheckboxProps } from './core/Checkbox';
 export { default as Chip } from './core/Chip';
 export type { ChipProps } from './core/Chip';
+export { default as CounterBadge } from './core/CounterBadge';
+export type { CounterBadgeProps } from './core/CounterBadge';
 export { default as Datagrid } from './core/Datagrid';
 export type { DatagridProps, DatagridBodyProps, DatagridCellProps, DatagridHeaderProps, DatagridRowProps, } from './core/Datagrid';
 export { default as DescriptionList } from './core/DescriptionList';
 export type { DescriptionListProps } from './core/DescriptionList';
 export { default as Dialog } from './core/Dialog';
-export type { DialogProps } from './core/Dialog';
+export type { DialogProps, UnstyledDialogHeaderProps, UnstyledDialogBodyProps, UnstyledDialogFooterProps, DialogHeaderProps, DialogHeaderTitleProps, DialogHeaderSubtitleProps, DialogBodyProps, DialogFooterProps, } from './core/Dialog';
 export { default as DialogHandler } from './core/DialogHandler';
 export { default as EmptyState } from './core/EmptyState';
 export type { EmptyStateProps } from './core/EmptyState';

package/dist/index.js

@@ -16377,6 +16377,28 @@ const BaseAvatar = styled__default.default(Image)`
 `;
 var index$9 = /*#__PURE__*/React.forwardRef(Avatar);
 
+const BadgeAttacher = ({
+  children,
+  renderBadge,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsxs(BadgeAttacherWrapper, {
+  ...props,
+  children: [children, renderBadge({
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      transform: 'translate(10%, -10%)'
+    }
+  })]
+});
+const BadgeAttacherWrapper = styled__default.default.div`
+  position: relative;
+  width: fit-content;
+
+  ${sx}
+`;
+
 const Tooltip = ({
   children,
   direction = 'top-center',
@@ -17473,6 +17495,57 @@ const BaseChip = styled__default.default.span({
   }
 }), sx);
 
+const CounterBadge = ({
+  variant = 'red',
+  size = 'm',
+  children: propChildren = '',
+  maxCounter = 99,
+  ...props
+}) => {
+  const numberChildren = typeof propChildren === 'number' ? propChildren : parseInt(propChildren);
+  const children = maxCounter < numberChildren ? `${maxCounter}+` : `${numberChildren}`;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseCounterBadge, {
+    variant: variant,
+    size: size,
+    ...props,
+    "aria-label": `${numberChildren}`,
+    children: children
+  });
+};
+const BaseCounterBadge = styled__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
+
+  ${variant({
+  prop: 'variant',
+  variants: {
+    red: {
+      backgroundColor: 'bg/accent/red',
+      color: 'text/inverse'
+    }
+  }
+})}
+  ${variant({
+  prop: 'size',
+  variants: {
+    m: {
+      minWidth: forcePixelValue(20),
+      fontSize: 'xxs',
+      fontWeight: 'medium',
+      lineHeight: 2,
+      px: 1,
+      py: 0.25
+    }
+  }
+})}
+
+  ${sx}
+`;
+
 /**
  * `children`의 컴포넌트들을 시각적으로 재배치하기 위한 훅입니다.
  */
@@ -18618,15 +18691,111 @@ const useFocusTrap = (settings, dependencies = []) => {
 
 const MotionView = motion(View);
 
+const UnstyledDialogBody = styled__default.default.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  overflow-y: auto;
+
+  ${sx}
+`;
+
+const DialogBody = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDialogBody, {
+  ...props,
+  sx: {
+    p: 5,
+    ...sx
+  },
+  children: children
+});
+
+const UnstyledDialogFooter = styled__default.default.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+
+  ${sx}
+`;
+
+const DialogFooter = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDialogFooter, {
+  ...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 UnstyledDialogHeader = styled__default.default.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+
+  ${sx}
+`;
+
+const DialogHeader = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDialogHeader, {
+  ...props,
+  sx: {
+    px: 5,
+    py: 4,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'border/neutral',
+    ...sx
+  },
+  children: children
+});
+
+const DialogHeaderSubtitle = ({
+  typography = 'xs',
+  color = 'text/neutral/subtler',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  typography: typography,
+  color: color,
+  ...props
+});
+
+const DialogHeaderTitle = ({
+  typography = 'm/bold',
+  color = 'text/neutral',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  typography: typography,
+  color: color,
+  ...props
+});
+
 const Dialog = ({
   children,
   isOpen,
   onDismiss,
-  size,
+  size = 'm',
   sx
 }, ref) => {
-  const dialogRoot = typeof document !== 'undefined' ? document.getElementById('dialog_root') : null;
-  if (dialogRoot === null) return null;
   const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
   const overlayRef = React.useRef(null);
   const dialogRef = React.useRef(null);
@@ -18658,13 +18827,6 @@ const Dialog = ({
       };
     }
   }, [isOpen, handleOutsideClick]);
-  React.useEffect(() => {
-    if (isOpen) {
-      if (closeButtonRef && closeButtonRef.current) {
-        closeButtonRef.current.focus();
-      }
-    }
-  }, [isOpen, closeButtonRef]);
   return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
     children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(MotionView, {
       initial: {
@@ -18704,16 +18866,24 @@ const Dialog = ({
         tabIndex: -1,
         sx: {
           ...(size === 's' ? {
-            maxHeight: 'calc(100vh - 32px)',
-            width: ['100%', 400, 400],
-            marginX: [8, 'auto', 'auto'],
+            maxHeight: 'calc(100vh - 64px)',
+            width: ['calc(100% - 64px)', 400, 400],
+            marginX: 'auto',
             marginY: 'auto',
             borderRadius: 'l'
+          } : size === 'm' ? {
+            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
+            height: ['100%', '100%', 'auto'],
+            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+            width: ['100%', '100%', 640],
+            marginX: [0, 0, 'auto'],
+            marginY: 'auto',
+            borderRadius: ['none', 'none', 'l']
           } : size === 'l' ? {
-            maxHeight: '100vh',
+            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
             height: ['100%', '100%', 'auto'],
             minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-            width: ['100%', '100%', 820],
+            width: ['100%', '100%', 860],
             marginX: [0, 0, 'auto'],
             marginY: 'auto',
             borderRadius: ['none', 'none', 'l']
@@ -18724,8 +18894,8 @@ const Dialog = ({
         children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
           sx: {
             position: 'absolute',
-            top: 4,
-            right: 4
+            top: 3,
+            right: 3
           },
           children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
             ref: closeButtonRef,
@@ -18753,6 +18923,8 @@ const Blanket = styled__default.default.span`
   }
 `;
 const BaseDialog = styled__default.default.div(() => ({
+  display: 'flex',
+  flexDirection: 'column',
   position: 'relative',
   boxShadow: elevation['shadow/overlay'],
   backgroundColor: elevation['surface/overlay'],
@@ -18760,7 +18932,16 @@ const BaseDialog = styled__default.default.div(() => ({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$6 = /*#__PURE__*/React.forwardRef(Dialog);
+var index$6 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
+  UnstyledHeader: UnstyledDialogHeader,
+  UnstyledBody: UnstyledDialogBody,
+  UnstyledFooter: UnstyledDialogFooter,
+  Header: DialogHeader,
+  HeaderTitle: DialogHeaderTitle,
+  HeaderSubtitle: DialogHeaderSubtitle,
+  Body: DialogBody,
+  Footer: DialogFooter
+});
 
 const useDialogHandler = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -23939,10 +24120,12 @@ const useOutsideClick = ({
 exports.ActionList = index$a;
 exports.AnimatePresence = AnimatePresence;
 exports.Avatar = index$9;
+exports.BadgeAttacher = BadgeAttacher;
 exports.Breadcrumbs = index$8;
 exports.Button = Button;
 exports.Checkbox = Checkbox$1;
 exports.Chip = Chip;
+exports.CounterBadge = CounterBadge;
 exports.Datagrid = index$7;
 exports.DescriptionList = DescriptionList;
 exports.Dialog = index$6;

package/esm/core/BadgeAttacher/index.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const BadgeAttacher = ({
+  children,
+  renderBadge,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsxs(BadgeAttacherWrapper, {
+  ...props,
+  children: [children, renderBadge({
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      transform: 'translate(10%, -10%)'
+    }
+  })]
+});
+const BadgeAttacherWrapper = styled.div`
+  position: relative;
+  width: fit-content;
+
+  ${sx}
+`;
+
+export { BadgeAttacher as default };

package/esm/core/CounterBadge/index.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const CounterBadge = ({
+  variant = 'red',
+  size = 'm',
+  children: propChildren = '',
+  maxCounter = 99,
+  ...props
+}) => {
+  const numberChildren = typeof propChildren === 'number' ? propChildren : parseInt(propChildren);
+  const children = maxCounter < numberChildren ? `${maxCounter}+` : `${numberChildren}`;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseCounterBadge, {
+    variant: variant,
+    size: size,
+    ...props,
+    "aria-label": `${numberChildren}`,
+    children: children
+  });
+};
+const BaseCounterBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
+
+  ${variant({
+  prop: 'variant',
+  variants: {
+    red: {
+      backgroundColor: 'bg/accent/red',
+      color: 'text/inverse'
+    }
+  }
+})}
+  ${variant({
+  prop: 'size',
+  variants: {
+    m: {
+      minWidth: forcePixelValue(20),
+      fontSize: 'xxs',
+      fontWeight: 'medium',
+      lineHeight: 2,
+      px: 1,
+      py: 0.25
+    }
+  }
+})}
+
+  ${sx}
+`;
+
+export { CounterBadge as default };

package/esm/core/Dialog/DialogBody.js

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

package/esm/core/Dialog/DialogFooter.js

@@ -0,0 +1,27 @@
+import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DialogFooter = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDialogFooter, {
+  ...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 { DialogFooter as default };

package/esm/core/Dialog/DialogHeader.js

@@ -0,0 +1,21 @@
+import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DialogHeader = ({
+  children,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledDialogHeader, {
+  ...props,
+  sx: {
+    px: 5,
+    py: 4,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'border/neutral',
+    ...sx
+  },
+  children: children
+});
+
+export { DialogHeader as default };

package/esm/core/Dialog/DialogHeaderSubtitle.js

@@ -0,0 +1,14 @@
+import Text from '../Text/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DialogHeaderSubtitle = ({
+  typography = 'xs',
+  color = 'text/neutral/subtler',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  typography: typography,
+  color: color,
+  ...props
+});
+
+export { DialogHeaderSubtitle as default };

package/esm/core/Dialog/DialogHeaderTitle.js

@@ -0,0 +1,14 @@
+import Text from '../Text/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DialogHeaderTitle = ({
+  typography = 'm/bold',
+  color = 'text/neutral',
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  typography: typography,
+  color: color,
+  ...props
+});
+
+export { DialogHeaderTitle as default };

package/esm/core/Dialog/_UnstyledDialogBody.js

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

package/esm/core/Dialog/_UnstyledDialogFooter.js

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

package/esm/core/Dialog/_UnstyledDialogHeader.js

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

package/esm/core/Dialog/index.js

@@ -9,6 +9,14 @@ import View from '../View/index.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
 import MotionView from '../MotionView/index.js';
+import DialogBody from './DialogBody.js';
+import DialogFooter from './DialogFooter.js';
+import DialogHeader from './DialogHeader.js';
+import DialogHeaderSubtitle from './DialogHeaderSubtitle.js';
+import DialogHeaderTitle from './DialogHeaderTitle.js';
+import UnstyledDialogBody from './_UnstyledDialogBody.js';
+import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
+import UnstyledDialogHeader from './_UnstyledDialogHeader.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 { cubicBezier } from '../../node_modules/framer-motion/dist/es/easing/cubic-bezier.js';
@@ -17,11 +25,9 @@ const Dialog = ({
   children,
   isOpen,
   onDismiss,
-  size,
+  size = 'm',
   sx
 }, ref) => {
-  const dialogRoot = typeof document !== 'undefined' ? document.getElementById('dialog_root') : null;
-  if (dialogRoot === null) return null;
   const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
   const overlayRef = useRef(null);
   const dialogRef = useRef(null);
@@ -53,13 +59,6 @@ const Dialog = ({
       };
     }
   }, [isOpen, handleOutsideClick]);
-  useEffect(() => {
-    if (isOpen) {
-      if (closeButtonRef && closeButtonRef.current) {
-        closeButtonRef.current.focus();
-      }
-    }
-  }, [isOpen, closeButtonRef]);
   return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
     children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(MotionView, {
       initial: {
@@ -99,16 +98,24 @@ const Dialog = ({
         tabIndex: -1,
         sx: {
           ...(size === 's' ? {
-            maxHeight: 'calc(100vh - 32px)',
-            width: ['100%', 400, 400],
-            marginX: [8, 'auto', 'auto'],
+            maxHeight: 'calc(100vh - 64px)',
+            width: ['calc(100% - 64px)', 400, 400],
+            marginX: 'auto',
             marginY: 'auto',
             borderRadius: 'l'
+          } : size === 'm' ? {
+            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
+            height: ['100%', '100%', 'auto'],
+            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+            width: ['100%', '100%', 640],
+            marginX: [0, 0, 'auto'],
+            marginY: 'auto',
+            borderRadius: ['none', 'none', 'l']
           } : size === 'l' ? {
-            maxHeight: '100vh',
+            maxHeight: ['100%', '100%', 'calc(100vh - 64px)'],
             height: ['100%', '100%', 'auto'],
             minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-            width: ['100%', '100%', 820],
+            width: ['100%', '100%', 860],
             marginX: [0, 0, 'auto'],
             marginY: 'auto',
             borderRadius: ['none', 'none', 'l']
@@ -119,8 +126,8 @@ const Dialog = ({
         children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
           sx: {
             position: 'absolute',
-            top: 4,
-            right: 4
+            top: 3,
+            right: 3
           },
           children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
             ref: closeButtonRef,
@@ -148,6 +155,8 @@ const Blanket = styled.span`
   }
 `;
 const BaseDialog = styled.div(() => ({
+  display: 'flex',
+  flexDirection: 'column',
   position: 'relative',
   boxShadow: elevation['shadow/overlay'],
   backgroundColor: elevation['surface/overlay'],
@@ -155,6 +164,15 @@ const BaseDialog = styled.div(() => ({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index = /*#__PURE__*/forwardRef(Dialog);
+var index = Object.assign( /*#__PURE__*/forwardRef(Dialog), {
+  UnstyledHeader: UnstyledDialogHeader,
+  UnstyledBody: UnstyledDialogBody,
+  UnstyledFooter: UnstyledDialogFooter,
+  Header: DialogHeader,
+  HeaderTitle: DialogHeaderTitle,
+  HeaderSubtitle: DialogHeaderSubtitle,
+  Body: DialogBody,
+  Footer: DialogFooter
+});
 
 export { index as default };

package/esm/index.js

@@ -1,9 +1,11 @@
 export { default as ActionList } from './core/ActionList/index.js';
 export { default as Avatar } from './core/Avatar/index.js';
+export { default as BadgeAttacher } from './core/BadgeAttacher/index.js';
 export { default as Breadcrumbs } from './core/Breadcrumbs/index.js';
 export { default as Button } from './core/Button/index.js';
 export { default as Checkbox } from './core/Checkbox/index.js';
 export { default as Chip } from './core/Chip/index.js';
+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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.2",
+  "version": "2.19.4",
   "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",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "ca3fa5007b20b0b828c49f8ba09c58007b805442"
+  "gitHead": "a759ea92d1b8bfb8e7583150be5658763f3b2d9e"
 }