@teamturing/react-kit 2.45.2 → 2.45.4

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

@@ -1124,6 +1124,17 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+const SvgAHorizontalLine = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M2 3a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1ZM2 21a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1ZM8.203 18c.526 0 .99-.344 1.147-.85l.594-1.918h4.123l.595 1.922c.156.503.618.846 1.141.846.815 0 1.391-.803 1.136-1.582L14 7.453A2.103 2.103 0 0 0 12.005 6c-.906 0-1.71.585-1.995 1.45l-2.948 8.958A1.21 1.21 0 0 0 8.202 18Zm2.34-4.707 1.423-4.591h.079l1.424 4.59h-2.927Z"
+}));
+
 const SvgAInCircleFilled = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -1141,6 +1152,17 @@ const SvgAInCircleFilled = props => /*#__PURE__*/React__namespace.createElement(
   d: "M8.431 17.573c.516 0 .971-.335 1.125-.827l.582-1.866h4.04l.583 1.87a1.172 1.172 0 1 0 2.23-.716l-2.879-8.72a2.06 2.06 0 0 0-3.91-.003l-2.889 8.713a1.178 1.178 0 0 0 1.118 1.549Zm2.293-4.58 1.395-4.465h.077l1.395 4.466h-2.867Z"
 })));
 
+const SvgAVertialLine = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M8.203 18c.526 0 .99-.344 1.147-.85l.594-1.918h4.123l.595 1.922c.156.503.618.846 1.141.846.815 0 1.391-.803 1.136-1.582L14 7.453A2.103 2.103 0 0 0 12.005 6c-.906 0-1.71.585-1.995 1.45l-2.948 8.958A1.21 1.21 0 0 0 8.202 18Zm2.34-4.707 1.423-4.591h.079l1.424 4.59h-2.927ZM3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1ZM21 22a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v18a1 1 0 0 1-1 1Z"
+}));
+
 const SvgAi = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -1483,6 +1505,17 @@ const SvgBox = props => /*#__PURE__*/React__namespace.createElement("svg", _exte
   d: "M0 0h24v24H0z"
 }))));
 
+const SvgBoxPlus = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M11.261 4.107a1.2 1.2 0 0 1 0 2.4H5.275a.3.3 0 0 0-.3.3V18.78a.3.3 0 0 0 .3.301h11.971c.166 0 .301-.135.301-.3v-5.986a1.2 1.2 0 1 1 2.4 0v5.985a2.7 2.7 0 0 1-2.7 2.7H5.274a2.7 2.7 0 0 1-2.7-2.7V6.808a2.7 2.7 0 0 1 2.7-2.7h5.986ZM18.755.855a1.2 1.2 0 0 1 1.198 1.2l-.003 2.052H22a1.2 1.2 0 0 1 0 2.4h-2.052l-.003 2.054a1.201 1.201 0 0 1-2.4-.003l.002-2.05h-2.053a1.2 1.2 0 0 1 0-2.4h2.056l.003-2.055A1.2 1.2 0 0 1 18.755.855Z"
+}));
+
 const SvgBusColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -2159,6 +2192,26 @@ const SvgCoupon = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   clipRule: "evenodd"
 }));
 
+const SvgCrop = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("g", {
+  clipPath: "url(#crop_svg__a)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M5.778.8a1.2 1.2 0 0 1 1.2 1.2v2.578h9.744a2.7 2.7 0 0 1 2.7 2.7v9.744H22a1.2 1.2 0 0 1 0 2.4h-2.578v2.58a1.2 1.2 0 0 1-2.4 0v-2.58H7.278a2.7 2.7 0 0 1-2.7-2.7V6.979H1.998a1.2 1.2 0 0 1 0-2.4h2.578v-2.58a1.2 1.2 0 0 1 1.2-1.2Zm1.2 15.922a.3.3 0 0 0 .3.3h9.744V7.279a.3.3 0 0 0-.3-.3H6.978v9.743Z",
+  clipRule: "evenodd"
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "crop_svg__a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+
 const SvgCrown = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -2233,6 +2286,24 @@ const SvgCurriculumColor = props => /*#__PURE__*/React__namespace.createElement(
   d: "M0 .5h32v32H0z"
 }))));
 
+const SvgCursor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("g", {
+  clipPath: "url(#cursor_svg__a)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M4.199 3.485c-.089-1.248 1.299-2.05 2.335-1.349l14.9 10.077c1.047.708.796 2.294-.375 2.669l-.115.033-7.113 1.703a1.5 1.5 0 0 0-.739.427L8.06 22.353l-.086.084c-.91.826-2.409.25-2.499-1.01L4.2 3.485Zm3.524 15.734 3.628-3.825.201-.198A3.9 3.9 0 0 1 13 14.36l.272-.075 5.125-1.229L6.724 5.162l1 14.057Z"
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "cursor_svg__a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+
 const SvgDelete = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -2629,6 +2700,19 @@ const SvgGlasses = props => /*#__PURE__*/React__namespace.createElement("svg", _
   clipRule: "evenodd"
 }));
 
