@liner-fe/icon 0.0.4 → 0.0.6

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 (187) hide show
  1. package/.gitignore +2 -1
  2. package/CHANGELOG.md +12 -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 -19
  40. package/assets/check-mark/index.tsx +11 -10
  41. package/assets/check-mark-fill/index.tsx +15 -14
  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 +15 -14
  46. package/assets/color-docx/index.tsx +52 -0
  47. package/assets/color-facebook/index.tsx +32 -0
  48. package/assets/color-fire/index.tsx +36 -0
  49. package/assets/color-google/index.tsx +44 -0
  50. package/assets/color-liner/index.tsx +32 -0
  51. package/assets/color-liner-variation/index.tsx +60 -0
  52. package/assets/color-pdf/index.tsx +48 -0
  53. package/assets/color-txt/index.tsx +48 -0
  54. package/assets/copy/index.tsx +12 -11
  55. package/assets/credit/index.tsx +19 -18
  56. package/assets/creditcard/index.tsx +15 -14
  57. package/assets/dark-mode/index.tsx +11 -10
  58. package/assets/description/index.tsx +20 -19
  59. package/assets/desktop/index.tsx +11 -10
  60. package/assets/desktop-on-cursor/index.tsx +19 -18
  61. package/assets/document/index.tsx +13 -12
  62. package/assets/document-add/index.tsx +17 -16
  63. package/assets/document-check/index.tsx +17 -16
  64. package/assets/document-warning/index.tsx +15 -14
  65. package/assets/double-arrow-backward/index.tsx +15 -14
  66. package/assets/{lds-pri-icon-s-double-arrow-forward → double-arrow-forward}/index.tsx +16 -15
  67. package/assets/download/index.tsx +15 -14
  68. package/assets/drop-down/index.tsx +11 -10
  69. package/assets/drop-up/index.tsx +11 -10
  70. package/assets/email/index.tsx +13 -12
  71. package/assets/end/index.tsx +15 -14
  72. package/assets/essay/index.tsx +17 -16
  73. package/assets/exclamationmark/index.tsx +13 -12
  74. package/assets/exclamationmark-fill/index.tsx +11 -10
  75. package/assets/expand/index.tsx +15 -14
  76. package/assets/expand-close/index.tsx +11 -10
  77. package/assets/extend/index.tsx +11 -10
  78. package/assets/facebook/index.tsx +11 -10
  79. package/assets/feedback/index.tsx +15 -14
  80. package/assets/filter/index.tsx +19 -18
  81. package/assets/fire/index.tsx +14 -13
  82. package/assets/flowchart/index.tsx +11 -10
  83. package/assets/focus/index.tsx +15 -14
  84. package/assets/folder/index.tsx +11 -10
  85. package/assets/folder-add/index.tsx +13 -12
  86. package/assets/folder-open/index.tsx +11 -24
  87. package/assets/folder-open-share/index.tsx +19 -18
  88. package/assets/folder-share/index.tsx +19 -18
  89. package/assets/formal-bag/index.tsx +11 -10
  90. package/assets/globe/index.tsx +11 -10
  91. package/assets/google/index.tsx +11 -10
  92. package/assets/google-export/index.tsx +19 -18
  93. package/assets/graduationcap/index.tsx +12 -11
  94. package/assets/help/index.tsx +15 -14
  95. package/assets/hide-all/index.tsx +23 -102
  96. package/assets/highlight-edit/index.tsx +15 -14
  97. package/assets/highlighter/index.tsx +11 -10
  98. package/assets/history/index.tsx +15 -14
  99. package/assets/home/index.tsx +11 -10
  100. package/assets/info/index.tsx +19 -18
  101. package/assets/light/index.tsx +15 -14
  102. package/assets/light-mode/index.tsx +43 -42
  103. package/assets/liner/index.tsx +15 -14
  104. package/assets/link/index.tsx +15 -14
  105. package/assets/list/index.tsx +31 -30
  106. package/assets/literature-review/index.tsx +27 -26
  107. package/assets/lock/index.tsx +15 -14
  108. package/assets/magic-pencil/index.tsx +27 -26
  109. package/assets/magic-wand/index.tsx +23 -22
  110. package/assets/make-easy/index.tsx +27 -26
  111. package/assets/members/index.tsx +23 -22
  112. package/assets/memo/index.tsx +15 -14
  113. package/assets/menu/index.tsx +19 -18
  114. package/assets/microscope/index.tsx +11 -10
  115. package/assets/mindmap/index.tsx +11 -10
  116. package/assets/minus/index.tsx +11 -18
  117. package/assets/mobile/index.tsx +15 -14
  118. package/assets/more/index.tsx +19 -18
  119. package/assets/move/index.tsx +11 -10
  120. package/assets/move-to-folder/index.tsx +15 -14
  121. package/assets/new-chrome-extension/index.tsx +11 -10
  122. package/assets/new-tab/index.tsx +15 -14
  123. package/assets/new-thread/index.tsx +13 -12
  124. package/assets/new-thread-folder/index.tsx +19 -18
  125. package/assets/palette/index.tsx +27 -26
  126. package/assets/paperclip/index.tsx +11 -17
  127. package/assets/paragraph/index.tsx +23 -22
  128. package/assets/paraphrase/index.tsx +23 -22
  129. package/assets/pencil/index.tsx +12 -11
  130. package/assets/person/index.tsx +15 -14
  131. package/assets/person-add/index.tsx +19 -18
  132. package/assets/person-fill/index.tsx +11 -10
  133. package/assets/photo/index.tsx +14 -13
  134. package/assets/play-button/index.tsx +14 -13
  135. package/assets/plus/index.tsx +11 -10
  136. package/assets/power/index.tsx +15 -14
  137. package/assets/question-box/index.tsx +15 -14
  138. package/assets/question-message/index.tsx +15 -14
  139. package/assets/quote/index.tsx +15 -14
  140. package/assets/redo/index.tsx +11 -10
  141. package/assets/regenerate/index.tsx +15 -14
  142. package/assets/remove-from-folder/index.tsx +15 -14
  143. package/assets/report/index.tsx +15 -14
  144. package/assets/restaurant/index.tsx +19 -18
  145. package/assets/retry/index.tsx +11 -10
  146. package/assets/rocket/index.tsx +15 -14
  147. package/assets/search/index.tsx +11 -10
  148. package/assets/secret-mode/index.tsx +15 -14
  149. package/assets/send/index.tsx +11 -10
  150. package/assets/setting/index.tsx +15 -14
  151. package/assets/share/index.tsx +15 -14
  152. package/assets/sheet-export/index.tsx +15 -14
  153. package/assets/shield/index.tsx +13 -26
  154. package/assets/shield-person/index.tsx +19 -18
  155. package/assets/shield-usage/index.tsx +27 -26
  156. package/assets/shorten/index.tsx +15 -14
  157. package/assets/show-all/index.tsx +23 -22
  158. package/assets/sign-out/index.tsx +15 -14
  159. package/assets/source/index.tsx +23 -22
  160. package/assets/speaker/index.tsx +15 -14
  161. package/assets/spinner/index.tsx +15 -14
  162. package/assets/stack/index.tsx +19 -18
  163. package/assets/start/index.tsx +15 -14
  164. package/assets/step/index.tsx +15 -14
  165. package/assets/stop/index.tsx +15 -14
  166. package/assets/summarize/index.tsx +20 -18
  167. package/assets/target/index.tsx +19 -18
  168. package/assets/teams/index.tsx +18 -17
  169. package/assets/text-select/index.tsx +15 -14
  170. package/assets/thumb-down/index.tsx +13 -12
  171. package/assets/thumb-up/index.tsx +13 -12
  172. package/assets/timer/index.tsx +19 -18
  173. package/assets/translate/index.tsx +15 -14
  174. package/assets/trash/index.tsx +17 -16
  175. package/assets/tune/index.tsx +31 -30
  176. package/assets/twitter/index.tsx +11 -10
  177. package/assets/undo/index.tsx +11 -10
  178. package/assets/verification-badge/index.tsx +11 -10
  179. package/assets/view-list/index.tsx +11 -10
  180. package/assets/visibility/index.tsx +15 -14
  181. package/assets/visibility-off/index.tsx +27 -26
  182. package/assets/volume/index.tsx +11 -10
  183. package/assets/volume-up/index.tsx +19 -18
  184. package/assets/zoom-in/index.tsx +15 -14
  185. package/assets/zoom-out/index.tsx +15 -14
  186. package/index.tsx +44 -26
  187. package/package.json +7 -3
