@teamturing/react-kit 2.45.2 → 2.45.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,12 @@
1
1
  import { ColorKey, SurfaceElevationKey } from '@teamturing/token-studio';
2
+ import { HTMLAttributes } from 'react';
2
3
  import { BorderColorProps, BorderProps, Theme } from 'styled-system';
3
4
  import { SxProp } from '../../utils/styled-system';
4
5
  type Props = {
5
6
  width?: BorderProps['borderBottomWidth'];
6
7
  color?: BorderColorProps<Theme, ColorKey | SurfaceElevationKey>['borderBottomColor'];
7
8
  variant?: BorderProps['borderBottomStyle'];
8
- } & SxProp;
9
- declare const HorizontalDivider: ({ width, color, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
9
+ } & SxProp & Pick<HTMLAttributes<HTMLHRElement>, 'className'>;
10
+ declare const HorizontalDivider: ({ className, width, color, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
10
11
  export default HorizontalDivider;
11
12
  export type { Props as HorizontalDividerProps };
@@ -1,11 +1,11 @@
1
- import { ComponentType, SVGProps } from 'react';
1
+ import { ComponentType, HTMLAttributes, SVGProps } from 'react';
2
2
  import { ViewProps } from '../View';
3
3
  type Props = {
4
4
  /**
5
5
  * @teamturing/icons와 함께 사용
6
6
  */
7
7
  icon: ComponentType<SVGProps<SVGSVGElement>>;
8
- } & Pick<ViewProps, 'size' | 'color' | 'sx'>;
8
+ } & Pick<ViewProps, 'size' | 'color' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'>;
9
9
  declare const StyledIcon: ({ icon: Icon, sx, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
10
10
  export default StyledIcon;
11
11
  export type { Props as StyledIconProps };
@@ -1,4 +1,5 @@
1
1
  import { ElementType, HTMLProps, InputHTMLAttributes, ReactNode } from 'react';
2
+ import { SxProp } from '../../utils/styled-system';
2
3
  type Props = {
3
4
  /**
4
5
  * TODO asdf
@@ -16,7 +17,7 @@ type Props = {
16
17
  * 입력 창 뒤에 사용작용할 요소를 정의합니다.
17
18
  */
18
19
  trailingAction?: React.ReactElement<HTMLProps<HTMLButtonElement>>;
19
- } & InputHTMLAttributes<HTMLInputElement>;
20
+ } & InputHTMLAttributes<HTMLInputElement> & SxProp;
20
21
  declare const _default: import("react").ForwardRefExoticComponent<{
21
22
  /**
22
23
  * TODO asdf
@@ -34,10 +35,10 @@ declare const _default: import("react").ForwardRefExoticComponent<{
34
35
  * 입력 창 뒤에 사용작용할 요소를 정의합니다.
35
36
  */
36
37
  trailingAction?: import("react").ReactElement<HTMLProps<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>> | undefined;
37
- } & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>> & {
38
+ } & InputHTMLAttributes<HTMLInputElement> & SxProp & import("react").RefAttributes<HTMLInputElement>> & {
38
39
  TrailingAction: import("react").ForwardRefExoticComponent<{
39
40
  icon: import("react").ComponentType<import("react").SVGProps<SVGSVGElement>>;
40
- } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../..").SxProp & import("react").RefAttributes<HTMLButtonElement>>;
41
+ } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SxProp & import("react").RefAttributes<HTMLButtonElement>>;
41
42
  };
42
43
  export default _default;
43
44
  export type { Props as TextInputProps };
package/dist/index.js CHANGED
@@ -1124,6 +1124,17 @@ function _extends() {
1124
1124
  return _extends.apply(this, arguments);
1125
1125
  }
1126
1126
 
1127
+ const SvgAHorizontalLine = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
1128
+ xmlns: "http://www.w3.org/2000/svg",
1129
+ width: "1em",
1130
+ height: "1em",
1131
+ fill: "none",
1132
+ viewBox: "0 0 24 24"
1133
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
1134
+ fill: "currentColor",
1135
+ 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"
1136
+ }));
1137
+
1127
1138
  const SvgAInCircleFilled = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
1128
1139
  xmlns: "http://www.w3.org/2000/svg",
1129
1140
  width: "1em",
@@ -1141,6 +1152,17 @@ const SvgAInCircleFilled = props => /*#__PURE__*/React__namespace.createElement(
1141
1152
  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"
1142
1153
  })));
1143
1154
 
1155
+ const SvgAVertialLine = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
1156
+ xmlns: "http://www.w3.org/2000/svg",
1157
+ width: "1em",
1158
+ height: "1em",
1159
+ fill: "none",
1160
+ viewBox: "0 0 24 24"
1161
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
1162
+ fill: "currentColor",
1163
+ 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"
1164
+ }));
1165
+
1144
1166
  const SvgAi = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
1145
1167
  xmlns: "http://www.w3.org/2000/svg",
1146
1168
  width: "1em",
@@ -1483,6 +1505,17 @@ const SvgBox = props => /*#__PURE__*/React__namespace.createElement("svg", _exte
1483
1505
  d: "M0 0h24v24H0z"
1484
1506
  }))));
1485
1507
 
1508
+ const SvgBoxPlus = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
1509
+ xmlns: "http://www.w3.org/2000/svg",
1510
+ width: "1em",
1511
+ height: "1em",
1512
+ fill: "none",
1513
+ viewBox: "0 0 24 24"
1514
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
1515
+ fill: "currentColor",
1516
+ 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"
1517
+ }));
1518
+
1486
1519
  const SvgBusColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
1487
1520
  xmlns: "http://www.w3.org/2000/svg",
1488
1521
  width: "1em",
@@ -2159,6 +2192,26 @@ const SvgCoupon = props => /*#__PURE__*/React__namespace.createElement("svg", _e
2159
2192
  clipRule: "evenodd"
2160
2193
  }));
2161
2194
 
2195
+ const SvgCrop = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2196
+ xmlns: "http://www.w3.org/2000/svg",
2197
+ width: "1em",
2198
+ height: "1em",
2199
+ fill: "none",
2200
+ viewBox: "0 0 24 24"
2201
+ }, props), /*#__PURE__*/React__namespace.createElement("g", {
2202
+ clipPath: "url(#crop_svg__a)"
2203
+ }, /*#__PURE__*/React__namespace.createElement("path", {
2204
+ fill: "currentColor",
2205
+ fillRule: "evenodd",
2206
+ 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",
2207
+ clipRule: "evenodd"
2208
+ })), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
2209
+ id: "crop_svg__a"
2210
+ }, /*#__PURE__*/React__namespace.createElement("path", {
2211
+ fill: "#fff",
2212
+ d: "M0 0h24v24H0z"
2213
+ }))));
2214
+
2162
2215
  const SvgCrown = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2163
2216
  xmlns: "http://www.w3.org/2000/svg",
2164
2217
  width: "1em",
@@ -2233,6 +2286,24 @@ const SvgCurriculumColor = props => /*#__PURE__*/React__namespace.createElement(
2233
2286
  d: "M0 .5h32v32H0z"
2234
2287
  }))));
2235
2288
 
2289
+ const SvgCursor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2290
+ xmlns: "http://www.w3.org/2000/svg",
2291
+ width: "1em",
2292
+ height: "1em",
2293
+ fill: "none",
2294
+ viewBox: "0 0 24 24"
2295
+ }, props), /*#__PURE__*/React__namespace.createElement("g", {
2296
+ clipPath: "url(#cursor_svg__a)"
2297
+ }, /*#__PURE__*/React__namespace.createElement("path", {
2298
+ fill: "currentColor",
2299
+ 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"
2300
+ })), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
2301
+ id: "cursor_svg__a"
2302
+ }, /*#__PURE__*/React__namespace.createElement("path", {
2303
+ fill: "#fff",
2304
+ d: "M0 0h24v24H0z"
2305
+ }))));
2306
+
2236
2307
  const SvgDelete = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2237
2308
  xmlns: "http://www.w3.org/2000/svg",
2238
2309
  width: "1em",
@@ -2629,6 +2700,19 @@ const SvgGlasses = props => /*#__PURE__*/React__namespace.createElement("svg", _
2629
2700
  clipRule: "evenodd"
2630
2701
  }));
2631
2702
 
2703
+ const SvgGlobal = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2704
+ xmlns: "http://www.w3.org/2000/svg",
2705
+ width: "1em",
2706
+ height: "1em",
2707
+ fill: "none",
2708
+ viewBox: "0 0 24 24"
2709
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
2710
+ fill: "currentColor",
2711
+ fillRule: "evenodd",
2712
+ 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",
2713
+ clipRule: "evenodd"
2714
+ }));
2715
+
2632
2716
  const SvgGoogleColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2633
2717
  xmlns: "http://www.w3.org/2000/svg",
2634
2718
  xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -2794,6 +2878,22 @@ const SvgKor = props => /*#__PURE__*/React__namespace.createElement("svg", _exte
2794
2878
  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"
2795
2879
  }));
2796
2880
 
2881
+ const SvgLandscapeArrow = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2882
+ xmlns: "http://www.w3.org/2000/svg",
2883
+ width: "1em",
2884
+ height: "1em",
2885
+ fill: "none",
2886
+ viewBox: "0 0 24 24"
2887
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
2888
+ fill: "currentColor",
2889
+ fillRule: "evenodd",
2890
+ 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",
2891
+ clipRule: "evenodd"
2892
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2893
+ fill: "currentColor",
2894
+ 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"
2895
+ }));
2896
+
2797
2897
  const SvgLeague = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
2798
2898
  xmlns: "http://www.w3.org/2000/svg",
2799
2899
  width: "1em",
@@ -3135,6 +3235,17 @@ const SvgMoneybagColor = props => /*#__PURE__*/React__namespace.createElement("s
3135
3235
  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"
3136
3236
  }));
3137
3237
 
3238
+ const SvgMoon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
3239
+ xmlns: "http://www.w3.org/2000/svg",
3240
+ width: "1em",
3241
+ height: "1em",
3242
+ fill: "none",
3243
+ viewBox: "0 0 24 24"
3244
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
3245
+ fill: "currentColor",
3246
+ 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"
3247
+ }));
3248
+
3138
3249
  const SvgMore = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
3139
3250
  xmlns: "http://www.w3.org/2000/svg",
3140
3251
  width: "1em",
@@ -3751,6 +3862,22 @@ const SvgPointInCircleColor = props => /*#__PURE__*/React__namespace.createEleme
3751
3862
  d: "M0 0h24v24H0z"
3752
3863
  }))));
3753
3864
 
3865
+ const SvgPortraitArrow = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
3866
+ xmlns: "http://www.w3.org/2000/svg",
3867
+ width: "1em",
3868
+ height: "1em",
3869
+ fill: "none",
3870
+ viewBox: "0 0 24 24"
3871
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
3872
+ fill: "currentColor",
3873
+ fillRule: "evenodd",
3874
+ 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",
3875
+ clipRule: "evenodd"
3876
+ }), /*#__PURE__*/React__namespace.createElement("path", {
3877
+ fill: "currentColor",
3878
+ 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"
3879
+ }));
3880
+
3754
3881
  const SvgPresent = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
3755
3882
  xmlns: "http://www.w3.org/2000/svg",
3756
3883
  width: "1em",
@@ -4296,6 +4423,22 @@ const SvgSoundOn = props => /*#__PURE__*/React__namespace.createElement("svg", _
4296
4423
  clipRule: "evenodd"
4297
4424
  }));
4298
4425
 
4426
+ const SvgSoundPaper = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
4427
+ xmlns: "http://www.w3.org/2000/svg",
4428
+ width: "1em",
4429
+ height: "1em",
4430
+ fill: "none",
4431
+ viewBox: "0 0 24 24"
4432
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
4433
+ fill: "currentColor",
4434
+ fillRule: "evenodd",
4435
+ 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",
4436
+ clipRule: "evenodd"
4437
+ }), /*#__PURE__*/React__namespace.createElement("path", {
4438
+ fill: "currentColor",
4439
+ d: "M14.5 2v5a.999.999 0 0 0 1 1h5l-6-6Z"
4440
+ }));
4441
+
4299
4442
  const SvgSpeaker = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
4300
4443
  xmlns: "http://www.w3.org/2000/svg",
4301
4444
  width: "1em",
@@ -4373,6 +4516,17 @@ const SvgStore = props => /*#__PURE__*/React__namespace.createElement("svg", _ex
4373
4516
  clipRule: "evenodd"
4374
4517
  }));
4375
4518
 
4519
+ const SvgSun = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
4520
+ xmlns: "http://www.w3.org/2000/svg",
4521
+ width: "1em",
4522
+ height: "1em",
4523
+ fill: "none",
4524
+ viewBox: "0 0 24 24"
4525
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
4526
+ fill: "currentColor",
4527
+ 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"
4528
+ }));
4529
+
4376
4530
  const SvgSync = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
4377
4531
  xmlns: "http://www.w3.org/2000/svg",
4378
4532
  width: "1em",
@@ -4901,7 +5055,9 @@ const SvgYoutube = props => /*#__PURE__*/React__namespace.createElement("svg", _
4901
5055
 
4902
5056
  var icons = /*#__PURE__*/Object.freeze({
4903
5057
  __proto__: null,
5058
+ AHorizontalLineIcon: SvgAHorizontalLine,
4904
5059
  AInCircleFilledIcon: SvgAInCircleFilled,
5060
+ AVertialLineIcon: SvgAVertialLine,
4905
5061
  AiColorIcon: SvgAiColor,
4906
5062
  AiIcon: SvgAi,
4907
5063
  AiSadIcon: SvgAiSad,
@@ -4926,6 +5082,7 @@ var icons = /*#__PURE__*/Object.freeze({
4926
5082
  BookmarkAnimationIcon: SvgBookmarkAnimation,
4927
5083
  BookmarkIcon: SvgBookmark,
4928
5084
  BoxIcon: SvgBox,
5085
+ BoxPlusIcon: SvgBoxPlus,
4929
5086
  BusColorIcon: SvgBusColor,
4930
5087
  CalendarCheckColorIcon: SvgCalendarCheckColor,
4931
5088
  CalendarCheckIcon: SvgCalendarCheck,
@@ -4969,9 +5126,11 @@ var icons = /*#__PURE__*/Object.freeze({
4969
5126
  CopyIcon: SvgCopy,
4970
5127
  CorrectIcon: SvgCorrect,
4971
5128
  CouponIcon: SvgCoupon,
5129
+ CropIcon: SvgCrop,
4972
5130
  CrownIcon: SvgCrown,
4973
5131
  CurriculumColorIcon: SvgCurriculumColor,
4974
5132
  CurriculumIcon: SvgCurriculum,
5133
+ CursorIcon: SvgCursor,
4975
5134
  DeleteIcon: SvgDelete,
4976
5135
  DocumentIcon: SvgDocument,
4977
5136
  DotsIcon: SvgDots,
@@ -5000,6 +5159,7 @@ var icons = /*#__PURE__*/Object.freeze({
5000
5159
  FolderIcon: SvgFolder,
5001
5160
  FrameIcon: SvgFrame,
5002
5161
  GlassesIcon: SvgGlasses,
5162
+ GlobalIcon: SvgGlobal,
5003
5163
  GoogleColorIcon: SvgGoogleColor,
5004
5164
  GraphIcon: SvgGraph,
5005
5165
  HairIcon: SvgHair,
@@ -5011,6 +5171,7 @@ var icons = /*#__PURE__*/Object.freeze({
5011
5171
  InstagramIcon: SvgInstagram,
5012
5172
  KakaoColorIcon: SvgKakaoColor,
5013
5173
  KorIcon: SvgKor,
5174
+ LandscapeArrowIcon: SvgLandscapeArrow,
5014
5175
  LeagueIcon: SvgLeague,
5015
5176
  LetterCrownColorIcon: SvgLetterCrownColor,
5016
5177
  LetterCrownOpenColorIcon: SvgLetterCrownOpenColor,
@@ -5032,6 +5193,7 @@ var icons = /*#__PURE__*/Object.freeze({
5032
5193
  MinusInCircleIcon: SvgMinusInCircle,
5033
5194
  MoneybagColorIcon: SvgMoneybagColor,
5034
5195
  MoneybagIcon: SvgMoneybag,
5196
+ MoonIcon: SvgMoon,
5035
5197
  MoreIcon: SvgMore,
5036
5198
  MyBubbleIcon: SvgMyBubble,
5037
5199
  NaverColorIcon: SvgNaverColor,
@@ -5068,6 +5230,7 @@ var icons = /*#__PURE__*/Object.freeze({
5068
5230
  PlusInCircleIcon: SvgPlusInCircle,
5069
5231
  PointInCircleColorIcon: SvgPointInCircleColor,
5070
5232
  PointInCircleIcon: SvgPointInCircle,
5233
+ PortraitArrowIcon: SvgPortraitArrow,
5071
5234
  PresentColorIcon: SvgPresentColor,
5072
5235
  PresentIcon: SvgPresent,
5073
5236
  PrintIcon: SvgPrint,
@@ -5096,11 +5259,13 @@ var icons = /*#__PURE__*/Object.freeze({
5096
5259
  SkipforwardIcon: SvgSkipforward,
5097
5260
  SoundOffIcon: SvgSoundOff,
5098
5261
  SoundOnIcon: SvgSoundOn,
5262
+ SoundPaperIcon: SvgSoundPaper,
5099
5263
  SpeakerIcon: SvgSpeaker,
5100
5264
  StackupIcon: SvgStackup,
5101
5265
  StarColorIcon: SvgStarColor,
5102
5266
  StarIcon: SvgStar,
5103
5267
  StoreIcon: SvgStore,
5268
+ SunIcon: SvgSun,
5104
5269
  SyncIcon: SvgSync,
5105
5270
  TestUploadColorIcon: SvgTestUploadColor,
5106
5271
  ThumbdownIcon: SvgThumbdown,
@@ -7074,6 +7239,7 @@ const ActionListItem = ({
7074
7239
  onFocus: onFocus,
7075
7240
  onBlur: onBlur,
7076
7241
  children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
7242
+ className: 'action_list_item__selection_wrapper',
7077
7243
  display: 'inline-flex',
7078
7244
  minWidth: 20,
7079
7245
  sx: {
@@ -7083,9 +7249,11 @@ const ActionListItem = ({
7083
7249
  }
7084
7250
  },
7085
7251
  children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
7252
+ className: 'action_list_item__selection_wrapper_single',
7086
7253
  icon: SvgCheck,
7087
7254
  size: 20
7088
7255
  }) : null : selectionVariant === 'multiple' ? /*#__PURE__*/jsxRuntimeExports.jsx(FakeCheckbox, {
7256
+ className: 'action_list_item__selection_wrapper_multiple',
7089
7257
  "aria-checked": selected,
7090
7258
  checked: selected,
7091
7259
  onChange: noop$2,
@@ -7093,6 +7261,7 @@ const ActionListItem = ({
7093
7261
  disabled: disabled
7094
7262
  }) : null
7095
7263
  }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
7264
+ className: 'action_list_item__leading_visual',
7096
7265
  display: 'inline-flex',
7097
7266
  flexShrink: 0,
7098
7267
  sx: {
@@ -7102,18 +7271,21 @@ const ActionListItem = ({
7102
7271
  children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
7103
7272
  }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
7104
7273
  flex: 1,
7274
+ className: 'action_list_item__content',
7105
7275
  children: /*#__PURE__*/jsxRuntimeExports.jsxs(Grid$1, {
7106
7276
  gapX: 2,
7107
7277
  gapY: 0.5,
7108
7278
  wrap: true,
7109
7279
  alignItems: 'center',
7110
7280
  children: [/*#__PURE__*/jsxRuntimeExports.jsx(Grid$1.Unit, {
7281
+ className: 'action_list__content__children',
7111
7282
  size: descriptionLayout === 'inline' ? 'min' : 1,
7112
7283
  sx: {
7113
7284
  fontWeight: description && descriptionLayout === 'block' ? 'bold' : 'medium'
7114
7285
  },
7115
7286
  children: children
7116
7287
  }), /*#__PURE__*/jsxRuntimeExports.jsx(Grid$1.Unit, {
7288
+ className: 'action_list_item__content__description',
7117
7289
  size: descriptionLayout === 'inline' ? 'max' : 1,
7118
7290
  children: /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
7119
7291
  typography: 'xxs/regular',
@@ -7123,6 +7295,7 @@ const ActionListItem = ({
7123
7295
  })]
7124
7296
  })
7125
7297
  }), /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
7298
+ className: 'action_list_item__content__trailing_visual',
7126
7299
  display: 'inline-flex',
7127
7300
  flexShrink: 0,
7128
7301
  sx: {
@@ -7307,11 +7480,13 @@ const FakeCheckbox = styled__default.default.div`
7307
7480
  `;
7308
7481
 
7309
7482
  const HorizontalDivider = ({
7483
+ className,
7310
7484
  width = 1,
7311
7485
  color = 'border/neutral',
7312
7486
  variant = 'solid',
7313
7487
  ...props
7314
7488
  }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseHorizontalDivider, {
7489
+ className: className,
7315
7490
  borderBottomWidth: width,
7316
7491
  borderBottomStyle: variant,
7317
7492
  borderBottomColor: color,
@@ -7335,6 +7510,7 @@ const ActionListSectionDivider = ({
7335
7510
  width = 1,
7336
7511
  sx
7337
7512
  }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionDivider, {
7513
+ className: 'action_list_section_divider',
7338
7514
  color: color,
7339
7515
  variant: variant,
7340
7516
  width: width,
@@ -7349,6 +7525,7 @@ const ActionListSectionHeader = ({
7349
7525
  ...props
7350
7526
  }) => {
7351
7527
  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionHeader, {
7528
+ className: 'action_list_setion_header',
7352
7529
  role: 'presentation',
7353
7530
  ...props
7354
7531
  });
@@ -7388,6 +7565,7 @@ const ActionList = ({
7388
7565
  onSelect
7389
7566
  },
7390
7567
  children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
7568
+ className: 'action_list',
7391
7569
  role: 'menu',
7392
7570
  ...props
7393
7571
  })
@@ -17173,7 +17351,11 @@ const Button = /*#__PURE__*/React.forwardRef(({
17173
17351
  columnGap: 1,
17174
17352
  visibility: !loading ? 'initial' : 'hidden'
17175
17353
  },
17176
- children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
17354
+ children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
17355
+ className: 'button__leading_icon'
17356
+ }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
17357
+ className: 'button__trailing_icon'
17358
+ }) : null]
17177
17359
  }), loading ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
17178
17360
  sx: {
17179
17361
  position: 'absolute',
@@ -17186,6 +17368,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
17186
17368
  justifyContent: 'center'
17187
17369
  },
17188
17370
  children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseSpinner, {
17371
+ className: 'button__spinner',
17189
17372
  size: size,
17190
17373
  variant: variant
17191
17374
  })
@@ -17681,7 +17864,11 @@ const Chip = ({
17681
17864
  variant: variant,
17682
17865
  leadingIcon: LeadingIcon,
17683
17866
  trailingIcon: TrailingIcon,
17684
- children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
17867
+ children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
17868
+ className: 'chip__leading_icon'
17869
+ }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
17870
+ className: 'chip__trailing_icon'
17871
+ }) : null]
17685
17872
  });
17686
17873
  const BaseChip = styled__default.default.span(({
17687
17874
  theme
@@ -35271,6 +35458,7 @@ const TextInput = ({
35271
35458
  leadingVisual: LeadingVisual,
35272
35459
  trailingVisual: TrailingVisual,
35273
35460
  trailingAction,
35461
+ sx,
35274
35462
  ...props
35275
35463
  }, ref) => {
35276
35464
  const theme = styled.useTheme();
@@ -35285,6 +35473,7 @@ const TextInput = ({
35285
35473
  hasTrailingVisual: !isNullable(TrailingVisual),
35286
35474
  hasTrailingAction: !isNullable(trailingAction),
35287
35475
  validationStatus: validationStatus,
35476
+ sx: sx,
35288
35477
  children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
35289
35478
  sx: {
35290
35479
  'flexShrink': 0,
@@ -35298,8 +35487,10 @@ const TextInput = ({
35298
35487
  color: theme.colors['icon/neutral/bold']
35299
35488
  }
35300
35489
  },
35490
+ className: 'text_input__leading_visual',
35301
35491
  children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
35302
35492
  }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
35493
+ className: 'text_input__base_input',
35303
35494
  ref: e => {
35304
35495
  isFunction$1(ref) ? ref(e) : null;
35305
35496
  inputRef.current = e;
@@ -35323,6 +35514,7 @@ const TextInput = ({
35323
35514
  color: theme.colors['icon/neutral/bold']
35324
35515
  }
35325
35516
  },
35517
+ className: 'text_input__trailing_visual',
35326
35518
  children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/React.cloneElement(trailingAction, {
35327
35519
  disabled: trailingAction.props.disabled || disabled
35328
35520
  }) : null]
@@ -35448,6 +35640,8 @@ const TextInputWrapper$1 = styled__default.default.div`
35448
35640
  &:after {
35449
35641
  transition: border-color 100ms;
35450
35642
  }
35643
+
35644
+ ${sx}
35451
35645
  `;
35452
35646
  const UnstyledInput$1 = styled__default.default.input`
35453
35647
  font-size: inherit;
@@ -37942,9 +38136,14 @@ const Pill = ({
37942
38136
  disabled: disabled,
37943
38137
  ...props,
37944
38138
  type: 'button',
37945
- children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
38139
+ children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {
38140
+ className: 'pill__leading_visual'
38141
+ }) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
37946
38142
  children: children
37947
- }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
38143
+ }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {
38144
+ className: 'pill__trailing_visual'
38145
+ }) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
38146
+ className: 'pill__remove_button',
37948
38147
  onClick: e => {
37949
38148
  e.preventDefault();
37950
38149
  handleRemoveClick(e);
@@ -37962,7 +38161,9 @@ const Pill = ({
37962
38161
  role: 'button',
37963
38162
  "aria-disabled": disabled,
37964
38163
  tabIndex: disabled ? -1 : 0,
37965
- children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
38164
+ children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {
38165
+ className: 'pill__remove_button__icon'
38166
+ })
37966
38167
  }) : null]
37967
38168
  });
37968
38169
  };
@@ -39019,6 +39220,7 @@ const shade = {
39019
39220
  white: '#FFFFFF',
39020
39221
  white10A: '#FFFFFF1A',
39021
39222
  black: '#000000',
39223
+ darkGray: '#202124',
39022
39224
  black60A: '#00000099'
39023
39225
  };
39024
39226
  const fuchsiaPink = {
@@ -63,6 +63,7 @@ const ActionListItem = ({
63
63
  onFocus: onFocus,
64
64
  onBlur: onBlur,
65
65
  children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
66
+ className: 'action_list_item__selection_wrapper',
66
67
  display: 'inline-flex',
67
68
  minWidth: 20,
68
69
  sx: {
@@ -72,9 +73,11 @@ const ActionListItem = ({
72
73
  }
73
74
  },
74
75
  children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
76
+ className: 'action_list_item__selection_wrapper_single',
75
77
  icon: SvgCheck,
76
78
  size: 20
77
79
  }) : null : selectionVariant === 'multiple' ? /*#__PURE__*/jsxRuntimeExports.jsx(FakeCheckbox, {
80
+ className: 'action_list_item__selection_wrapper_multiple',
78
81
  "aria-checked": selected,
79
82
  checked: selected,
80
83
  onChange: noop,
@@ -82,6 +85,7 @@ const ActionListItem = ({
82
85
  disabled: disabled
83
86
  }) : null
84
87
  }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
88
+ className: 'action_list_item__leading_visual',
85
89
  display: 'inline-flex',
86
90
  flexShrink: 0,
87
91
  sx: {
@@ -91,18 +95,21 @@ const ActionListItem = ({
91
95
  children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
92
96
  }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
93
97
  flex: 1,
98
+ className: 'action_list_item__content',
94
99
  children: /*#__PURE__*/jsxRuntimeExports.jsxs(Grid, {
95
100
  gapX: 2,
96
101
  gapY: 0.5,
97
102
  wrap: true,
98
103
  alignItems: 'center',
99
104
  children: [/*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
105
+ className: 'action_list__content__children',
100
106
  size: descriptionLayout === 'inline' ? 'min' : 1,
101
107
  sx: {
102
108
  fontWeight: description && descriptionLayout === 'block' ? 'bold' : 'medium'
103
109
  },
104
110
  children: children
105
111
  }), /*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
112
+ className: 'action_list_item__content__description',
106
113
  size: descriptionLayout === 'inline' ? 'max' : 1,
107
114
  children: /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
108
115
  typography: 'xxs/regular',
@@ -112,6 +119,7 @@ const ActionListItem = ({
112
119
  })]
113
120
  })
114
121
  }), /*#__PURE__*/jsxRuntimeExports.jsx(VisualWrapper, {
122
+ className: 'action_list_item__content__trailing_visual',
115
123
  display: 'inline-flex',
116
124
  flexShrink: 0,
117
125
  sx: {
@@ -7,6 +7,7 @@ const ActionListSectionDivider = ({
7
7
  width = 1,
8
8
  sx
9
9
  }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionDivider, {
10
+ className: 'action_list_section_divider',
10
11
  color: color,
11
12
  variant: variant,
12
13
  width: width,
@@ -7,6 +7,7 @@ const ActionListSectionHeader = ({
7
7
  ...props
8
8
  }) => {
9
9
  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionListSectionHeader, {
10
+ className: 'action_list_setion_header',
10
11
  role: 'presentation',
11
12
  ...props
12
13
  });
@@ -18,6 +18,7 @@ const ActionList = ({
18
18
  onSelect
19
19
  },
20
20
  children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseActionList, {
21
+ className: 'action_list',
21
22
  role: 'menu',
22
23
  ...props
23
24
  })
@@ -40,7 +40,11 @@ const Button = /*#__PURE__*/forwardRef(({
40
40
  columnGap: 1,
41
41
  visibility: !loading ? 'initial' : 'hidden'
42
42
  },
43
- children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
43
+ children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
44
+ className: 'button__leading_icon'
45
+ }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
46
+ className: 'button__trailing_icon'
47
+ }) : null]
44
48
  }), loading ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
45
49
  sx: {
46
50
  position: 'absolute',
@@ -53,6 +57,7 @@ const Button = /*#__PURE__*/forwardRef(({
53
57
  justifyContent: 'center'
54
58
  },
55
59
  children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseSpinner, {
60
+ className: 'button__spinner',
56
61
  size: size,
57
62
  variant: variant
58
63
  })
@@ -17,7 +17,11 @@ const Chip = ({
17
17
  variant: variant,
18
18
  leadingIcon: LeadingIcon,
19
19
  trailingIcon: TrailingIcon,
20
- children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {}) : null]
20
+ children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {
21
+ className: 'chip__leading_icon'
22
+ }) : null, children, TrailingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingIcon, {
23
+ className: 'chip__trailing_icon'
24
+ }) : null]
21
25
  });
22
26
  const BaseChip = styled.span(({
23
27
  theme
@@ -5,11 +5,13 @@ import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js'
5
5
  import { border } from '../../node_modules/@styled-system/border/dist/index.esm.js';
6
6
 
7
7
  const HorizontalDivider = ({
8
+ className,
8
9
  width = 1,
9
10
  color = 'border/neutral',
10
11
  variant = 'solid',
11
12
  ...props
12
13
  }) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseHorizontalDivider, {
14
+ className: className,
13
15
  borderBottomWidth: width,
14
16
  borderBottomStyle: variant,
15
17
  borderBottomColor: color,
@@ -43,9 +43,14 @@ const Pill = ({
43
43
  disabled: disabled,
44
44
  ...props,
45
45
  type: 'button',
46
- children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
46
+ children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {
47
+ className: 'pill__leading_visual'
48
+ }) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
47
49
  children: children
48
- }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
50
+ }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {
51
+ className: 'pill__trailing_visual'
52
+ }) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
53
+ className: 'pill__remove_button',
49
54
  onClick: e => {
50
55
  e.preventDefault();
51
56
  handleRemoveClick(e);
@@ -63,7 +68,9 @@ const Pill = ({
63
68
  role: 'button',
64
69
  "aria-disabled": disabled,
65
70
  tabIndex: disabled ? -1 : 0,
66
- children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
71
+ children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {
72
+ className: 'pill__remove_button__icon'
73
+ })
67
74
  }) : null]
68
75
  });
69
76
  };
@@ -5,6 +5,7 @@ import { forwardRef, cloneElement } from 'react';
5
5
  import { r as reactIsExports } from '../../node_modules/react-is/index.js';
6
6
  import styled, { css, useTheme } from 'styled-components';
7
7
  import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
8
+ import { sx } from '../../utils/styled-system/index.js';
8
9
  import View from '../View/index.js';
9
10
  import TextInputTrailingAction from './TextInputTrailingAction.js';
10
11
  import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
@@ -16,6 +17,7 @@ const TextInput = ({
16
17
  leadingVisual: LeadingVisual,
17
18
  trailingVisual: TrailingVisual,
18
19
  trailingAction,
20
+ sx,
19
21
  ...props
20
22
  }, ref) => {
21
23
  const theme = useTheme();
@@ -30,6 +32,7 @@ const TextInput = ({
30
32
  hasTrailingVisual: !isNullable(TrailingVisual),
31
33
  hasTrailingAction: !isNullable(trailingAction),
32
34
  validationStatus: validationStatus,
35
+ sx: sx,
33
36
  children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
34
37
  sx: {
35
38
  'flexShrink': 0,
@@ -43,8 +46,10 @@ const TextInput = ({
43
46
  color: theme.colors['icon/neutral/bold']
44
47
  }
45
48
  },
49
+ className: 'text_input__leading_visual',
46
50
  children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
47
51
  }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
52
+ className: 'text_input__base_input',
48
53
  ref: e => {
49
54
  isFunction(ref) ? ref(e) : null;
50
55
  inputRef.current = e;
@@ -68,6 +73,7 @@ const TextInput = ({
68
73
  color: theme.colors['icon/neutral/bold']
69
74
  }
70
75
  },
76
+ className: 'text_input__trailing_visual',
71
77
  children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/cloneElement(trailingAction, {
72
78
  disabled: trailingAction.props.disabled || disabled
73
79
  }) : null]
@@ -193,6 +199,8 @@ const TextInputWrapper = styled.div`
193
199
  &:after {
194
200
  transition: border-color 100ms;
195
201
  }
202
+
203
+ ${sx}
196
204
  `;
197
205
  const UnstyledInput = styled.input`
198
206
  font-size: inherit;
@@ -0,0 +1,15 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgAHorizontalLine = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ 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"
13
+ }));
14
+
15
+ export { SvgAHorizontalLine as default };
@@ -0,0 +1,15 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgAVertialLine = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ 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"
13
+ }));
14
+
15
+ export { SvgAVertialLine as default };
@@ -0,0 +1,15 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgBoxPlus = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ 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"
13
+ }));
14
+
15
+ export { SvgBoxPlus as default };
@@ -0,0 +1,24 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgCrop = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("g", {
11
+ clipPath: "url(#crop_svg__a)"
12
+ }, /*#__PURE__*/React.createElement("path", {
13
+ fill: "currentColor",
14
+ fillRule: "evenodd",
15
+ 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",
16
+ clipRule: "evenodd"
17
+ })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
18
+ id: "crop_svg__a"
19
+ }, /*#__PURE__*/React.createElement("path", {
20
+ fill: "#fff",
21
+ d: "M0 0h24v24H0z"
22
+ }))));
23
+
24
+ export { SvgCrop as default };
@@ -0,0 +1,22 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgCursor = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("g", {
11
+ clipPath: "url(#cursor_svg__a)"
12
+ }, /*#__PURE__*/React.createElement("path", {
13
+ fill: "currentColor",
14
+ 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"
15
+ })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
16
+ id: "cursor_svg__a"
17
+ }, /*#__PURE__*/React.createElement("path", {
18
+ fill: "#fff",
19
+ d: "M0 0h24v24H0z"
20
+ }))));
21
+
22
+ export { SvgCursor as default };
@@ -0,0 +1,17 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgGlobal = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ fillRule: "evenodd",
13
+ 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",
14
+ clipRule: "evenodd"
15
+ }));
16
+
17
+ export { SvgGlobal as default };
@@ -0,0 +1,20 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgLandscapeArrow = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ fillRule: "evenodd",
13
+ 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",
14
+ clipRule: "evenodd"
15
+ }), /*#__PURE__*/React.createElement("path", {
16
+ fill: "currentColor",
17
+ 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"
18
+ }));
19
+
20
+ export { SvgLandscapeArrow as default };
@@ -0,0 +1,15 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgMoon = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ 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"
13
+ }));
14
+
15
+ export { SvgMoon as default };
@@ -0,0 +1,20 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgPortraitArrow = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ fillRule: "evenodd",
13
+ 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",
14
+ clipRule: "evenodd"
15
+ }), /*#__PURE__*/React.createElement("path", {
16
+ fill: "currentColor",
17
+ 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"
18
+ }));
19
+
20
+ export { SvgPortraitArrow as default };
@@ -0,0 +1,20 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgSoundPaper = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ fillRule: "evenodd",
13
+ 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",
14
+ clipRule: "evenodd"
15
+ }), /*#__PURE__*/React.createElement("path", {
16
+ fill: "currentColor",
17
+ d: "M14.5 2v5a.999.999 0 0 0 1 1h5l-6-6Z"
18
+ }));
19
+
20
+ export { SvgSoundPaper as default };
@@ -0,0 +1,15 @@
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
+ import * as React from 'react';
3
+
4
+ const SvgSun = props => /*#__PURE__*/React.createElement("svg", _extends({
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "none",
9
+ viewBox: "0 0 24 24"
10
+ }, props), /*#__PURE__*/React.createElement("path", {
11
+ fill: "currentColor",
12
+ 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"
13
+ }));
14
+
15
+ export { SvgSun as default };
@@ -1,4 +1,6 @@
1
+ export { default as AHorizontalLineIcon } from './AHorizontalLine.js';
1
2
  export { default as AInCircleFilledIcon } from './AInCircleFilled.js';
3
+ export { default as AVertialLineIcon } from './AVertialLine.js';
2
4
  export { default as AiIcon } from './Ai.js';
3
5
  export { default as AiColorIcon } from './AiColor.js';
4
6
  export { default as AiSadIcon } from './AiSad.js';
@@ -23,6 +25,7 @@ export { default as BookColorIcon } from './BookColor.js';
23
25
  export { default as BookmarkIcon } from './Bookmark.js';
24
26
  export { default as BookmarkAnimationIcon } from './BookmarkAnimation.js';
25
27
  export { default as BoxIcon } from './Box.js';
28
+ export { default as BoxPlusIcon } from './BoxPlus.js';
26
29
  export { default as BusColorIcon } from './BusColor.js';
27
30
  export { default as CalendarIcon } from './Calendar.js';
28
31
  export { default as CalendarCheckIcon } from './CalendarCheck.js';
@@ -66,9 +69,11 @@ export { default as ContactIcon } from './Contact.js';
66
69
  export { default as CopyIcon } from './Copy.js';
67
70
  export { default as CorrectIcon } from './Correct.js';
68
71
  export { default as CouponIcon } from './Coupon.js';
72
+ export { default as CropIcon } from './Crop.js';
69
73
  export { default as CrownIcon } from './Crown.js';
70
74
  export { default as CurriculumIcon } from './Curriculum.js';
71
75
  export { default as CurriculumColorIcon } from './CurriculumColor.js';
76
+ export { default as CursorIcon } from './Cursor.js';
72
77
  export { default as DeleteIcon } from './Delete.js';
73
78
  export { default as DocumentIcon } from './Document.js';
74
79
  export { default as DotsIcon } from './Dots.js';
@@ -97,6 +102,7 @@ export { default as FlagIcon } from './Flag.js';
97
102
  export { default as FolderIcon } from './Folder.js';
98
103
  export { default as FrameIcon } from './Frame.js';
99
104
  export { default as GlassesIcon } from './Glasses.js';
105
+ export { default as GlobalIcon } from './Global.js';
100
106
  export { default as GoogleColorIcon } from './GoogleColor.js';
101
107
  export { default as GraphIcon } from './Graph.js';
102
108
  export { default as HairIcon } from './Hair.js';
@@ -108,6 +114,7 @@ export { default as InfoInCircleIcon } from './InfoInCircle.js';
108
114
  export { default as InstagramIcon } from './Instagram.js';
109
115
  export { default as KakaoColorIcon } from './KakaoColor.js';
110
116
  export { default as KorIcon } from './Kor.js';
117
+ export { default as LandscapeArrowIcon } from './LandscapeArrow.js';
111
118
  export { default as LeagueIcon } from './League.js';
112
119
  export { default as LetterIcon } from './Letter.js';
113
120
  export { default as LetterCrownColorIcon } from './LetterCrownColor.js';
@@ -129,6 +136,7 @@ export { default as MinusIcon } from './Minus.js';
129
136
  export { default as MinusInCircleIcon } from './MinusInCircle.js';
130
137
  export { default as MoneybagIcon } from './Moneybag.js';
131
138
  export { default as MoneybagColorIcon } from './MoneybagColor.js';
139
+ export { default as MoonIcon } from './Moon.js';
132
140
  export { default as MoreIcon } from './More.js';
133
141
  export { default as MyBubbleIcon } from './MyBubble.js';
134
142
  export { default as NaverColorIcon } from './NaverColor.js';
@@ -165,6 +173,7 @@ export { default as PlusIcon } from './Plus.js';
165
173
  export { default as PlusInCircleIcon } from './PlusInCircle.js';
166
174
  export { default as PointInCircleIcon } from './PointInCircle.js';
167
175
  export { default as PointInCircleColorIcon } from './PointInCircleColor.js';
176
+ export { default as PortraitArrowIcon } from './PortraitArrow.js';
168
177
  export { default as PresentIcon } from './Present.js';
169
178
  export { default as PresentColorIcon } from './PresentColor.js';