+const SvgGlobal = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5ZM9.024 13c.112 2.247.591 4.188 1.247 5.564C11.091 20.29 11.835 20.5 12 20.5c.164 0 .908-.21 1.73-1.936.655-1.376 1.134-3.317 1.246-5.564H9.024Zm-5.463 0a8.505 8.505 0 0 0 5.102 6.82c-.91-1.714-1.519-4.118-1.64-6.82H3.56Zm13.416 0c-.121 2.702-.731 5.106-1.641 6.82A8.505 8.505 0 0 0 20.439 13h-3.462ZM8.663 4.18A8.506 8.506 0 0 0 3.561 11h3.461c.122-2.702.73-5.107 1.641-6.82ZM12 3.5c-.164 0-.908.21-1.73 1.936C9.616 6.812 9.136 8.753 9.024 11h5.952c-.112-2.247-.591-4.188-1.247-5.564C12.909 3.71 12.165 3.5 12 3.5Zm3.336.68c.91 1.713 1.52 4.117 1.641 6.82h3.462a8.506 8.506 0 0 0-5.103-6.82Z",
+  clipRule: "evenodd"
+}));
+
 const SvgGoogleColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -2794,6 +2878,22 @@ const SvgKor = props => /*#__PURE__*/React__namespace.createElement("svg", _exte
   d: "M13.902 6.822v10.357a1.021 1.021 0 0 0 2.043 0V12.2h.761a.894.894 0 1 0 0-1.788h-.761v-3.59a1.021 1.021 0 1 0-2.043 0ZM8.022 15.776c3.188-1.833 4.52-4.486 4.762-7.528.054-.68-.502-1.219-1.162-1.219H7.755a.887.887 0 0 0 0 1.775h2.981c-.318 2.232-1.502 3.905-3.644 5.21-.501.305-.677.98-.325 1.475a.958.958 0 0 0 1.255.287Z"
 }));
 
+const SvgLandscapeArrow = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M23 16.5a3.5 3.5 0 0 1-3.5 3.5h-15A3.5 3.5 0 0 1 1 16.5v-9A3.5 3.5 0 0 1 4.5 4h15A3.5 3.5 0 0 1 23 7.5v9Zm-2.5-9a1 1 0 0 0-1-1h-15l-.103.005a1 1 0 0 0-.892.892L3.5 7.5v9l.005.102a1 1 0 0 0 .995.898h15a1 1 0 0 0 1-1v-9Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M18.791 11.368a.88.88 0 0 1 0 1.264l-2.403 2.404a.922.922 0 0 1-.277.197.861.861 0 0 1-.355.07.862.862 0 0 1-.355-.07.922.922 0 0 1-.277-.197.88.88 0 0 1 0-1.265l.87-.87H8.006l.87.87a.88.88 0 0 1 0 1.265.922.922 0 0 1-.277.197.861.861 0 0 1-.354.07.862.862 0 0 1-.356-.07.922.922 0 0 1-.277-.197l-2.403-2.404a.88.88 0 0 1 0-1.264l2.403-2.404a.88.88 0 0 1 1.264 0 .88.88 0 0 1 0 1.266l-.87.87h7.988l-.87-.87a.88.88 0 0 1 0-1.266.88.88 0 0 1 1.264 0l2.403 2.404Z"
+}));
+
 const SvgLeague = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -3135,6 +3235,17 @@ const SvgMoneybagColor = props => /*#__PURE__*/React__namespace.createElement("s
   d: "M16.1 13.6c.3 0 .6.3.6.6s-.3.6-.6.6h-1.5l-.4 1.4c-.1.2-.3.4-.6.4s-.5-.2-.6-.4l-.8-2.2-.8 2.2c-.1.2-.3.4-.6.4s-.5-.1-.6-.4l-.4-1.4H8.3c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h1.1L9 12.2c-.1-.4.1-.7.4-.8.4-.1.7.1.8.4l.5 2.3.8-2c.1-.2.3-.4.6-.4s.5.2.6.4l.8 2 .7-2.3c.1-.3.5-.5.8-.4.3.1.5.5.4.8l-.4 1.4h1.1Z"
 }));
 
