@teamturing/react-kit 2.19.3 → 2.19.5

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

@@ -24,7 +24,7 @@ export type { DatagridProps, DatagridBodyProps, DatagridCellProps, DatagridHeade
 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

@@ -18691,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);
@@ -18731,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: {
@@ -18777,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']
@@ -18797,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,
@@ -18826,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'],
@@ -18833,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);
@@ -20809,7 +20917,7 @@ const OverlaySelectInput = ({
           position: 'absolute',
           top: '50%',
           transform: 'translateY(-50%)',
-          right: 5,
+          right: 4,
           pointerEvents: 'none'
         },
         icon: SvgChevronDown,
@@ -20916,7 +21024,7 @@ const TextInputWrapper$1 = styled__default.default.div`
     `};
 
   ${props => props.hasLeadingVisual && styled.css`
-      padding-left: ${forcePixelValue(props.theme.space[5])};
+      padding-left: ${forcePixelValue(props.theme.space[4])};
       input {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
@@ -20946,16 +21054,20 @@ const UnstyledInput$1 = styled__default.default.input`
 const BaseInput$1 = styled__default.default(UnstyledInput$1)`
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[10])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
+
+  white-space: pre;
+  text-overflow: ellipsis;
+  pointer-events: none;
 `;
 var OverlaySelectInput$1 = /*#__PURE__*/React.forwardRef(OverlaySelectInput);
 
@@ -21032,7 +21144,7 @@ const Select = ({
         position: 'absolute',
         top: '50%',
         transform: 'translateY(-50%)',
-        right: 5,
+        right: 4,
         pointerEvents: 'none'
       },
       icon: SvgChevronDown,
@@ -21139,7 +21251,7 @@ const SelectWrapper = styled__default.default.div`
     `};
 
   ${props => props.hasLeadingVisual && styled.css`
-      padding-left: ${forcePixelValue(props.theme.space[5])};
+      padding-left: ${forcePixelValue(props.theme.space[4])};
       select {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
@@ -21173,16 +21285,16 @@ const UnstyledSelect = styled__default.default.select`
 const BaseSelect = styled__default.default(UnstyledSelect)`
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['12'])};
+}) => forcePixelValue(theme.space[10])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
 
   white-space: pre;
   text-overflow: ellipsis;
@@ -21399,18 +21511,18 @@ const TextInputWrapper = styled__default.default.div`
     `};
 
   ${props => props.hasLeadingVisual && styled.css`
-      padding-left: ${forcePixelValue(props.theme.space[5])};
+      padding-left: ${forcePixelValue(props.theme.space[4])};
       input {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
   ${props => props.hasTrailingVisual && styled.css`
-      padding-right: ${forcePixelValue(props.theme.space[5])};
+      padding-right: ${forcePixelValue(props.theme.space[4])};
     `}
 
   ${props => props.hasTrailingAction && styled.css`
-      padding-right: ${forcePixelValue(props.theme.space[3])};
+      padding-right: ${forcePixelValue(props.theme.space[2])};
     `}
 
   ${props => (props.hasTrailingVisual || props.hasTrailingAction) && styled.css`
@@ -21444,16 +21556,16 @@ const UnstyledInput = styled__default.default.input`
 const BaseInput = styled__default.default(UnstyledInput)`
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
 `;
 var TextInput$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
   TrailingAction: TextInputTrailingAction$1
@@ -23471,16 +23583,16 @@ const TextareaWrapper = styled__default.default.div`
 
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space['3'])};
   padding-right: ${({
   theme
 }) => forcePixelValue(theme.space['4'])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space['3'])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space['4'])};
 
   font-size: ${({
   theme

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/core/OverlaySelectInput/index.js

@@ -85,7 +85,7 @@ const OverlaySelectInput = ({
           position: 'absolute',
           top: '50%',
           transform: 'translateY(-50%)',
-          right: 5,
+          right: 4,
           pointerEvents: 'none'
         },
         icon: SvgChevronDown,
@@ -192,7 +192,7 @@ const TextInputWrapper = styled.div`
     `};
 
   ${props => props.hasLeadingVisual && css`
-      padding-left: ${forcePixelValue(props.theme.space[5])};
+      padding-left: ${forcePixelValue(props.theme.space[4])};
       input {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
@@ -222,16 +222,20 @@ const UnstyledInput = styled.input`
 const BaseInput = styled(UnstyledInput)`
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[10])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
+
+  white-space: pre;
+  text-overflow: ellipsis;
+  pointer-events: none;
 `;
 var OverlaySelectInput$1 = /*#__PURE__*/forwardRef(OverlaySelectInput);
 

package/esm/core/Select/index.js

@@ -72,7 +72,7 @@ const Select = ({
         position: 'absolute',
         top: '50%',
         transform: 'translateY(-50%)',
-        right: 5,
+        right: 4,
         pointerEvents: 'none'
       },
       icon: SvgChevronDown,
@@ -179,7 +179,7 @@ const SelectWrapper = styled.div`
     `};
 
   ${props => props.hasLeadingVisual && css`
-      padding-left: ${forcePixelValue(props.theme.space[5])};
+      padding-left: ${forcePixelValue(props.theme.space[4])};
       select {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
@@ -213,16 +213,16 @@ const UnstyledSelect = styled.select`
 const BaseSelect = styled(UnstyledSelect)`
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['12'])};
+}) => forcePixelValue(theme.space[10])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
 
   white-space: pre;
   text-overflow: ellipsis;

package/esm/core/TextInput/index.js

@@ -169,18 +169,18 @@ const TextInputWrapper = styled.div`
     `};
 
   ${props => props.hasLeadingVisual && css`
-      padding-left: ${forcePixelValue(props.theme.space[5])};
+      padding-left: ${forcePixelValue(props.theme.space[4])};
       input {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
   ${props => props.hasTrailingVisual && css`
-      padding-right: ${forcePixelValue(props.theme.space[5])};
+      padding-right: ${forcePixelValue(props.theme.space[4])};
     `}
 
   ${props => props.hasTrailingAction && css`
-      padding-right: ${forcePixelValue(props.theme.space[3])};
+      padding-right: ${forcePixelValue(props.theme.space[2])};
     `}
 
   ${props => (props.hasTrailingVisual || props.hasTrailingAction) && css`
@@ -214,16 +214,16 @@ const UnstyledInput = styled.input`
 const BaseInput = styled(UnstyledInput)`
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space[4])};
 `;
 var TextInput$1 = Object.assign( /*#__PURE__*/forwardRef(TextInput), {
   TrailingAction: TextInputTrailingAction

package/esm/core/Textarea/index.js

@@ -46,16 +46,16 @@ const TextareaWrapper = styled.div`
 
   padding-top: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space['3'])};
   padding-right: ${({
   theme
 }) => forcePixelValue(theme.space['4'])};
   padding-bottom: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space['3'])};
   padding-left: ${({
   theme
-}) => forcePixelValue(theme.space['5'])};
+}) => forcePixelValue(theme.space['4'])};
 
   font-size: ${({
   theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.19.3",
+  "version": "2.19.5",
   "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": "b45053ed94e44f578e44dce29e277726777ef881"
+  "gitHead": "29280659eecfa0404a06a9aa4f019eba500eed7d"
 }