package/assets/arrow-down/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 ArrowDownProps {
4
4
  fill?: boolean;
5
5
  thick?: boolean;
6
6
  size?: number
7
+ color?: BasicColorType;
7
8
  }
8
9
 
9
- export const ArrowDown = ({ fill = false, thick = false, size = 24 }: ArrowDownProps) => {
10
+ export const ArrowDown = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ArrowDownProps) => {
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.501 36.379L25.501 7H22.501L22.501 36.3797L11.4835 25.3622L9.36218 27.4835L21.5258 39.6471C22.8926 41.0139 25.1087 41.0139 26.4755 39.6471L38.6391 27.4835L36.5178 25.3622L25.501 36.379Z" 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.5011 36.379L25.5011 7H22.5011L22.5011 36.3797L11.4836 25.3622L9.3623 27.4835L21.5259 39.6471C22.8927 41.0139 25.1088 41.0139 26.4756 39.6471L38.6392 27.4835L36.5179 25.3622L25.5011 36.379Z" 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.501 36.379L25.501 7H22.501L22.501 36.3797L11.4835 25.3622L9.36218 27.4835L21.5258 39.6471C22.8926 41.0139 25.1087 41.0139 26.4755 39.6471L38.6391 27.4835L36.5178 25.3622L25.501 36.379Z" 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.5011 36.379L25.5011 7H22.5011L22.5011 36.3797L11.4836 25.3622L9.3623 27.4835L21.5259 39.6471C22.8927 41.0139 25.1088 41.0139 26.4756 39.6471L38.6392 27.4835L36.5179 25.3622L25.5011 36.379Z" 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.001 35.1719L26.001 7H22.001L22.001 35.1726L11.8371 25.0086L9.00864 27.8371L21.1722 40.0006C22.7343 41.5627 25.267 41.5627 26.8291 40.0006L38.9927 27.8371L36.1642 25.0086L26.001 35.1719Z" 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.0009 35.1719L26.0009 7H22.0009L22.0009 35.1726L11.837 25.0086L9.00854 27.8371L21.1721 40.0006C22.7342 41.5627 25.2669 41.5627 26.829 40.0006L38.9926 27.8371L36.1641 25.0086L26.0009 35.1719Z" 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.501 36.379L25.501 7H22.501L22.501 36.3797L11.4835 25.3622L9.36218 27.4835L21.5258 39.6471C22.8926 41.0139 25.1087 41.0139 26.4755 39.6471L38.6391 27.4835L36.5178 25.3622L25.501 36.379Z" 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.5011 36.379L25.5011 7H22.5011L22.5011 36.3797L11.4836 25.3622L9.3623 27.4835L21.5259 39.6471C22.8927 41.0139 25.1088 41.0139 26.4756 39.6471L38.6392 27.4835L36.5179 25.3622L25.5011 36.379Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };
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.0608 17.9375L23.6464 31.5231C23.8417 31.7184 24.1583 31.7184 24.3535 31.5232L37.9392 17.9375L40.0605 20.0588L26.4748 33.6445C25.108 35.0113 22.8919 35.0113 21.5251 33.6445L7.93945 20.0588L10.0608 17.9375Z" 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.0608 17.9375L23.6464 31.5231C23.8417 31.7184 24.1583 31.7184 24.3535 31.5232L37.9392 17.9375L40.0605 20.0588L26.4748 33.6445C25.108 35.0113 22.8919 35.0113 21.5251 33.6445L7.93945 20.0588L10.0608 17.9375Z" 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.4141 17.5859L23.9998 31.1716L37.5854 17.5859L40.4138 20.4144L26.8282 34C25.2661 35.5621 22.7334 35.5621 21.1713 34L7.58569 20.4144L10.4141 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.0608 17.9375L23.6464 31.5231C23.8417 31.7184 24.1583 31.7184 24.3535 31.5232L37.9392 17.9375L40.0605 20.0588L26.4748 33.6445C25.108 35.0113 22.8919 35.0113 21.5251 33.6445L7.93945 20.0588L10.0608 17.9375Z" 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.502L17 35.6736C17 36.5645 18.0771 37.0107 18.7071 36.3807L29.5858 25.502C30.3668 24.721 30.3668 23.4546 29.5858 22.6736L18.7071 11.7949C18.0771 11.1649 17 11.6111 17 12.502Z" 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.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" 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.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" 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.9372L28.5249 24.3516C28.7201 24.1563 28.7201 23.8397 28.5249 23.6445L17.9392 13.0588L20.0605 10.9375L30.6462 21.5231C32.013 22.89 32.013 25.1061 30.6462 26.4729L20.0605 37.0585L17.9392 34.9372Z" 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.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" 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.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" 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.9998 21.1716C35.5619 22.7337 35.5619 25.2663 33.9998 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.9372L31.5249 24.3516C31.7201 24.1563 31.7201 23.8397 31.5249 23.6445L17.9392 10.0588L20.0605 7.9375L33.6462 21.5231C35.013 22.89 35.013 25.1061 33.6462 26.4729L20.0605 40.0585L17.9392 37.9372Z" 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.6219 22.4977L22.6389 11.4807L20.5176 9.35938L8.35398 21.523C6.98715 22.8898 6.98715 25.1059 8.35398 26.4727L20.5176 38.6363L22.6389 36.515L11.6216 25.4977L41.0001 25.4977L41.0001 22.4977L11.6219 22.4977Z" 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.6219 22.4977L22.6389 11.4807L20.5176 9.35938L8.35398 21.523C6.98715 22.8898 6.98715 25.1059 8.35398 26.4727L20.5176 38.6363L22.6389 36.515L11.6216 25.4977L41.0001 25.4977L41.0001 22.4977L11.6219 22.4977Z" 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.829 21.9997L22.9924 11.8362L20.164 9.00781L8.00043 21.1714C6.43833 22.7335 6.43833 25.2662 8.00043 26.8282L20.164 38.9918L22.9924 36.1634L12.8287 25.9997L41.0001 25.9997L41.0001 21.9997L12.829 21.9997Z" 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.6219 22.4977L22.6389 11.4807L20.5176 9.35938L8.35398 21.523C6.98715 22.8898 6.98715 25.1059 8.35398 26.4727L20.5176 38.6363L22.6389 36.515L11.6216 25.4977L41.0001 25.4977L41.0001 22.4977L11.6219 22.4977Z" 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.5024L25.3612 36.5189L27.4825 38.6402L39.6461 26.4766C41.013 25.1098 41.013 22.8937 39.6461 21.5269L27.4825 9.36328L25.3612 11.4846L36.379 22.5024L7 22.5024V25.5024H36.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.5024L25.3612 36.5189L27.4825 38.6402L39.6461 26.4766C41.013 25.1098 41.013 22.8937 39.6461 21.5269L27.4825 9.36328L25.3612 11.4846L36.379 22.5024L7 22.5024V25.5024H36.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.5024L25.3612 36.5189L27.4825 38.6402L39.6461 26.4766C41.013 25.1098 41.013 22.8937 39.6461 21.5269L27.4825 9.36328L25.3612 11.4846L36.379 22.5024L7 22.5024V25.5024H36.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.4999 11.6207L36.5174 22.6382L38.6387 20.5168L26.4751 8.35325C25.1083 6.98642 22.8922 6.98642 21.5254 8.35325L9.36182 20.5168L11.4831 22.6382L22.4999 11.6213V41.0003H25.4999V11.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.4999 11.6207L36.5174 22.6382L38.6387 20.5168L26.4751 8.35325C25.1083 6.98642 22.8922 6.98642 21.5254 8.35325L9.36182 20.5168L11.4831 22.6382L22.4999 11.6213V41.0003H25.4999V11.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.4999 11.6207L36.5174 22.6382L38.6387 20.5168L26.4751 8.35325C25.1083 6.98642 22.8922 6.98642 21.5254 8.35325L9.36182 20.5168L11.4831 22.6382L22.4999 11.6213V41.0003H25.4999V11.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.5011 35.3805L25.0608 27.9402L22.9395 30.0615L31.8986 39.0207C33.0597 40.1818 34.9422 40.1818 36.1032 39.0207L45.0624 30.0615L42.9411 27.9402L35.5011 35.3802V8H32.5011V35.3805Z" style={{ fill: `var(--${color})` }}/>
14
+ <path d="M15.5007 12.6195L22.9411 20.0598L25.0624 17.9385L16.1032 8.97932C14.9422 7.81825 13.0597 7.81825 11.8986 8.97932L2.93945 17.9385L5.06077 20.0598L12.5007 12.6198V39.999H15.5007V12.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.5011 35.3805L25.0608 27.9402L22.9395 30.0615L31.8986 39.0207C33.0597 40.1818 34.9422 40.1818 36.1032 39.0207L45.0624 30.0615L42.9411 27.9402L35.5011 35.3802V8H32.5011V35.3805Z" style={{ fill: `var(--${color})` }}/>
20
+ <path d="M15.5007 12.6195L22.9411 20.0598L25.0624 17.9385L16.1032 8.97932C14.9422 7.81825 13.0597 7.81825 11.8986 8.97932L2.93945 17.9385L5.06077 20.0598L12.5007 12.6198V39.999H15.5007V12.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.0005 13.8274L22.5873 20.4142L25.4157 17.5858L16.4566 8.62663C15.1002 7.27029 12.9012 7.27029 11.5449 8.62663L2.58569 17.5858L5.41412 20.4142L12.0005 13.8278V40H16.0005V13.8274Z" style={{ fill: `var(--${color})` }}/>
26
+ <path d="M32.0009 34.1745L25.4141 27.5877L22.5857 30.4162L31.5449 39.3753C32.9012 40.7317 35.1003 40.7317 36.4566 39.3753L45.4158 30.4162L42.5873 27.5877L36.0009 34.1742V8.00097L32.0009 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.5011 35.3805L25.0608 27.9402L22.9395 30.0615L31.8986 39.0207C33.0597 40.1818 34.9422 40.1818 36.1032 39.0207L45.0624 30.0615L42.9411 27.9402L35.5011 35.3802V8H32.5011V35.3805Z" style={{ fill: `var(--${color})` }}/>
33
+ <path d="M15.5007 12.6195L22.9411 20.0598L25.0624 17.9385L16.1032 8.97932C14.9422 7.81825 13.0597 7.81825 11.8986 8.97932L2.93945 17.9385L5.06077 20.0598L12.5007 12.6198V39.999H15.5007V12.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.4999 14.6214L35.4999 31H38.4999L38.4999 13C38.4999 11.067 36.9329 9.5 34.9999 9.5H16.9999V12.5L33.3787 12.5L8.93921 36.9395L11.0605 39.0608L35.4999 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.4999 14.6214L35.4999 31H38.4999L38.4999 13C38.4999 11.067 36.9329 9.5 34.9999 9.5H16.9999V12.5L33.3787 12.5L8.93921 36.9395L11.0605 39.0608L35.4999 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="M34.9999 15.8286L34.9999 31H38.9999L38.9999 13C38.9999 10.7909 37.209 9 34.9999 9H16.9999V13L32.1716 13L8.58569 36.5859L11.4141 39.4144L34.9999 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.4999 14.6214L35.4999 31H38.4999L38.4999 13C38.4999 11.067 36.9329 9.5 34.9999 9.5H16.9999V12.5L33.3787 12.5L8.93921 36.9395L11.0605 39.0608L35.4999 14.6214Z" style={{ fill: `var(--${color})` }}/>
29
30
  </svg>
30
31
  ;
31
32
  };