+const SvgMoon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M7.78 2.059c.433-.22.885.214.772.686a10.567 10.567 0 0 0-.287 2.453c0 5.82 4.718 10.537 10.537 10.537.845 0 1.666-.1 2.453-.288.472-.112.906.34.686.773A10.536 10.536 0 0 1 12.537 22C6.717 22 2 17.282 2 11.463 2 7.355 4.35 3.797 7.78 2.06Z"
+}));
+
 const SvgMore = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -3751,6 +3862,22 @@ const SvgPointInCircleColor = props => /*#__PURE__*/React__namespace.createEleme
   d: "M0 0h24v24H0z"
 }))));
 
+const SvgPortraitArrow = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M16.5 1A3.5 3.5 0 0 1 20 4.5v15a3.5 3.5 0 0 1-3.5 3.5h-9A3.5 3.5 0 0 1 4 19.5v-15A3.5 3.5 0 0 1 7.5 1h9Zm-9 2.5a1 1 0 0 0-1 1v15l.005.102a1 1 0 0 0 .892.893l.103.005h9l.102-.005a1 1 0 0 0 .898-.995v-15a1 1 0 0 0-1-1h-9Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M11.368 5.208a.88.88 0 0 1 1.264 0l2.404 2.404a.922.922 0 0 1 .197.277c.05.112.07.23.07.355 0 .125-.02.243-.07.355-.05.11-.12.2-.197.277a.88.88 0 0 1-1.265 0l-.87-.87v7.988l.87-.87a.88.88 0 0 1 1.265 0 .922.922 0 0 1 .197.277c.05.111.07.23.07.354 0 .125-.02.244-.07.356-.05.11-.12.2-.197.277l-2.404 2.403a.88.88 0 0 1-1.264 0l-2.404-2.403a.88.88 0 0 1 0-1.265.88.88 0 0 1 1.266 0l.87.87V8.007l-.87.87a.88.88 0 0 1-1.266 0 .88.88 0 0 1 0-1.264l2.404-2.404Z"
+}));
+
 const SvgPresent = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4296,6 +4423,22 @@ const SvgSoundOn = props => /*#__PURE__*/React__namespace.createElement("svg", _
   clipRule: "evenodd"
 }));
 
+const SvgSoundPaper = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M19.5 22a1.001 1.001 0 0 0 1-1V9.5h-5A2.503 2.503 0 0 1 13 7V2H4.5a1.001 1.001 0 0 0-1 1v18a1.001 1.001 0 0 0 1 1h15Zm-7.3-3.25a1 1 0 0 1-1-1v-7a1 1 0 0 1 2 0v7a1 1 0 0 1-1 1Zm-4-2a1 1 0 0 1-1-1v-3.5a1 1 0 0 1 2 0v3.5c0 .552-.448 1-1 1Zm7.5 0a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2c0 .552-.448 1-1 1Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M14.5 2v5a.999.999 0 0 0 1 1h5l-6-6Z"
+}));
+
 const SvgSpeaker = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4373,6 +4516,17 @@ const SvgStore = props => /*#__PURE__*/React__namespace.createElement("svg", _ex
   clipRule: "evenodd"
 }));
 
