@teamturing/react-kit 2.59.1 → 2.60.0

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

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { ButtonProps } from '../Button';
+type Props = {
+    buttonProps?: Pick<ButtonProps, 'children' | 'variant' | 'size' | 'leadingIcon' | 'trailingIcon'>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    buttonProps?: Pick<ButtonProps, "size" | "children" | "variant" | "leadingIcon" | "trailingIcon"> | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & import("react").RefAttributes<HTMLInputElement>>;
+export default _default;
+export type { Props as UploadInputProps };

package/dist/index.d.ts

@@ -101,6 +101,8 @@ export { default as Toast } from './core/Toast';
 export type { ToastProps } from './core/Toast';
 export { default as Tooltip } from './core/Tooltip';
 export type { TooltipProps } from './core/Tooltip';
+export { default as UploadInput } from './core/UploadInput';
+export type { UploadInputProps } from './core/UploadInput';
 export { default as View } from './core/View';
 export type { ViewProps } from './core/View';
 export { default as UnstyledButton } from './core/_UnstyledButton';

package/dist/index.js

@@ -1115,7 +1115,7 @@ const UnstyledTable = styled__default.default.table`
 
   ${sx}
 `;
-var index$e = Object.assign(UnstyledTable, {
+var index$f = Object.assign(UnstyledTable, {
   Head: UnstyledTableHead,
   Body: UnstyledTableBody,
   Row: UnstyledTableRow,
@@ -1795,7 +1795,7 @@ const BaseActionList = styled__default.default.ul`
 
   ${sx}
 `;
-var index$d = Object.assign(ActionList, {
+var index$e = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
@@ -2545,7 +2545,7 @@ const BaseAvatarGroup = styled__default.default.ol`
 
   ${sx}
 `;
-var index$c = Object.assign( /*#__PURE__*/React.forwardRef(AvatarGroup), {
+var index$d = Object.assign( /*#__PURE__*/React.forwardRef(AvatarGroup), {
   Item: AvatarGroupItem$1
 });
 
@@ -2699,7 +2699,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$b = Object.assign(Breadcrumbs, {
+var index$c = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -3790,7 +3790,7 @@ const TextInputWrapper$1 = styled__default.default.div`
 
   ${sx}
 `;
-const UnstyledInput$1 = styled__default.default.input`
+const UnstyledInput$2 = styled__default.default.input`
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -3806,7 +3806,7 @@ const UnstyledInput$1 = styled__default.default.input`
     outline: 0;
   }
 `;
-const BaseInput$1 = styled__default.default(UnstyledInput$1)`
+const BaseInput$1 = styled__default.default(UnstyledInput$2)`
   padding-top: ${({
   theme
 }) => utils.forcePixelValue(theme.space[3])};
@@ -4164,7 +4164,7 @@ const TextInputWrapper = styled__default.default.div`
     transition: border-color 100ms;
   }
 `;
-const UnstyledInput = styled__default.default.input`
+const UnstyledInput$1 = styled__default.default.input`
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -4181,7 +4181,7 @@ const UnstyledInput = styled__default.default.input`
     outline: 0;
   }
 `;
-const BaseInput = styled__default.default(UnstyledInput)`
+const BaseInput = styled__default.default(UnstyledInput$1)`
   white-space: pre;
   text-overflow: ellipsis;
 `;
@@ -5419,7 +5419,7 @@ const CheckboxOrRadioGroupFormControl = ({
     })
   });
 };
-var index$a = Object.assign( /*#__PURE__*/React.forwardRef(CheckboxOrRadioGroupFormControl), {
+var index$b = Object.assign( /*#__PURE__*/React.forwardRef(CheckboxOrRadioGroupFormControl), {
   Label: CheckboxOrRadioGroupFormControlLabel,
   Caption: CheckboxOrRadioGroupFormControlCaption,
   ErrorMessage: CheckboxOrRadioGroupFormControlErrorMessage,
@@ -5656,7 +5656,7 @@ const BaseClickArea = styled__default.default(View)`
 }) => disabled ? 'not-allowed' : 'pointer'};
   }
 `;
-var index$9 = /*#__PURE__*/React.forwardRef(ClickArea);
+var index$a = /*#__PURE__*/React.forwardRef(ClickArea);
 
 const CounterBadge = ({
   variant = 'red',
@@ -5861,7 +5861,7 @@ const BaseDatagrid = styled__default.default.div`
 
   border-radius: inherit;
 `;
-var index$8 = Object.assign(Datagrid, {
+var index$9 = Object.assign(Datagrid, {
   Header: DatagridHeader,
   Subheader: DatagridSubheader,
   Body: DatagridBody,
@@ -6433,7 +6433,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,
@@ -6760,7 +6760,7 @@ const BaseDrawer = styled__default.default.div(({
     }
   }
 }), sx);
-var index$6 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
+var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,
   UnstyledBody: UnstyledDrawerBody,
   UnstyledFooter: UnstyledDrawerFooter,
@@ -7243,7 +7243,7 @@ const BaseFlash = styled__default.default.div`
 
   ${sx}
 `;
-var index$5 = /*#__PURE__*/React.forwardRef(Flash);
+var index$6 = /*#__PURE__*/React.forwardRef(Flash);
 
 const GradientText = styled__default.default(Text)(({
   theme
@@ -7401,7 +7401,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
     }
   }
 }), sx);
-var index$4 = /*#__PURE__*/React.forwardRef(IconToggleButton);
+var index$5 = /*#__PURE__*/React.forwardRef(IconToggleButton);
 
 const Pagination = ({
   pages: propPages,
@@ -7664,7 +7664,7 @@ const PaginationTruncationIndicator = styled__default.default.div`
 
   ${sx}
 `;
-var index$3 = Object.assign(Pagination, {
+var index$4 = Object.assign(Pagination, {
   Page: PaginationPage,
   PageDirection: PaginationPageDirection,
   TruncationIndicator: PaginationTruncationIndicator
@@ -7879,7 +7879,7 @@ const BasePill = styled__default.default(UnstyledButton)`
     
   ${sx}
 `;
-var index$2 = /*#__PURE__*/React.forwardRef(Pill);
+var index$3 = /*#__PURE__*/React.forwardRef(Pill);
 
 const Stack = /*#__PURE__*/React.forwardRef(({
   gapX = 0,
@@ -8276,7 +8276,7 @@ const Tab = ({
     })
   });
 };
-var index$1 = Object.assign(Tab, {
+var index$2 = Object.assign(Tab, {
   Item: TabItem
 });
 
@@ -8394,6 +8394,209 @@ const BaseToast = styled__default.default.div(({
   }
 }));
 
+const UploadInput = ({
+  buttonProps: propsButtonProps,
+  placeholder = '파일을 끌어다 놓으세요',
+  accept,
+  disabled,
+  ...props
+}, ref) => {
+  const defaultButtonProps = {
+    children: '파일 선택',
+    size: 's',
+    variant: 'neutral'
+  };
+  const buttonProps = {
+    ...defaultButtonProps,
+    ...propsButtonProps
+  };
+  const inputRef = React.useRef(null);
+  const handleButtonClick = () => {
+    inputRef.current?.click();
+  };
+  const handleDragOver = e => e.preventDefault();
+  const handleDragEnter = e => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    e.currentTarget?.classList.add('upload-input__wrapper__active');
+  };
+  const handleDragLeave = e => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    e.currentTarget?.classList.remove('upload-input__wrapper__active');
+  };
+  const handleDrop = e => {
+    e.preventDefault();
+    const files = e.dataTransfer?.files ?? [];
+    if (files.length < 1) return;
+    if (!props.multiple && files.length > 1) {
+      e.currentTarget?.classList.remove('upload-input__wrapper__active');
+      return;
+    }
+    const isAcceptableFile = new RegExp((accept || '*').replace(/\*/g, '.*').replace(/,/g, '|').replace(/\s/g, '')).test(files[0].type);
+    if (!isAcceptableFile) return;
+    e.currentTarget?.classList.remove('upload-input__wrapper__active');
+    if (inputRef && inputRef.current && files) {
+      const currentFiles = inputRef.current.files;
+      if (files.length !== currentFiles?.length) {
+        inputRef.current.files = files;
+        inputRef.current.dispatchEvent(new Event('change', {
+          bubbles: true
+        }));
+        return;
+      }
+      const isSameFiles = Array.from(files).every((file, index) => {
+        const currentFile = currentFiles?.item(index);
+        return file.name === currentFile?.name && file.size === currentFile?.size && file.lastModified === currentFile?.lastModified;
+      });
+      if (isSameFiles) return;
+      inputRef.current.files = files;
+      inputRef.current.dispatchEvent(new Event('change', {
+        bubbles: true
+      }));
+    }
+  };
+  React.useImperativeHandle(ref, () => inputRef.current, []);
+  return /*#__PURE__*/jsxRuntime.jsxs(UploadInputWrapper, {
+    disabled: disabled,
+    ...(disabled ? {} : {
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx(icons.ShareIcon, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: placeholder
+    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+      type: 'button',
+      ...buttonProps,
+      onClick: handleButtonClick,
+      disabled: disabled
+    }), /*#__PURE__*/jsxRuntime.jsx(UnstyledInput, {
+      ref: inputRef,
+      ...props,
+      type: 'file',
+      hidden: true,
+      accept: accept,
+      tabIndex: -1,
+      disabled: disabled
+    })]
+  });
+};
+const UploadInputWrapper = styled__default.default.div`
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: ${({
+  theme
+}) => utils.forcePixelValue(theme.space[2])};
+  padding: ${({
+  theme
+}) => utils.forcePixelValue(theme.space[4])};
+
+  & > svg {
+    width: 16px;
+    height: 16px;
+    color: ${({
+  theme
+}) => theme.colors['icon/neutral/bold']};
+  }
+
+  & > span {
+    font-size: ${({
+  theme
+}) => utils.forcePixelValue(theme.fontSizes.xs)};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  border-width: ${utils.forcePixelValue(1)};
+  border-style: dashed;
+  border-color: ${({
+  theme
+}) => theme.colors['border/neutral/bolder']};
+  border-radius: ${({
+  theme
+}) => utils.forcePixelValue(theme.radii.xs)};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtlest']};
+
+  &.upload-input__wrapper__active {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/selected/subtle']};
+  }
+
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${utils.forcePixelValue(-1)};
+    right: ${utils.forcePixelValue(-1)};
+    bottom: ${utils.forcePixelValue(-1)};
+    left: ${utils.forcePixelValue(-1)};
+
+    border: ${utils.forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => utils.forcePixelValue(theme.radii.xs)};
+    pointer-events: none;
+  }
+  &:focus-within {
+    &:after {
+      border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+    }
+  }
+
+  & > button:focus-visible {
+    outline: none;
+  }
+
+  ${({
+  theme,
+  disabled
+}) => disabled ? {
+  'cursor': 'not-allowed',
+  'backgroundColor': theme.colors['bg/disabled'],
+  '& > svg': {
+    color: theme.colors['icon/disabled']
+  },
+  '& > span': {
+    color: theme.colors['text/disabled']
+  }
+} : {}}
+
+  transition: background-color 200ms ease-in-out;
+`;
+const UnstyledInput = styled__default.default.input`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+var index$1 = /*#__PURE__*/React.forwardRef(UploadInput);
+
 const useMediaQuery = query => {
   const getMatches = query => {
     /**
@@ -8731,40 +8934,40 @@ Object.defineProperty(exports, 'AnimatePresence', {
   enumerable: true,
   get: function () { return framerMotion.AnimatePresence; }
 });
-exports.ActionList = index$d;
+exports.ActionList = index$e;
 exports.Avatar = Avatar;
-exports.AvatarGroup = index$c;
+exports.AvatarGroup = index$d;
 exports.BadgeAttacher = BadgeAttacher;
-exports.Breadcrumbs = index$b;
+exports.Breadcrumbs = index$c;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox$1;
 exports.CheckboxGroup = CheckboxGroup$1;
-exports.CheckboxOrRadioGroupFormControl = index$a;
+exports.CheckboxOrRadioGroupFormControl = index$b;
 exports.Chip = Chip;
-exports.ClickArea = index$9;
+exports.ClickArea = index$a;
 exports.CounterBadge = CounterBadge;
-exports.Datagrid = index$8;
+exports.Datagrid = index$9;
 exports.DescriptionList = DescriptionList;
-exports.Dialog = index$7;
-exports.Drawer = index$6;
+exports.Dialog = index$8;
+exports.Drawer = index$7;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
 exports.FileItem = FileItem;
-exports.Flash = index$5;
+exports.Flash = index$6;
 exports.FormControl = FormControl$1;
 exports.GradientText = GradientText;
 exports.Grid = Grid$1;
 exports.HorizontalDivider = HorizontalDivider;
 exports.IconButton = IconButton;
-exports.IconToggleButton = index$4;
+exports.IconToggleButton = index$5;
 exports.Image = Image;
 exports.ItemList = ItemList;
 exports.MotionView = MotionView;
 exports.Overlay = Overlay$1;
 exports.OverlayPopper = OverlayPopper;
-exports.Pagination = index$3;
-exports.Pill = index$2;
+exports.Pagination = index$4;
+exports.Pill = index$3;
 exports.Radio = Radio$1;
 exports.RadioGroup = RadioGroup$1;
 exports.SearchSelectInput = SearchSelectInput$1;
@@ -8774,7 +8977,7 @@ exports.Spinner = Spinner;
 exports.Stack = Stack$1;
 exports.StyledIcon = StyledIcon;
 exports.Switch = Switch$1;
-exports.Tab = index$1;
+exports.Tab = index$2;
 exports.Text = Text;
 exports.TextInput = TextInput$1;
 exports.Textarea = Textarea;
@@ -8782,7 +8985,8 @@ exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip;
 exports.UnstyledButton = UnstyledButton;
-exports.UnstyledTable = index$e;
+exports.UnstyledTable = index$f;
+exports.UploadInput = index$1;
 exports.View = View;
 exports.columnGap = columnGap;
 exports.gap = gap;

package/esm/core/UploadInput/index.js

@@ -0,0 +1,211 @@
+import { ShareIcon } from '@teamturing/icons';
+import { forcePixelValue } from '@teamturing/utils';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import styled from 'styled-components';
+import Button from '../Button/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const UploadInput = ({
+  buttonProps: propsButtonProps,
+  placeholder = '파일을 끌어다 놓으세요',
+  accept,
+  disabled,
+  ...props
+}, ref) => {
+  const defaultButtonProps = {
+    children: '파일 선택',
+    size: 's',
+    variant: 'neutral'
+  };
+  const buttonProps = {
+    ...defaultButtonProps,
+    ...propsButtonProps
+  };
+  const inputRef = useRef(null);
+  const handleButtonClick = () => {
+    inputRef.current?.click();
+  };
+  const handleDragOver = e => e.preventDefault();
+  const handleDragEnter = e => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    e.currentTarget?.classList.add('upload-input__wrapper__active');
+  };
+  const handleDragLeave = e => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    e.currentTarget?.classList.remove('upload-input__wrapper__active');
+  };
+  const handleDrop = e => {
+    e.preventDefault();
+    const files = e.dataTransfer?.files ?? [];
+    if (files.length < 1) return;
+    if (!props.multiple && files.length > 1) {
+      e.currentTarget?.classList.remove('upload-input__wrapper__active');
+      return;
+    }
+    const isAcceptableFile = new RegExp((accept || '*').replace(/\*/g, '.*').replace(/,/g, '|').replace(/\s/g, '')).test(files[0].type);
+    if (!isAcceptableFile) return;
+    e.currentTarget?.classList.remove('upload-input__wrapper__active');
+    if (inputRef && inputRef.current && files) {
+      const currentFiles = inputRef.current.files;
+      if (files.length !== currentFiles?.length) {
+        inputRef.current.files = files;
+        inputRef.current.dispatchEvent(new Event('change', {
+          bubbles: true
+        }));
+        return;
+      }
+      const isSameFiles = Array.from(files).every((file, index) => {
+        const currentFile = currentFiles?.item(index);
+        return file.name === currentFile?.name && file.size === currentFile?.size && file.lastModified === currentFile?.lastModified;
+      });
+      if (isSameFiles) return;
+      inputRef.current.files = files;
+      inputRef.current.dispatchEvent(new Event('change', {
+        bubbles: true
+      }));
+    }
+  };
+  useImperativeHandle(ref, () => inputRef.current, []);
+  return /*#__PURE__*/jsxs(UploadInputWrapper, {
+    disabled: disabled,
+    ...(disabled ? {} : {
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }),
+    children: [/*#__PURE__*/jsx(ShareIcon, {}), /*#__PURE__*/jsx("span", {
+      children: placeholder
+    }), /*#__PURE__*/jsx(Button, {
+      type: 'button',
+      ...buttonProps,
+      onClick: handleButtonClick,
+      disabled: disabled
+    }), /*#__PURE__*/jsx(UnstyledInput, {
+      ref: inputRef,
+      ...props,
+      type: 'file',
+      hidden: true,
+      accept: accept,
+      tabIndex: -1,
+      disabled: disabled
+    })]
+  });
+};
+const UploadInputWrapper = styled.div`
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  padding: ${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+
+  & > svg {
+    width: 16px;
+    height: 16px;
+    color: ${({
+  theme
+}) => theme.colors['icon/neutral/bold']};
+  }
+
+  & > span {
+    font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+
+  border-width: ${forcePixelValue(1)};
+  border-style: dashed;
+  border-color: ${({
+  theme
+}) => theme.colors['border/neutral/bolder']};
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtlest']};
+
+  &.upload-input__wrapper__active {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/selected/subtle']};
+  }
+
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+    pointer-events: none;
+  }
+  &:focus-within {
+    &:after {
+      border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+    }
+  }
+
+  & > button:focus-visible {
+    outline: none;
+  }
+
+  ${({
+  theme,
+  disabled
+}) => disabled ? {
+  'cursor': 'not-allowed',
+  'backgroundColor': theme.colors['bg/disabled'],
+  '& > svg': {
+    color: theme.colors['icon/disabled']
+  },
+  '& > span': {
+    color: theme.colors['text/disabled']
+  }
+} : {}}
+
+  transition: background-color 200ms ease-in-out;
+`;
+const UnstyledInput = styled.input`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
+
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+var index = /*#__PURE__*/forwardRef(UploadInput);
+
+export { index as default };

package/esm/index.js

@@ -49,6 +49,7 @@ export { default as TextInput } from './core/TextInput/index.js';
 export { default as ThemeProvider } from './core/ThemeProvider/index.js';
 export { default as Toast } from './core/Toast/index.js';
 export { default as Tooltip } from './core/Tooltip/index.js';
+export { default as UploadInput } from './core/UploadInput/index.js';
 export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';
 export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.59.1",
+  "version": "2.60.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",
@@ -56,7 +56,7 @@
     "@primer/behaviors": "^1.3.6",
     "@teamturing/icons": "^1.64.0",
     "@teamturing/token-studio": "^1.16.3",
-    "@teamturing/utils": "^1.6.0",
+    "@teamturing/utils": "^1.6.1",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
@@ -64,5 +64,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "ab16463b4d669d5489e58212830dbaae793c558f"
+  "gitHead": "7f481703b05fc102b053df24bcceca284c1c72ec"
 }