170
179
  export { default as PrintIcon } from './Print.js';
@@ -193,11 +202,13 @@ export { default as SkipbackIcon } from './Skipback.js';
193
202
  export { default as SkipforwardIcon } from './Skipforward.js';
194
203
  export { default as SoundOffIcon } from './SoundOff.js';
195
204
  export { default as SoundOnIcon } from './SoundOn.js';
205
+ export { default as SoundPaperIcon } from './SoundPaper.js';
196
206
  export { default as SpeakerIcon } from './Speaker.js';
197
207
  export { default as StackupIcon } from './Stackup.js';
198
208
  export { default as StarIcon } from './Star.js';
199
209
  export { default as StarColorIcon } from './StarColor.js';
200
210
  export { default as StoreIcon } from './Store.js';
211
+ export { default as SunIcon } from './Sun.js';
201
212
  export { default as SyncIcon } from './Sync.js';
202
213
  export { default as TestUploadColorIcon } from './TestUploadColor.js';
203
214
  export { default as ThumbdownIcon } from './Thumbdown.js';
@@ -75,6 +75,7 @@ const shade = {
75
75
  white: '#FFFFFF',
76
76
  white10A: '#FFFFFF1A',
77
77
  black: '#000000',
78
+ darkGray: '#202124',
78
79
  black60A: '#00000099'
79
80
  };
80
81
  const fuchsiaPink = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.45.2",
3
+ "version": "2.45.4",
4
4
  "description": "React components, hooks for create teamturing web application",
5
5
  "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
6
6
  "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,8 +55,8 @@
55
55
  "dependencies": {
56
56
  "@floating-ui/react-dom": "^2.0.2",
57
57
  "@primer/behaviors": "^1.3.6",
58
- "@teamturing/icons": "^1.53.0",
59
- "@teamturing/token-studio": "^1.12.0",
58
+ "@teamturing/icons": "^1.54.0",
59
+ "@teamturing/token-studio": "^1.13.0",
60
60
  "@teamturing/utils": "^1.5.0",
61
61
  "framer-motion": "^10.16.4",
62
62
  "lodash.debounce": "^4.0.8",
@@ -66,5 +66,5 @@
66
66
  "react-textarea-autosize": "^8.5.3",
67
67
  "styled-system": "^5.1.5"
68
68
  },
69
- "gitHead": "a7d150262d9dc769e8b83c3ec540325d17018ed8"
69
+ "gitHead": "6f94c73423d43719257c24a87d7a1a9ec2caf826"
70
70
  }