+const SvgSun = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M16.815 12a4.815 4.815 0 1 1-9.63 0 4.815 4.815 0 0 1 9.63 0ZM10.889 3.111a1.111 1.111 0 0 1 2.222 0v1.482a1.111 1.111 0 1 1-2.222 0V3.11ZM10.889 19.407a1.111 1.111 0 1 1 2.222 0v1.482a1.111 1.111 0 1 1-2.222 0v-1.482ZM3.111 13.111a1.111 1.111 0 0 1 0-2.222h1.482a1.111 1.111 0 0 1 0 2.222H3.11ZM19.407 13.111a1.111 1.111 0 0 1 0-2.222h1.482a1.111 1.111 0 0 1 0 2.222h-1.482ZM4.929 6.5A1.111 1.111 0 0 1 6.5 4.93l1.048 1.047a1.111 1.111 0 1 1-1.572 1.571L4.93 6.501ZM16.452 18.024a1.111 1.111 0 0 1 1.572-1.572L19.07 17.5A1.111 1.111 0 0 1 17.5 19.07l-1.048-1.047ZM6.5 19.071A1.111 1.111 0 0 1 4.93 17.5l1.047-1.048a1.111 1.111 0 0 1 1.571 1.572L6.501 19.07ZM18.024 7.548a1.111 1.111 0 0 1-1.572-1.572L17.5 4.93A1.111 1.111 0 0 1 19.07 6.5l-1.047 1.048Z"
+}));
+
 const SvgSync = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4901,7 +5055,9 @@ const SvgYoutube = props => /*#__PURE__*/React__namespace.createElement("svg", _
 
 var icons = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  AHorizontalLineIcon: SvgAHorizontalLine,
   AInCircleFilledIcon: SvgAInCircleFilled,
+  AVertialLineIcon: SvgAVertialLine,
   AiColorIcon: SvgAiColor,
   AiIcon: SvgAi,
   AiSadIcon: SvgAiSad,
@@ -4926,6 +5082,7 @@ var icons = /*#__PURE__*/Object.freeze({
   BookmarkAnimationIcon: SvgBookmarkAnimation,
   BookmarkIcon: SvgBookmark,
   BoxIcon: SvgBox,
+  BoxPlusIcon: SvgBoxPlus,
   BusColorIcon: SvgBusColor,
   CalendarCheckColorIcon: SvgCalendarCheckColor,
   CalendarCheckIcon: SvgCalendarCheck,
@@ -4969,9 +5126,11 @@ var icons = /*#__PURE__*/Object.freeze({
   CopyIcon: SvgCopy,
   CorrectIcon: SvgCorrect,
   CouponIcon: SvgCoupon,
+  CropIcon: SvgCrop,
   CrownIcon: SvgCrown,
   CurriculumColorIcon: SvgCurriculumColor,
   CurriculumIcon: SvgCurriculum,
+  CursorIcon: SvgCursor,
   DeleteIcon: SvgDelete,
   DocumentIcon: SvgDocument,
   DotsIcon: SvgDots,
@@ -5000,6 +5159,7 @@ var icons = /*#__PURE__*/Object.freeze({
   FolderIcon: SvgFolder,
   FrameIcon: SvgFrame,
   GlassesIcon: SvgGlasses,
+  GlobalIcon: SvgGlobal,
   GoogleColorIcon: SvgGoogleColor,
   GraphIcon: SvgGraph,
   HairIcon: SvgHair,
@@ -5011,6 +5171,7 @@ var icons = /*#__PURE__*/Object.freeze({
   InstagramIcon: SvgInstagram,
   KakaoColorIcon: SvgKakaoColor,
   KorIcon: SvgKor,
+  LandscapeArrowIcon: SvgLandscapeArrow,
   LeagueIcon: SvgLeague,
   LetterCrownColorIcon: SvgLetterCrownColor,
   LetterCrownOpenColorIcon: SvgLetterCrownOpenColor,
@@ -5032,6 +5193,7 @@ var icons = /*#__PURE__*/Object.freeze({
   MinusInCircleIcon: SvgMinusInCircle,
   MoneybagColorIcon: SvgMoneybagColor,
   MoneybagIcon: SvgMoneybag,
+  MoonIcon: SvgMoon,
   MoreIcon: SvgMore,
   MyBubbleIcon: SvgMyBubble,
   NaverColorIcon: SvgNaverColor,
@@ -5068,6 +5230,7 @@ var icons = /*#__PURE__*/Object.freeze({
   PlusInCircleIcon: SvgPlusInCircle,
   PointInCircleColorIcon: SvgPointInCircleColor,
   PointInCircleIcon: SvgPointInCircle,
+  PortraitArrowIcon: SvgPortraitArrow,
   PresentColorIcon: SvgPresentColor,
   PresentIcon: SvgPresent,
   PrintIcon: SvgPrint,
@@ -5096,11 +5259,13 @@ var icons = /*#__PURE__*/Object.freeze({
   SkipforwardIcon: SvgSkipforward,
   SoundOffIcon: SvgSoundOff,
   SoundOnIcon: SvgSoundOn,
+  SoundPaperIcon: SvgSoundPaper,
   SpeakerIcon: SvgSpeaker,
   StackupIcon: SvgStackup,
   StarColorIcon: SvgStarColor,
   StarIcon: SvgStar,
   StoreIcon: SvgStore,
+  SunIcon: SvgSun,
   SyncIcon: SvgSync,
   TestUploadColorIcon: SvgTestUploadColor,
   ThumbdownIcon: SvgThumbdown,
@@ -7074,6 +7239,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 +7249,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 +7261,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 +7271,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 +7295,7 @@ const ActionListItem = ({
         })]
       })
     }), /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
+      className: 'action_list_item__content__trailing_visual',
       display: 'inline-flex',
       flexShrink: 0,
       sx: {
@@ -7307,11 +7480,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 +7510,7 @@ const ActionListSectionDivider = ({
   width = 1,
   sx
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionDivider, {
+  className: 'action_list_section_divider',
   color: color,
   variant: variant,
   width: width,
@@ -7349,6 +7525,7 @@ const ActionListSectionHeader = ({
   ...props
 }) => {
   return /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionHeader, {
+    className: 'action_list_setion_header',
     role: 'presentation',
     ...props
   });
@@ -7388,6 +7565,7 @@ const ActionList = ({
       onSelect
     },
     children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
+      className: 'action_list',
       role: 'menu',
       ...props
     })
@@ -17173,7 +17351,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 +17368,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
         justifyContent: 'center'
       },
       children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseSpinner, {
+        className: 'button__spinner',
         size: size,
         variant: variant
       })
@@ -17681,7 +17864,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 +35458,7 @@ const TextInput = ({
   leadingVisual: LeadingVisual,
   trailingVisual: TrailingVisual,
   trailingAction,
+  sx,
   ...props
 }, ref) => {
   const theme = styled.useTheme();
@@ -35285,6 +35473,7 @@ const TextInput = ({
     hasTrailingVisual: !isNullable(TrailingVisual),
     hasTrailingAction: !isNullable(trailingAction),
     validationStatus: validationStatus,
+    sx: sx,
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
       sx: {
         'flexShrink': 0,
@@ -35298,8 +35487,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,6 +35514,7 @@ 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: trailingAction.props.disabled || disabled
       }) : null]
@@ -35448,6 +35640,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 +38136,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 +38161,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]
   });
 };
@@ -39019,6 +39220,7 @@ const shade = {
   white: '#FFFFFF',
   white10A: '#FFFFFF1A',
   black: '#000000',
+  darkGray: '#202124',
   black60A: '#00000099'
 };
 const fuchsiaPink = {

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,6 +73,7 @@ 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: 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/esm/packages/icons/esm/AHorizontalLine.js

@@ -0,0 +1,15 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgAHorizontalLine = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M2 3a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1ZM2 21a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1ZM8.203 18c.526 0 .99-.344 1.147-.85l.594-1.918h4.123l.595 1.922c.156.503.618.846 1.141.846.815 0 1.391-.803 1.136-1.582L14 7.453A2.103 2.103 0 0 0 12.005 6c-.906 0-1.71.585-1.995 1.45l-2.948 8.958A1.21 1.21 0 0 0 8.202 18Zm2.34-4.707 1.423-4.591h.079l1.424 4.59h-2.927Z"
+}));
+
+export { SvgAHorizontalLine as default };

package/esm/packages/icons/esm/AVertialLine.js

@@ -0,0 +1,15 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgAVertialLine = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M8.203 18c.526 0 .99-.344 1.147-.85l.594-1.918h4.123l.595 1.922c.156.503.618.846 1.141.846.815 0 1.391-.803 1.136-1.582L14 7.453A2.103 2.103 0 0 0 12.005 6c-.906 0-1.71.585-1.995 1.45l-2.948 8.958A1.21 1.21 0 0 0 8.202 18Zm2.34-4.707 1.423-4.591h.079l1.424 4.59h-2.927ZM3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1ZM21 22a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v18a1 1 0 0 1-1 1Z"
+}));
+
+export { SvgAVertialLine as default };

package/esm/packages/icons/esm/BoxPlus.js

@@ -0,0 +1,15 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgBoxPlus = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M11.261 4.107a1.2 1.2 0 0 1 0 2.4H5.275a.3.3 0 0 0-.3.3V18.78a.3.3 0 0 0 .3.301h11.971c.166 0 .301-.135.301-.3v-5.986a1.2 1.2 0 1 1 2.4 0v5.985a2.7 2.7 0 0 1-2.7 2.7H5.274a2.7 2.7 0 0 1-2.7-2.7V6.808a2.7 2.7 0 0 1 2.7-2.7h5.986ZM18.755.855a1.2 1.2 0 0 1 1.198 1.2l-.003 2.052H22a1.2 1.2 0 0 1 0 2.4h-2.052l-.003 2.054a1.201 1.201 0 0 1-2.4-.003l.002-2.05h-2.053a1.2 1.2 0 0 1 0-2.4h2.056l.003-2.055A1.2 1.2 0 0 1 18.755.855Z"
+}));
+
+export { SvgBoxPlus as default };

