@liner-fe/icon 0.0.4 → 0.0.5

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 (179) hide show
  1. package/.gitignore +2 -1
  2. package/CHANGELOG.md +6 -0
  3. package/assets/add-clock/index.tsx +19 -18
  4. package/assets/add-to-folder/index.tsx +15 -14
  5. package/assets/ai/index.tsx +22 -21
  6. package/assets/airplane/index.tsx +11 -10
  7. package/assets/android/index.tsx +11 -10
  8. package/assets/apple/index.tsx +15 -14
  9. package/assets/arrow-back/index.tsx +11 -10
  10. package/assets/arrow-backward/index.tsx +11 -10
  11. package/assets/arrow-down/index.tsx +11 -10
  12. package/assets/arrow-down-left/index.tsx +11 -10
  13. package/assets/arrow-downward/index.tsx +11 -10
  14. package/assets/arrow-drop-right/index.tsx +11 -10
  15. package/assets/arrow-forward/index.tsx +11 -10
  16. package/assets/arrow-left/index.tsx +11 -10
  17. package/assets/arrow-right/index.tsx +11 -10
  18. package/assets/arrow-turn/index.tsx +11 -10
  19. package/assets/arrow-up/index.tsx +11 -10
  20. package/assets/arrow-up-down/index.tsx +15 -14
  21. package/assets/arrow-up-left/index.tsx +11 -10
  22. package/assets/arrow-up-right/index.tsx +11 -10
  23. package/assets/arrow-upward/index.tsx +11 -10
  24. package/assets/balance/index.tsx +19 -18
  25. package/assets/bell/index.tsx +15 -14
  26. package/assets/block/index.tsx +11 -10
  27. package/assets/bolt/index.tsx +11 -10
  28. package/assets/book/index.tsx +12 -11
  29. package/assets/bookmark/index.tsx +11 -10
  30. package/assets/bookmark-cancel/index.tsx +19 -18
  31. package/assets/books/index.tsx +19 -18
  32. package/assets/brain/index.tsx +12 -11
  33. package/assets/bulb/index.tsx +15 -14
  34. package/assets/bulb-exclamtionmark/index.tsx +23 -22
  35. package/assets/camera/index.tsx +14 -13
  36. package/assets/car/index.tsx +11 -10
  37. package/assets/casual-shoe/index.tsx +11 -10
  38. package/assets/chart-bar/index.tsx +20 -19
  39. package/assets/chart-line-uptrend/index.tsx +13 -12
  40. package/assets/check-mark/index.tsx +11 -10
  41. package/assets/check-mark-fill/index.tsx +11 -10
  42. package/assets/chrome/index.tsx +23 -22
  43. package/assets/clock/index.tsx +15 -14
  44. package/assets/close/index.tsx +11 -10
  45. package/assets/close-fill/index.tsx +11 -10
  46. package/assets/copy/index.tsx +12 -11
  47. package/assets/credit/index.tsx +19 -18
  48. package/assets/creditcard/index.tsx +15 -14
  49. package/assets/dark-mode/index.tsx +11 -10
  50. package/assets/description/index.tsx +20 -19
  51. package/assets/desktop/index.tsx +11 -10
  52. package/assets/desktop-on-cursor/index.tsx +19 -18
  53. package/assets/document/index.tsx +13 -12
  54. package/assets/document-add/index.tsx +17 -16
  55. package/assets/document-check/index.tsx +17 -16
  56. package/assets/document-warning/index.tsx +15 -14
  57. package/assets/double-arrow-backward/index.tsx +15 -14
  58. package/assets/download/index.tsx +15 -14
  59. package/assets/drop-down/index.tsx +11 -10
  60. package/assets/drop-up/index.tsx +11 -10
  61. package/assets/email/index.tsx +13 -12
  62. package/assets/end/index.tsx +15 -14
  63. package/assets/essay/index.tsx +17 -16
  64. package/assets/exclamationmark/index.tsx +13 -12
  65. package/assets/exclamationmark-fill/index.tsx +11 -10
  66. package/assets/expand/index.tsx +15 -14
  67. package/assets/expand-close/index.tsx +11 -10
  68. package/assets/extend/index.tsx +11 -10
  69. package/assets/facebook/index.tsx +11 -10
  70. package/assets/feedback/index.tsx +15 -14
  71. package/assets/filter/index.tsx +19 -18
  72. package/assets/fire/index.tsx +14 -13
  73. package/assets/flowchart/index.tsx +11 -10
  74. package/assets/focus/index.tsx +15 -14
  75. package/assets/folder/index.tsx +11 -10
  76. package/assets/folder-add/index.tsx +13 -12
  77. package/assets/folder-open/index.tsx +11 -10
  78. package/assets/folder-open-share/index.tsx +19 -18
  79. package/assets/folder-share/index.tsx +19 -18
  80. package/assets/formal-bag/index.tsx +11 -10
  81. package/assets/globe/index.tsx +11 -10
  82. package/assets/google/index.tsx +11 -10
  83. package/assets/google-export/index.tsx +19 -18
  84. package/assets/graduationcap/index.tsx +12 -11
  85. package/assets/help/index.tsx +15 -14
  86. package/assets/hide-all/index.tsx +19 -18
  87. package/assets/highlight-edit/index.tsx +15 -14
  88. package/assets/highlighter/index.tsx +11 -10
  89. package/assets/history/index.tsx +15 -14
  90. package/assets/home/index.tsx +11 -10
  91. package/assets/info/index.tsx +19 -18
  92. package/assets/lds-pri-icon-s-double-arrow-forward/index.tsx +15 -14
  93. package/assets/light/index.tsx +15 -14
  94. package/assets/light-mode/index.tsx +43 -42
  95. package/assets/liner/index.tsx +15 -14
  96. package/assets/link/index.tsx +15 -14
  97. package/assets/list/index.tsx +31 -30
  98. package/assets/literature-review/index.tsx +27 -26
  99. package/assets/lock/index.tsx +15 -14
  100. package/assets/magic-pencil/index.tsx +27 -26
  101. package/assets/magic-wand/index.tsx +23 -22
  102. package/assets/make-easy/index.tsx +27 -26
  103. package/assets/members/index.tsx +23 -22
  104. package/assets/memo/index.tsx +15 -14
  105. package/assets/menu/index.tsx +19 -18
  106. package/assets/microscope/index.tsx +11 -10
  107. package/assets/mindmap/index.tsx +11 -10
  108. package/assets/minus/index.tsx +11 -10
  109. package/assets/mobile/index.tsx +15 -14
  110. package/assets/more/index.tsx +19 -18
  111. package/assets/move/index.tsx +11 -10
  112. package/assets/move-to-folder/index.tsx +15 -14
  113. package/assets/new-chrome-extension/index.tsx +11 -10
  114. package/assets/new-tab/index.tsx +15 -14
  115. package/assets/new-thread/index.tsx +13 -12
  116. package/assets/new-thread-folder/index.tsx +19 -18
  117. package/assets/palette/index.tsx +27 -26
  118. package/assets/paperclip/index.tsx +11 -10
  119. package/assets/paragraph/index.tsx +23 -22
  120. package/assets/paraphrase/index.tsx +23 -22
  121. package/assets/pencil/index.tsx +12 -11
  122. package/assets/person/index.tsx +15 -14
  123. package/assets/person-add/index.tsx +19 -18
  124. package/assets/person-fill/index.tsx +11 -10
  125. package/assets/photo/index.tsx +14 -13
  126. package/assets/play-button/index.tsx +14 -13
  127. package/assets/plus/index.tsx +11 -10
  128. package/assets/power/index.tsx +15 -14
  129. package/assets/question-box/index.tsx +15 -14
  130. package/assets/question-message/index.tsx +15 -14
  131. package/assets/quote/index.tsx +15 -14
  132. package/assets/redo/index.tsx +11 -10
  133. package/assets/regenerate/index.tsx +15 -14
  134. package/assets/remove-from-folder/index.tsx +15 -14
  135. package/assets/report/index.tsx +15 -14
  136. package/assets/restaurant/index.tsx +19 -18
  137. package/assets/retry/index.tsx +11 -10
  138. package/assets/rocket/index.tsx +15 -14
  139. package/assets/search/index.tsx +11 -10
  140. package/assets/secret-mode/index.tsx +15 -14
  141. package/assets/send/index.tsx +11 -10
  142. package/assets/setting/index.tsx +15 -14
  143. package/assets/share/index.tsx +15 -14
  144. package/assets/sheet-export/index.tsx +15 -14
  145. package/assets/shield/index.tsx +13 -12
  146. package/assets/shield-person/index.tsx +19 -18
  147. package/assets/shield-usage/index.tsx +27 -26
  148. package/assets/shorten/index.tsx +15 -14
  149. package/assets/show-all/index.tsx +23 -22
  150. package/assets/sign-out/index.tsx +15 -14
  151. package/assets/source/index.tsx +23 -22
  152. package/assets/speaker/index.tsx +15 -14
  153. package/assets/spinner/index.tsx +7 -6
  154. package/assets/stack/index.tsx +19 -18
  155. package/assets/start/index.tsx +15 -14
  156. package/assets/step/index.tsx +15 -14
  157. package/assets/stop/index.tsx +15 -14
  158. package/assets/summarize/index.tsx +19 -18
  159. package/assets/target/index.tsx +19 -18
  160. package/assets/teams/index.tsx +18 -17
  161. package/assets/text-select/index.tsx +15 -14
  162. package/assets/thumb-down/index.tsx +13 -12
  163. package/assets/thumb-up/index.tsx +13 -12
  164. package/assets/timer/index.tsx +19 -18
  165. package/assets/translate/index.tsx +15 -14
  166. package/assets/trash/index.tsx +17 -16
  167. package/assets/tune/index.tsx +31 -30
  168. package/assets/twitter/index.tsx +11 -10
  169. package/assets/undo/index.tsx +11 -10
  170. package/assets/verification-badge/index.tsx +11 -10
  171. package/assets/view-list/index.tsx +11 -10
  172. package/assets/visibility/index.tsx +15 -14
  173. package/assets/visibility-off/index.tsx +27 -26
  174. package/assets/volume/index.tsx +11 -10
  175. package/assets/volume-up/index.tsx +19 -18
  176. package/assets/zoom-in/index.tsx +15 -14
  177. package/assets/zoom-out/index.tsx +15 -14
  178. package/index.tsx +3 -1
  179. package/package.json +7 -3
