@teamturing/react-kit 2.45.1 → 2.45.3

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

@@ -1,11 +1,12 @@
 import { ColorKey, SurfaceElevationKey } from '@teamturing/token-studio';
+import { HTMLAttributes } from 'react';
 import { BorderColorProps, BorderProps, Theme } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     width?: BorderProps['borderBottomWidth'];
     color?: BorderColorProps<Theme, ColorKey | SurfaceElevationKey>['borderBottomColor'];
     variant?: BorderProps['borderBottomStyle'];
-} & SxProp;
-declare const HorizontalDivider: ({ width, color, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+} & SxProp & Pick<HTMLAttributes<HTMLHRElement>, 'className'>;
+declare const HorizontalDivider: ({ className, width, color, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default HorizontalDivider;
 export type { Props as HorizontalDividerProps };

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

@@ -1,11 +1,11 @@
-import { ComponentType, SVGProps } from 'react';
+import { ComponentType, HTMLAttributes, SVGProps } from 'react';
 import { ViewProps } from '../View';
 type Props = {
     /**
      * @teamturing/icons와 함께 사용
      */
     icon: ComponentType<SVGProps<SVGSVGElement>>;
-} & Pick<ViewProps, 'size' | 'color' | 'sx'>;
+} & Pick<ViewProps, 'size' | 'color' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'>;
 declare const StyledIcon: ({ icon: Icon, sx, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default StyledIcon;
 export type { Props as StyledIconProps };

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

@@ -1,4 +1,5 @@
 import { ElementType, HTMLProps, InputHTMLAttributes, ReactNode } from 'react';
+import { SxProp } from '../../utils/styled-system';
 type Props = {
     /**
      * TODO asdf
@@ -16,7 +17,7 @@ type Props = {
      * 입력 창 뒤에 사용작용할 요소를 정의합니다.
      */
     trailingAction?: React.ReactElement<HTMLProps<HTMLButtonElement>>;
-} & InputHTMLAttributes<HTMLInputElement>;
+} & InputHTMLAttributes<HTMLInputElement> & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     /**
      * TODO asdf
@@ -34,10 +35,10 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 입력 창 뒤에 사용작용할 요소를 정의합니다.
      */
     trailingAction?: import("react").ReactElement<HTMLProps<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>> | undefined;
-} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>> & {
+} & InputHTMLAttributes<HTMLInputElement> & SxProp & import("react").RefAttributes<HTMLInputElement>> & {
     TrailingAction: import("react").ForwardRefExoticComponent<{
         icon: import("react").ComponentType<import("react").SVGProps<SVGSVGElement>>;
-    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../..").SxProp & import("react").RefAttributes<HTMLButtonElement>>;
+    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SxProp & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export default _default;
 export type { Props as TextInputProps };

package/dist/index.js

@@ -7074,6 +7074,7 @@ const ActionListItem = ({
     onFocus: onFocus,
     onBlur: onBlur,
     children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      className: 'action_list_item__selection_wrapper',
       display: 'inline-flex',
       minWidth: 20,
       sx: {
@@ -7083,9 +7084,11 @@ const ActionListItem = ({
         }
       },
       children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+        className: 'action_list_item__selection_wrapper_single',
         icon: SvgCheck,
         size: 20
       }) : null : selectionVariant === 'multiple' ? /*#__PURE__*/jsxRuntimeExports.jsx(FakeCheckbox, {
+        className: 'action_list_item__selection_wrapper_multiple',
         "aria-checked": selected,
         checked: selected,
         onChange: noop$2,
@@ -7093,6 +7096,7 @@ const ActionListItem = ({
         disabled: disabled
       }) : null
     }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
+      className: 'action_list_item__leading_visual',
       display: 'inline-flex',
       flexShrink: 0,
       sx: {
@@ -7102,18 +7106,21 @@ const ActionListItem = ({
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
     }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
       flex: 1,
+      className: 'action_list_item__content',
       children: /*#__PURE__*/jsxRuntimeExports.jsxs(Grid$1, {
         gapX: 2,
         gapY: 0.5,
         wrap: true,
         alignItems: 'center',
         children: [/*#__PURE__*/jsxRuntimeExports.jsx(Grid$1.Unit, {
+          className: 'action_list__content__children',
           size: descriptionLayout === 'inline' ? 'min' : 1,
           sx: {
             fontWeight: description && descriptionLayout === 'block' ? 'bold' : 'medium'
           },
           children: children
         }), /*#__PURE__*/jsxRuntimeExports.jsx(Grid$1.Unit, {
+          className: 'action_list_item__content__description',
           size: descriptionLayout === 'inline' ? 'max' : 1,
           children: /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
             typography: 'xxs/regular',
@@ -7123,6 +7130,7 @@ const ActionListItem = ({
         })]
       })
     }), /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
+      className: 'action_list_item__content__trailing_visual',
       display: 'inline-flex',
       flexShrink: 0,
       sx: {
@@ -7307,11 +7315,13 @@ const FakeCheckbox = styled__default.default.div`
 `;
 
 const HorizontalDivider = ({
+  className,
   width = 1,
   color = 'border/neutral',
   variant = 'solid',
   ...props
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseHorizontalDivider, {
+  className: className,
   borderBottomWidth: width,
   borderBottomStyle: variant,
   borderBottomColor: color,
@@ -7335,6 +7345,7 @@ const ActionListSectionDivider = ({
   width = 1,
   sx
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionDivider, {
+  className: 'action_list_section_divider',
   color: color,
   variant: variant,
   width: width,
@@ -7349,6 +7360,7 @@ const ActionListSectionHeader = ({
   ...props
 }) => {
   return /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionHeader, {
+    className: 'action_list_setion_header',
     role: 'presentation',
     ...props
   });
@@ -7388,6 +7400,7 @@ const ActionList = ({
       onSelect
     },
     children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
+      className: 'action_list',
       role: 'menu',
       ...props
     })
@@ -17173,7 +17186,11 @@ const Button = /*#__PURE__*/React.forwardRef(({
         columnGap: 1,
         visibility: !loading ? 'initial' : 'hidden'
       },
-      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
+      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
+        className: 'button__leading_icon'
+      }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
+        className: 'button__trailing_icon'
+      }) : null]
     }), loading ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
       sx: {
         position: 'absolute',
@@ -17186,6 +17203,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
         justifyContent: 'center'
       },
       children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseSpinner, {
+        className: 'button__spinner',
         size: size,
         variant: variant
       })
@@ -17681,7 +17699,11 @@ const Chip = ({
   variant: variant,
   leadingIcon: LeadingIcon,
   trailingIcon: TrailingIcon,
-  children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
+  children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
+    className: 'chip__leading_icon'
+  }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
+    className: 'chip__trailing_icon'
+  }) : null]
 });
 const BaseChip = styled__default.default.span(({
   theme
@@ -35271,6 +35293,7 @@ const TextInput = ({
   leadingVisual: LeadingVisual,
   trailingVisual: TrailingVisual,
   trailingAction,
+  sx,
   ...props
 }, ref) => {
   const theme = styled.useTheme();
@@ -35285,6 +35308,7 @@ const TextInput = ({
     hasTrailingVisual: !isNullable(TrailingVisual),
     hasTrailingAction: !isNullable(trailingAction),
     validationStatus: validationStatus,
+    sx: sx,
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
       sx: {
         'flexShrink': 0,
@@ -35298,8 +35322,10 @@ const TextInput = ({
           color: theme.colors['icon/neutral/bold']
         }
       },
+      className: 'text_input__leading_visual',
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
     }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
+      className: 'text_input__base_input',
       ref: e => {
         isFunction$1(ref) ? ref(e) : null;
         inputRef.current = e;
@@ -35323,8 +35349,9 @@ const TextInput = ({
           color: theme.colors['icon/neutral/bold']
         }
       },
+      className: 'text_input__trailing_visual',
       children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/React.cloneElement(trailingAction, {
-        disabled: disabled
+        disabled: trailingAction.props.disabled || disabled
       }) : null]
     })]
   });
@@ -35448,6 +35475,8 @@ const TextInputWrapper$1 = styled__default.default.div`
   &:after {
     transition: border-color 100ms;
   }
+
+  ${sx}
 `;
 const UnstyledInput$1 = styled__default.default.input`
   font-size: inherit;
@@ -37942,9 +37971,14 @@ const Pill = ({
     disabled: disabled,
     ...props,
     type: 'button',
-    children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+    children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {
+      className: 'pill__leading_visual'
+    }) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
       children: children
-    }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+    }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {
+      className: 'pill__trailing_visual'
+    }) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: 'pill__remove_button',
       onClick: e => {
         e.preventDefault();
         handleRemoveClick(e);
@@ -37962,7 +37996,9 @@ const Pill = ({
       role: 'button',
       "aria-disabled": disabled,
       tabIndex: disabled ? -1 : 0,
-      children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {
+        className: 'pill__remove_button__icon'
+      })
     }) : null]
   });
 };

package/esm/core/ActionList/ActionListItem.js

@@ -63,6 +63,7 @@ const ActionListItem = ({
     onFocus: onFocus,
     onBlur: onBlur,
     children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      className: 'action_list_item__selection_wrapper',
       display: 'inline-flex',
       minWidth: 20,
       sx: {
@@ -72,9 +73,11 @@ const ActionListItem = ({
         }
       },
       children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+        className: 'action_list_item__selection_wrapper_single',
         icon: SvgCheck,
         size: 20
       }) : null : selectionVariant === 'multiple' ? /*#__PURE__*/jsxRuntimeExports.jsx(FakeCheckbox, {
+        className: 'action_list_item__selection_wrapper_multiple',
         "aria-checked": selected,
         checked: selected,
         onChange: noop,
@@ -82,6 +85,7 @@ const ActionListItem = ({
         disabled: disabled
       }) : null
     }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
+      className: 'action_list_item__leading_visual',
       display: 'inline-flex',
       flexShrink: 0,
       sx: {
@@ -91,18 +95,21 @@ const ActionListItem = ({
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
     }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
       flex: 1,
+      className: 'action_list_item__content',
       children: /*#__PURE__*/jsxRuntimeExports.jsxs(Grid, {
         gapX: 2,
         gapY: 0.5,
         wrap: true,
         alignItems: 'center',
         children: [/*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
+          className: 'action_list__content__children',
           size: descriptionLayout === 'inline' ? 'min' : 1,
           sx: {
             fontWeight: description && descriptionLayout === 'block' ? 'bold' : 'medium'
           },
           children: children
         }), /*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
+          className: 'action_list_item__content__description',
           size: descriptionLayout === 'inline' ? 'max' : 1,
           children: /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
             typography: 'xxs/regular',
@@ -112,6 +119,7 @@ const ActionListItem = ({
         })]
       })
     }), /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
+      className: 'action_list_item__content__trailing_visual',
       display: 'inline-flex',
       flexShrink: 0,
       sx: {

package/esm/core/ActionList/ActionListSectionDivider.js

@@ -7,6 +7,7 @@ const ActionListSectionDivider = ({
   width = 1,
   sx
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionDivider, {
+  className: 'action_list_section_divider',
   color: color,
   variant: variant,
   width: width,

package/esm/core/ActionList/ActionListSectionHeader.js

@@ -7,6 +7,7 @@ const ActionListSectionHeader = ({
   ...props
 }) => {
   return /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionHeader, {
+    className: 'action_list_setion_header',
     role: 'presentation',
     ...props
   });

package/esm/core/ActionList/index.js

@@ -18,6 +18,7 @@ const ActionList = ({
       onSelect
     },
     children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
+      className: 'action_list',
       role: 'menu',
       ...props
     })

package/esm/core/Button/index.js

@@ -40,7 +40,11 @@ const Button = /*#__PURE__*/forwardRef(({
         columnGap: 1,
         visibility: !loading ? 'initial' : 'hidden'
       },
-      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
+      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
+        className: 'button__leading_icon'
+      }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
+        className: 'button__trailing_icon'
+      }) : null]
     }), loading ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
       sx: {
         position: 'absolute',
@@ -53,6 +57,7 @@ const Button = /*#__PURE__*/forwardRef(({
         justifyContent: 'center'
       },
       children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseSpinner, {
+        className: 'button__spinner',
         size: size,
         variant: variant
       })

package/esm/core/Chip/index.js

@@ -17,7 +17,11 @@ const Chip = ({
   variant: variant,
   leadingIcon: LeadingIcon,
   trailingIcon: TrailingIcon,
-  children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
+  children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
+    className: 'chip__leading_icon'
+  }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
+    className: 'chip__trailing_icon'
+  }) : null]
 });
 const BaseChip = styled.span(({
   theme

package/esm/core/HorizontalDivider/index.js

@@ -5,11 +5,13 @@ import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js'
 import { border } from '../../node_modules/@styled-system/border/dist/index.esm.js';
 
 const HorizontalDivider = ({
+  className,
   width = 1,
   color = 'border/neutral',
   variant = 'solid',
   ...props
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseHorizontalDivider, {
+  className: className,
   borderBottomWidth: width,
   borderBottomStyle: variant,
   borderBottomColor: color,

package/esm/core/Pill/index.js

@@ -43,9 +43,14 @@ const Pill = ({
     disabled: disabled,
     ...props,
     type: 'button',
-    children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+    children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {
+      className: 'pill__leading_visual'
+    }) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
       children: children
-    }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+    }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {
+      className: 'pill__trailing_visual'
+    }) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      className: 'pill__remove_button',
       onClick: e => {
         e.preventDefault();
         handleRemoveClick(e);
@@ -63,7 +68,9 @@ const Pill = ({
       role: 'button',
       "aria-disabled": disabled,
       tabIndex: disabled ? -1 : 0,
-      children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {
+        className: 'pill__remove_button__icon'
+      })
     }) : null]
   });
 };

package/esm/core/TextInput/index.js

@@ -5,6 +5,7 @@ import { forwardRef, cloneElement } from 'react';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled, { css, useTheme } from 'styled-components';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { sx } from '../../utils/styled-system/index.js';
 import View from '../View/index.js';
 import TextInputTrailingAction from './TextInputTrailingAction.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -16,6 +17,7 @@ const TextInput = ({
   leadingVisual: LeadingVisual,
   trailingVisual: TrailingVisual,
   trailingAction,
+  sx,
   ...props
 }, ref) => {
   const theme = useTheme();
@@ -30,6 +32,7 @@ const TextInput = ({
     hasTrailingVisual: !isNullable(TrailingVisual),
     hasTrailingAction: !isNullable(trailingAction),
     validationStatus: validationStatus,
+    sx: sx,
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
       sx: {
         'flexShrink': 0,
@@ -43,8 +46,10 @@ const TextInput = ({
           color: theme.colors['icon/neutral/bold']
         }
       },
+      className: 'text_input__leading_visual',
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
     }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+      className: 'text_input__base_input',
       ref: e => {
         isFunction(ref) ? ref(e) : null;
         inputRef.current = e;
@@ -68,8 +73,9 @@ const TextInput = ({
           color: theme.colors['icon/neutral/bold']
         }
       },
+      className: 'text_input__trailing_visual',
       children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/cloneElement(trailingAction, {
-        disabled: disabled
+        disabled: trailingAction.props.disabled || disabled
       }) : null]
     })]
   });
@@ -193,6 +199,8 @@ const TextInputWrapper = styled.div`
   &:after {
     transition: border-color 100ms;
   }
+
+  ${sx}
 `;
 const UnstyledInput = styled.input`
   font-size: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.45.1",
+  "version": "2.45.3",
   "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",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "8746c609ce97b92542bb947460afd508962aa331"
+  "gitHead": "9ac3ab3d90fc93dfdd8124b7d2ba4d5c403896b4"
 }