package/esm/packages/icons/esm/Crop.js

@@ -0,0 +1,24 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgCrop = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#crop_svg__a)"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M5.778.8a1.2 1.2 0 0 1 1.2 1.2v2.578h9.744a2.7 2.7 0 0 1 2.7 2.7v9.744H22a1.2 1.2 0 0 1 0 2.4h-2.578v2.58a1.2 1.2 0 0 1-2.4 0v-2.58H7.278a2.7 2.7 0 0 1-2.7-2.7V6.979H1.998a1.2 1.2 0 0 1 0-2.4h2.578v-2.58a1.2 1.2 0 0 1 1.2-1.2Zm1.2 15.922a.3.3 0 0 0 .3.3h9.744V7.279a.3.3 0 0 0-.3-.3H6.978v9.743Z",
+  clipRule: "evenodd"
+})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "crop_svg__a"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+
+export { SvgCrop as default };

package/esm/packages/icons/esm/Cursor.js

@@ -0,0 +1,22 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgCursor = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("g", {
+  clipPath: "url(#cursor_svg__a)"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M4.199 3.485c-.089-1.248 1.299-2.05 2.335-1.349l14.9 10.077c1.047.708.796 2.294-.375 2.669l-.115.033-7.113 1.703a1.5 1.5 0 0 0-.739.427L8.06 22.353l-.086.084c-.91.826-2.409.25-2.499-1.01L4.2 3.485Zm3.524 15.734 3.628-3.825.201-.198A3.9 3.9 0 0 1 13 14.36l.272-.075 5.125-1.229L6.724 5.162l1 14.057Z"
+})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  id: "cursor_svg__a"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+
+export { SvgCursor as default };

package/esm/packages/icons/esm/Global.js

@@ -0,0 +1,17 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgGlobal = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M12 1.5c5.799 0 10.5 4.701 10.5 10.5S17.799 22.5 12 22.5 1.5 17.799 1.5 12 6.201 1.5 12 1.5ZM9.024 13c.112 2.247.591 4.188 1.247 5.564C11.091 20.29 11.835 20.5 12 20.5c.164 0 .908-.21 1.73-1.936.655-1.376 1.134-3.317 1.246-5.564H9.024Zm-5.463 0a8.505 8.505 0 0 0 5.102 6.82c-.91-1.714-1.519-4.118-1.64-6.82H3.56Zm13.416 0c-.121 2.702-.731 5.106-1.641 6.82A8.505 8.505 0 0 0 20.439 13h-3.462ZM8.663 4.18A8.506 8.506 0 0 0 3.561 11h3.461c.122-2.702.73-5.107 1.641-6.82ZM12 3.5c-.164 0-.908.21-1.73 1.936C9.616 6.812 9.136 8.753 9.024 11h5.952c-.112-2.247-.591-4.188-1.247-5.564C12.909 3.71 12.165 3.5 12 3.5Zm3.336.68c.91 1.713 1.52 4.117 1.641 6.82h3.462a8.506 8.506 0 0 0-5.103-6.82Z",
+  clipRule: "evenodd"
+}));
+
+export { SvgGlobal as default };

package/esm/packages/icons/esm/LandscapeArrow.js

@@ -0,0 +1,20 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgLandscapeArrow = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M23 16.5a3.5 3.5 0 0 1-3.5 3.5h-15A3.5 3.5 0 0 1 1 16.5v-9A3.5 3.5 0 0 1 4.5 4h15A3.5 3.5 0 0 1 23 7.5v9Zm-2.5-9a1 1 0 0 0-1-1h-15l-.103.005a1 1 0 0 0-.892.892L3.5 7.5v9l.005.102a1 1 0 0 0 .995.898h15a1 1 0 0 0 1-1v-9Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M18.791 11.368a.88.88 0 0 1 0 1.264l-2.403 2.404a.922.922 0 0 1-.277.197.861.861 0 0 1-.355.07.862.862 0 0 1-.355-.07.922.922 0 0 1-.277-.197.88.88 0 0 1 0-1.265l.87-.87H8.006l.87.87a.88.88 0 0 1 0 1.265.922.922 0 0 1-.277.197.861.861 0 0 1-.354.07.862.862 0 0 1-.356-.07.922.922 0 0 1-.277-.197l-2.403-2.404a.88.88 0 0 1 0-1.264l2.403-2.404a.88.88 0 0 1 1.264 0 .88.88 0 0 1 0 1.266l-.87.87h7.988l-.87-.87a.88.88 0 0 1 0-1.266.88.88 0 0 1 1.264 0l2.403 2.404Z"
+}));
+
+export { SvgLandscapeArrow as default };

package/esm/packages/icons/esm/Moon.js

@@ -0,0 +1,15 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgMoon = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M7.78 2.059c.433-.22.885.214.772.686a10.567 10.567 0 0 0-.287 2.453c0 5.82 4.718 10.537 10.537 10.537.845 0 1.666-.1 2.453-.288.472-.112.906.34.686.773A10.536 10.536 0 0 1 12.537 22C6.717 22 2 17.282 2 11.463 2 7.355 4.35 3.797 7.78 2.06Z"
+}));
+
+export { SvgMoon as default };

package/esm/packages/icons/esm/PortraitArrow.js

