@liner-fe/icon 0.0.4 → 0.0.6

package/assets/step/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface StepProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Step = ({ fill = false, thick = false, size = 24 }: StepProps) => {
+export const Step = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: StepProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M20.3922 24.0495C21.8176 21.1494 22.596 17.6818 22.8391 14.9626C23.3531 9.2128 20.1014 1.86258 14.084 1.78885C8.06671 1.71513 4.9647 6.96132 4.33886 13.9625C3.91046 18.7548 5.17618 24.4113 8.05642 27.5034C7.96404 29.3709 8.50755 31.3685 8.96795 33.0606C10.0244 36.9432 13.9048 39.2679 17.6352 38.2529C21.3656 37.238 23.5332 33.2677 22.4768 29.385C22.0083 27.663 21.4537 25.6245 20.3922 24.0495ZM11.0524 28.241L18.1636 26.149C18.7498 27.1978 19.1463 28.5711 19.5821 30.1726C20.2335 32.5668 18.8712 34.8076 16.8476 35.3582C14.824 35.9088 12.5141 34.6671 11.8627 32.273C11.4469 30.7447 11.104 29.4109 11.0524 28.241ZM7.32694 14.2296C6.9469 18.481 8.12976 23.0955 10.173 25.3726L17.4515 23.2314L17.6998 22.7262C18.9262 20.231 19.6325 17.1397 19.851 14.6955C20.0546 12.4182 19.4957 9.76951 18.3214 7.76205C17.1601 5.77698 15.6722 4.80854 14.0473 4.78863C12.0673 4.76437 10.6752 5.55083 9.60404 7.00322C8.44094 8.5803 7.61198 11.0409 7.32694 14.2296Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9966 32.0495C26.9352 33.6245 26.3805 35.663 25.912 37.385C24.8556 41.2677 27.0233 45.238 30.7536 46.2529C34.484 47.2679 38.3645 44.9432 39.4209 41.0605C39.8813 39.3684 40.4248 37.3709 40.3324 35.5034C43.2127 32.4113 44.4784 26.7548 44.05 21.9625C43.4241 14.9613 40.3221 9.71513 34.3048 9.78885C28.2875 9.86258 25.0358 17.2128 25.5497 22.9626C25.7928 25.6818 26.5712 29.1494 27.9966 32.0495ZM30.985 31.3283L38.3671 33.1979C40.3171 30.8656 41.4325 26.375 41.0619 22.2296C40.7768 19.0409 39.9479 16.5803 38.7848 15.0032C37.7136 13.5508 36.3216 12.7644 34.3415 12.7886C32.7166 12.8085 31.2288 13.777 30.0675 15.762C28.8931 17.7695 28.3343 20.4182 28.5378 22.6955C28.7563 25.1397 29.4626 28.231 30.689 30.7261L30.985 31.3283ZM37.3425 36.0332L30.1858 34.2206C29.6211 35.26 29.2327 36.6072 28.8067 38.1726C28.1553 40.5668 29.5177 42.8076 31.5413 43.3582C33.5648 43.9088 35.8747 42.6671 36.5261 40.273C36.9667 38.6535 37.3255 37.2523 37.3425 36.0332Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M20.3921 24.0505C21.8175 21.1504 22.5959 17.6827 22.839 14.9636C23.3529 9.21377 20.1013 1.86355 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505ZM11.0523 28.242L18.1635 26.15C18.7497 27.1988 19.1462 28.572 19.582 30.1736C20.2334 32.5678 18.871 34.8086 16.8474 35.3591C14.8239 35.9097 12.514 34.6681 11.8626 32.2739C11.4468 30.7457 11.1039 29.4119 11.0523 28.242ZM7.32682 14.2306C6.94677 18.482 8.12964 23.0965 10.1729 25.3736L17.4514 23.2324L17.6997 22.7271C18.9261 20.232 19.6324 17.1407 19.8509 14.6965C20.0544 12.4192 19.4956 9.77048 18.3212 7.76302C17.16 5.77795 15.6721 4.80951 14.0472 4.7896C12.0672 4.76535 10.6751 5.55181 9.60392 7.0042C8.44082 8.58128 7.61186 11.0419 7.32682 14.2306Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C28.2873 9.86355 25.0356 17.2138 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM30.9848 31.3293L38.367 33.1989C40.317 30.8666 41.4323 26.376 41.0618 22.2306C40.7767 19.0419 39.9478 16.5813 38.7847 15.0042C37.7135 13.5518 36.3214 12.7653 34.3414 12.7896C32.7165 12.8095 31.2286 13.778 30.0673 15.763C28.893 17.7705 28.3341 20.4192 28.5377 22.6965C28.7562 25.1407 29.4625 28.232 30.6889 30.7271L30.9848 31.3293ZM37.3424 36.0341L30.1857 34.2216C29.621 35.261 29.2325 36.6082 28.8066 38.1736C28.1552 40.5678 29.5175 42.8086 31.5411 43.3591C33.5647 43.9097 35.8746 42.6681 36.526 40.2739C36.9666 38.6545 37.3254 37.2533 37.3424 36.0341Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M20.3922 24.0495C21.8176 21.1494 22.596 17.6818 22.8391 14.9626C23.3531 9.2128 20.1014 1.86258 14.084 1.78885C8.06671 1.71513 4.9647 6.96132 4.33886 13.9625C3.91046 18.7548 5.17618 24.4113 8.05642 27.5034C7.96404 29.3709 8.50755 31.3685 8.96795 33.0606C10.0244 36.9432 13.9048 39.2679 17.6352 38.2529C21.3656 37.238 23.5332 33.2677 22.4768 29.385C22.0083 27.663 21.4537 25.6245 20.3922 24.0495ZM11.0524 28.241L18.1636 26.149C18.7498 27.1978 19.1463 28.5711 19.5821 30.1726C20.2335 32.5668 18.8712 34.8076 16.8476 35.3582C14.824 35.9088 12.5141 34.6671 11.8627 32.273C11.4469 30.7447 11.104 29.4109 11.0524 28.241ZM7.32694 14.2296C6.9469 18.481 8.12976 23.0955 10.173 25.3726L17.4515 23.2314L17.6998 22.7262C18.9262 20.231 19.6325 17.1397 19.851 14.6955C20.0546 12.4182 19.4957 9.76951 18.3214 7.76205C17.1601 5.77698 15.6722 4.80854 14.0473 4.78863C12.0673 4.76437 10.6752 5.55083 9.60404 7.00322C8.44094 8.5803 7.61198 11.0409 7.32694 14.2296Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9966 32.0495C26.9352 33.6245 26.3805 35.663 25.912 37.385C24.8556 41.2677 27.0233 45.238 30.7536 46.2529C34.484 47.2679 38.3645 44.9432 39.4209 41.0605C39.8813 39.3684 40.4248 37.3709 40.3324 35.5034C43.2127 32.4113 44.4784 26.7548 44.05 21.9625C43.4241 14.9613 40.3221 9.71513 34.3048 9.78885C28.2875 9.86258 25.0358 17.2128 25.5497 22.9626C25.7928 25.6818 26.5712 29.1494 27.9966 32.0495ZM30.985 31.3283L38.3671 33.1979C40.3171 30.8656 41.4325 26.375 41.0619 22.2296C40.7768 19.0409 39.9479 16.5803 38.7848 15.0032C37.7136 13.5508 36.3216 12.7644 34.3415 12.7886C32.7166 12.8085 31.2288 13.777 30.0675 15.762C28.8931 17.7695 28.3343 20.4182 28.5378 22.6955C28.7563 25.1397 29.4626 28.231 30.689 30.7261L30.985 31.3283ZM37.3425 36.0332L30.1858 34.2206C29.6211 35.26 29.2327 36.6072 28.8067 38.1726C28.1553 40.5668 29.5177 42.8076 31.5413 43.3582C33.5648 43.9088 35.8747 42.6671 36.5261 40.273C36.9667 38.6535 37.3255 37.2523 37.3425 36.0332Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M20.3921 24.0505C21.8175 21.1504 22.5959 17.6827 22.839 14.9636C23.3529 9.21377 20.1013 1.86355 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505ZM11.0523 28.242L18.1635 26.15C18.7497 27.1988 19.1462 28.572 19.582 30.1736C20.2334 32.5678 18.871 34.8086 16.8474 35.3591C14.8239 35.9097 12.514 34.6681 11.8626 32.2739C11.4468 30.7457 11.1039 29.4119 11.0523 28.242ZM7.32682 14.2306C6.94677 18.482 8.12964 23.0965 10.1729 25.3736L17.4514 23.2324L17.6997 22.7271C18.9261 20.232 19.6324 17.1407 19.8509 14.6965C20.0544 12.4192 19.4956 9.77048 18.3212 7.76302C17.16 5.77795 15.6721 4.80951 14.0472 4.7896C12.0672 4.76535 10.6751 5.55181 9.60392 7.0042C8.44082 8.58128 7.61186 11.0419 7.32682 14.2306Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C28.2873 9.86355 25.0356 17.2138 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM30.9848 31.3293L38.367 33.1989C40.317 30.8666 41.4323 26.376 41.0618 22.2306C40.7767 19.0419 39.9478 16.5813 38.7847 15.0042C37.7135 13.5518 36.3214 12.7653 34.3414 12.7896C32.7165 12.8095 31.2286 13.778 30.0673 15.763C28.893 17.7705 28.3341 20.4192 28.5377 22.6965C28.7562 25.1407 29.4625 28.232 30.6889 30.7271L30.9848 31.3293ZM37.3424 36.0341L30.1857 34.2216C29.621 35.261 29.2325 36.6082 28.8066 38.1736C28.1552 40.5678 29.5175 42.8086 31.5411 43.3591C33.5647 43.9097 35.8746 42.6681 36.526 40.2739C36.9666 38.6545 37.3254 37.2533 37.3424 36.0341Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M22.8654 14.6163C23.2221 8.92215 19.9812 1.8611 14.084 1.78885C8.06671 1.71513 4.9647 6.96132 4.33886 13.9625C3.91046 18.7548 5.17618 24.4113 8.05642 27.5034C7.96404 29.3709 8.50755 31.3685 8.96795 33.0606C10.0244 36.9432 13.9048 39.2679 17.6352 38.2529C21.3656 37.238 23.5332 33.2677 22.4768 29.385C22.0083 27.663 21.4537 25.6245 20.3922 24.0495C20.8192 23.1808 21.1881 22.2612 21.5019 21.326C22.2359 19.1392 22.6688 16.8673 22.8391 14.9626C22.8493 14.8478 22.8581 14.7323 22.8654 14.6163ZM12.0681 28.4634L17.4239 26.8878C17.8669 27.7717 18.2109 28.9422 18.6172 30.4352C19.1336 32.3331 18.0397 33.9975 16.585 34.3932C15.1304 34.789 13.344 33.9084 12.8276 32.0104C12.4386 30.5806 12.1486 29.432 12.0681 28.4634ZM8.32297 14.3186C7.96052 18.3732 9.104 22.6274 10.8665 24.6474L16.4483 23.0053L16.8024 22.285C17.9624 19.9249 18.6447 16.959 18.855 14.6065C19.0407 12.5284 18.5238 10.0884 17.4582 8.267C16.4101 6.4754 15.1987 5.80281 14.035 5.78855C12.3979 5.7685 11.3017 6.38607 10.4088 7.59676C9.39334 8.97371 8.59872 11.2339 8.32297 14.3186Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9966 32.0495C26.9352 33.6245 26.3805 35.663 25.912 37.385C24.8556 41.2677 27.0233 45.238 30.7536 46.2529C34.484 47.2679 38.3645 44.9432 39.4209 41.0605C39.8813 39.3684 40.4248 37.3709 40.3324 35.5034C43.2127 32.4113 44.4784 26.7548 44.05 21.9625C43.4241 14.9613 40.3221 9.71513 34.3048 9.78885C30.7968 9.83183 28.2287 12.3479 26.7988 15.5781C25.9156 17.5733 25.4665 19.841 25.4984 21.9667C25.5034 22.3028 25.5205 22.6353 25.5497 22.9626C25.7928 25.6818 26.5712 29.1494 27.9966 32.0495ZM31.7806 30.68L37.7078 32.4237C39.3642 30.3252 40.4154 26.2291 40.0659 22.3186C39.7901 19.2339 38.9955 16.9737 37.98 15.5968C37.0871 14.3861 35.9909 13.7685 34.3538 13.7886C33.1902 13.8028 31.9787 14.4754 30.9306 16.267C29.865 18.0884 29.3481 20.5284 29.5339 22.6065C29.7442 24.959 30.4264 27.9249 31.5865 30.285L31.7806 30.68ZM36.338 36.1902L31.0922 34.647C30.5858 35.5552 30.216 36.8023 29.7717 38.4352C29.2553 40.3332 30.3491 41.9975 31.8038 42.3932C33.2585 42.789 35.0448 41.9084 35.5612 40.0104C35.9875 38.4437 36.2948 37.2148 36.338 36.1902Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M22.8652 14.6173C23.222 8.92313 19.9811 1.86208 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505C20.819 23.1818 21.1879 22.2622 21.5018 21.327C22.2358 19.1402 22.6687 16.8682 22.839 14.9636C22.8492 14.8488 22.858 14.7333 22.8652 14.6173ZM12.0679 28.4644L17.4238 26.8888C17.8668 27.7727 18.2108 28.9431 18.617 30.4361C19.1334 32.3341 18.0396 33.9984 16.5849 34.3942C15.1302 34.79 13.3439 33.9094 12.8275 32.0114C12.4385 30.5816 12.1485 29.433 12.0679 28.4644ZM8.32285 14.3196C7.9604 18.3742 9.10388 22.6284 10.8664 24.6484L16.4482 23.0063L16.8022 22.286C17.9623 19.9259 18.6445 16.96 18.8548 14.6074C19.0406 12.5293 18.5237 10.0894 17.4581 8.26797C16.41 6.47638 15.1985 5.80379 14.0349 5.78953C12.3978 5.76947 11.3016 6.38705 10.4087 7.59774C9.39322 8.97469 8.59859 11.2349 8.32285 14.3196Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C30.7967 9.83281 28.2286 12.3488 26.7987 15.5791C25.9154 17.5743 25.4664 19.842 25.4983 21.9677C25.5033 22.3038 25.5204 22.6363 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM31.7805 30.681L37.7077 32.4246C39.3641 30.3262 40.4153 26.2301 40.0657 22.3196C39.79 19.2349 38.9954 16.9747 37.9799 15.5977C37.087 14.387 35.9908 13.7695 34.3537 13.7895C33.19 13.8038 31.9786 14.4764 30.9305 16.268C29.8649 18.0894 29.348 20.5293 29.5337 22.6074C29.744 24.96 30.4263 27.9259 31.5863 30.286L31.7805 30.681ZM36.3379 36.1912L31.0921 34.6479C30.5857 35.5562 30.2158 36.8033 29.7715 38.4361C29.2551 40.3341 30.349 41.9984 31.8037 42.3942C33.2583 42.79 35.0447 41.9094 35.5611 40.0114C35.9873 38.4447 36.2947 37.2158 36.3379 36.1912Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M20.3922 24.0495C21.8176 21.1494 22.596 17.6818 22.8391 14.9626C23.3531 9.2128 20.1014 1.86258 14.084 1.78885C8.06671 1.71513 4.9647 6.96132 4.33886 13.9625C3.91046 18.7548 5.17618 24.4113 8.05642 27.5034C7.96404 29.3709 8.50755 31.3685 8.96795 33.0606C10.0244 36.9432 13.9048 39.2679 17.6352 38.2529C21.3656 37.238 23.5332 33.2677 22.4768 29.385C22.0083 27.663 21.4537 25.6245 20.3922 24.0495ZM11.0524 28.241L18.1636 26.149C18.7498 27.1978 19.1463 28.5711 19.5821 30.1726C20.2335 32.5668 18.8712 34.8076 16.8476 35.3582C14.824 35.9088 12.5141 34.6671 11.8627 32.273C11.4469 30.7447 11.104 29.4109 11.0524 28.241ZM7.32694 14.2296C6.9469 18.481 8.12976 23.0955 10.173 25.3726L17.4515 23.2314L17.6998 22.7262C18.9262 20.231 19.6325 17.1397 19.851 14.6955C20.0546 12.4182 19.4957 9.76951 18.3214 7.76205C17.1601 5.77698 15.6722 4.80854 14.0473 4.78863C12.0673 4.76437 10.6752 5.55083 9.60404 7.00322C8.44094 8.5803 7.61198 11.0409 7.32694 14.2296Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.9966 32.0495C26.9352 33.6245 26.3805 35.663 25.912 37.385C24.8556 41.2677 27.0233 45.238 30.7536 46.2529C34.484 47.2679 38.3645 44.9432 39.4209 41.0605C39.8813 39.3684 40.4248 37.3709 40.3324 35.5034C43.2127 32.4113 44.4784 26.7548 44.05 21.9625C43.4241 14.9613 40.3221 9.71513 34.3048 9.78885C28.2875 9.86258 25.0358 17.2128 25.5497 22.9626C25.7928 25.6818 26.5712 29.1494 27.9966 32.0495ZM30.985 31.3283L38.3671 33.1979C40.3171 30.8656 41.4325 26.375 41.0619 22.2296C40.7768 19.0409 39.9479 16.5803 38.7848 15.0032C37.7136 13.5508 36.3216 12.7644 34.3415 12.7886C32.7166 12.8085 31.2288 13.777 30.0675 15.762C28.8931 17.7695 28.3343 20.4182 28.5378 22.6955C28.7563 25.1397 29.4626 28.231 30.689 30.7261L30.985 31.3283ZM37.3425 36.0332L30.1858 34.2206C29.6211 35.26 29.2327 36.6072 28.8067 38.1726C28.1553 40.5668 29.5177 42.8076 31.5413 43.3582C33.5648 43.9088 35.8747 42.6671 36.5261 40.273C36.9667 38.6535 37.3255 37.2523 37.3425 36.0332Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M20.3921 24.0505C21.8175 21.1504 22.5959 17.6827 22.839 14.9636C23.3529 9.21377 20.1013 1.86355 14.0839 1.78983C8.06659 1.71611 4.96458 6.9623 4.33873 13.9635C3.91034 18.7558 5.17605 24.4122 8.0563 27.5044C7.96392 29.3719 8.50743 31.3694 8.96782 33.0616C10.0242 36.9442 13.9047 39.2689 17.6351 38.2539C21.3654 37.2389 23.5331 33.2686 22.4767 29.386C22.0082 27.6639 21.4536 25.6255 20.3921 24.0505ZM11.0523 28.242L18.1635 26.15C18.7497 27.1988 19.1462 28.572 19.582 30.1736C20.2334 32.5678 18.871 34.8086 16.8474 35.3591C14.8239 35.9097 12.514 34.6681 11.8626 32.2739C11.4468 30.7457 11.1039 29.4119 11.0523 28.242ZM7.32682 14.2306C6.94677 18.482 8.12964 23.0965 10.1729 25.3736L17.4514 23.2324L17.6997 22.7271C18.9261 20.232 19.6324 17.1407 19.8509 14.6965C20.0544 12.4192 19.4956 9.77048 18.3212 7.76302C17.16 5.77795 15.6721 4.80951 14.0472 4.7896C12.0672 4.76535 10.6751 5.55181 9.60392 7.0042C8.44082 8.58128 7.61186 11.0419 7.32682 14.2306Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.9965 32.0505C26.935 33.6255 26.3804 35.6639 25.9119 37.386C24.8555 41.2686 27.0231 45.2389 30.7535 46.2539C34.4839 47.2689 38.3643 44.9442 39.4208 41.0615C39.8812 39.3694 40.4247 37.3719 40.3323 35.5044C43.2125 32.4122 44.4782 26.7558 44.0499 21.9635C43.424 14.9623 40.322 9.71611 34.3047 9.78983C28.2873 9.86355 25.0356 17.2138 25.5496 22.9636C25.7927 25.6827 26.5711 29.1504 27.9965 32.0505ZM30.9848 31.3293L38.367 33.1989C40.317 30.8666 41.4323 26.376 41.0618 22.2306C40.7767 19.0419 39.9478 16.5813 38.7847 15.0042C37.7135 13.5518 36.3214 12.7653 34.3414 12.7896C32.7165 12.8095 31.2286 13.778 30.0673 15.763C28.893 17.7705 28.3341 20.4192 28.5377 22.6965C28.7562 25.1407 29.4625 28.232 30.6889 30.7271L30.9848 31.3293ZM37.3424 36.0341L30.1857 34.2216C29.621 35.261 29.2325 36.6082 28.8066 38.1736C28.1552 40.5678 29.5175 42.8086 31.5411 43.3591C33.5647 43.9097 35.8746 42.6681 36.526 40.2739C36.9666 38.6545 37.3254 37.2533 37.3424 36.0341Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/stop/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface StopProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Stop = ({ fill = false, thick = false, size = 24 }: StopProps) => {
+export const Stop = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: StopProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 16C31.1046 16 32 16.8954 32 18V30C32 31.1046 31.1046 32 30 32H18C16.8954 32 16 31.1046 16 30V18C16 16.8954 16.8954 16 18 16H30Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/summarize/index.tsx

@@ -1,39 +1,41 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface SummarizeProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Summarize = ({ fill = false, thick = false, size = 24 }: SummarizeProps) => {
+export const Summarize = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: SummarizeProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M34.2002 34.2051C34.2001 35.5858 35.3194 36.7051 36.7002 36.7051H37.2842L35.7998 38.9521V38C35.7998 36.6193 34.6805 35.5 33.2998 35.5H32.7207L34.2002 33.2617V34.2051ZM12 36H22C22 37.7706 22.3541 39.4604 22.9961 41H7V7H41V24.4648C39.4841 23.6749 37.7926 23.1746 36 23.0381V12H12V36Z" fill="currentColor" stroke="currentColor" stroke-width="4"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C40.9945 26.3258 38.1521 25 35 25C34.6629 25 34.3294 25.0152 34 25.0448V22H14V26H30.411C28.5149 26.8716 26.9091 28.2666 25.7789 30H14V34H24.1814C24.0622 34.6486 24 35.317 24 36C24 38.6593 24.9436 41.0981 26.5143 43ZM14 18V14H34V18H14Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.8002 43.9464V37.9997C33.8002 37.7235 33.5763 37.4997 33.3002 37.4997H29.9301C29.5316 37.4997 29.2932 37.0563 29.513 36.7239L35.2831 27.9982C35.5565 27.5848 36.2002 27.7784 36.2002 28.2741L36.1999 34.2055C36.1998 34.4817 36.4237 34.7055 36.6999 34.7055H40.0708C40.4691 34.7055 40.7075 35.1486 40.488 35.481L34.7174 44.2219C34.4442 44.6357 33.8002 44.4423 33.8002 43.9464Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M41 7V24.4648C39.3439 23.6018 37.4782 23.0857 35.5 23.0107V20.5H12.5V27.5H25.165C24.8881 27.8202 24.6259 28.1536 24.3809 28.5H12.5V35.5H22.0107C22.0044 35.666 22 35.8326 22 36C22 37.7706 22.3541 39.4604 22.9961 41H7V7H41ZM34.2002 34.2051C34.2001 35.5858 35.3194 36.7051 36.7002 36.7051H37.2842L35.7998 38.9521V38C35.7998 36.6193 34.6805 35.5 33.2998 35.5H32.7207L34.2002 33.2617V34.2051ZM12.5 19.5H35.5V12.5H12.5V19.5Z" fill="currentColor" stroke="currentColor" stroke-width="4"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41 7V24.4648C39.3439 23.6018 37.4782 23.0857 35.5 23.0107V20.5H12.5V27.5H25.165C24.8881 27.8202 24.6259 28.1536 24.3809 28.5H12.5V35.5H22.0107C22.0044 35.666 22 35.8326 22 36C22 37.7706 22.3541 39.4604 22.9961 41H7V7H41ZM34.2002 34.2051C34.2001 35.5858 35.3194 36.7051 36.7002 36.7051H37.2842L35.7998 38.9521V38C35.7998 36.6193 34.6805 35.5 33.2998 35.5H32.7207L34.2002 33.2617V34.2051ZM12.5 19.5H35.5V12.5H12.5V19.5Z" style={{ fill: `var(--${color})` }} stroke="#1E1E1F" stroke-width="4"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M39 25.7499V9H9V39H24.4141C24.834 40.4848 25.5579 41.8419 26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C41.8923 27.2768 40.5294 26.3472 39 25.7499Z" fill="currentColor"/>
-<path d="M34 14H14V18H34V14Z" fill="currentColor"/>
-<path d="M34 22H14V26H30.411C31.5203 25.4901 32.729 25.1594 34 25.0448V22Z" fill="currentColor"/>
-<path d="M25.7789 30H14V34H24.1814C24.4483 32.5466 25.001 31.1931 25.7789 30Z" fill="currentColor"/>
-<path d="M33.8002 43.9464V37.9997C33.8002 37.7235 33.5763 37.4997 33.3002 37.4997H29.9301C29.5316 37.4997 29.2932 37.0563 29.513 36.7239L35.2831 27.9982C35.5565 27.5848 36.2002 27.7784 36.2002 28.2741L36.1999 34.2055C36.1998 34.4817 36.4237 34.7055 36.6999 34.7055H40.0708C40.4691 34.7055 40.7075 35.1486 40.488 35.481L34.7174 44.2219C34.4442 44.6357 33.8002 44.4423 33.8002 43.9464Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39 25.7499V9H9V39H24.4141C24.834 40.4848 25.5579 41.8419 26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C41.8923 27.2768 40.5294 26.3472 39 25.7499Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34 14H14V18H34V14Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34 22H14V26H30.411C31.5203 25.4901 32.729 25.1594 34 25.0448V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.7789 30H14V34H24.1814C24.4483 32.5466 25.001 31.1931 25.7789 30Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.8002 43.9464V37.9997C33.8002 37.7235 33.5763 37.4997 33.3002 37.4997H29.9301C29.5316 37.4997 29.2932 37.0563 29.513 36.7239L35.2831 27.9982C35.5565 27.5848 36.2002 27.7784 36.2002 28.2741L36.1999 34.2055C36.1998 34.4817 36.4237 34.7055 36.6999 34.7055H40.0708C40.4691 34.7055 40.7075 35.1486 40.488 35.481L34.7174 44.2219C34.4442 44.6357 33.8002 44.4423 33.8002 43.9464Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M40 26.1994V8H8V40H24.7499C25.1781 41.0965 25.7771 42.1074 26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C42.14 27.5392 41.1262 26.7751 40 26.1994Z" fill="currentColor"/>
-<path d="M14.5 14.5H33.5V17.5H14.5V14.5Z" fill="currentColor"/>
-<path d="M14.5 22.5H33.5V25.1014C32.8863 25.1851 32.2886 25.3194 31.7114 25.5H14.5V22.5Z" fill="currentColor"/>
-<path d="M25.4716 30.5H14.5V33.5H24.2853C24.5336 32.4319 24.9374 31.4235 25.4716 30.5Z" fill="currentColor"/>
-<path d="M33.8002 37.9997V43.9464C33.8002 44.4423 34.4442 44.6357 34.7174 44.2219L40.488 35.481C40.7075 35.1486 40.4691 34.7055 40.0708 34.7055H36.6999C36.4237 34.7055 36.1998 34.4817 36.1999 34.2055L36.2002 28.2741C36.2002 27.7784 35.5565 27.5848 35.2831 27.9982L29.513 36.7239C29.2932 37.0563 29.5316 37.4997 29.9301 37.4997H33.3002C33.5763 37.4997 33.8002 37.7235 33.8002 37.9997Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 26.1994V8H8V40H24.7499C25.1781 41.0965 25.7771 42.1074 26.5143 43H7C5.89543 43 5 42.1046 5 41V7C5 5.89543 5.89543 5 7 5H41C42.1046 5 43 5.89543 43 7V28.4501C42.14 27.5392 41.1262 26.7751 40 26.1994Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14.5 14.5H33.5V17.5H14.5V14.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14.5 22.5H33.5V25.1014C32.8863 25.1851 32.2886 25.3194 31.7114 25.5H14.5V22.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.4716 30.5H14.5V33.5H24.2853C24.5336 32.4319 24.9374 31.4235 25.4716 30.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.8002 37.9997V43.9464C33.8002 44.4423 34.4442 44.6357 34.7174 44.2219L40.488 35.481C40.7075 35.1486 40.4691 34.7055 40.0708 34.7055H36.6999C36.4237 34.7055 36.1998 34.4817 36.1999 34.2055L36.2002 28.2741C36.2002 27.7784 35.5565 27.5848 35.2831 27.9982L29.513 36.7239C29.2932 37.0563 29.5316 37.4997 29.9301 37.4997H33.3002C33.5763 37.4997 33.8002 37.7235 33.8002 37.9997Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/target/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TargetProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Target = ({ fill = false, thick = false, size = 24 }: TargetProps) => {
+export const Target = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TargetProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" fill="currentColor"/>
-<path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" fill="currentColor"/>
-<path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" style={{ fill: `var(--${color})` }}/>
+<path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" fill="currentColor"/>
-<path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" fill="currentColor"/>
-<path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" style={{ fill: `var(--${color})` }}/>
+<path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M37.4121 10.2384L37.0186 2.5L30.6547 8.86396L30.3635 14.6736L24.9288 20.1084C24.6307 20.0375 24.3197 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28C26.2091 28 28 26.2091 28 24C28 23.6036 27.9423 23.2206 27.8349 22.8591L33.1922 17.5018L39.14 17.3492L45.5039 10.9853L37.4121 10.2384Z" fill="currentColor"/>
-<path d="M40 24C40 23.2622 39.9501 22.536 39.8534 21.8247L43.2217 18.4563C43.7285 20.2166 44 22.0766 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C26.0178 4 27.9658 4.29882 29.8022 4.85462L26.4677 8.18914C25.6634 8.06461 24.8392 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24Z" fill="currentColor"/>
-<path d="M24 12C25.1155 12 26.1955 12.1522 27.2202 12.437L23.6497 16.0075C19.3939 16.1909 16 19.6991 16 24C16 28.4183 19.5817 32 24 32C28.2242 32 31.6837 28.7261 31.9795 24.5772L35.6085 20.9482C35.864 21.9226 36 22.9454 36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.4121 10.2384L37.0186 2.5L30.6547 8.86396L30.3635 14.6736L24.9288 20.1084C24.6307 20.0375 24.3197 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28C26.2091 28 28 26.2091 28 24C28 23.6036 27.9423 23.2206 27.8349 22.8591L33.1922 17.5018L39.14 17.3492L45.5039 10.9853L37.4121 10.2384Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40 24C40 23.2622 39.9501 22.536 39.8534 21.8247L43.2217 18.4563C43.7285 20.2166 44 22.0766 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C26.0178 4 27.9658 4.29882 29.8022 4.85462L26.4677 8.18914C25.6634 8.06461 24.8392 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 12C25.1155 12 26.1955 12.1522 27.2202 12.437L23.6497 16.0075C19.3939 16.1909 16 19.6991 16 24C16 28.4183 19.5817 32 24 32C28.2242 32 31.6837 28.7261 31.9795 24.5772L35.6085 20.9482C35.864 21.9226 36 22.9454 36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" fill="currentColor"/>
-<path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" fill="currentColor"/>
-<path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.3134 3L36.667 11.1317L36.668 11.1318L44.7997 11.4854L38.4358 17.8493H32.0709L26.8524 23.0678C26.9482 23.3612 27 23.6746 27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C24.2106 21 24.4162 21.0217 24.6145 21.063L29.9494 15.7281V9.36396L36.3134 3Z" style={{ fill: `var(--${color})` }}/>
+<path d="M40.3499 19.3278C40.7733 20.8122 41 22.3796 41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C25.4306 7 26.8199 7.17671 28.1474 7.5095L30.5572 5.09969C28.503 4.38713 26.2967 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 21.5201 43.5486 19.1455 42.7236 16.9541L40.3499 19.3278Z" style={{ fill: `var(--${color})` }}/>
+<path d="M28.7011 12.9558C27.2574 12.3405 25.6684 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 22.2675 35.6329 20.6208 34.9721 19.1333L32.6386 21.4669C32.8738 22.2704 33 23.1204 33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C24.8122 15 25.5992 15.1076 26.3476 15.3092L28.7011 12.9558Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/teams/index.tsx

@@ -1,38 +1,39 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TeamsProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Teams = ({ fill = false, thick = false, size = 24 }: TeamsProps) => {
+export const Teams = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TeamsProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M39.5166 38.3428L30.5 43.5479V32.8896L39.5166 27.6836V38.3428Z" fill="currentColor"/>
-<path d="M28.5 32.8789V42.6729L21 38.3428V28.5645L28.5 32.8789Z" fill="currentColor"/>
-<path d="M19 27.4141V37.5332L10.8643 32.8369L10.7734 22.6816L19 27.4141Z" fill="currentColor"/>
-<path d="M37.5439 26.5146L29.5078 31.1533L22.21 26.9541L30.2578 22.3086L37.5439 26.5146Z" fill="currentColor"/>
-<path d="M29.2588 20.5762L21 25.3438V16.4639L29.2588 11.7842V20.5762Z" fill="currentColor"/>
-<path d="M19 16.1074V25.1064L10.7412 20.3545V11.4277L19 16.1074Z" fill="currentColor"/>
-<path d="M28.2373 10.0635L20.3135 14.5537L12.0723 9.88379L20 5.30859L28.2373 10.0635Z" fill="currentColor"/>
-<path d="M29.2588 10.6533V10.6934L29.2246 10.6338L29.2588 10.6533Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5166 38.3428L30.5 43.5479V32.8896L39.5166 27.6836V38.3428Z" style={{ fill: `var(--${color})` }}/>
+<path d="M28.5 32.8789V42.6729L21 38.3428V28.5645L28.5 32.8789Z" style={{ fill: `var(--${color})` }}/>
+<path d="M19 27.4141V37.5332L10.8643 32.8369L10.7734 22.6816L19 27.4141Z" style={{ fill: `var(--${color})` }}/>
+<path d="M37.5439 26.5146L29.5078 31.1533L22.21 26.9541L30.2578 22.3086L37.5439 26.5146Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.2588 20.5762L21 25.3438V16.4639L29.2588 11.7842V20.5762Z" style={{ fill: `var(--${color})` }}/>
+<path d="M19 16.1074V25.1064L10.7412 20.3545V11.4277L19 16.1074Z" style={{ fill: `var(--${color})` }}/>
+<path d="M28.2373 10.0635L20.3135 14.5537L12.0723 9.88379L20 5.30859L28.2373 10.0635Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.2588 10.6533V10.6934L29.2246 10.6338L29.2588 10.6533Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31.2588 9.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 9.5L20 3L31.2588 9.5ZM31 33.1914V41.8184L38.0166 37.7676V29.2158L31 33.1914ZM21.5 37.7676L28 41.5205V33.1807L21.5 29.498V37.7676ZM11.8594 32.2588L18.4531 36.0664L18.3818 28.0654L11.7881 24.2588L11.8594 32.2588ZM23.4062 27.1299L29.5098 30.5879L35.8633 26.9883L29.7578 23.4629L23.4062 27.1299ZM21.5 16.7568V24.6689L28.2588 20.7676V12.9268L21.5 16.7568ZM11.7412 20.7314L18.5 24.6328V16.3984L11.7412 12.5693V20.7314ZM13.585 10.166L20.3154 13.9795L26.7266 10.3467L20 6.46289L13.585 10.166Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31.2588 9.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 9.5L20 3L31.2588 9.5ZM31 33.1914V41.8184L38.0166 37.7676V29.2158L31 33.1914ZM21.5 37.7676L28 41.5205V33.1807L21.5 29.498V37.7676ZM11.8594 32.2588L18.4531 36.0664L18.3818 28.0654L11.7881 24.2588L11.8594 32.2588ZM23.4062 27.1299L29.5098 30.5879L35.8633 26.9883L29.7578 23.4629L23.4062 27.1299ZM21.5 16.7568V24.6689L28.2588 20.7676V12.9268L21.5 16.7568ZM11.7412 20.7314L18.5 24.6328V16.3984L11.7412 12.5693V20.7314ZM13.585 10.166L20.3154 13.9795L26.7266 10.3467L20 6.46289L13.585 10.166Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31.2588 10.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 10.5L20.001 4L31.2588 10.5ZM31.5 33.4814V40.375L37.0166 37.1904V30.3555L31.5 33.4814ZM22.5 37.1904L27.5 40.0771V33.4707L22.5 30.6377V37.1904ZM12.8545 31.6787L17.4375 34.3252L17.3867 28.6094L12.8037 25.9629L12.8545 31.6787ZM24.9189 27.4111L29.5098 30.0127L34.3506 27.2695L29.7578 24.6182L24.9189 27.4111ZM12.7422 21.1904L18 24.2256V18.2588L12.7422 15.2793V21.1904ZM22 18.3311V24.2256L27.2588 21.1904V15.3516L22 18.3311ZM14.5996 11.7354L20.0635 14.8311L25.4629 11.7715L20 8.61816L14.5996 11.7354Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31.2588 10.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 10.5L20.001 4L31.2588 10.5ZM31.5 33.4814V40.375L37.0166 37.1904V30.3555L31.5 33.4814ZM22.5 37.1904L27.5 40.0771V33.4707L22.5 30.6377V37.1904ZM12.8545 31.6787L17.4375 34.3252L17.3867 28.6094L12.8037 25.9629L12.8545 31.6787ZM24.9189 27.4111L29.5098 30.0127L34.3506 27.2695L29.7578 24.6182L24.9189 27.4111ZM12.7422 21.1904L18 24.2256V18.2588L12.7422 15.2793V21.1904ZM22 18.3311V24.2256L27.2588 21.1904V15.3516L22 18.3311ZM14.5996 11.7354L20.0635 14.8311L25.4629 11.7715L20 8.61816L14.5996 11.7354Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31.2588 9.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 9.5L20 3L31.2588 9.5ZM31 33.1914V41.8184L38.0166 37.7676V29.2158L31 33.1914ZM21.5 37.7676L28 41.5205V33.1807L21.5 29.498V37.7676ZM11.8594 32.2588L18.4531 36.0664L18.3818 28.0654L11.7881 24.2588L11.8594 32.2588ZM23.4062 27.1299L29.5098 30.5879L35.8633 26.9883L29.7578 23.4629L23.4062 27.1299ZM21.5 16.7568V24.6689L28.2588 20.7676V12.9268L21.5 16.7568ZM11.7412 20.7314L18.5 24.6328V16.3984L11.7412 12.5693V20.7314ZM13.585 10.166L20.3154 13.9795L26.7266 10.3467L20 6.46289L13.585 10.166Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31.2588 9.5V20.8652L41.0166 26.5V39.5L29.7588 46L8.875 34L8.74121 9.5L20 3L31.2588 9.5ZM31 33.1914V41.8184L38.0166 37.7676V29.2158L31 33.1914ZM21.5 37.7676L28 41.5205V33.1807L21.5 29.498V37.7676ZM11.8594 32.2588L18.4531 36.0664L18.3818 28.0654L11.7881 24.2588L11.8594 32.2588ZM23.4062 27.1299L29.5098 30.5879L35.8633 26.9883L29.7578 23.4629L23.4062 27.1299ZM21.5 16.7568V24.6689L28.2588 20.7676V12.9268L21.5 16.7568ZM11.7412 20.7314L18.5 24.6328V16.3984L11.7412 12.5693V20.7314ZM13.585 10.166L20.3154 13.9795L26.7266 10.3467L20 6.46289L13.585 10.166Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/text-select/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TextSelectProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const TextSelect = ({ fill = false, thick = false, size = 24 }: TextSelectProps) => {
+export const TextSelect = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TextSelectProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.5 18.5H30V15.5H18V18.5H22.5V31H25.5V18.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9.5 0C7.84315 0 6.5 1.34315 6.5 3C6.5 4.11042 7.1033 5.07994 8 5.59865L8 37C8 38.1046 8.89543 39 10 39H37V40.4013C36.1033 40.9201 35.5 41.8896 35.5 43C35.5 44.6569 36.8431 46 38.5 46C40.1569 46 41.5 44.6569 41.5 43C41.5 41.8896 40.8967 40.9201 40 40.4013V9C40 7.89543 39.1046 7 38 7H11V5.59865C11.8967 5.07994 12.5 4.11042 12.5 3C12.5 1.34315 11.1569 0 9.5 0ZM11 10V36H37V10H11Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.5 18.5H30V15.5H18V18.5H22.5V31H25.5V18.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.5 0C7.84315 0 6.5 1.34315 6.5 3C6.5 4.11042 7.1033 5.07994 8 5.59865L8 37C8 38.1046 8.89543 39 10 39H37V40.4013C36.1033 40.9201 35.5 41.8896 35.5 43C35.5 44.6569 36.8431 46 38.5 46C40.1569 46 41.5 44.6569 41.5 43C41.5 41.8896 40.8967 40.9201 40 40.4013V9C40 7.89543 39.1046 7 38 7H11V5.59865C11.8967 5.07994 12.5 4.11042 12.5 3C12.5 1.34315 11.1569 0 9.5 0ZM11 10V36H37V10H11Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.5 18.5H30V15.5H18V18.5H22.5V31H25.5V18.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9.5 0C7.84315 0 6.5 1.34315 6.5 3C6.5 4.11042 7.1033 5.07994 8 5.59865L8 37C8 38.1046 8.89543 39 10 39H37V40.4013C36.1033 40.9201 35.5 41.8896 35.5 43C35.5 44.6569 36.8431 46 38.5 46C40.1569 46 41.5 44.6569 41.5 43C41.5 41.8896 40.8967 40.9201 40 40.4013V9C40 7.89543 39.1046 7 38 7H11V5.59865C11.8967 5.07994 12.5 4.11042 12.5 3C12.5 1.34315 11.1569 0 9.5 0ZM11 10V36H37V10H11Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.5 18.5H30V15.5H18V18.5H22.5V31H25.5V18.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.5 0C7.84315 0 6.5 1.34315 6.5 3C6.5 4.11042 7.1033 5.07994 8 5.59865L8 37C8 38.1046 8.89543 39 10 39H37V40.4013C36.1033 40.9201 35.5 41.8896 35.5 43C35.5 44.6569 36.8431 46 38.5 46C40.1569 46 41.5 44.6569 41.5 43C41.5 41.8896 40.8967 40.9201 40 40.4013V9C40 7.89543 39.1046 7 38 7H11V5.59865C11.8967 5.07994 12.5 4.11042 12.5 3C12.5 1.34315 11.1569 0 9.5 0ZM11 10V36H37V10H11Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26 19H30V15H18V19H22V31H26V19Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M10 0C8.34315 -1.78814e-07 7 1.34315 7 3C7 3.8885 7.38625 4.68679 8 5.23611L8 37C8 38.1046 8.89543 39 10 39H36V40.7639C35.3862 41.3132 35 42.1115 35 43C35 44.6569 36.3431 46 38 46C39.6569 46 41 44.6569 41 43C41 42.1115 40.6138 41.3132 40 40.7639V9C40 7.89543 39.1046 7 38 7H12V5.23611C12.6137 4.68679 13 3.8885 13 3C13 1.34315 11.6569 1.19209e-07 10 0ZM12 11V35H36V11H12Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 19H30V15H18V19H22V31H26V19Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M10 0C8.34315 -1.78814e-07 7 1.34315 7 3C7 3.8885 7.38625 4.68679 8 5.23611L8 37C8 38.1046 8.89543 39 10 39H36V40.7639C35.3862 41.3132 35 42.1115 35 43C35 44.6569 36.3431 46 38 46C39.6569 46 41 44.6569 41 43C41 42.1115 40.6138 41.3132 40 40.7639V9C40 7.89543 39.1046 7 38 7H12V5.23611C12.6137 4.68679 13 3.8885 13 3C13 1.34315 11.6569 1.19209e-07 10 0ZM12 11V35H36V11H12Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.5 18.5H30V15.5H18V18.5H22.5V31H25.5V18.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9.5 0C7.84315 0 6.5 1.34315 6.5 3C6.5 4.11042 7.1033 5.07994 8 5.59865L8 37C8 38.1046 8.89543 39 10 39H37V40.4013C36.1033 40.9201 35.5 41.8896 35.5 43C35.5 44.6569 36.8431 46 38.5 46C40.1569 46 41.5 44.6569 41.5 43C41.5 41.8896 40.8967 40.9201 40 40.4013V9C40 7.89543 39.1046 7 38 7H11V5.59865C11.8967 5.07994 12.5 4.11042 12.5 3C12.5 1.34315 11.1569 0 9.5 0ZM11 10V36H37V10H11Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.5 18.5H30V15.5H18V18.5H22.5V31H25.5V18.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.5 0C7.84315 0 6.5 1.34315 6.5 3C6.5 4.11042 7.1033 5.07994 8 5.59865L8 37C8 38.1046 8.89543 39 10 39H37V40.4013C36.1033 40.9201 35.5 41.8896 35.5 43C35.5 44.6569 36.8431 46 38.5 46C40.1569 46 41.5 44.6569 41.5 43C41.5 41.8896 40.8967 40.9201 40 40.4013V9C40 7.89543 39.1046 7 38 7H11V5.59865C11.8967 5.07994 12.5 4.11042 12.5 3C12.5 1.34315 11.1569 0 9.5 0ZM11 10V36H37V10H11Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/thumb-down/index.tsx

@@ -1,33 +1,34 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ThumbDownProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ThumbDown = ({ fill = false, thick = false, size = 24 }: ThumbDownProps) => {
+export const ThumbDown = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ThumbDownProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M32 4L9.19423 4C8.21655 4 7.38217 4.70683 7.22144 5.6712L3.77624 26.3424C3.36988 28.7805 5.25006 31 7.72181 31H18.5L17.1269 39.9247C16.7973 42.0675 18.4552 44 20.6233 44C21.5009 44 22.3385 43.6333 22.9338 42.9884L32 33.1666L32 4Z" fill="currentColor"/>
-<path d="M36 31L42 31C43.1045 31 44 30.1046 44 29L44 6.00001C44 4.89544 43.1045 4.00001 42 4.00001L36 4V31Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.9999 4L9.19411 4C8.21643 4 7.38205 4.70683 7.22132 5.6712L3.77612 26.3424C3.36976 28.7805 5.24993 31 7.72169 31H18.4999L17.1268 39.9247C16.7972 42.0675 18.4551 44 20.6231 44C21.5007 44 22.3384 43.6333 22.9336 42.9884L31.9999 33.1666L31.9999 4Z" style={{ fill: `var(--${color})` }}/>
+<path d="M35.9999 31L41.9999 31C43.1044 31 43.9999 30.1046 43.9999 29L43.9999 6.00001C43.9999 4.89544 43.1044 4.00001 41.9999 4.00001L35.9999 4V31Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M32.5 4L9.19423 4C8.21655 4 7.38217 4.70683 7.22144 5.6712L3.77624 26.3424C3.36988 28.7805 5.25006 31 7.72181 31H18.5L17.1269 39.9247C16.7973 42.0675 18.4552 44 20.6233 44C21.5009 44 22.3385 43.6333 22.9338 42.9884L32.5 32.625L32.5 4Z" fill="currentColor"/>
-<path d="M35.5 31L42 31C43.1045 31 44 30.1046 44 29L44 6.00001C44 4.89544 43.1045 4.00001 42 4.00001L35.5 4L35.5 31Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.4999 4L9.19411 4C8.21643 4 7.38205 4.70683 7.22132 5.6712L3.77612 26.3424C3.36976 28.7805 5.24993 31 7.72169 31H18.4999L17.1268 39.9247C16.7972 42.0675 18.4551 44 20.6231 44C21.5007 44 22.3384 43.6333 22.9336 42.9884L32.4999 32.625L32.4999 4Z" style={{ fill: `var(--${color})` }}/>
+<path d="M35.4999 31L41.9999 31C43.1044 31 43.9999 30.1046 43.9999 29L43.9999 6.00001C43.9999 4.89544 43.1044 4.00001 41.9999 4.00001L35.4999 4L35.4999 31Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M14.469 37.7018L15.5 31H7.72185C5.25009 31 3.36991 28.7805 3.77627 26.3424L7.22147 5.6712C7.3822 4.70683 8.21658 4 9.19426 4L42 4.00001C43.1046 4.00001 44 4.89544 44 6.00001L44 29C44 30.1046 43.1046 31 42 31L34 31L23.4431 42.4366C22.5232 43.4332 21.2286 44 19.8724 44C16.5217 44 13.9595 41.0134 14.469 37.7018ZM30 29.4361L30 8.00001L10.8885 8L7.72185 27H20.1624L18.4225 38.31C18.2857 39.1986 18.9733 40 19.8724 40C20.1122 40 20.3412 39.8998 20.5039 39.7235L30 29.4361ZM34 27L40 27L40 8.00001L34 8.00001L34 27Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M14.4691 37.7018L15.5001 31H7.72194C5.25018 31 3.37001 28.7805 3.77636 26.3424L7.22156 5.6712C7.38229 4.70683 8.21667 4 9.19435 4L42.0001 4.00001C43.1047 4.00001 44.0001 4.89544 44.0001 6.00001L44.0001 29C44.0001 30.1046 43.1047 31 42.0001 31L34.0001 31L23.4432 42.4366C22.5233 43.4332 21.2287 44 19.8724 44C16.5218 44 13.9596 41.0134 14.4691 37.7018ZM30.0001 29.4361L30.0001 8.00001L10.8886 8L7.72194 27H20.1625L18.4225 38.31C18.2858 39.1986 18.9734 40 19.8724 40C20.1123 40 20.3413 39.8998 20.504 39.7235L30.0001 29.4361ZM34.0001 27L40.0001 27L40.0001 8.00001L34.0001 8.00001L34.0001 27Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M14.469 37.7018L15.5 31H7.72185C5.25009 31 3.36991 28.7805 3.77627 26.3424L7.22147 5.6712C7.3822 4.70683 8.21658 4 9.19426 4L42 4.00001C43.1046 4.00001 44 4.89544 44 6.00001L44 29C44 30.1046 43.1046 31 42 31L34 31L23.4431 42.4366C22.5232 43.4332 21.2286 44 19.8724 44C16.5217 44 13.9595 41.0134 14.469 37.7018ZM31 29.8271L31 7.00001L10.0414 7L6.73545 26.8356C6.63386 27.4451 7.10391 28 7.72185 28H18.9968L17.4341 38.1579C17.2042 39.6523 18.3604 41 19.8724 41C20.3913 41 20.8867 40.7831 21.2387 40.4018L31 29.8271ZM34 28L41 28L41 7.00001L34 7.00001L34 28Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M14.4691 37.7018L15.5001 31H7.72194C5.25018 31 3.37001 28.7805 3.77636 26.3424L7.22156 5.6712C7.38229 4.70683 8.21667 4 9.19435 4L42.0001 4.00001C43.1047 4.00001 44.0001 4.89544 44.0001 6.00001L44.0001 29C44.0001 30.1046 43.1047 31 42.0001 31L34.0001 31L23.4432 42.4366C22.5233 43.4332 21.2287 44 19.8724 44C16.5218 44 13.9596 41.0134 14.4691 37.7018ZM31.0001 29.8271L31.0001 7.00001L10.0415 7L6.73554 26.8356C6.63396 27.4451 7.104 28 7.72194 28H18.9969L17.4342 38.1579C17.2043 39.6523 18.3605 41 19.8724 41C20.3914 41 20.8868 40.7831 21.2388 40.4018L31.0001 29.8271ZM34.0001 28L41.0001 28L41.0001 7.00001L34.0001 7.00001L34.0001 28Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/thumb-up/index.tsx

@@ -1,33 +1,34 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ThumbUpProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ThumbUp = ({ fill = false, thick = false, size = 24 }: ThumbUpProps) => {
+export const ThumbUp = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ThumbUpProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M27.3767 4C29.5448 4 31.2027 5.9325 30.873 8.07534L29.5 17H40.2782C42.7499 17 44.6301 19.2195 44.2237 21.6576L40.7785 42.3288C40.6178 43.2932 39.7834 44 38.8057 44L16 44L16 14.8333L25.0662 5.01161C25.6615 4.36675 26.4991 4 27.3767 4Z" fill="currentColor"/>
-<path d="M12 17L12 44H6C4.89543 44 4 43.1046 4 42V19C4 17.8954 4.89543 17 6 17H12Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.3767 4C29.5448 4 31.2027 5.9325 30.873 8.07534L29.5 17H40.2782C42.7499 17 44.6301 19.2195 44.2237 21.6576L40.7785 42.3288C40.6178 43.2932 39.7834 44 38.8057 44L16 44L16 14.8333L25.0662 5.01161C25.6615 4.36675 26.4991 4 27.3767 4Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12 17L12 44H6C4.89543 44 4 43.1046 4 42V19C4 17.8954 4.89543 17 6 17H12Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.873 8.07534C31.2027 5.9325 29.5448 4 27.3767 4C26.4991 4 25.6615 4.36675 25.0662 5.01161L15.5 15.375L15.5 44L38.8057 44C39.7834 44 40.6178 43.2932 40.7785 42.3288L44.2237 21.6576C44.6301 19.2195 42.7499 17 40.2782 17H29.5L30.873 8.07534Z" fill="currentColor"/>
-<path d="M12.5 44L12.5 17H6C4.89543 17 4 17.8954 4 19V42C4 43.1046 4.89543 44 6 44H12.5Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.873 8.07534C31.2027 5.9325 29.5448 4 27.3767 4C26.4991 4 25.6615 4.36675 25.0662 5.01161L15.5 15.375L15.5 44L38.8057 44C39.7834 44 40.6178 43.2932 40.7785 42.3288L44.2237 21.6576C44.6301 19.2195 42.7499 17 40.2782 17H29.5L30.873 8.07534Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12.5 44L12.5 17H6C4.89543 17 4 17.8954 4 19V42C4 43.1046 4.89543 44 6 44H12.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M33.531 10.2983L32.5 17H40.2782C42.7499 17 44.6301 19.2195 44.2237 21.6576L40.7785 42.3288C40.6178 43.2932 39.7834 44 38.8057 44L6 44C4.89543 44 4 43.1046 4 42V19C4 17.8954 4.89543 17 6 17H14L24.5569 5.5634C25.4768 4.5668 26.7714 4 28.1276 4C31.4783 4 34.0405 6.98659 33.531 10.2983ZM18 18.5639L27.4961 8.27652C27.6588 8.10025 27.8878 8 28.1276 8C29.0267 8 29.7143 8.8014 29.5776 9.69002L27.8376 21H40.2782L37.1115 40L18 40V18.5639ZM14 21H8V40H14V21Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M33.531 10.2983L32.5 17H40.2782C42.7499 17 44.6301 19.2195 44.2237 21.6576L40.7785 42.3288C40.6178 43.2932 39.7834 44 38.8057 44L6 44C4.89543 44 4 43.1046 4 42V19C4 17.8954 4.89543 17 6 17H14L24.5569 5.5634C25.4768 4.5668 26.7714 4 28.1276 4C31.4783 4 34.0405 6.98659 33.531 10.2983ZM18 18.5639L27.4961 8.27652C27.6588 8.10025 27.8878 8 28.1276 8C29.0267 8 29.7143 8.8014 29.5776 9.69002L27.8376 21H40.2782L37.1115 40L18 40V18.5639ZM14 21H8V40H14V21Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M33.531 10.2983L32.5 17H40.2782C42.7499 17 44.6301 19.2195 44.2237 21.6576L40.7785 42.3288C40.6178 43.2932 39.7834 44 38.8057 44L6 44C4.89543 44 4 43.1046 4 42V19C4 17.8954 4.89543 17 6 17H14L24.5569 5.5634C25.4768 4.5668 26.7714 4 28.1276 4C31.4783 4 34.0405 6.98659 33.531 10.2983ZM17 18.173L26.7613 7.59824C27.1133 7.21689 27.6087 7 28.1276 7C29.6396 7 30.7958 8.3477 30.5659 9.84208L29.0032 20H40.2782C40.8961 20 41.3661 20.5549 41.2646 21.1644L37.9586 41L17 41V18.173ZM14 20L7 20V41H14V20Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M33.531 10.2983L32.5 17H40.2782C42.7499 17 44.6301 19.2195 44.2237 21.6576L40.7785 42.3288C40.6178 43.2932 39.7834 44 38.8057 44L6 44C4.89543 44 4 43.1046 4 42V19C4 17.8954 4.89543 17 6 17H14L24.5569 5.5634C25.4768 4.5668 26.7714 4 28.1276 4C31.4783 4 34.0405 6.98659 33.531 10.2983ZM17 18.173L26.7613 7.59824C27.1133 7.21689 27.6087 7 28.1276 7C29.6396 7 30.7958 8.3477 30.5659 9.84208L29.0032 20H40.2782C40.8961 20 41.3661 20.5549 41.2646 21.1644L37.9586 41L17 41V18.173ZM14 20L7 20V41H14V20Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };