@nurihaus/web-design-system 3.2.0 → 3.3.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 (13) hide show
  1. package/dist/ai/components.md +3 -3
  2. package/dist/ai/tokens.md +2 -0
  3. package/dist/chunk-653.js +5 -1
  4. package/dist/components/icon/icon-paths.d.ts +4 -0
  5. package/dist/components/icon/icon-props.d.ts +2 -2
  6. package/dist/components/icon/icon.stories.d.ts +2 -2
  7. package/dist/components/skeleton/skeleton.stories.d.ts +5 -5
  8. package/dist/components/toast/toast.stories.d.ts +5 -5
  9. package/dist/components.css +10 -0
  10. package/dist/index.js +5 -1
  11. package/dist/styles.css +10 -0
  12. package/dist/tokens.css +2 -0
  13. package/package.json +1 -1
package/dist/ai/components.md CHANGED
@@ -1035,7 +1035,7 @@ import { Icon } from '@nurihaus/web-design-system/icon'; // 이 컴포넌트
1035
1035
  import { Icon } from '@nurihaus/web-design-system'; // 루트. 첫 로드 JS 가 커진다
1036
1036
  ```
1037
1037
 
1038
- **언제 쓴다.** 화면에 아이콘을 그릴 때 쓴다. 모양은 Phosphor(MIT) 에서 고른 것만 있고, `name` 으로 고른다. 색은 글자색(`currentColor`)을 따르므로 감싼 요소의 `color` 로 바꾼다. 꺼진 상태는 선(`weight="regular"`, 기본), 켜진 상태나 강조는 채움(`weight="fill"`)을 쓴다. 크기는 `s`(18) · `m`(20) · `l`(24, 기본). `className`·`style` 은 `<svg>` 에 붙는다.
1038
+ **언제 쓴다.** 화면에 아이콘을 그릴 때 쓴다. 모양은 Phosphor(MIT) 에서 고른 것만 있고, `name` 으로 고른다. 색은 글자색(`currentColor`)을 따르므로 감싼 요소의 `color` 로 바꾼다. 꺼진 상태는 선(`weight="regular"`, 기본), 켜진 상태나 강조는 채움(`weight="fill"`)을 쓴다. 크기는 `xs`(16) · `s`(18) · `m`(20) · `l`(24, 기본) · `xl`(32). `className`·`style` 은 `<svg>` 에 붙는다.
1039
1039
 
1040
1040
  글자 없이 아이콘만으로 뜻을 전하면(닫기 버튼 등) `label` 을 준다. 없으면 화면 낭독기가 건너뛴다.
1041
1041
 
@@ -1059,9 +1059,9 @@ import { Icon } from '@nurihaus/web-design-system'; // 루트. 첫
1059
1059
 
1060
1060
  | prop | 타입 | 필수 | 기본값 |
1061
1061
  | --- | --- | --- | --- |
1062
- | `size` | `'s' \| 'm' \| 'l'` | | `'l'` |
1062
+ | `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl'` | | `'l'` |
1063
1063
  | `label` | `string` | | |
1064
- | `name` | `'link' \| 'image' \| 'x' \| 'warning' \| 'house' \| 'megaphone-simple' \| 'chats-circle' \| 'user-circle' \| 'bell' \| 'caret-left' \| 'magnifying-glass' \| 'dots-three' \| 'gear-six' \| 'chat-circle' \| 'paper-plane-tilt' \| 'plus' \| 'camera' \| 'video-camera' \| 'upload-simple' \| 'calendar-blank' \| 'clock' \| 'map-pin' \| 'truck' \| 'ticket' \| 'qr-code' \| 'sparkle' \| 'gift' \| 'wallet' \| 'bank' \| 'credit-card' \| 'check-circle' \| 'check' \| 'info' \| 'question' \| 'lock' \| 'pencil-simple' \| 'trash' \| 'copy' \| 'share-network' \| 'eye' \| 'sliders-horizontal' \| 'heart' \| 'star' \| 'globe' \| 'sign-out' \| 'caret-right' \| 'arrow-right' \| 'instagram-logo' \| 'tiktok-logo' \| 'youtube-logo'` | 예 | |
1064
+ | `name` | `'link' \| 'image' \| 'x' \| 'warning' \| 'house' \| 'megaphone-simple' \| 'chats-circle' \| 'user-circle' \| 'bell' \| 'caret-left' \| 'magnifying-glass' \| 'dots-three' \| 'gear-six' \| 'chat-circle' \| 'paper-plane-tilt' \| 'plus' \| 'camera' \| 'video-camera' \| 'play' \| 'upload-simple' \| 'calendar-blank' \| 'clock' \| 'map-pin' \| 'truck' \| 'ticket' \| 'qr-code' \| 'sparkle' \| 'gift' \| 'wallet' \| 'bank' \| 'credit-card' \| 'check-circle' \| 'check' \| 'info' \| 'question' \| 'lock' \| 'pencil-simple' \| 'trash' \| 'copy' \| 'share-network' \| 'eye' \| 'sliders-horizontal' \| 'heart' \| 'star' \| 'globe' \| 'sign-out' \| 'caret-right' \| 'arrow-right' \| 'instagram-logo' \| 'tiktok-logo' \| 'youtube-logo'` | 예 | |
1065
1065
  | `weight` | `'fill' \| 'regular'` | | |
1066
1066
 
1067
1067
  이 밖에 React·HTML 기본 속성 474개를 받는다.
package/dist/ai/tokens.md CHANGED
@@ -355,9 +355,11 @@
355
355
  | `--bottom-nav-badge-count` | `18px` | 폭 |
356
356
  | `--glass-blur` | `18px` | 폭 |
357
357
  | `--step-bar-height` | `4px` | 진행 단계 바 |
358
+ | `--icon-size-xs` | `16px` | 그 밖의 치수 |
358
359
  | `--icon-size-s` | `18px` | 그 밖의 치수 |
359
360
  | `--icon-size-m` | `20px` | 그 밖의 치수 |
360
361
  | `--icon-size-l` | `24px` | 그 밖의 치수 |
362
+ | `--icon-size-xl` | `32px` | 그 밖의 치수 |
361
363
  | `--tooltip-arrow` | `8px` | 그 밖의 치수 |
362
364
  | `--spinner-stroke` | `3px` | 그 밖의 치수 |
363
365
  | `--overlay-spinner-size` | `64px` | 그 밖의 치수 |
package/dist/chunk-653.js CHANGED
@@ -86,6 +86,10 @@ var iconPaths = {
86
86
  regular: ['M251.77,73a8,8,0,0,0-8.21.39L208,97.05V72a16,16,0,0,0-16-16H32A16,16,0,0,0,16,72V184a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V159l35.56,23.71A8,8,0,0,0,248,184a8,8,0,0,0,8-8V80A8,8,0,0,0,251.77,73ZM192,184H32V72H192V184Zm48-22.95-32-21.33V116.28L240,95Z'],
87
87
  fill: ['M192,72V184a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V72A16,16,0,0,1,32,56H176A16,16,0,0,1,192,72Zm58,.25a8.23,8.23,0,0,0-6.63,1.22L209.78,95.86A4,4,0,0,0,208,99.19v57.62a4,4,0,0,0,1.78,3.33l33.78,22.52a8,8,0,0,0,8.58.19,8.33,8.33,0,0,0,3.86-7.17V80A8,8,0,0,0,250,72.25Z']
88
88
  },
89
+ play: {
90
+ regular: ['M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z'],
91
+ fill: ['M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z']
92
+ },
89
93
  link: {
90
94
  regular: ['M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z'],
91
95
  fill: ['M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM115.7,192.49a43.31,43.31,0,0,1-55-66.43l25.37-25.37a43.35,43.35,0,0,1,61.25,0,42.9,42.9,0,0,1,9.95,15.43,8,8,0,1,1-15,5.6A27.33,27.33,0,0,0,97.37,112L72,137.37a27.32,27.32,0,0,0,34.68,41.91,8,8,0,1,1,9,13.21Zm79.61-62.55-25.37,25.37A43,43,0,0,1,139.32,168h0a43.35,43.35,0,0,1-40.53-28.12,8,8,0,1,1,15-5.6A27.35,27.35,0,0,0,139.28,152h0a27.14,27.14,0,0,0,19.32-8L184,118.63a27.32,27.32,0,0,0-34.68-41.91,8,8,0,1,1-9-13.21,43.32,43.32,0,0,1,55,66.43Z']
@@ -286,7 +290,7 @@ BaseIcon.displayName = 'BaseIcon';
286
290
 
287
291
  /** 꺼짐은 선(regular), 켜짐·강조는 채움(fill) */
288
292
  var weight = (/* unused pure expression or super */ null && (['regular', 'fill']));
289
- var sizes = ['s', 'm', 'l'];
293
+ var sizes = ['xs', 's', 'm', 'l', 'xl'];
290
294
  var iconProps = {
291
295
  size: (0,_helpers_props_common_props__WEBPACK_IMPORTED_MODULE_0__/* .sizeProp */ .lw)(sizes, 'l')
292
296
  };
package/dist/components/icon/icon-paths.d.ts CHANGED
@@ -63,6 +63,10 @@ export declare const iconPaths: {
63
63
  readonly regular: readonly ["M251.77,73a8,8,0,0,0-8.21.39L208,97.05V72a16,16,0,0,0-16-16H32A16,16,0,0,0,16,72V184a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V159l35.56,23.71A8,8,0,0,0,248,184a8,8,0,0,0,8-8V80A8,8,0,0,0,251.77,73ZM192,184H32V72H192V184Zm48-22.95-32-21.33V116.28L240,95Z"];
64
64
  readonly fill: readonly ["M192,72V184a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V72A16,16,0,0,1,32,56H176A16,16,0,0,1,192,72Zm58,.25a8.23,8.23,0,0,0-6.63,1.22L209.78,95.86A4,4,0,0,0,208,99.19v57.62a4,4,0,0,0,1.78,3.33l33.78,22.52a8,8,0,0,0,8.58.19,8.33,8.33,0,0,0,3.86-7.17V80A8,8,0,0,0,250,72.25Z"];
65
65
  };
66
+ readonly play: {
67
+ readonly regular: readonly ["M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"];
68
+ readonly fill: readonly ["M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"];
69
+ };
66
70
  readonly link: {
67
71
  readonly regular: readonly ["M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"];
68
72
  readonly fill: readonly ["M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM115.7,192.49a43.31,43.31,0,0,1-55-66.43l25.37-25.37a43.35,43.35,0,0,1,61.25,0,42.9,42.9,0,0,1,9.95,15.43,8,8,0,1,1-15,5.6A27.33,27.33,0,0,0,97.37,112L72,137.37a27.32,27.32,0,0,0,34.68,41.91,8,8,0,1,1,9,13.21Zm79.61-62.55-25.37,25.37A43,43,0,0,1,139.32,168h0a43.35,43.35,0,0,1-40.53-28.12,8,8,0,1,1,15-5.6A27.35,27.35,0,0,0,139.28,152h0a27.14,27.14,0,0,0,19.32-8L184,118.63a27.32,27.32,0,0,0-34.68-41.91,8,8,0,1,1-9-13.21,43.32,43.32,0,0,1,55,66.43Z"];
package/dist/components/icon/icon-props.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /** 꺼짐은 선(regular), 켜짐·강조는 채움(fill) */
2
2
  export declare const weight: readonly ["regular", "fill"];
3
- export declare const sizes: readonly ["s", "m", "l"];
3
+ export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
4
4
  export declare const iconProps: {
5
- size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
5
+ size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;
6
6
  };
package/dist/components/icon/icon.stories.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const meta: {
7
7
  control: {
8
8
  type: "select";
9
9
  };
10
- options: ("link" | "image" | "x" | "copy" | "warning" | "house" | "megaphone-simple" | "chats-circle" | "user-circle" | "bell" | "caret-left" | "magnifying-glass" | "dots-three" | "gear-six" | "chat-circle" | "paper-plane-tilt" | "plus" | "camera" | "video-camera" | "upload-simple" | "calendar-blank" | "clock" | "map-pin" | "truck" | "ticket" | "qr-code" | "sparkle" | "gift" | "wallet" | "bank" | "credit-card" | "check-circle" | "check" | "info" | "question" | "lock" | "pencil-simple" | "trash" | "share-network" | "eye" | "sliders-horizontal" | "heart" | "star" | "globe" | "sign-out" | "caret-right" | "arrow-right" | "instagram-logo" | "tiktok-logo" | "youtube-logo")[];
10
+ options: ("link" | "image" | "x" | "copy" | "warning" | "play" | "house" | "megaphone-simple" | "chats-circle" | "user-circle" | "bell" | "caret-left" | "magnifying-glass" | "dots-three" | "gear-six" | "chat-circle" | "paper-plane-tilt" | "plus" | "camera" | "video-camera" | "upload-simple" | "calendar-blank" | "clock" | "map-pin" | "truck" | "ticket" | "qr-code" | "sparkle" | "gift" | "wallet" | "bank" | "credit-card" | "check-circle" | "check" | "info" | "question" | "lock" | "pencil-simple" | "trash" | "share-network" | "eye" | "sliders-horizontal" | "heart" | "star" | "globe" | "sign-out" | "caret-right" | "arrow-right" | "instagram-logo" | "tiktok-logo" | "youtube-logo")[];
11
11
  };
12
12
  weight: {
13
13
  control: {
@@ -19,7 +19,7 @@ declare const meta: {
19
19
  control: {
20
20
  type: "inline-radio";
21
21
  };
22
- options: readonly ["s", "m", "l"];
22
+ options: readonly ["xs", "s", "m", "l", "xl"];
23
23
  };
24
24
  };
25
25
  args: {
package/dist/components/skeleton/skeleton.stories.d.ts CHANGED
@@ -38,10 +38,9 @@ declare const meta: {
38
38
  animated: true;
39
39
  };
40
40
  decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
41
- slot?: string | undefined | undefined;
41
+ className?: string | undefined | undefined;
42
42
  style?: import("react").CSSProperties | undefined;
43
- title?: string | undefined | undefined;
44
- key?: import("react").Key | null | undefined;
43
+ children?: import("react").ReactNode;
45
44
  defaultChecked?: boolean | undefined | undefined;
46
45
  defaultValue?: string | number | readonly string[] | undefined;
47
46
  suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -49,7 +48,6 @@ declare const meta: {
49
48
  accessKey?: string | undefined | undefined;
50
49
  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
51
50
  autoFocus?: boolean | undefined | undefined;
52
- className?: string | undefined | undefined;
53
51
  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
54
52
  contextMenu?: string | undefined | undefined;
55
53
  dir?: string | undefined | undefined;
@@ -59,8 +57,10 @@ declare const meta: {
59
57
  id?: string | undefined | undefined;
60
58
  lang?: string | undefined | undefined;
61
59
  nonce?: string | undefined | undefined;
60
+ slot?: string | undefined | undefined;
62
61
  spellCheck?: (boolean | "true" | "false") | undefined;
63
62
  tabIndex?: number | undefined | undefined;
63
+ title?: string | undefined | undefined;
64
64
  translate?: "yes" | "no" | undefined | undefined;
65
65
  radioGroup?: string | undefined | undefined;
66
66
  role?: import("react").AriaRole | undefined;
@@ -143,7 +143,6 @@ declare const meta: {
143
143
  "aria-valuemin"?: number | undefined | undefined;
144
144
  "aria-valuenow"?: number | undefined | undefined;
145
145
  "aria-valuetext"?: string | undefined | undefined;
146
- children?: import("react").ReactNode;
147
146
  dangerouslySetInnerHTML?: {
148
147
  __html: string | TrustedHTML;
149
148
  } | undefined | undefined;
@@ -305,6 +304,7 @@ declare const meta: {
305
304
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
306
305
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
307
306
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
307
+ key?: import("react").Key | null | undefined;
308
308
  height?: number | string | undefined;
309
309
  width?: number | string | undefined;
310
310
  shape?: (typeof shapes)[number] | undefined;
package/dist/components/toast/toast.stories.d.ts CHANGED
@@ -17,11 +17,8 @@ declare const meta: {
17
17
  variant: "default";
18
18
  };
19
19
  decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
20
- slot?: string | undefined | undefined;
20
+ className?: string | undefined;
21
21
  style?: import("react").CSSProperties | undefined;
22
- title: import("react").ReactNode;
23
- key?: import("react").Key | null | undefined;
24
- value?: string | number | readonly string[] | undefined;
25
22
  defaultChecked?: boolean | undefined | undefined;
26
23
  defaultValue?: string | number | readonly string[] | undefined;
27
24
  suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -29,7 +26,6 @@ declare const meta: {
29
26
  accessKey?: string | undefined | undefined;
30
27
  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
31
28
  autoFocus?: boolean | undefined | undefined;
32
- className?: string | undefined;
33
29
  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
34
30
  contextMenu?: string | undefined | undefined;
35
31
  dir?: string | undefined | undefined;
@@ -39,8 +35,10 @@ declare const meta: {
39
35
  id?: string | undefined | undefined;
40
36
  lang?: string | undefined | undefined;
41
37
  nonce?: string | undefined | undefined;
38
+ slot?: string | undefined | undefined;
42
39
  spellCheck?: (boolean | "true" | "false") | undefined;
43
40
  tabIndex?: number | undefined | undefined;
41
+ title: import("react").ReactNode;
44
42
  translate?: "yes" | "no" | undefined | undefined;
45
43
  radioGroup?: string | undefined | undefined;
46
44
  role?: import("react").AriaRole | undefined;
@@ -284,6 +282,8 @@ declare const meta: {
284
282
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
285
283
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
286
284
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
285
+ key?: import("react").Key | null | undefined;
286
+ value?: string | number | readonly string[] | undefined;
287
287
  variant?: (typeof variants)[number] | undefined;
288
288
  defaultOpen?: boolean | undefined;
289
289
  open?: boolean | undefined;
package/dist/components.css CHANGED
@@ -1932,6 +1932,11 @@
1932
1932
  vertical-align: middle;
1933
1933
  }
1934
1934
 
1935
+ .icon.size-xs {
1936
+ width: var(--icon-size-xs);
1937
+ height: var(--icon-size-xs);
1938
+ }
1939
+
1935
1940
  .icon.size-s {
1936
1941
  width: var(--icon-size-s);
1937
1942
  height: var(--icon-size-s);
@@ -1947,6 +1952,11 @@
1947
1952
  height: var(--icon-size-l);
1948
1953
  }
1949
1954
 
1955
+ .icon.size-xl {
1956
+ width: var(--icon-size-xl);
1957
+ height: var(--icon-size-xl);
1958
+ }
1959
+
1950
1960
  .base-inline-loading {
1951
1961
  display: flex;
1952
1962
  width: 100%;
package/dist/index.js CHANGED
@@ -2330,6 +2330,10 @@ var iconPaths = {
2330
2330
  regular: ['M251.77,73a8,8,0,0,0-8.21.39L208,97.05V72a16,16,0,0,0-16-16H32A16,16,0,0,0,16,72V184a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V159l35.56,23.71A8,8,0,0,0,248,184a8,8,0,0,0,8-8V80A8,8,0,0,0,251.77,73ZM192,184H32V72H192V184Zm48-22.95-32-21.33V116.28L240,95Z'],
2331
2331
  fill: ['M192,72V184a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V72A16,16,0,0,1,32,56H176A16,16,0,0,1,192,72Zm58,.25a8.23,8.23,0,0,0-6.63,1.22L209.78,95.86A4,4,0,0,0,208,99.19v57.62a4,4,0,0,0,1.78,3.33l33.78,22.52a8,8,0,0,0,8.58.19,8.33,8.33,0,0,0,3.86-7.17V80A8,8,0,0,0,250,72.25Z']
2332
2332
  },
2333
+ play: {
2334
+ regular: ['M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z'],
2335
+ fill: ['M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z']
2336
+ },
2333
2337
  link: {
2334
2338
  regular: ['M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z'],
2335
2339
  fill: ['M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM115.7,192.49a43.31,43.31,0,0,1-55-66.43l25.37-25.37a43.35,43.35,0,0,1,61.25,0,42.9,42.9,0,0,1,9.95,15.43,8,8,0,1,1-15,5.6A27.33,27.33,0,0,0,97.37,112L72,137.37a27.32,27.32,0,0,0,34.68,41.91,8,8,0,1,1,9,13.21Zm79.61-62.55-25.37,25.37A43,43,0,0,1,139.32,168h0a43.35,43.35,0,0,1-40.53-28.12,8,8,0,1,1,15-5.6A27.35,27.35,0,0,0,139.28,152h0a27.14,27.14,0,0,0,19.32-8L184,118.63a27.32,27.32,0,0,0-34.68-41.91,8,8,0,1,1-9-13.21,43.32,43.32,0,0,1,55,66.43Z']
@@ -2530,7 +2534,7 @@ BaseIcon.displayName = 'BaseIcon';
2530
2534
 
2531
2535
  /** 꺼짐은 선(regular), 켜짐·강조는 채움(fill) */
2532
2536
  var weight = (/* unused pure expression or super */ null && (['regular', 'fill']));
2533
- var sizes = ['s', 'm', 'l'];
2537
+ var sizes = ['xs', 's', 'm', 'l', 'xl'];
2534
2538
  var iconProps = {
2535
2539
  size: (0,_helpers_props_common_props__WEBPACK_IMPORTED_MODULE_0__/* .sizeProp */ .lw)(sizes, 'l')
2536
2540
  };
package/dist/styles.css CHANGED
@@ -220,9 +220,11 @@
220
220
  --step-bar-height: 4px;
221
221
 
222
222
  /* 그 밖의 치수 */
223
+ --icon-size-xs: 16px;
223
224
  --icon-size-s: 18px;
224
225
  --icon-size-m: 20px;
225
226
  --icon-size-l: 24px;
227
+ --icon-size-xl: 32px;
226
228
  --tooltip-arrow: 8px;
227
229
  --spinner-stroke: 3px;
228
230
  --overlay-spinner-size: 64px;
@@ -2023,6 +2025,10 @@ p {
2023
2025
  flex-shrink: 0;
2024
2026
  vertical-align: middle;
2025
2027
  }
2028
+ .icon.size-xs {
2029
+ width: var(--icon-size-xs);
2030
+ height: var(--icon-size-xs);
2031
+ }
2026
2032
  .icon.size-s {
2027
2033
  width: var(--icon-size-s);
2028
2034
  height: var(--icon-size-s);
@@ -2035,6 +2041,10 @@ p {
2035
2041
  width: var(--icon-size-l);
2036
2042
  height: var(--icon-size-l);
2037
2043
  }
2044
+ .icon.size-xl {
2045
+ width: var(--icon-size-xl);
2046
+ height: var(--icon-size-xl);
2047
+ }
2038
2048
  .base-inline-loading {
2039
2049
  display: flex;
2040
2050
  width: 100%;
package/dist/tokens.css CHANGED
@@ -218,9 +218,11 @@
218
218
  --step-bar-height: 4px;
219
219
 
220
220
  /* 그 밖의 치수 */
221
+ --icon-size-xs: 16px;
221
222
  --icon-size-s: 18px;
222
223
  --icon-size-m: 20px;
223
224
  --icon-size-l: 24px;
225
+ --icon-size-xl: 32px;
224
226
  --tooltip-arrow: 8px;
225
227
  --spinner-stroke: 3px;
226
228
  --overlay-spinner-size: 64px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nurihaus/web-design-system",
3
- "version": "3.2.0",
3
+ "version": "3.3.0",
4
4
  "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",