@@ -0,0 +1,20 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgPortraitArrow = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M16.5 1A3.5 3.5 0 0 1 20 4.5v15a3.5 3.5 0 0 1-3.5 3.5h-9A3.5 3.5 0 0 1 4 19.5v-15A3.5 3.5 0 0 1 7.5 1h9Zm-9 2.5a1 1 0 0 0-1 1v15l.005.102a1 1 0 0 0 .892.893l.103.005h9l.102-.005a1 1 0 0 0 .898-.995v-15a1 1 0 0 0-1-1h-9Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M11.368 5.208a.88.88 0 0 1 1.264 0l2.404 2.404a.922.922 0 0 1 .197.277c.05.112.07.23.07.355 0 .125-.02.243-.07.355-.05.11-.12.2-.197.277a.88.88 0 0 1-1.265 0l-.87-.87v7.988l.87-.87a.88.88 0 0 1 1.265 0 .922.922 0 0 1 .197.277c.05.111.07.23.07.354 0 .125-.02.244-.07.356-.05.11-.12.2-.197.277l-2.404 2.403a.88.88 0 0 1-1.264 0l-2.404-2.403a.88.88 0 0 1 0-1.265.88.88 0 0 1 1.266 0l.87.87V8.007l-.87.87a.88.88 0 0 1-1.266 0 .88.88 0 0 1 0-1.264l2.404-2.404Z"
+}));
+
+export { SvgPortraitArrow as default };

package/esm/packages/icons/esm/SoundPaper.js

@@ -0,0 +1,20 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgSoundPaper = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M19.5 22a1.001 1.001 0 0 0 1-1V9.5h-5A2.503 2.503 0 0 1 13 7V2H4.5a1.001 1.001 0 0 0-1 1v18a1.001 1.001 0 0 0 1 1h15Zm-7.3-3.25a1 1 0 0 1-1-1v-7a1 1 0 0 1 2 0v7a1 1 0 0 1-1 1Zm-4-2a1 1 0 0 1-1-1v-3.5a1 1 0 0 1 2 0v3.5c0 .552-.448 1-1 1Zm7.5 0a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2c0 .552-.448 1-1 1Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M14.5 2v5a.999.999 0 0 0 1 1h5l-6-6Z"
+}));
+
+export { SvgSoundPaper as default };

package/esm/packages/icons/esm/Sun.js

@@ -0,0 +1,15 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgSun = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M16.815 12a4.815 4.815 0 1 1-9.63 0 4.815 4.815 0 0 1 9.63 0ZM10.889 3.111a1.111 1.111 0 0 1 2.222 0v1.482a1.111 1.111 0 1 1-2.222 0V3.11ZM10.889 19.407a1.111 1.111 0 1 1 2.222 0v1.482a1.111 1.111 0 1 1-2.222 0v-1.482ZM3.111 13.111a1.111 1.111 0 0 1 0-2.222h1.482a1.111 1.111 0 0 1 0 2.222H3.11ZM19.407 13.111a1.111 1.111 0 0 1 0-2.222h1.482a1.111 1.111 0 0 1 0 2.222h-1.482ZM4.929 6.5A1.111 1.111 0 0 1 6.5 4.93l1.048 1.047a1.111 1.111 0 1 1-1.572 1.571L4.93 6.501ZM16.452 18.024a1.111 1.111 0 0 1 1.572-1.572L19.07 17.5A1.111 1.111 0 0 1 17.5 19.07l-1.048-1.047ZM6.5 19.071A1.111 1.111 0 0 1 4.93 17.5l1.047-1.048a1.111 1.111 0 0 1 1.571 1.572L6.501 19.07ZM18.024 7.548a1.111 1.111 0 0 1-1.572-1.572L17.5 4.93A1.111 1.111 0 0 1 19.07 6.5l-1.047 1.048Z"
+}));
+
+export { SvgSun as default };

package/esm/packages/icons/esm/index.js

@@ -1,4 +1,6 @@
+export { default as AHorizontalLineIcon } from './AHorizontalLine.js';
 export { default as AInCircleFilledIcon } from './AInCircleFilled.js';
+export { default as AVertialLineIcon } from './AVertialLine.js';
 export { default as AiIcon } from './Ai.js';
 export { default as AiColorIcon } from './AiColor.js';
 export { default as AiSadIcon } from './AiSad.js';
@@ -23,6 +25,7 @@ export { default as BookColorIcon } from './BookColor.js';
 export { default as BookmarkIcon } from './Bookmark.js';
 export { default as BookmarkAnimationIcon } from './BookmarkAnimation.js';
 export { default as BoxIcon } from './Box.js';
