@teamturing/react-kit 2.26.3 → 2.27.0

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.
Files changed (10) hide show
  1. package/README.md +17 -1
  2. package/dist/core/Flash/index.d.ts +5 -3
  3. package/dist/index.js +68 -44
  4. package/esm/core/Flash/index.js +45 -13
  5. package/esm/packages/icons/esm/ArrowBelow.js +4 -11
  6. package/esm/packages/icons/esm/LetterCrownColor.js +9 -9
  7. package/esm/packages/icons/esm/LetterCrownOpenColor.js +2 -2
  8. package/esm/packages/icons/esm/LetterHeartColor.js +7 -7
  9. package/esm/packages/icons/esm/LetterHeartOpenColor.js +2 -2
  10. package/package.json +3 -3
package/README.md CHANGED
@@ -2,4 +2,20 @@
2
2
 
3
3
  튜링 내에서 웹 애플리케이션을 만들 때 필요한 리액트의 핵심 컴포넌트, 훅을 모아둔 패키지입니다.
4
4
 
5
- > react-native와는 호환성이 맞지 않을 수 있습니다.
5
+ ## 설치
6
+
7
+ ```bash
8
+ yarn add @teamturing/react-kit styled-components styled-system @emotion/is-prop-valid
9
+ ```
10
+
11
+ ## 시작하기
12
+
13
+ ```jsx
14
+ <StyleSheetManager shouldForwardProp={isPropValid}>
15
+ <ThemeProvider>
16
+ <App />
17
+ </ThemeProvider>
18
+ </StyleSheetManager>
19
+ ```
20
+
21
+ [Pretendard](https://github.com/orioncactus/pretendard) 폰트와 사용하는 것을 추천합니다.
package/dist/core/Flash/index.d.ts CHANGED
@@ -1,17 +1,19 @@
1
- import { ComponentType, HTMLAttributes, HTMLProps, ReactElement, SVGProps } from 'react';
1
+ import { ComponentType, ElementType, HTMLAttributes, HTMLProps, ReactElement, ReactNode, SVGProps } from 'react';
2
2
  import { SxProp } from '../../utils/styled-system';
3
- type FlashVariantType = 'neutral' | 'danger' | 'assist';
3
+ type FlashVariantType = 'neutral' | 'danger' | 'assist' | 'accent';
4
4
  type Props = {
5
5
  variant?: FlashVariantType;
6
6
  icon?: ComponentType<SVGProps<SVGSVGElement>>;
7
+ trailingVisual?: ElementType | ReactNode;
7
8
  buttons?: Array<ReactElement<HTMLProps<HTMLButtonElement>>>;
8
9
  } & SxProp & HTMLAttributes<HTMLDivElement>;
9
10
  declare const _default: import("react").ForwardRefExoticComponent<{
10
11
  variant?: FlashVariantType | undefined;
11
12
  icon?: ComponentType<SVGProps<SVGSVGElement>> | undefined;
13
+ trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
12
14
  buttons?: ReactElement<HTMLProps<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>[] | undefined;
13
15
  } & SxProp & HTMLAttributes<HTMLDivElement> & {
14
- children?: import("react").ReactNode;
16
+ children?: ReactNode;
15
17
  } & import("react").RefAttributes<HTMLDivElement>>;
16
18
  export default _default;
17
19
  export type { Props as FlashProps };
package/dist/index.js CHANGED
@@ -1170,17 +1170,10 @@ const SvgArrowBelow = props => /*#__PURE__*/React__namespace.createElement("svg"
1170
1170
  fill: "none",
1171
1171
  viewBox: "0 0 24 24"
1172
1172
  }, props), /*#__PURE__*/React__namespace.createElement("path", {
1173
- stroke: "currentColor",
1174
- strokeLinecap: "round",
1175
- strokeLinejoin: "round",
1176
- strokeWidth: 2.2,
1177
- d: "m14.293 20.046 4.64-4.639-4.64-4.64"
1178
- }), /*#__PURE__*/React__namespace.createElement("path", {
1179
- stroke: "currentColor",
1180
- strokeLinecap: "round",
1181
- strokeLinejoin: "round",
1182
- strokeWidth: 2.2,
1183
- d: "M18.932 15.407H7.568a2.5 2.5 0 0 1-2.5-2.5V3.953"
1173
+ fill: "currentColor",
1174
+ fillRule: "evenodd",
1175
+ d: "M6.168 3.953a1.1 1.1 0 0 0-2.2 0v8.954a3.6 3.6 0 0 0 3.6 3.6h8.709l-2.762 2.762a1.1 1.1 0 0 0 1.556 1.555l4.639-4.639a1.098 1.098 0 0 0 0-1.556L15.07 9.99a1.1 1.1 0 1 0-1.555 1.556l2.762 2.761h-8.71a1.4 1.4 0 0 1-1.4-1.4V3.953Z",
1176
+ clipRule: "evenodd"
1184
1177
  }));
1185
1178
 
1186
1179
  const SvgArrowDiagonal = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -2643,20 +2636,20 @@ const SvgLetterCrownColor = props => /*#__PURE__*/React__namespace.createElement
2643
2636
  width: "1em",
2644
2637
  height: "1em",
2645
2638
  fill: "none",
2646
- viewBox: "0 0 65 64"
2639
+ viewBox: "0 0 24 24"
2647
2640
  }, props), /*#__PURE__*/React__namespace.createElement("path", {
2648
- fill: "#FFF99D",
2649
- d: "M2.938 18.772c0-3.004-.427-5.438 2.576-5.438h53.48c3.004 0 2.568 2.434 2.568 5.438V46.8c0 3.003.227 5.438-2.777 5.438H5.514c-3.004 0-2.576-2.435-2.576-5.438V18.772Z"
2641
+ fill: "#FFE8A1",
2642
+ d: "M1.008 7.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V7.04Z"
2650
2643
  }), /*#__PURE__*/React__namespace.createElement("path", {
2651
- fill: "#FFFF9E",
2652
- d: "M5.514 52.238h53.69c1.67 0 2.358-1.355 2.358-3.026 0-.52-.135-1.032-.39-1.485L48.154 24.629a5.438 5.438 0 0 0-4.738-2.769h-21.18a5.438 5.438 0 0 0-4.666 2.646L3.304 48.339c-.24.4-.366.857-.366 1.323 0 1.422.418 2.576 2.576 2.576Z"
2644
+ fill: "#FFEFC0",
2645
+ d: "M1.974 19.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2653
2646
  }), /*#__PURE__*/React__namespace.createElement("path", {
2654
- fill: "#FFFFA6",
2655
- d: "M59.622 13.334H5.083a2.145 2.145 0 0 0-1.425 3.748l25.136 22.334a5.438 5.438 0 0 0 7.249-.022l24.806-22.31a2.15 2.15 0 0 0 .713-1.6c0-1.188-.752-2.15-1.94-2.15Z"
2647
+ fill: "#FFF5D8",
2648
+ d: "M22.264 5H1.812a.804.804 0 0 0-.534 1.406l9.426 8.375a2.04 2.04 0 0 0 2.718-.008l9.302-8.367a.806.806 0 0 0 .268-.6c0-.445-.282-.806-.728-.806Z"
2656
2649
  }), /*#__PURE__*/React__namespace.createElement("path", {
2657
- fill: "#FFCD39",
2650
+ fill: "#FFC107",
2658
2651
  fillRule: "evenodd",
2659
- d: "M24.727 42.477c-.514 0-.947-.397-1.006-.923l-1.282-11.361c-.115-1.02 1.12-1.579 1.772-.803l3.798 4.51 2.808-6.142a1.502 1.502 0 0 1 2.75 0l2.81 6.141 3.797-4.51c.653-.775 1.887-.215 1.772.804l-1.281 11.361c-.06.526-.492.923-1.007.923H24.727Z",
2652
+ d: "M9.179 15.929a.384.384 0 0 1-.378-.346l-.48-4.26c-.043-.383.42-.593.664-.302l1.425 1.691 1.053-2.303a.563.563 0 0 1 1.031 0l1.053 2.303 1.424-1.691c.245-.29.708-.081.665.301l-.48 4.26a.384.384 0 0 1-.378.347h-5.6Z",
2660
2653
  clipRule: "evenodd"
2661
2654
  }));
2662
2655
 
@@ -2674,7 +2667,7 @@ const SvgLetterCrownOpenColor = props => /*#__PURE__*/React__namespace.createEle
2674
2667
  d: "M1.008 11.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V11.04Z"
2675
2668
  }), /*#__PURE__*/React__namespace.createElement("path", {
2676
2669
  fill: "#FDE2E2",
2677
- d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2670
+ d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.135 0-.196-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2678
2671
  }), /*#__PURE__*/React__namespace.createElement("path", {
2679
2672
  fill: "#FFF9E8",
2680
2673
  d: "M2 3.2c0-.22.18-.4.4-.4h19.2c.22 0 .4.18.4.4v15.4a.4.4 0 0 1-.4.4H2.4a.4.4 0 0 1-.4-.4V3.2Z"
@@ -2688,7 +2681,7 @@ const SvgLetterCrownOpenColor = props => /*#__PURE__*/React__namespace.createEle
2688
2681
  d: "M22.992 21.55V11.04c0-1.127.163-2.04-.963-2.04h-.633a.4.4 0 0 0-.316.155L17.8 13.4H6.6L3.12 9.147A.4.4 0 0 0 2.81 9h-.836c-1.126 0-.966.913-.966 2.04v10.51c0 1.126-.16 2.04.966 2.04H21.95c1.126 0 1.04-.914 1.04-2.04Z"
2689
2682
  }), /*#__PURE__*/React__namespace.createElement("path", {
2690
2683
  fill: "#FFEFC0",
2691
- d: "M1.966 23.591H22.1c.626 0 .884-.508.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2684
+ d: "M1.966 23.591H22.1c.626 0 .884-.507.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2692
2685
  }));
2693
2686
 
2694
2687
  const SvgLetterHeartColor = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -2696,20 +2689,20 @@ const SvgLetterHeartColor = props => /*#__PURE__*/React__namespace.createElement
2696
2689
  width: "1em",
2697
2690
  height: "1em",
2698
2691
  fill: "none",
2699
- viewBox: "0 0 65 64"
2692
+ viewBox: "0 0 24 24"
2700
2693
  }, props), /*#__PURE__*/React__namespace.createElement("path", {
2701
- fill: "#FCDDDD",
2702
- d: "M3.438 18.772c0-3.004-.427-5.438 2.576-5.438h53.48c3.004 0 2.568 2.434 2.568 5.438V46.8c0 3.003.227 5.438-2.777 5.438H6.014c-3.004 0-2.576-2.435-2.576-5.438V18.772Z"
2694
+ fill: "#FFD5D5",
2695
+ d: "M1.008 7.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V7.04Z"
2703
2696
  }), /*#__PURE__*/React__namespace.createElement("path", {
2704
2697
  fill: "#FDE2E2",
2705
- d: "M6.014 52.238h53.69c1.67 0 2.358-1.355 2.358-3.026 0-.52-.135-1.032-.39-1.485L48.654 24.629a5.438 5.438 0 0 0-4.738-2.769h-21.18a5.438 5.438 0 0 0-4.666 2.646L3.804 48.339c-.24.4-.366.857-.366 1.323 0 1.422.418 2.576 2.576 2.576Z"
2698
+ d: "M1.974 19.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2706
2699
  }), /*#__PURE__*/React__namespace.createElement("path", {
2707
- fill: "#FEE5E5",
2708
- d: "M60.122 13.334H5.583a2.145 2.145 0 0 0-1.425 3.748l25.136 22.334a5.438 5.438 0 0 0 7.249-.022l24.806-22.31a2.15 2.15 0 0 0 .713-1.6c0-1.188-.752-2.15-1.94-2.15Z"
2700
+ fill: "#FFEBEB",
2701
+ d: "M22.264 5H1.812a.804.804 0 0 0-.534 1.406l9.426 8.375a2.04 2.04 0 0 0 2.718-.008l9.302-8.367a.806.806 0 0 0 .268-.6c0-.445-.282-.806-.728-.806Z"
2709
2702
  }), /*#__PURE__*/React__namespace.createElement("path", {
2710
2703
  fill: "#FF5678",
2711
2704
  fillRule: "evenodd",
2712
- d: "M31.76 43.765a1.79 1.79 0 0 0 1.978 0c1.91-1.26 6.068-4.274 7.86-7.646 2.361-4.448-.412-8.885-4.078-8.885-2.09 0-3.347 1.092-4.042 2.03a.9.9 0 0 1-1.457 0c-.695-.938-1.952-2.03-4.042-2.03-3.666 0-6.44 4.437-4.077 8.885 1.79 3.372 5.95 6.385 7.858 7.646Z",
2705
+ d: "M11.629 16.412a.671.671 0 0 0 .741 0c.716-.473 2.276-1.603 2.948-2.867.885-1.668-.155-3.332-1.53-3.332a1.82 1.82 0 0 0-1.515.761.338.338 0 0 1-.546 0 1.82 1.82 0 0 0-1.516-.761c-1.375 0-2.415 1.664-1.53 3.332.672 1.264 2.232 2.394 2.948 2.867Z",
2713
2706
  clipRule: "evenodd"
2714
2707
  }));
2715
2708
 
@@ -2727,7 +2720,7 @@ const SvgLetterHeartOpenColor = props => /*#__PURE__*/React__namespace.createEle
2727
2720
  d: "M1.008 11.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V11.04Z"
