@nurihaus/web-design-system 3.8.0 → 3.9.1

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 (36) hide show
  1. package/README.md +1 -1
  2. package/dist/ai/components.md +44 -4
  3. package/dist/ai/motion.md +2 -0
  4. package/dist/ai/tokens.md +3 -0
  5. package/dist/chunk-1176.js +24 -0
  6. package/dist/chunk-910.js +15 -13
  7. package/dist/components/bottom-bar/bottom-bar.stories.d.ts +9 -9
  8. package/dist/components/empty-state/empty-state.stories.d.ts +10 -10
  9. package/dist/components/icon/icon.stories.d.ts +1 -1
  10. package/dist/components/icon-button/base-icon-button.d.ts +3 -0
  11. package/dist/components/icon-button/icon-button-props.d.ts +12 -0
  12. package/dist/components/icon-button/icon-button-type.d.ts +16 -0
  13. package/dist/components/icon-button/icon-button.d.ts +5 -0
  14. package/dist/components/icon-button/icon-button.stories.d.ts +31 -0
  15. package/dist/components/list/list-row.stories.d.ts +13 -13
  16. package/dist/components/message/message.stories.d.ts +11 -11
  17. package/dist/components/message-composer/message-composer-type.d.ts +4 -0
  18. package/dist/components/message-composer/message-composer.stories.d.ts +2 -0
  19. package/dist/components/notice/notice-type.d.ts +2 -0
  20. package/dist/components/notice/notice.stories.d.ts +11 -11
  21. package/dist/components/skeleton/skeleton.stories.d.ts +11 -11
  22. package/dist/components/toast/toast.stories.d.ts +15 -15
  23. package/dist/components.css +103 -0
  24. package/dist/cta-button.js +20 -16
  25. package/dist/helpers/utils/fillLinkChild.d.ts +6 -0
  26. package/dist/icon-button.js +338 -0
  27. package/dist/index.d.ts +2 -0
  28. package/dist/index.js +216 -26
  29. package/dist/list-row.js +19 -13
  30. package/dist/message-composer.js +5 -1
  31. package/dist/modal-with-double-button.js +8 -6
  32. package/dist/notice.js +9 -5
  33. package/dist/styles.css +88 -0
  34. package/dist/toast.js +8 -6
  35. package/dist/tokens.css +5 -0
  36. package/package.json +5 -1
@@ -21,6 +21,8 @@ declare const meta: {
21
21
  leading?: import("react").ReactNode;
22
22
  attachments?: import("react").ReactNode;
23
23
  disabled?: boolean | undefined;
24
+ autoFocus?: boolean | undefined;
25
+ maxLength?: number | undefined;
24
26
  className?: string | undefined;
25
27
  style?: import("react").CSSProperties | undefined;
26
28
  track?: string | undefined;
@@ -6,6 +6,8 @@ export type BaseNoticeProps = ComponentPropsWithRef<'div'>;
6
6
  export interface NoticeAction extends TrackProps {
7
7
  label: string;
8
8
  onClick: () => void;
9
+ /** 처리 중. 버튼이 Spinner 로 바뀌고 누르지 않는다 */
10
+ loading?: boolean;
9
11
  }
10
12
  export interface NoticeProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
11
13
  variant?: (typeof variant)[number];
@@ -21,15 +21,16 @@ declare const meta: {
21
21
  children: string;
22
22
  };
23
23
  decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
24
+ title?: import("react").ReactNode;
25
+ children: import("react").ReactNode;
24
26
  className?: string | undefined | undefined;
25
- onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
26
- onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
27
- id?: string | undefined | undefined;
28
27
  style?: import("react").CSSProperties | undefined;
29
- children: import("react").ReactNode;
30
- slot?: string | undefined | undefined;
31
- title?: import("react").ReactNode;
32
28
  key?: import("react").Key | null | undefined;
29
+ color?: string | undefined | undefined;
30
+ content?: string | undefined | undefined;
31
+ translate?: "yes" | "no" | undefined | undefined;
32
+ motion?: (typeof motion)[number] | undefined;
33
+ slot?: string | undefined | undefined;
33
34
  defaultChecked?: boolean | undefined | undefined;
34
35
  defaultValue?: string | number | readonly string[] | undefined;
35
36
  suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -43,15 +44,14 @@ declare const meta: {
43
44
  draggable?: (boolean | "true" | "false") | undefined;
44
45
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
45
46
  hidden?: boolean | undefined | undefined;
47
+ id?: string | undefined | undefined;
46
48
  lang?: string | undefined | undefined;
47
49
  nonce?: string | undefined | undefined;
48
50
  spellCheck?: (boolean | "true" | "false") | undefined;
49
51
  tabIndex?: number | undefined | undefined;
50
- translate?: "yes" | "no" | undefined | undefined;
51
52
  radioGroup?: string | undefined | undefined;
52
53
  role?: import("react").AriaRole | undefined;
53
54
  about?: string | undefined | undefined;
54
- content?: string | undefined | undefined;
55
55
  datatype?: string | undefined | undefined;
56
56
  inlist?: any;
57
57
  prefix?: string | undefined | undefined;
@@ -63,7 +63,6 @@ declare const meta: {
63
63
  vocab?: string | undefined | undefined;
64
64
  autoCorrect?: string | undefined | undefined;
65
65
  autoSave?: string | undefined | undefined;
66
- color?: string | undefined | undefined;
67
66
  itemProp?: string | undefined | undefined;
68
67
  itemScope?: boolean | undefined | undefined;
69
68
  itemType?: string | undefined | undefined;
@@ -148,6 +147,7 @@ declare const meta: {
148
147
  onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
149
148
  onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
150
149
  onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
150
+ onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
151
151
  onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
152
152
  onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
153
153
  onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -215,6 +215,7 @@ declare const meta: {
215
215
  onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
216
216
  onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
217
217
  onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
218
+ onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
218
219
  onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
219
220
  onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
220
221
  onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
@@ -288,9 +289,8 @@ declare const meta: {
288
289
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
289
290
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
290
291
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
291
- motion?: (typeof motion)[number] | undefined;
292
- variant?: (typeof variant)[number] | undefined;
293
292
  action?: import("./notice-type").NoticeAction | undefined;
293
+ variant?: (typeof variant)[number] | undefined;
294
294
  ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
295
295
  }>) => import("react/jsx-runtime").JSX.Element)[];
296
296
  };
@@ -38,15 +38,17 @@ declare const meta: {
38
38
  animated: true;
39
39
  };
40
40
  decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
41
+ title?: string | undefined | undefined;
42
+ children?: import("react").ReactNode;
41
43
  className?: string | undefined | undefined;
42
- onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
43
- onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
44
- id?: string | undefined | undefined;
45
44
  style?: import("react").CSSProperties | undefined;
46
- children?: import("react").ReactNode;
47
- slot?: string | undefined | undefined;
48
- title?: string | undefined | undefined;
49
45
  key?: import("react").Key | null | undefined;
46
+ color?: string | undefined | undefined;
47
+ content?: string | undefined | undefined;
48
+ height?: number | string | undefined;
49
+ translate?: "yes" | "no" | undefined | undefined;
50
+ width?: number | string | undefined;
51
+ slot?: string | undefined | undefined;
50
52
  defaultChecked?: boolean | undefined | undefined;
51
53
  defaultValue?: string | number | readonly string[] | undefined;
52
54
  suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -60,15 +62,14 @@ declare const meta: {
60
62
  draggable?: (boolean | "true" | "false") | undefined;
61
63
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
62
64
  hidden?: boolean | undefined | undefined;
65
+ id?: string | undefined | undefined;
63
66
  lang?: string | undefined | undefined;
64
67
  nonce?: string | undefined | undefined;
65
68
  spellCheck?: (boolean | "true" | "false") | undefined;
66
69
  tabIndex?: number | undefined | undefined;
67
- translate?: "yes" | "no" | undefined | undefined;
68
70
  radioGroup?: string | undefined | undefined;
69
71
  role?: import("react").AriaRole | undefined;
70
72
  about?: string | undefined | undefined;
71
- content?: string | undefined | undefined;
72
73
  datatype?: string | undefined | undefined;
73
74
  inlist?: any;
74
75
  prefix?: string | undefined | undefined;
@@ -80,7 +81,6 @@ declare const meta: {
80
81
  vocab?: string | undefined | undefined;
81
82
  autoCorrect?: string | undefined | undefined;
82
83
  autoSave?: string | undefined | undefined;
83
- color?: string | undefined | undefined;
84
84
  itemProp?: string | undefined | undefined;
85
85
  itemScope?: boolean | undefined | undefined;
86
86
  itemType?: string | undefined | undefined;
@@ -165,6 +165,7 @@ declare const meta: {
165
165
  onFocusCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
166
166
  onBlur?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
167
167
  onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
168
+ onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
168
169
  onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
169
170
  onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
170
171
  onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
@@ -232,6 +233,7 @@ declare const meta: {
232
233
  onWaitingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
233
234
  onAuxClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
234
235
  onAuxClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
236
+ onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
235
237
  onClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
236
238
  onContextMenu?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
237
239
  onContextMenuCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
@@ -305,8 +307,6 @@ declare const meta: {
305
307
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
306
308
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
307
309
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
308
- width?: number | string | undefined;
309
- height?: number | string | undefined;
310
310
  shape?: (typeof shapes)[number] | undefined;
311
311
  lines?: number | undefined;
312
312
  animated?: boolean | undefined;
@@ -17,17 +17,20 @@ declare const meta: {
17
17
  variant: "default";
18
18
  };
19
19
  decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
20
+ title: import("react").ReactNode;
21
+ description?: import("react").ReactNode;
22
+ open?: boolean | undefined;
23
+ defaultOpen?: boolean | undefined;
24
+ onOpenChange?: ((open: boolean) => void) | undefined;
20
25
  className?: string | undefined;
21
- onClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
22
- onChange?: import("react").FormEventHandler<HTMLLIElement> | undefined;
23
- id?: string | undefined | undefined;
26
+ style?: import("react").CSSProperties | undefined;
24
27
  track?: string | undefined;
25
28
  trackProps?: Record<string, string | number | boolean> | undefined;
26
- style?: import("react").CSSProperties | undefined;
27
- open?: boolean | undefined;
28
- slot?: string | undefined | undefined;
29
- title: import("react").ReactNode;
30
29
  key?: import("react").Key | null | undefined;
30
+ color?: string | undefined | undefined;
31
+ content?: string | undefined | undefined;
32
+ translate?: "yes" | "no" | undefined | undefined;
33
+ slot?: string | undefined | undefined;
31
34
  value?: string | number | readonly string[] | undefined;
32
35
  defaultChecked?: boolean | undefined | undefined;
33
36
  defaultValue?: string | number | readonly string[] | undefined;
@@ -42,15 +45,14 @@ declare const meta: {
42
45
  draggable?: (boolean | "true" | "false") | undefined;
43
46
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
44
47
  hidden?: boolean | undefined | undefined;
48
+ id?: string | undefined | undefined;
45
49
  lang?: string | undefined | undefined;
46
50
  nonce?: string | undefined | undefined;
47
51
  spellCheck?: (boolean | "true" | "false") | undefined;
48
52
  tabIndex?: number | undefined | undefined;
49
- translate?: "yes" | "no" | undefined | undefined;
50
53
  radioGroup?: string | undefined | undefined;
51
54
  role?: import("react").AriaRole | undefined;
52
55
  about?: string | undefined | undefined;
53
- content?: string | undefined | undefined;
54
56
  datatype?: string | undefined | undefined;
55
57
  inlist?: any;
56
58
  prefix?: string | undefined | undefined;
@@ -62,7 +64,6 @@ declare const meta: {
62
64
  vocab?: string | undefined | undefined;
63
65
  autoCorrect?: string | undefined | undefined;
64
66
  autoSave?: string | undefined | undefined;
65
- color?: string | undefined | undefined;
66
67
  itemProp?: string | undefined | undefined;
67
68
  itemScope?: boolean | undefined | undefined;
68
69
  itemType?: string | undefined | undefined;
@@ -147,6 +148,7 @@ declare const meta: {
147
148
  onFocusCapture?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
148
149
  onBlur?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
149
150
  onBlurCapture?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
151
+ onChange?: import("react").FormEventHandler<HTMLLIElement> | undefined;
150
152
  onChangeCapture?: import("react").FormEventHandler<HTMLLIElement> | undefined;
151
153
  onBeforeInput?: import("react").InputEventHandler<HTMLLIElement> | undefined;
152
154
  onBeforeInputCapture?: import("react").FormEventHandler<HTMLLIElement> | undefined;
@@ -214,6 +216,7 @@ declare const meta: {
214
216
  onWaitingCapture?: import("react").ReactEventHandler<HTMLLIElement> | undefined;
215
217
  onAuxClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
216
218
  onAuxClickCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
219
+ onClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
217
220
  onClickCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
218
221
  onContextMenu?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
219
222
  onContextMenuCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
@@ -287,13 +290,10 @@ declare const meta: {
287
290
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
288
291
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
289
292
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
293
+ action?: import("./toast-type").ToastAction | undefined;
294
+ variant?: (typeof variants)[number] | undefined;
290
295
  onResume?: (() => void) | undefined;
291
- defaultOpen?: boolean | undefined;
292
- onOpenChange?: ((open: boolean) => void) | undefined;
293
296
  duration?: number | undefined;
294
- description?: import("react").ReactNode;
295
- variant?: (typeof variants)[number] | undefined;
296
- action?: import("./toast-type").ToastAction | undefined;
297
297
  showClose?: boolean | undefined;
298
298
  ref?: import("react").LegacyRef<HTMLLIElement> | undefined;
299
299
  }>) => import("react/jsx-runtime").JSX.Element)[];
@@ -1645,6 +1645,13 @@
1645
1645
  gap: var(--spacing-10);
1646
1646
  }
1647
1647
 
1648
+ /* popper 는 높이를 정하지 않아 긴 목록(나라 221개)이 화면 밖으로 넘치고 스크롤도 안 된다.
1649
+ 화면에 남은 높이까지만 쓰고 Viewport 가 스크롤한다 */
1650
+
1651
+ .base-drop-down.content {
1652
+ max-height: var(--radix-select-content-available-height);
1653
+ }
1654
+
1648
1655
  /***************************************************************************************************
1649
1656
  * *
1650
1657
  * drop-down-single *
@@ -2418,6 +2425,102 @@
2418
2425
  height: var(--icon-size-xl);
2419
2426
  }
2420
2427
 
2428
+ .base-icon-button {
2429
+ position: relative;
2430
+ flex: none;
2431
+ display: inline-flex;
2432
+ align-items: center;
2433
+ justify-content: center;
2434
+ padding: 0;
2435
+ border: none;
2436
+ cursor: var(--cursor-button);
2437
+
2438
+ /* 보이는 크기가 작아도(s 36) 누르는 자리는 터치 44 */
2439
+ }
2440
+
2441
+ .base-icon-button::after {
2442
+ content: '';
2443
+ position: absolute;
2444
+ top: 50%;
2445
+ left: 50%;
2446
+ width: var(--touch-target);
2447
+ height: var(--touch-target);
2448
+ transform: translate(-50%, -50%);
2449
+ }
2450
+
2451
+ .base-icon-button[data-disabled] {
2452
+ cursor: var(--cursor-disabled);
2453
+ }
2454
+
2455
+ /***************************************************************************************************
2456
+ * *
2457
+ * icon-button *
2458
+ * *
2459
+ ***************************************************************************************************/
2460
+
2461
+ .icon-button {
2462
+ border-radius: var(--radius-full);
2463
+ transition:
2464
+ transform var(--motion-press-duration) var(--motion-press-ease),
2465
+ background-color var(--motion-press-duration) var(--motion-press-ease);
2466
+ }
2467
+
2468
+ .icon-button:active:not([data-disabled]) {
2469
+ transform: scale(var(--motion-press-scale));
2470
+ }
2471
+
2472
+ .icon-button:focus-visible {
2473
+ outline: var(--hairline) solid var(--color-purple-600);
2474
+ outline-offset: var(--spacing-2);
2475
+ }
2476
+
2477
+ .icon-button.size-s {
2478
+ width: var(--icon-button-size-s);
2479
+ height: var(--icon-button-size-s);
2480
+ }
2481
+
2482
+ .icon-button.size-m {
2483
+ width: var(--icon-button-size-m);
2484
+ height: var(--icon-button-size-m);
2485
+ }
2486
+
2487
+ .icon-button.size-l {
2488
+ width: var(--icon-button-size-l);
2489
+ height: var(--icon-button-size-l);
2490
+ }
2491
+
2492
+ /* 바탕 없이 아이콘만. 누르는 동안 회색 원이 보인다 */
2493
+
2494
+ .icon-button.variant-ghost {
2495
+ background-color: transparent;
2496
+ color: var(--color-grey-scale-700);
2497
+ }
2498
+
2499
+ .icon-button.variant-ghost:active:not([data-disabled]) {
2500
+ background-color: var(--color-grey-scale-100);
2501
+ }
2502
+
2503
+ /* CTAButton secondary 와 같은 연보라 */
2504
+
2505
+ .icon-button.variant-secondary {
2506
+ background-color: var(--color-purple-50);
2507
+ color: var(--color-purple-900);
2508
+ }
2509
+
2510
+ .icon-button.variant-primary {
2511
+ background-color: var(--color-purple-900);
2512
+ color: var(--color-white);
2513
+ }
2514
+
2515
+ .icon-button[data-disabled] {
2516
+ color: var(--color-grey-scale-300);
2517
+ }
2518
+
2519
+ .icon-button[data-disabled]:is(.variant-secondary,.variant-primary) {
2520
+ background-color: var(--color-grey-scale-200);
2521
+ color: var(--color-white);
2522
+ }
2523
+
2421
2524
  .base-list:where(.group) {
2422
2525
  display: flex;
2423
2526
  flex-direction: column;
@@ -13,11 +13,12 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/j
13
13
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
14
14
  /* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
15
15
  /* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
16
- /* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
17
- /* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(1163);
18
- /* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(6302);
19
- /* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(8933);
20
- /* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(9976);
16
+ /* harmony import */ var _helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(1176);
17
+ /* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(7335);
18
+ /* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(1163);
19
+ /* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(6302);
20
+ /* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(8933);
21
+ /* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_9__ = __nuri_require__(9976);
21
22
  var __assign = undefined && undefined.__assign || function () {
22
23
  __assign = Object.assign || function (t) {
23
24
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -45,8 +46,9 @@ var __rest = undefined && undefined.__rest || function (s, e) {
45
46
 
46
47
 
47
48
 
49
+
48
50
  var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
49
- var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_8__/* .ctaButtonProps */ .Lr),
51
+ var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_9__/* .ctaButtonProps */ .Lr),
50
52
  className = _a.className,
51
53
  text = _a.text,
52
54
  leftIcon = _a.leftIcon,
@@ -64,26 +66,26 @@ var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
64
66
  trackProps: trackProps
65
67
  });
66
68
  var content = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
67
- children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
69
+ children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
68
70
  className: 'cta-button-callout',
69
71
  text: callout
70
72
  }) : null]
71
73
  });
72
74
  // asChild 면 넘겨받은 링크 요소 안에 버튼 글자를 넣고, 그 요소가 버튼 클래스·핸들러를 받는다
73
- var linkChild = asChild && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.isValidElement)(children) ? children : null;
74
- return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_button__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, __assign({
75
+ var link = (0,_helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__/* .fillLinkChild */ .Q)(asChild, children, content);
76
+ return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_button__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .A, __assign({
75
77
  ref: ref,
76
78
  className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button', callout ? 'with-callout' : undefined),
77
- loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {}),
78
- asChild: linkChild !== null,
79
+ loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {}),
80
+ asChild: link !== null,
79
81
  // 링크는 로딩을 그리지 않는다. 그리면 Spinner 가 링크 자리를 차지한다
80
- loading: linkChild ? undefined : loading,
82
+ loading: link ? undefined : loading,
81
83
  onClick: function onClick(event) {
82
84
  emit('click');
83
85
  _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
84
86
  }
85
87
  }, restProps, {
86
- children: linkChild ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(linkChild, undefined, content) : content
88
+ children: link !== null && link !== void 0 ? link : content
87
89
  }));
88
90
  });
89
91
  CTAButton.displayName = 'CTAButton';
@@ -258,15 +260,17 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
258
260
  /******/ __nuri_require__.C(__webpack_chunk_6__);
259
261
  /******/ import * as __webpack_chunk_7__ from "./chunk-8933.js";
260
262
  /******/ __nuri_require__.C(__webpack_chunk_7__);
261
- /******/ import * as __webpack_chunk_8__ from "./chunk-2496.js";
263
+ /******/ import * as __webpack_chunk_8__ from "./chunk-1176.js";
262
264
  /******/ __nuri_require__.C(__webpack_chunk_8__);
263
- /******/ import * as __webpack_chunk_9__ from "./chunk-5226.js";
265
+ /******/ import * as __webpack_chunk_9__ from "./chunk-2496.js";
264
266
  /******/ __nuri_require__.C(__webpack_chunk_9__);
267
+ /******/ import * as __webpack_chunk_10__ from "./chunk-5226.js";
268
+ /******/ __nuri_require__.C(__webpack_chunk_10__);
265
269
  /******/
266
270
  /******/ // startup
267
271
  /******/ // Load entry module and return exports
268
272
  /******/ // This entry module depends on other loaded chunks and execution need to be delayed
269
- /******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,6302,8933,2496,5226], () => (__nuri_require__(910)))
273
+ /******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,6302,8933,1176,2496,5226], () => (__nuri_require__(910)))
270
274
  /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
271
275
  /******/ const __webpack_exports__default = __webpack_exports__.A;
272
276
  /******/ export { __webpack_exports__default as default };
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ /**
3
+ * asChild 로 받은 요소 하나(`<a>`·라우터 Link)에 컴포넌트의 내용을 채운다.
4
+ * 요소가 아니면 null — 쓰는 쪽은 null 이면 자기 기본 요소를 그린다.
5
+ */
6
+ export declare const fillLinkChild: (asChild: boolean | undefined, children: ReactNode, content: ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;