+export { default as BoxPlusIcon } from './BoxPlus.js';
 export { default as BusColorIcon } from './BusColor.js';
 export { default as CalendarIcon } from './Calendar.js';
 export { default as CalendarCheckIcon } from './CalendarCheck.js';
@@ -66,9 +69,11 @@ export { default as ContactIcon } from './Contact.js';
 export { default as CopyIcon } from './Copy.js';
 export { default as CorrectIcon } from './Correct.js';
 export { default as CouponIcon } from './Coupon.js';
+export { default as CropIcon } from './Crop.js';
 export { default as CrownIcon } from './Crown.js';
 export { default as CurriculumIcon } from './Curriculum.js';
 export { default as CurriculumColorIcon } from './CurriculumColor.js';
+export { default as CursorIcon } from './Cursor.js';
 export { default as DeleteIcon } from './Delete.js';
 export { default as DocumentIcon } from './Document.js';
 export { default as DotsIcon } from './Dots.js';
@@ -97,6 +102,7 @@ export { default as FlagIcon } from './Flag.js';
 export { default as FolderIcon } from './Folder.js';
 export { default as FrameIcon } from './Frame.js';
 export { default as GlassesIcon } from './Glasses.js';
+export { default as GlobalIcon } from './Global.js';
 export { default as GoogleColorIcon } from './GoogleColor.js';
 export { default as GraphIcon } from './Graph.js';
 export { default as HairIcon } from './Hair.js';
@@ -108,6 +114,7 @@ export { default as InfoInCircleIcon } from './InfoInCircle.js';
 export { default as InstagramIcon } from './Instagram.js';
 export { default as KakaoColorIcon } from './KakaoColor.js';
 export { default as KorIcon } from './Kor.js';
+export { default as LandscapeArrowIcon } from './LandscapeArrow.js';
 export { default as LeagueIcon } from './League.js';
 export { default as LetterIcon } from './Letter.js';
 export { default as LetterCrownColorIcon } from './LetterCrownColor.js';
@@ -129,6 +136,7 @@ export { default as MinusIcon } from './Minus.js';
 export { default as MinusInCircleIcon } from './MinusInCircle.js';
 export { default as MoneybagIcon } from './Moneybag.js';
 export { default as MoneybagColorIcon } from './MoneybagColor.js';
+export { default as MoonIcon } from './Moon.js';
 export { default as MoreIcon } from './More.js';
 export { default as MyBubbleIcon } from './MyBubble.js';
 export { default as NaverColorIcon } from './NaverColor.js';
@@ -165,6 +173,7 @@ export { default as PlusIcon } from './Plus.js';
 export { default as PlusInCircleIcon } from './PlusInCircle.js';
 export { default as PointInCircleIcon } from './PointInCircle.js';
 export { default as PointInCircleColorIcon } from './PointInCircleColor.js';
+export { default as PortraitArrowIcon } from './PortraitArrow.js';
 export { default as PresentIcon } from './Present.js';
 export { default as PresentColorIcon } from './PresentColor.js';
 export { default as PrintIcon } from './Print.js';
@@ -193,11 +202,13 @@ export { default as SkipbackIcon } from './Skipback.js';
 export { default as SkipforwardIcon } from './Skipforward.js';
 export { default as SoundOffIcon } from './SoundOff.js';
 export { default as SoundOnIcon } from './SoundOn.js';
+export { default as SoundPaperIcon } from './SoundPaper.js';
 export { default as SpeakerIcon } from './Speaker.js';
 export { default as StackupIcon } from './Stackup.js';
 export { default as StarIcon } from './Star.js';
 export { default as StarColorIcon } from './StarColor.js';
 export { default as StoreIcon } from './Store.js';
+export { default as SunIcon } from './Sun.js';
 export { default as SyncIcon } from './Sync.js';
 export { default as TestUploadColorIcon } from './TestUploadColor.js';
 export { default as ThumbdownIcon } from './Thumbdown.js';

package/esm/packages/token-studio/esm/foundation/palette/index.js

@@ -75,6 +75,7 @@ const shade = {
   white: '#FFFFFF',
   white10A: '#FFFFFF1A',
   black: '#000000',
+  darkGray: '#202124',
   black60A: '#00000099'
 };
 const fuchsiaPink = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.45.2",
+  "version": "2.45.4",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,8 +55,8 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.53.0",
-    "@teamturing/token-studio": "^1.12.0",
+    "@teamturing/icons": "^1.54.0",
+    "@teamturing/token-studio": "^1.13.0",
     "@teamturing/utils": "^1.5.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": "a7d150262d9dc769e8b83c3ec540325d17018ed8"
+  "gitHead": "6f94c73423d43719257c24a87d7a1a9ec2caf826"
 }