2728
2721
  }), /*#__PURE__*/React__namespace.createElement("path", {
2729
2722
  fill: "#FDE2E2",
2730
- d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2723
+ d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.135 0-.196-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2731
2724
  }), /*#__PURE__*/React__namespace.createElement("path", {
2732
2725
  fill: "#FFF7F7",
2733
2726
  d: "M2 3.2c0-.22.18-.4.4-.4h19.2c.22 0 .4.18.4.4v15.4a.4.4 0 0 1-.4.4H2.4a.4.4 0 0 1-.4-.4V3.2Z"
@@ -2741,7 +2734,7 @@ const SvgLetterHeartOpenColor = props => /*#__PURE__*/React__namespace.createEle
2741
2734
  d: "M22.992 21.55V11.04c0-1.127.163-2.04-.963-2.04h-.633a.4.4 0 0 0-.316.155L17.8 13.4H6.6L3.12 9.147A.4.4 0 0 0 2.81 9h-.836c-1.126 0-.966.913-.966 2.04v10.51c0 1.126-.16 2.04.966 2.04H21.95c1.126 0 1.04-.914 1.04-2.04Z"
2742
2735
  }), /*#__PURE__*/React__namespace.createElement("path", {
2743
2736
  fill: "#FFDFDF",
2744
- d: "M1.966 23.591H22.1c.626 0 .884-.508.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2737
+ d: "M1.966 23.591H22.1c.626 0 .884-.507.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
2745
2738
  }));
2746
2739
 
2747
2740
  const SvgLineThree = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -19286,7 +19279,8 @@ const BaseEmptyState = styled__default.default.div`
19286
19279
 
19287
19280
  const Flash = ({
19288
19281
  variant = 'neutral',
19289
- icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
19282
+ icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : variant === 'accent' ? SvgInfoInCircle : SvgInfoInCircle,
19283
+ trailingVisual: TrailingVisual,
19290
19284
  buttons,
19291
19285
  children,
19292
19286
  ...props
@@ -19296,7 +19290,9 @@ const Flash = ({
19296
19290
  ref: ref,
19297
19291
  variant: variant,
19298
19292
  ...props,
19299
- children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
19293
+ children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
19294
+ className: 'flash__leading_icon'
19295
+ }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
19300
19296
  className: 'flash__content',
19301
19297
  children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
19302
19298
  className: 'flash__content__children',
@@ -19305,7 +19301,10 @@ const Flash = ({
19305
19301
  className: 'flash__content__buttons',
19306
19302
  children: buttons
19307
19303
  }) : null]
19308
- })]
19304
+ }), TrailingVisual ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
19305
+ className: 'flash__trailing_visual',
19306
+ children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual
19307
+ }) : null]
19309
19308
  });
19310
19309
  };
19311
19310
  const BaseFlash = styled__default.default.div`
@@ -19316,15 +19315,24 @@ const BaseFlash = styled__default.default.div`
19316
19315
  align-items: flex-start;
19317
19316
  padding: ${({
19318
19317
  theme
19319
- }) => forcePixelValue(theme.space[4])};
19318
+ }) => forcePixelValue(theme.space[3])};
19320
19319
  border-radius: ${({
19321
19320
  theme
19322
19321
  }) => forcePixelValue(theme.radii.xs)};
19322
+ column-gap: ${({
19323
+ theme
19324
+ }) => forcePixelValue(theme.space[2])};
19325
+
19326
+ & .flash__content {
19327
+ flex: 1;
19328
+ display: flex;
19329
+ flex-direction: column;
19330
+ }
19323
19331
 
19324
19332
  & .flash__content__children {
19325
19333
  font-size: ${({
19326
19334
  theme
19327
- }) => forcePixelValue(theme.fontSizes.xs)};
19335
+ }) => forcePixelValue(theme.fontSizes.xxs)};
19328
19336
  font-weight: ${({
19329
19337
  theme
19330
19338
  }) => theme.fontWeights.medium};
@@ -19344,12 +19352,22 @@ const BaseFlash = styled__default.default.div`
19344
19352
  }) => forcePixelValue(theme.space[2])};
19345
19353
  }
19346
19354
 
19347
- & > svg {
19348
- min-width: ${forcePixelValue(20)};
19349
- height: ${forcePixelValue(20)};
19350
- margin-right: ${({
19355
+ & .flash__leading_icon {
19356
+ min-width: ${forcePixelValue(16)};
19357
+ height: ${forcePixelValue(16)};
19358
+ }
19359
+
19360
+ & .flash__trailing_visual {
19361
+ display: flex;
19362
+ flex-direction: column;
19363
+
19364
+ svg {
19365
+ width: ${forcePixelValue(16)};
19366
+ height: ${forcePixelValue(16)};
19367
+ color: ${({
19351
19368
  theme
19352
- }) => forcePixelValue(theme.space[2])};
19369
+ }) => theme.colors['icon/neutral/bold']};
19370
+ }
19353
19371
  }
19354
19372
 
19355
19373
  ${({
@@ -19359,13 +19377,13 @@ const BaseFlash = styled__default.default.div`
19359
19377
  variants: {
19360
19378
  neutral: {
19361
19379
  'backgroundColor': 'bg/neutral',
19362
- '& > svg': {
19380
+ '& .flash__leading_icon': {
19363
19381
  color: 'icon/neutral/bold'
19364
19382
  }
19365
19383
  },
19366
19384
  danger: {
19367
19385
  'backgroundColor': 'bg/danger',
19368
- '& > svg': {
19386
+ '& .flash__leading_icon': {
19369
19387
  color: 'icon/danger'
19370
19388
  }
19371
19389
  },
@@ -19374,9 +19392,15 @@ const BaseFlash = styled__default.default.div`
19374
19392
  'borderWidth': 1,
19375
19393
  'borderStyle': 'solid',
19376
19394
  'borderColor': 'transparent',
19377
- '& > svg': {
19395
+ '& .flash__leading_icon': {
19378
19396
  color: 'icon/primary'
19379
19397
  }
19398
+ },
19399
+ accent: {
19400
+ 'backgroundColor': 'bg/accent/blue/subtlest',
19401
+ '& .flash__leading_icon': {
19402
+ color: 'icon/accent/blue'
19403
+ }
19380
19404
  }
19381
19405
  }
19382
19406
  })}
package/esm/core/Flash/index.js CHANGED
@@ -4,6 +4,7 @@ import SvgTwinkle from '../../packages/icons/esm/Twinkle.js';
4
4
  import SvgWarning from '../../packages/icons/esm/Warning.js';
5
5
  import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
6
6
  import { isNullable } from '../../packages/utils/esm/isNullable.js';
7
+ import { r as reactIsExports } from '../../node_modules/react-is/index.js';
7
8
  import styled from 'styled-components';
8
9
  import '../../node_modules/styled-system/dist/index.esm.js';
9
10
  import { sx } from '../../utils/styled-system/index.js';
@@ -12,7 +13,8 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
12
13
 
13
14
  const Flash = ({
14
15
  variant = 'neutral',
15
- icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
16
+ icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : variant === 'accent' ? SvgInfoInCircle : SvgInfoInCircle,
17
+ trailingVisual: TrailingVisual,
16
18
  buttons,
17
19
  children,
18
20
  ...props
@@ -22,7 +24,9 @@ const Flash = ({
22
24
  ref: ref,
23
25
  variant: variant,
24
26
  ...props,
25
- children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
27
+ children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
28
+ className: 'flash__leading_icon'
29
+ }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
26
30
  className: 'flash__content',
27
31
  children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
28
32
  className: 'flash__content__children',
@@ -31,7 +35,10 @@ const Flash = ({
31
35
  className: 'flash__content__buttons',
32
36
  children: buttons
33
37
  }) : null]
34
- })]
38
+ }), TrailingVisual ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
39
+ className: 'flash__trailing_visual',
40
+ children: typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual
41
+ }) : null]
35
42
  });
36
43
  };
37
44
  const BaseFlash = styled.div`
@@ -42,15 +49,24 @@ const BaseFlash = styled.div`
42
49
  align-items: flex-start;
43
50
  padding: ${({
44
51
  theme
45
- }) => forcePixelValue(theme.space[4])};
52
+ }) => forcePixelValue(theme.space[3])};
46
53
  border-radius: ${({
47
54
  theme
48
55
  }) => forcePixelValue(theme.radii.xs)};
56
+ column-gap: ${({
57
+ theme
58
+ }) => forcePixelValue(theme.space[2])};
59
+
60
+ & .flash__content {
61
+ flex: 1;
62
+ display: flex;
63
+ flex-direction: column;
64
+ }
49
65
 
50
66
  & .flash__content__children {
51
67
  font-size: ${({
52
68
  theme
53
- }) => forcePixelValue(theme.fontSizes.xs)};
69
+ }) => forcePixelValue(theme.fontSizes.xxs)};
54
70
  font-weight: ${({
55
71
  theme
56
72
  }) => theme.fontWeights.medium};
@@ -70,12 +86,22 @@ const BaseFlash = styled.div`
70
86
  }) => forcePixelValue(theme.space[2])};
71
87
  }
72
88
 
73
- & > svg {
74
- min-width: ${forcePixelValue(20)};
75
- height: ${forcePixelValue(20)};
76
- margin-right: ${({
89
+ & .flash__leading_icon {
90
+ min-width: ${forcePixelValue(16)};
91
+ height: ${forcePixelValue(16)};
92
+ }
93
+
94
+ & .flash__trailing_visual {
95
+ display: flex;
96
+ flex-direction: column;
97
+
98
+ svg {
99
+ width: ${forcePixelValue(16)};
100
+ height: ${forcePixelValue(16)};
101
+ color: ${({
77
102
  theme
78
- }) => forcePixelValue(theme.space[2])};
103
+ }) => theme.colors['icon/neutral/bold']};
104
+ }
79
105
  }
80
106
 
81
107
  ${({
@@ -85,13 +111,13 @@ const BaseFlash = styled.div`
85
111
  variants: {
86
112
  neutral: {
87
113
  'backgroundColor': 'bg/neutral',
88
- '& > svg': {
114
+ '& .flash__leading_icon': {
89
115
  color: 'icon/neutral/bold'
90
116
  }
91
117
  },
92
118
  danger: {
93
119
  'backgroundColor': 'bg/danger',
94
- '& > svg': {
120
+ '& .flash__leading_icon': {
95
121
  color: 'icon/danger'
96
122
  }
97
123
  },
@@ -100,9 +126,15 @@ const BaseFlash = styled.div`
100
126
  'borderWidth': 1,
101
127
  'borderStyle': 'solid',
102
128
  'borderColor': 'transparent',
103
- '& > svg': {
129
+ '& .flash__leading_icon': {
104
130
  color: 'icon/primary'
105
131
  }
132
+ },
133
+ accent: {
134
+ 'backgroundColor': 'bg/accent/blue/subtlest',
135
+ '& .flash__leading_icon': {
136
+ color: 'icon/accent/blue'
137
+ }
106
138
  }
107
139
  }
108
140
  })}
package/esm/packages/icons/esm/ArrowBelow.js CHANGED
@@ -8,17 +8,10 @@ const SvgArrowBelow = props => /*#__PURE__*/React.createElement("svg", _extends(
8
8
  fill: "none",
9
9
  viewBox: "0 0 24 24"
10
10
  }, props), /*#__PURE__*/React.createElement("path", {
11
- stroke: "currentColor",
12
- strokeLinecap: "round",
13
- strokeLinejoin: "round",
14
- strokeWidth: 2.2,
15
- d: "m14.293 20.046 4.64-4.639-4.64-4.64"
16
- }), /*#__PURE__*/React.createElement("path", {
17
- stroke: "currentColor",
18
- strokeLinecap: "round",
19
- strokeLinejoin: "round",
20
- strokeWidth: 2.2,
21
- d: "M18.932 15.407H7.568a2.5 2.5 0 0 1-2.5-2.5V3.953"
11
+ fill: "currentColor",
12
+ fillRule: "evenodd",
13
+ d: "M6.168 3.953a1.1 1.1 0 0 0-2.2 0v8.954a3.6 3.6 0 0 0 3.6 3.6h8.709l-2.762 2.762a1.1 1.1 0 0 0 1.556 1.555l4.639-4.639a1.098 1.098 0 0 0 0-1.556L15.07 9.99a1.1 1.1 0 1 0-1.555 1.556l2.762 2.761h-8.71a1.4 1.4 0 0 1-1.4-1.4V3.953Z",
14
+ clipRule: "evenodd"
22
15
  }));
23
16
 
24
17
  export { SvgArrowBelow as default };
package/esm/packages/icons/esm/LetterCrownColor.js CHANGED
@@ -6,20 +6,20 @@ const SvgLetterCrownColor = props => /*#__PURE__*/React.createElement("svg", _ex
6
6
  width: "1em",
7
7
  height: "1em",
8
8
  fill: "none",
9
- viewBox: "0 0 65 64"
9
+ viewBox: "0 0 24 24"
10
10
  }, props), /*#__PURE__*/React.createElement("path", {
11
- fill: "#FFF99D",
12
- d: "M2.938 18.772c0-3.004-.427-5.438 2.576-5.438h53.48c3.004 0 2.568 2.434 2.568 5.438V46.8c0 3.003.227 5.438-2.777 5.438H5.514c-3.004 0-2.576-2.435-2.576-5.438V18.772Z"
11
+ fill: "#FFE8A1",
12
+ d: "M1.008 7.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V7.04Z"
13
13
  }), /*#__PURE__*/React.createElement("path", {
14
- fill: "#FFFF9E",
15
- d: "M5.514 52.238h53.69c1.67 0 2.358-1.355 2.358-3.026 0-.52-.135-1.032-.39-1.485L48.154 24.629a5.438 5.438 0 0 0-4.738-2.769h-21.18a5.438 5.438 0 0 0-4.666 2.646L3.304 48.339c-.24.4-.366.857-.366 1.323 0 1.422.418 2.576 2.576 2.576Z"
14
+ fill: "#FFEFC0",
15
+ d: "M1.974 19.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
16
16
  }), /*#__PURE__*/React.createElement("path", {
17
- fill: "#FFFFA6",
18
- d: "M59.622 13.334H5.083a2.145 2.145 0 0 0-1.425 3.748l25.136 22.334a5.438 5.438 0 0 0 7.249-.022l24.806-22.31a2.15 2.15 0 0 0 .713-1.6c0-1.188-.752-2.15-1.94-2.15Z"
17
+ fill: "#FFF5D8",
18
+ d: "M22.264 5H1.812a.804.804 0 0 0-.534 1.406l9.426 8.375a2.04 2.04 0 0 0 2.718-.008l9.302-8.367a.806.806 0 0 0 .268-.6c0-.445-.282-.806-.728-.806Z"
19
19
  }), /*#__PURE__*/React.createElement("path", {
20
- fill: "#FFCD39",
20
+ fill: "#FFC107",
21
21
  fillRule: "evenodd",
22
- d: "M24.727 42.477c-.514 0-.947-.397-1.006-.923l-1.282-11.361c-.115-1.02 1.12-1.579 1.772-.803l3.798 4.51 2.808-6.142a1.502 1.502 0 0 1 2.75 0l2.81 6.141 3.797-4.51c.653-.775 1.887-.215 1.772.804l-1.281 11.361c-.06.526-.492.923-1.007.923H24.727Z",
22
+ d: "M9.179 15.929a.384.384 0 0 1-.378-.346l-.48-4.26c-.043-.383.42-.593.664-.302l1.425 1.691 1.053-2.303a.563.563 0 0 1 1.031 0l1.053 2.303 1.424-1.691c.245-.29.708-.081.665.301l-.48 4.26a.384.384 0 0 1-.378.347h-5.6Z",
23
23
  clipRule: "evenodd"
24
24
  }));
25
25
 
package/esm/packages/icons/esm/LetterCrownOpenColor.js CHANGED
@@ -15,7 +15,7 @@ const SvgLetterCrownOpenColor = props => /*#__PURE__*/React.createElement("svg",
15
15
  d: "M1.008 11.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V11.04Z"
16
16
  }), /*#__PURE__*/React.createElement("path", {
17
17
  fill: "#FDE2E2",
18
- d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
18
+ d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.135 0-.196-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
19
19
  }), /*#__PURE__*/React.createElement("path", {
20
20
  fill: "#FFF9E8",
21
21
  d: "M2 3.2c0-.22.18-.4.4-.4h19.2c.22 0 .4.18.4.4v15.4a.4.4 0 0 1-.4.4H2.4a.4.4 0 0 1-.4-.4V3.2Z"
@@ -29,7 +29,7 @@ const SvgLetterCrownOpenColor = props => /*#__PURE__*/React.createElement("svg",
29
29
  d: "M22.992 21.55V11.04c0-1.127.163-2.04-.963-2.04h-.633a.4.4 0 0 0-.316.155L17.8 13.4H6.6L3.12 9.147A.4.4 0 0 0 2.81 9h-.836c-1.126 0-.966.913-.966 2.04v10.51c0 1.126-.16 2.04.966 2.04H21.95c1.126 0 1.04-.914 1.04-2.04Z"
30
30
  }), /*#__PURE__*/React.createElement("path", {
31
31
  fill: "#FFEFC0",
32
- d: "M1.966 23.591H22.1c.626 0 .884-.508.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
32
+ d: "M1.966 23.591H22.1c.626 0 .884-.507.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
33
33
  }));
34
34
 
35
35
  export { SvgLetterCrownOpenColor as default };
package/esm/packages/icons/esm/LetterHeartColor.js CHANGED
@@ -6,20 +6,20 @@ const SvgLetterHeartColor = props => /*#__PURE__*/React.createElement("svg", _ex
6
6
  width: "1em",
7
7
  height: "1em",
8
8
  fill: "none",
9
- viewBox: "0 0 65 64"
9
+ viewBox: "0 0 24 24"
10
10
  }, props), /*#__PURE__*/React.createElement("path", {
11
- fill: "#FCDDDD",
12
- d: "M3.438 18.772c0-3.004-.427-5.438 2.576-5.438h53.48c3.004 0 2.568 2.434 2.568 5.438V46.8c0 3.003.227 5.438-2.777 5.438H6.014c-3.004 0-2.576-2.435-2.576-5.438V18.772Z"
11
+ fill: "#FFD5D5",
12
+ d: "M1.008 7.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V7.04Z"
13
13
  }), /*#__PURE__*/React.createElement("path", {
14
14
  fill: "#FDE2E2",
15
- d: "M6.014 52.238h53.69c1.67 0 2.358-1.355 2.358-3.026 0-.52-.135-1.032-.39-1.485L48.654 24.629a5.438 5.438 0 0 0-4.738-2.769h-21.18a5.438 5.438 0 0 0-4.666 2.646L3.804 48.339c-.24.4-.366.857-.366 1.323 0 1.422.418 2.576 2.576 2.576Z"
15
+ d: "M1.974 19.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
16
16
  }), /*#__PURE__*/React.createElement("path", {
17
- fill: "#FEE5E5",
18
- d: "M60.122 13.334H5.583a2.145 2.145 0 0 0-1.425 3.748l25.136 22.334a5.438 5.438 0 0 0 7.249-.022l24.806-22.31a2.15 2.15 0 0 0 .713-1.6c0-1.188-.752-2.15-1.94-2.15Z"
17
+ fill: "#FFEBEB",
18
+ d: "M22.264 5H1.812a.804.804 0 0 0-.534 1.406l9.426 8.375a2.04 2.04 0 0 0 2.718-.008l9.302-8.367a.806.806 0 0 0 .268-.6c0-.445-.282-.806-.728-.806Z"
19
19
  }), /*#__PURE__*/React.createElement("path", {
20
20
  fill: "#FF5678",
21
21
  fillRule: "evenodd",
22
- d: "M31.76 43.765a1.79 1.79 0 0 0 1.978 0c1.91-1.26 6.068-4.274 7.86-7.646 2.361-4.448-.412-8.885-4.078-8.885-2.09 0-3.347 1.092-4.042 2.03a.9.9 0 0 1-1.457 0c-.695-.938-1.952-2.03-4.042-2.03-3.666 0-6.44 4.437-4.077 8.885 1.79 3.372 5.95 6.385 7.858 7.646Z",
22
+ d: "M11.629 16.412a.671.671 0 0 0 .741 0c.716-.473 2.276-1.603 2.948-2.867.885-1.668-.155-3.332-1.53-3.332a1.82 1.82 0 0 0-1.515.761.338.338 0 0 1-.546 0 1.82 1.82 0 0 0-1.516-.761c-1.375 0-2.415 1.664-1.53 3.332.672 1.264 2.232 2.394 2.948 2.867Z",
23
23
  clipRule: "evenodd"
24
24
  }));
25
25
 
package/esm/packages/icons/esm/LetterHeartOpenColor.js CHANGED
@@ -15,7 +15,7 @@ const SvgLetterHeartOpenColor = props => /*#__PURE__*/React.createElement("svg",
15
15
  d: "M1.008 11.04c0-1.127-.16-2.04.966-2.04h20.055c1.126 0 .963.913.963 2.04v10.51c0 1.126.085 2.04-1.041 2.04H1.974c-1.126 0-.966-.914-.966-2.04V11.04Z"
16
16
  }), /*#__PURE__*/React.createElement("path", {
17
17
  fill: "#FDE2E2",
18
- d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.136 0-.195-.05-.387-.146-.556l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
18
+ d: "M1.974 23.59h20.133c.627 0 .885-.509.885-1.135 0-.196-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.245a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
19
19
  }), /*#__PURE__*/React.createElement("path", {
20
20
  fill: "#FFF7F7",
21
21
  d: "M2 3.2c0-.22.18-.4.4-.4h19.2c.22 0 .4.18.4.4v15.4a.4.4 0 0 1-.4.4H2.4a.4.4 0 0 1-.4-.4V3.2Z"
@@ -29,7 +29,7 @@ const SvgLetterHeartOpenColor = props => /*#__PURE__*/React.createElement("svg",
29
29
  d: "M22.992 21.55V11.04c0-1.127.163-2.04-.963-2.04h-.633a.4.4 0 0 0-.316.155L17.8 13.4H6.6L3.12 9.147A.4.4 0 0 0 2.81 9h-.836c-1.126 0-.966.913-.966 2.04v10.51c0 1.126-.16 2.04.966 2.04H21.95c1.126 0 1.04-.914 1.04-2.04Z"
30
30
  }), /*#__PURE__*/React.createElement("path", {
31
31
  fill: "#FFDFDF",
32
- d: "M1.966 23.591H22.1c.626 0 .884-.508.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
32
+ d: "M1.966 23.591H22.1c.626 0 .884-.507.884-1.134 0-.195-.05-.387-.146-.557l-4.882-8.662a2.04 2.04 0 0 0-1.777-1.038H8.237a2.04 2.04 0 0 0-1.75.992l-5.35 8.937a.966.966 0 0 0-.137.496c0 .534.157.966.966.966Z"
33
33
  }));
34
34
 
35
35
  export { SvgLetterHeartOpenColor as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.26.3",
3
+ "version": "2.27.0",
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,7 +55,7 @@
55
55
  "dependencies": {
56
56
  "@floating-ui/react-dom": "^2.0.2",
57
57
  "@primer/behaviors": "^1.3.6",
58
- "@teamturing/icons": "^1.40.1",
58
+ "@teamturing/icons": "^1.40.2",
59
59
  "@teamturing/token-studio": "^1.6.0",
60
60
  "@teamturing/utils": "^1.3.0",
61
61
  "framer-motion": "^10.16.4",
@@ -66,5 +66,5 @@
66
66
  "react-textarea-autosize": "^8.5.3",
67
67
  "styled-system": "^5.1.5"
68
68
  },
69
- "gitHead": "d0cfb545d0075aaf001e018fd48e848117c66e99"
69
+ "gitHead": "e5fe17d304318b42494a115dc6d472773065842a"
70
70
  }