@teamturing/react-kit 2.29.0 → 2.30.0

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

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

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

@@ -23,6 +23,26 @@ type Props = {
      */
     disabled?: boolean;
 } & UnstyledButtonProps & SxProp;
-declare const IconToggleButton: ({ icon: Icon, size, variant, selected, disabled, sx, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default IconToggleButton;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * 크기를 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    size?: ResponsiveValue<"m" | "s" | "l"> | undefined;
+    /**
+     * 색을 정의합니다.
+     */
+    variant?: "primary" | "plain" | undefined;
+    /**
+     * 활성화 상태를 정의합니다.
+     * `true`일 경우, 활성화된 상태를 그립니다.
+     */
+    selected?: boolean | undefined;
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean | undefined;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SxProp & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;
 export type { Props as IconToggleButtonProps };

package/dist/index.js

@@ -7103,7 +7103,7 @@ const BaseActionList = styled__default.default.ul`
 
   ${sx}
 `;
-var index$c = Object.assign(ActionList, {
+var index$d = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
@@ -16374,7 +16374,7 @@ const BaseAvatar = styled__default.default(Image)`
 })}
   ${sx}
 `;
-var index$b = /*#__PURE__*/React.forwardRef(Avatar);
+var index$c = /*#__PURE__*/React.forwardRef(Avatar);
 
 const BadgeAttacher = ({
   children,
@@ -16786,7 +16786,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$a = Object.assign(Breadcrumbs, {
+var index$b = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -17756,7 +17756,7 @@ const DatagridWrapper = styled__default.default.div`
 const BaseDatagrid = styled__default.default.div`
   width: inherit;
 `;
-var index$9 = Object.assign(Datagrid, {
+var index$a = Object.assign(Datagrid, {
   Header: DatagridHeader,
   Subheader: DatagridSubheader,
   Body: DatagridBody,
@@ -18968,7 +18968,7 @@ const BaseDialog = styled__default.default.div(({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
+var index$9 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   UnstyledHeader: UnstyledDialogHeader,
   UnstyledBody: UnstyledDialogBody,
   UnstyledFooter: UnstyledDialogFooter,
@@ -19289,7 +19289,7 @@ const BaseDrawer = styled__default.default.div(({
     }
   }
 }), sx);
-var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
+var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,
   UnstyledBody: UnstyledDrawerBody,
   UnstyledFooter: UnstyledDrawerFooter,
@@ -19534,7 +19534,7 @@ const BaseFlash = styled__default.default.div`
 
   ${sx}
 `;
-var index$6 = /*#__PURE__*/React.forwardRef(Flash);
+var index$7 = /*#__PURE__*/React.forwardRef(Flash);
 
 const Radio = ({
   checked,
@@ -34440,7 +34440,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 var reactDomExports = reactDom.exports;
 
-var index$5 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var index$6 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
 // functions
@@ -34505,7 +34505,7 @@ function roundByDPR(element, value) {
 
 function useLatestRef(value) {
   const ref = React__namespace.useRef(value);
-  index$5(() => {
+  index$6(() => {
     ref.current = value;
   });
   return ref;
@@ -34590,7 +34590,7 @@ function useFloating(options) {
       }
     });
   }, [latestMiddleware, placement, strategy, platformRef]);
-  index$5(() => {
+  index$6(() => {
     if (open === false && dataRef.current.isPositioned) {
       dataRef.current.isPositioned = false;
       setData(data => ({
@@ -34600,13 +34600,13 @@ function useFloating(options) {
     }
   }, [open]);
   const isMountedRef = React__namespace.useRef(false);
-  index$5(() => {
+  index$6(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  index$5(() => {
+  index$6(() => {
     if (referenceEl) referenceRef.current = referenceEl;
     if (floatingEl) floatingRef.current = floatingEl;
     if (referenceEl && floatingEl) {
@@ -36949,7 +36949,7 @@ const FormControl = ({
     })
   });
 };
-var index$4 = Object.assign( /*#__PURE__*/React.forwardRef(FormControl), {
+var index$5 = Object.assign( /*#__PURE__*/React.forwardRef(FormControl), {
   Label: FormControlLabel,
   Caption: FormControlCaption,
   ErrorMessage: FormControlErrorMessage,
@@ -36973,20 +36973,19 @@ const IconToggleButton = ({
   disabled = false,
   sx,
   ...props
-}) => {
-  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseIconToggleButton, {
-    icon: Icon,
-    size: size,
-    variant: variant,
-    selected: selected,
-    type: 'button',
-    disabled: disabled,
-    $disabled: disabled,
-    sx: sx,
-    ...props,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
-  });
-};
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseIconToggleButton, {
+  ref: ref,
+  icon: Icon,
+  size: size,
+  variant: variant,
+  selected: selected,
+  type: 'button',
+  disabled: disabled,
+  $disabled: disabled,
+  sx: sx,
+  ...props,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
+});
 const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   $disabled,
   theme
@@ -37063,6 +37062,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
     }
   }
 }), sx);
+var index$4 = /*#__PURE__*/React.forwardRef(IconToggleButton);
 
 const Pagination = ({
   pages: propPages,
@@ -38522,7 +38522,8 @@ const textColor = {
   'text/success': palette.green500,
   'text/warning': palette.yellow500,
   'text/danger': palette.red500,
-  'text/selected': palette.gray900
+  'text/selected': palette.gray900,
+  'text/weak': palette.gray300
 };
 const bgColor = {
   'bg/secondary': palette.violet50,
@@ -38740,7 +38741,8 @@ const direction = {
   directionToRight: 'to right',
   directionToLeft: 'to left',
   directionToRightBottom: 'to right bottom',
-  directionToTop: 'to top'
+  directionToTop: 'to top',
+  directionToBottom: 'to bottom'
 };
 
 const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
@@ -38758,12 +38760,15 @@ const overlayGradient = {
   'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
   'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
   'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/subtlest/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListWhite'),
   'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
   'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
   'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListWhite'),
   'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
   'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
-  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack'),
+  'overlay/bold/tobottom': generateGradientTokenValue('directionToBottom', 'colorStopListBlack')
 };
 const gradient = {
   ...textGradient,
@@ -39527,28 +39532,28 @@ const useTabState = ({
   return [selectedIndex, handleSelect];
 };
 
-exports.ActionList = index$c;
+exports.ActionList = index$d;
 exports.AnimatePresence = AnimatePresence;
-exports.Avatar = index$b;
+exports.Avatar = index$c;
 exports.BadgeAttacher = BadgeAttacher;
-exports.Breadcrumbs = index$a;
+exports.Breadcrumbs = index$b;
 exports.Button = Button;
 exports.Checkbox = Checkbox$1;
 exports.Chip = Chip;
 exports.CounterBadge = CounterBadge;
-exports.Datagrid = index$9;
+exports.Datagrid = index$a;
 exports.DescriptionList = DescriptionList;
-exports.Dialog = index$8;
-exports.Drawer = index$7;
+exports.Dialog = index$9;
+exports.Drawer = index$8;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
-exports.Flash = index$6;
-exports.FormControl = index$4;
+exports.Flash = index$7;
+exports.FormControl = index$5;
 exports.GradientText = GradientText;
 exports.Grid = Grid$1;
 exports.HorizontalDivider = HorizontalDivider;
 exports.IconButton = IconButton;
-exports.IconToggleButton = IconToggleButton;
+exports.IconToggleButton = index$4;
 exports.Image = Image;
 exports.ItemList = ItemList;
 exports.MotionView = MotionView;

package/dist/theme/index.d.ts

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

package/esm/core/IconToggleButton/index.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -13,20 +14,19 @@ const IconToggleButton = ({
   disabled = false,
   sx,
   ...props
-}) => {
-  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseIconToggleButton, {
-    icon: Icon,
-    size: size,
-    variant: variant,
-    selected: selected,
-    type: 'button',
-    disabled: disabled,
-    $disabled: disabled,
-    sx: sx,
-    ...props,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
-  });
-};
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseIconToggleButton, {
+  ref: ref,
+  icon: Icon,
+  size: size,
+  variant: variant,
+  selected: selected,
+  type: 'button',
+  disabled: disabled,
+  $disabled: disabled,
+  sx: sx,
+  ...props,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
+});
 const BaseIconToggleButton = styled(UnstyledButton)(({
   $disabled,
   theme
@@ -103,5 +103,6 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
     }
   }
 }), sx);
+var index = /*#__PURE__*/forwardRef(IconToggleButton);
 
-export { IconToggleButton as default };
+export { index as default };

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.29.0",
+  "version": "2.30.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 @@
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
     "@teamturing/icons": "^1.41.0",
-    "@teamturing/token-studio": "^1.6.0",
+    "@teamturing/token-studio": "^1.7.0",
     "@teamturing/utils": "^1.3.0",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "b7418ad2dcfc8309263758233b2711bac6812586"
+  "gitHead": "d479f2b970e8e83acae103090b2429e996699433"
 }