package/assets/arrow-down-left/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowDownLeftProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowDownLeft = ({ fill = false, thick = false, size = 24 }: ArrowDownLeftProps) => {
10
+ export const ArrowDownLeft = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowDownLeftProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path d="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path d="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path d="M15.8282 35.0003L39.4142 11.4144L36.5858 8.58594L13 32.1717V17.0003H9V35.0003C9 37.2094 10.7909 39.0003 13 39.0003H31V35.0003H15.8282Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path d="M15.8282 35.0003L39.4142 11.4144L36.5858 8.58594L13 32.1717V17.0003H9V35.0003C9 37.2094 10.7909 39.0003 13 39.0003H31V35.0003H15.8282Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path d="M14.6212 35.5002L39.0607 11.0608L36.9394 8.93945L12.5 33.3788V17.0002H9.5V35.0002C9.5 36.9332 11.067 38.5002 13 38.5002H31V35.5002H14.6212Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-downward/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowDownwardProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowDownward = ({ fill = false, thick = false, size = 24 }: ArrowDownwardProps) => {
10
+ export const ArrowDownward = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowDownwardProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path fillRule="evenodd" clipRule="evenodd" d="M10.0607 17.9395L23.6463 31.5251C23.8416 31.7204 24.1581 31.7204 24.3534 31.5251L37.9391 17.9395L40.0604 20.0608L26.4747 33.6464C25.1079 35.0133 22.8918 35.0133 21.525 33.6464L7.93933 20.0608L10.0607 17.9395Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path fillRule="evenodd" clipRule="evenodd" d="M10.0607 17.9395L23.6463 31.5251C23.8416 31.7204 24.1581 31.7204 24.3534 31.5251L37.9391 17.9395L40.0604 20.0608L26.4747 33.6464C25.1079 35.0133 22.8918 35.0133 21.525 33.6464L7.93933 20.0608L10.0607 17.9395Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path fillRule="evenodd" clipRule="evenodd" d="M10.0607 17.9395L23.6463 31.5251C23.8416 31.7204 24.1581 31.7204 24.3534 31.5251L37.9391 17.9395L40.0604 20.0608L26.4747 33.6464C25.1079 35.0133 22.8918 35.0133 21.525 33.6464L7.93933 20.0608L10.0607 17.9395Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path fillRule="evenodd" clipRule="evenodd" d="M10.0607 17.9395L23.6463 31.5251C23.8416 31.7204 24.1581 31.7204 24.3534 31.5251L37.9391 17.9395L40.0604 20.0608L26.4747 33.6464C25.1079 35.0133 22.8918 35.0133 21.525 33.6464L7.93933 20.0608L10.0607 17.9395Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path fillRule="evenodd" clipRule="evenodd" d="M10.4142 17.5859L23.9999 31.1716L37.5855 17.5859L40.4139 20.4144L26.8283 34C25.2662 35.5621 22.7335 35.5621 21.1714 34L7.58578 20.4144L10.4142 17.5859Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path fillRule="evenodd" clipRule="evenodd" d="M10.4142 17.5859L23.9999 31.1716L37.5855 17.5859L40.4139 20.4144L26.8283 34C25.2662 35.5621 22.7335 35.5621 21.1714 34L7.58578 20.4144L10.4142 17.5859Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path fillRule="evenodd" clipRule="evenodd" d="M10.0607 17.9395L23.6463 31.5251C23.8416 31.7204 24.1581 31.7204 24.3534 31.5251L37.9391 17.9395L40.0604 20.0608L26.4747 33.6464C25.1079 35.0133 22.8918 35.0133 21.525 33.6464L7.93933 20.0608L10.0607 17.9395Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path fillRule="evenodd" clipRule="evenodd" d="M10.0607 17.9395L23.6463 31.5251C23.8416 31.7204 24.1581 31.7204 24.3534 31.5251L37.9391 17.9395L40.0604 20.0608L26.4747 33.6464C25.1079 35.0133 22.8918 35.0133 21.525 33.6464L7.93933 20.0608L10.0607 17.9395Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-drop-right/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowDropRightProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowDropRight = ({ fill = false, thick = false, size = 24 }: ArrowDropRightProps) => {
10
+ export const ArrowDropRight = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowDropRightProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M17 12.5001L17 35.6716C17 36.5625 18.0771 37.0087 18.7071 36.3787L29.5858 25.5001C30.3668 24.719 30.3668 23.4527 29.5858 22.6716L18.7071 11.7929C18.0771 11.163 17 11.6091 17 12.5001Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M17 12.5001L17 35.6716C17 36.5625 18.0771 37.0087 18.7071 36.3787L29.5858 25.5001C30.3668 24.719 30.3668 23.4527 29.5858 22.6716L18.7071 11.7929C18.0771 11.163 17 11.6091 17 12.5001Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9392L28.5249 24.3535C28.7201 24.1583 28.7201 23.8417 28.5249 23.6464L17.9392 13.0608L20.0605 10.9395L30.6462 21.5251C32.013 22.8919 32.013 25.108 30.6462 26.4748L20.0605 37.0605L17.9392 34.9392Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9392L28.5249 24.3535C28.7201 24.1583 28.7201 23.8417 28.5249 23.6464L17.9392 13.0608L20.0605 10.9395L30.6462 21.5251C32.013 22.8919 32.013 25.108 30.6462 26.4748L20.0605 37.0605L17.9392 34.9392Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9392L28.5249 24.3535C28.7201 24.1583 28.7201 23.8417 28.5249 23.6464L17.9392 13.0608L20.0605 10.9395L30.6462 21.5251C32.013 22.8919 32.013 25.108 30.6462 26.4748L20.0605 37.0605L17.9392 34.9392Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9392L28.5249 24.3535C28.7201 24.1583 28.7201 23.8417 28.5249 23.6464L17.9392 13.0608L20.0605 10.9395L30.6462 21.5251C32.013 22.8919 32.013 25.108 30.6462 26.4748L20.0605 37.0605L17.9392 34.9392Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9392L28.5249 24.3535C28.7201 24.1583 28.7201 23.8417 28.5249 23.6464L17.9392 13.0608L20.0605 10.9395L30.6462 21.5251C32.013 22.8919 32.013 25.108 30.6462 26.4748L20.0605 37.0605L17.9392 34.9392Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 34.9392L28.5249 24.3535C28.7201 24.1583 28.7201 23.8417 28.5249 23.6464L17.9392 13.0608L20.0605 10.9395L30.6462 21.5251C32.013 22.8919 32.013 25.108 30.6462 26.4748L20.0605 37.0605L17.9392 34.9392Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-forward/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowForwardProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowForward = ({ fill = false, thick = false, size = 24 }: ArrowForwardProps) => {
10
+ export const ArrowForward = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowForwardProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9392L31.5249 24.3535C31.7201 24.1583 31.7201 23.8417 31.5249 23.6464L17.9392 10.0608L20.0605 7.93945L33.6462 21.5251C35.013 22.8919 35.013 25.108 33.6462 26.4748L20.0605 40.0605L17.9392 37.9392Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9392L31.5249 24.3535C31.7201 24.1583 31.7201 23.8417 31.5249 23.6464L17.9392 10.0608L20.0605 7.93945L33.6462 21.5251C35.013 22.8919 35.013 25.108 33.6462 26.4748L20.0605 40.0605L17.9392 37.9392Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9392L31.5249 24.3535C31.7201 24.1583 31.7201 23.8417 31.5249 23.6464L17.9392 10.0608L20.0605 7.93945L33.6462 21.5251C35.013 22.8919 35.013 25.108 33.6462 26.4748L20.0605 40.0605L17.9392 37.9392Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9392L31.5249 24.3535C31.7201 24.1583 31.7201 23.8417 31.5249 23.6464L17.9392 10.0608L20.0605 7.93945L33.6462 21.5251C35.013 22.8919 35.013 25.108 33.6462 26.4748L20.0605 40.0605L17.9392 37.9392Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path fillRule="evenodd" clipRule="evenodd" d="M17.5857 37.5857L31.1713 24L17.5857 10.4144L20.4141 7.58594L33.9997 21.1716C35.5618 22.7337 35.5618 25.2663 33.9997 26.8284L20.4141 40.4141L17.5857 37.5857Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path fillRule="evenodd" clipRule="evenodd" d="M17.5857 37.5857L31.1713 24L17.5857 10.4144L20.4141 7.58594L33.9997 21.1716C35.5618 22.7337 35.5618 25.2663 33.9997 26.8284L20.4141 40.4141L17.5857 37.5857Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9392L31.5249 24.3535C31.7201 24.1583 31.7201 23.8417 31.5249 23.6464L17.9392 10.0608L20.0605 7.93945L33.6462 21.5251C35.013 22.8919 35.013 25.108 33.6462 26.4748L20.0605 40.0605L17.9392 37.9392Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path fillRule="evenodd" clipRule="evenodd" d="M17.9392 37.9392L31.5249 24.3535C31.7201 24.1583 31.7201 23.8417 31.5249 23.6464L17.9392 10.0608L20.0605 7.93945L33.6462 21.5251C35.013 22.8919 35.013 25.108 33.6462 26.4748L20.0605 40.0605L17.9392 37.9392Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-left/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowLeftProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowLeft = ({ fill = false, thick = false, size = 24 }: ArrowLeftProps) => {
10
+ export const ArrowLeft = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowLeftProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M11.6218 22.4986L22.6388 11.4817L20.5175 9.36035L8.35389 21.5239C6.98706 22.8908 6.98706 25.1068 8.35389 26.4737L20.5175 38.6373L22.6388 36.5159L11.6215 25.4986L41 25.4987L41 22.4987L11.6218 22.4986Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M11.6218 22.4986L22.6388 11.4817L20.5175 9.36035L8.35389 21.5239C6.98706 22.8908 6.98706 25.1068 8.35389 26.4737L20.5175 38.6373L22.6388 36.5159L11.6215 25.4986L41 25.4987L41 22.4987L11.6218 22.4986Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path d="M11.6218 22.4986L22.6388 11.4817L20.5175 9.36035L8.35389 21.5239C6.98706 22.8908 6.98706 25.1068 8.35389 26.4737L20.5175 38.6373L22.6388 36.5159L11.6215 25.4986L41 25.4987L41 22.4987L11.6218 22.4986Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path d="M11.6218 22.4986L22.6388 11.4817L20.5175 9.36035L8.35389 21.5239C6.98706 22.8908 6.98706 25.1068 8.35389 26.4737L20.5175 38.6373L22.6388 36.5159L11.6215 25.4986L41 25.4987L41 22.4987L11.6218 22.4986Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path d="M12.8289 21.9987L22.9924 11.8353L20.1639 9.00684L8.00034 21.1704C6.43824 22.7325 6.43824 25.2652 8.00034 26.8273L20.1639 38.9909L22.9923 36.1624L12.8286 25.9987L41 25.9987L41 21.9987L12.8289 21.9987Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path d="M12.8289 21.9987L22.9924 11.8353L20.1639 9.00684L8.00034 21.1704C6.43824 22.7325 6.43824 25.2652 8.00034 26.8273L20.1639 38.9909L22.9923 36.1624L12.8286 25.9987L41 25.9987L41 21.9987L12.8289 21.9987Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M11.6218 22.4986L22.6388 11.4817L20.5175 9.36035L8.35389 21.5239C6.98706 22.8908 6.98706 25.1068 8.35389 26.4737L20.5175 38.6373L22.6388 36.5159L11.6215 25.4986L41 25.4987L41 22.4987L11.6218 22.4986Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path d="M11.6218 22.4986L22.6388 11.4817L20.5175 9.36035L8.35389 21.5239C6.98706 22.8908 6.98706 25.1068 8.35389 26.4737L20.5175 38.6373L22.6388 36.5159L11.6215 25.4986L41 25.4987L41 22.4987L11.6218 22.4986Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-right/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowRightProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowRight = ({ fill = false, thick = false, size = 24 }: ArrowRightProps) => {
10
+ export const ArrowRight = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowRightProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M36.3777 25.5004L25.3612 36.5169L27.4825 38.6382L39.6461 26.4747C41.013 25.1078 41.013 22.8917 39.6461 21.5249L27.4825 9.36133L25.3612 11.4826L36.379 22.5004L7 22.5004V25.5004H36.3777Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M36.3777 25.5004L25.3612 36.5169L27.4825 38.6382L39.6461 26.4747C41.013 25.1078 41.013 22.8917 39.6461 21.5249L27.4825 9.36133L25.3612 11.4826L36.379 22.5004L7 22.5004V25.5004H36.3777Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path d="M36.3777 25.5004L25.3612 36.5169L27.4825 38.6382L39.6461 26.4747C41.013 25.1078 41.013 22.8917 39.6461 21.5249L27.4825 9.36133L25.3612 11.4826L36.379 22.5004L7 22.5004V25.5004H36.3777Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path d="M36.3777 25.5004L25.3612 36.5169L27.4825 38.6382L39.6461 26.4747C41.013 25.1078 41.013 22.8917 39.6461 21.5249L27.4825 9.36133L25.3612 11.4826L36.379 22.5004L7 22.5004V25.5004H36.3777Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path d="M35.1706 26.0005L25.0077 36.1634L27.8361 38.9918L39.9997 26.8283C41.5618 25.2662 41.5618 22.7335 39.9997 21.1714L27.8361 9.00781L25.0077 11.8362L35.1719 22.0005L7 22.0005V26.0005L35.1706 26.0005Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path d="M35.1706 26.0005L25.0077 36.1634L27.8361 38.9918L39.9997 26.8283C41.5618 25.2662 41.5618 22.7335 39.9997 21.1714L27.8361 9.00781L25.0077 11.8362L35.1719 22.0005L7 22.0005V26.0005L35.1706 26.0005Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M36.3777 25.5004L25.3612 36.5169L27.4825 38.6382L39.6461 26.4747C41.013 25.1078 41.013 22.8917 39.6461 21.5249L27.4825 9.36133L25.3612 11.4826L36.379 22.5004L7 22.5004V25.5004H36.3777Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path d="M36.3777 25.5004L25.3612 36.5169L27.4825 38.6382L39.6461 26.4747C41.013 25.1078 41.013 22.8917 39.6461 21.5249L27.4825 9.36133L25.3612 11.4826L36.379 22.5004L7 22.5004V25.5004H36.3777Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-turn/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowTurnProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowTurn = ({ fill = false, thick = false, size = 24 }: ArrowTurnProps) => {
10
+ export const ArrowTurn = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowTurnProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path d="M10 31C7.79086 31 6 29.2091 6 27V5.5H10V27H36.1716L27.4022 18.2306L30.2306 15.4022L41 26.1716C42.5621 27.7337 42.5621 30.2663 41 31.8284L30.2306 42.5978L27.4022 39.7694L36.1716 31H10Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path d="M10 31C7.79086 31 6 29.2091 6 27V5.5H10V27H36.1716L27.4022 18.2306L30.2306 15.4022L41 26.1716C42.5621 27.7337 42.5621 30.2663 41 31.8284L30.2306 42.5978L27.4022 39.7694L36.1716 31H10Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path d="M10 30.5C8.067 30.5 6.5 28.933 6.5 27V6H9.5V27C9.5 27.2761 9.72386 27.5 10 27.5H37.3787L27.7557 17.8771L29.8771 15.7557L40.6464 26.5251C42.0133 27.892 42.0133 30.108 40.6464 31.4749L29.8771 42.2443L27.7557 40.1229L37.3787 30.5H10Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-up/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowUpProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowUp = ({ fill = false, thick = false, size = 24 }: ArrowUpProps) => {
10
+ export const ArrowUp = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowUpProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M25.5 11.6207L36.5175 22.6382L38.6388 20.5168L26.4752 8.35325C25.1084 6.98642 22.8923 6.98642 21.5255 8.35325L9.36188 20.5168L11.4832 22.6382L22.5 11.6213V41.0003H25.5V11.6207Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M25.5 11.6207L36.5175 22.6382L38.6388 20.5168L26.4752 8.35325C25.1084 6.98642 22.8923 6.98642 21.5255 8.35325L9.36188 20.5168L11.4832 22.6382L22.5 11.6213V41.0003H25.5V11.6207Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path d="M25.5 11.6207L36.5175 22.6382L38.6388 20.5168L26.4752 8.35325C25.1084 6.98642 22.8923 6.98642 21.5255 8.35325L9.36188 20.5168L11.4832 22.6382L22.5 11.6213V41.0003H25.5V11.6207Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path d="M25.5 11.6207L36.5175 22.6382L38.6388 20.5168L26.4752 8.35325C25.1084 6.98642 22.8923 6.98642 21.5255 8.35325L9.36188 20.5168L11.4832 22.6382L22.5 11.6213V41.0003H25.5V11.6207Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path d="M26 12.8278L36.1639 22.9917L38.9923 20.1633L26.8287 7.9997C25.2666 6.4376 22.734 6.4376 21.1719 7.9997L9.0083 20.1633L11.8367 22.9917L22 12.8285V41.0003H26V12.8278Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path d="M26 12.8278L36.1639 22.9917L38.9923 20.1633L26.8287 7.9997C25.2666 6.4376 22.734 6.4376 21.1719 7.9997L9.0083 20.1633L11.8367 22.9917L22 12.8285V41.0003H26V12.8278Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M25.5 11.6207L36.5175 22.6382L38.6388 20.5168L26.4752 8.35325C25.1084 6.98642 22.8923 6.98642 21.5255 8.35325L9.36188 20.5168L11.4832 22.6382L22.5 11.6213V41.0003H25.5V11.6207Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path d="M25.5 11.6207L36.5175 22.6382L38.6388 20.5168L26.4752 8.35325C25.1084 6.98642 22.8923 6.98642 21.5255 8.35325L9.36188 20.5168L11.4832 22.6382L22.5 11.6213V41.0003H25.5V11.6207Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-up-down/index.tsx CHANGED
@@ -1,35 +1,36 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowUpDownProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowUpDown = ({ fill = false, thick = false, size = 24 }: ArrowUpDownProps) => {
10
+ export const ArrowUpDown = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowUpDownProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M32.501 35.3805L25.0607 27.9402L22.9393 30.0615L31.8985 39.0207C33.0596 40.1818 34.942 40.1818 36.1031 39.0207L45.0623 30.0615L42.941 27.9402L35.501 35.3802V8H32.501V35.3805Z" fill="currentColor"/>
13
- <path d="M15.5006 12.6195L22.9409 20.0598L25.0623 17.9385L16.1031 8.97932C14.942 7.81825 13.0596 7.81825 11.8985 8.97932L2.93933 17.9385L5.06065 20.0598L12.5006 12.6198V39.999H15.5006V12.6195Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M32.501 35.3805L25.0607 27.9402L22.9393 30.0615L31.8985 39.0207C33.0596 40.1818 34.942 40.1818 36.1031 39.0207L45.0623 30.0615L42.941 27.9402L35.501 35.3802V8H32.501V35.3805Z" style={{ fill: `var(--${color})` }}/>
14
+ <path d="M15.5006 12.6195L22.9409 20.0598L25.0623 17.9385L16.1031 8.97932C14.942 7.81825 13.0596 7.81825 11.8985 8.97932L2.93933 17.9385L5.06065 20.0598L12.5006 12.6198V39.999H15.5006V12.6195Z" style={{ fill: `var(--${color})` }}/>
14
15
  </svg>
15
16
  ;
16
17
  } else if (fill) {
17
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
- <path d="M32.501 35.3805L25.0607 27.9402L22.9393 30.0615L31.8985 39.0207C33.0596 40.1818 34.942 40.1818 36.1031 39.0207L45.0623 30.0615L42.941 27.9402L35.501 35.3802V8H32.501V35.3805Z" fill="currentColor"/>
19
- <path d="M15.5006 12.6195L22.9409 20.0598L25.0623 17.9385L16.1031 8.97932C14.942 7.81825 13.0596 7.81825 11.8985 8.97932L2.93933 17.9385L5.06065 20.0598L12.5006 12.6198V39.999H15.5006V12.6195Z" fill="currentColor"/>
18
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
19
+ <path d="M32.501 35.3805L25.0607 27.9402L22.9393 30.0615L31.8985 39.0207C33.0596 40.1818 34.942 40.1818 36.1031 39.0207L45.0623 30.0615L42.941 27.9402L35.501 35.3802V8H32.501V35.3805Z" style={{ fill: `var(--${color})` }}/>
20
+ <path d="M15.5006 12.6195L22.9409 20.0598L25.0623 17.9385L16.1031 8.97932C14.942 7.81825 13.0596 7.81825 11.8985 8.97932L2.93933 17.9385L5.06065 20.0598L12.5006 12.6198V39.999H15.5006V12.6195Z" style={{ fill: `var(--${color})` }}/>
20
21
  </svg>
21
22
  ;
22
23
  } else if (thick) {
23
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
24
- <path d="M16.0006 13.8274L22.5874 20.4142L25.4158 17.5858L16.4566 8.62663C15.1003 7.27029 12.9012 7.27029 11.5449 8.62663L2.58575 17.5858L5.41418 20.4142L12.0006 13.8278V40H16.0006V13.8274Z" fill="currentColor"/>
25
- <path d="M32.001 34.1745L25.4142 27.5877L22.5858 30.4162L31.5449 39.3753C32.9013 40.7317 35.1003 40.7317 36.4567 39.3753L45.4158 30.4162L42.5874 27.5877L36.001 34.1742V8.00097L32.001 8.00097V34.1745Z" fill="currentColor"/>
24
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
25
+ <path d="M16.0006 13.8274L22.5874 20.4142L25.4158 17.5858L16.4566 8.62663C15.1003 7.27029 12.9012 7.27029 11.5449 8.62663L2.58575 17.5858L5.41418 20.4142L12.0006 13.8278V40H16.0006V13.8274Z" style={{ fill: `var(--${color})` }}/>
26
+ <path d="M32.001 34.1745L25.4142 27.5877L22.5858 30.4162L31.5449 39.3753C32.9013 40.7317 35.1003 40.7317 36.4567 39.3753L45.4158 30.4162L42.5874 27.5877L36.001 34.1742V8.00097L32.001 8.00097V34.1745Z" style={{ fill: `var(--${color})` }}/>
26
27
  </svg>
27
28
  ;
28
29
  }
29
30
 
30
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
31
- <path d="M32.501 35.3805L25.0607 27.9402L22.9393 30.0615L31.8985 39.0207C33.0596 40.1818 34.942 40.1818 36.1031 39.0207L45.0623 30.0615L42.941 27.9402L35.501 35.3802V8H32.501V35.3805Z" fill="currentColor"/>
32
- <path d="M15.5006 12.6195L22.9409 20.0598L25.0623 17.9385L16.1031 8.97932C14.942 7.81825 13.0596 7.81825 11.8985 8.97932L2.93933 17.9385L5.06065 20.0598L12.5006 12.6198V39.999H15.5006V12.6195Z" fill="currentColor"/>
31
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
32
+ <path d="M32.501 35.3805L25.0607 27.9402L22.9393 30.0615L31.8985 39.0207C33.0596 40.1818 34.942 40.1818 36.1031 39.0207L45.0623 30.0615L42.941 27.9402L35.501 35.3802V8H32.501V35.3805Z" style={{ fill: `var(--${color})` }}/>
33
+ <path d="M15.5006 12.6195L22.9409 20.0598L25.0623 17.9385L16.1031 8.97932C14.942 7.81825 13.0596 7.81825 11.8985 8.97932L2.93933 17.9385L5.06065 20.0598L12.5006 12.6198V39.999H15.5006V12.6195Z" style={{ fill: `var(--${color})` }}/>
33
34
  </svg>
34
35
  ;
35
36
  };
package/assets/arrow-up-left/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowUpLeftProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowUpLeft = ({ fill = false, thick = false, size = 24 }: ArrowUpLeftProps) => {
10
+ export const ArrowUpLeft = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowUpLeftProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path d="M12.5858 15.8286L12.5858 31H8.58581L8.58581 13C8.58581 10.7909 10.3767 9 12.5858 9H30.5858V13L15.4141 13L39 36.5859L36.1716 39.4144L12.5858 15.8286Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path d="M12.5858 15.8286L12.5858 31H8.58581L8.58581 13C8.58581 10.7909 10.3767 9 12.5858 9H30.5858V13L15.4141 13L39 36.5859L36.1716 39.4144L12.5858 15.8286Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path d="M11.9393 14.6214L11.9393 31H8.93933L8.93933 13C8.93933 11.067 10.5063 9.5 12.4393 9.5H30.4393V12.5L14.0605 12.5L38.5 36.9395L36.3787 39.0608L11.9393 14.6214Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-up-right/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowUpRightProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowUpRight = ({ fill = false, thick = false, size = 24 }: ArrowUpRightProps) => {
10
+ export const ArrowUpRight = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowUpRightProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path d="M35.5 14.6214L35.5 31H38.5L38.5 13C38.5 11.067 36.933 9.5 35 9.5H17V12.5L33.3788 12.5L8.93933 36.9395L11.0607 39.0608L35.5 14.6214Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path d="M35.5 14.6214L35.5 31H38.5L38.5 13C38.5 11.067 36.933 9.5 35 9.5H17V12.5L33.3788 12.5L8.93933 36.9395L11.0607 39.0608L35.5 14.6214Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path d="M35.5 14.6214L35.5 31H38.5L38.5 13C38.5 11.067 36.933 9.5 35 9.5H17V12.5L33.3788 12.5L8.93933 36.9395L11.0607 39.0608L35.5 14.6214Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path d="M35.5 14.6214L35.5 31H38.5L38.5 13C38.5 11.067 36.933 9.5 35 9.5H17V12.5L33.3788 12.5L8.93933 36.9395L11.0607 39.0608L35.5 14.6214Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path d="M35 15.8286L35 31H39L39 13C39 10.7909 37.2091 9 35 9H17V13L32.1718 13L8.58582 36.5859L11.4142 39.4144L35 15.8286Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path d="M35 15.8286L35 31H39L39 13C39 10.7909 37.2091 9 35 9H17V13L32.1718 13L8.58582 36.5859L11.4142 39.4144L35 15.8286Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path d="M35.5 14.6214L35.5 31H38.5L38.5 13C38.5 11.067 36.933 9.5 35 9.5H17V12.5L33.3788 12.5L8.93933 36.9395L11.0607 39.0608L35.5 14.6214Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path d="M35.5 14.6214L35.5 31H38.5L38.5 13C38.5 11.067 36.933 9.5 35 9.5H17V12.5L33.3788 12.5L8.93933 36.9395L11.0607 39.0608L35.5 14.6214Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
package/assets/arrow-upward/index.tsx CHANGED
@@ -1,31 +1,32 @@
1
- import React from 'react';
1
+ import React from 'react';import { BasicColorType } from '@liner-fe/prism';
2
2
 
3
3
  interface ArrowUpwardProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowUpward = ({ fill = false, thick = false, size = 24 }: ArrowUpwardProps) => {
10
+ export const ArrowUpward = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowUpwardProps) => {
10
11
  if (fill && thick) {
11
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
12
- <path fillRule="evenodd" clipRule="evenodd" d="M37.9391 30.0602L24.3534 16.4746C24.1582 16.2793 23.8416 16.2793 23.6463 16.4746L10.0607 30.0602L7.93936 27.9389L21.525 14.3533C22.8918 12.9864 25.1079 12.9864 26.4748 14.3533L40.0604 27.9389L37.9391 30.0602Z" fill="currentColor"/>
12
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ <path fillRule="evenodd" clipRule="evenodd" d="M37.9391 30.0602L24.3534 16.4746C24.1582 16.2793 23.8416 16.2793 23.6463 16.4746L10.0607 30.0602L7.93936 27.9389L21.525 14.3533C22.8918 12.9864 25.1079 12.9864 26.4748 14.3533L40.0604 27.9389L37.9391 30.0602Z" style={{ fill: `var(--${color})` }}/>
13
14
  </svg>
14
15
  ;
15
16
  } else if (fill) {
16
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <path fillRule="evenodd" clipRule="evenodd" d="M37.9391 30.0602L24.3534 16.4746C24.1582 16.2793 23.8416 16.2793 23.6463 16.4746L10.0607 30.0602L7.93936 27.9389L21.525 14.3533C22.8918 12.9864 25.1079 12.9864 26.4748 14.3533L40.0604 27.9389L37.9391 30.0602Z" fill="currentColor"/>
17
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
18
+ <path fillRule="evenodd" clipRule="evenodd" d="M37.9391 30.0602L24.3534 16.4746C24.1582 16.2793 23.8416 16.2793 23.6463 16.4746L10.0607 30.0602L7.93936 27.9389L21.525 14.3533C22.8918 12.9864 25.1079 12.9864 26.4748 14.3533L40.0604 27.9389L37.9391 30.0602Z" style={{ fill: `var(--${color})` }}/>
18
19
  </svg>
19
20
  ;
20
21
  } else if (thick) {
21
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
22
- <path fillRule="evenodd" clipRule="evenodd" d="M37.5855 30.4138L23.9999 16.8281L10.4142 30.4138L7.58582 27.5853L21.1715 13.9997C22.7336 12.4376 25.2662 12.4376 26.8283 13.9997L40.414 27.5853L37.5855 30.4138Z" fill="currentColor"/>
22
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
23
+ <path fillRule="evenodd" clipRule="evenodd" d="M37.5855 30.4138L23.9999 16.8281L10.4142 30.4138L7.58582 27.5853L21.1715 13.9997C22.7336 12.4376 25.2662 12.4376 26.8283 13.9997L40.414 27.5853L37.5855 30.4138Z" style={{ fill: `var(--${color})` }}/>
23
24
  </svg>
24
25
  ;
25
26
  }
26
27
 
27
- return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
- <path fillRule="evenodd" clipRule="evenodd" d="M37.9391 30.0602L24.3534 16.4746C24.1582 16.2793 23.8416 16.2793 23.6463 16.4746L10.0607 30.0602L7.93936 27.9389L21.525 14.3533C22.8918 12.9864 25.1079 12.9864 26.4748 14.3533L40.0604 27.9389L37.9391 30.0602Z" fill="currentColor"/>
28
+ return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
29
+ <path fillRule="evenodd" clipRule="evenodd" d="M37.9391 30.0602L24.3534 16.4746C24.1582 16.2793 23.8416 16.2793 23.6463 16.4746L10.0607 30.0602L7.93936 27.9389L21.525 14.3533C22.8918 12.9864 25.1079 12.9864 26.4748 14.3533L40.0604 27.9389L37.9391 30.0602Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };