@liner-fe/icon 0.0.4 → 0.0.5

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="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" style={{ fill: `var(--${color})` }}/>
+<path d="M36 31L42 31C43.1045 31 44 30.1046 44 29L44 6.00001C44 4.89544 43.1045 4.00001 42 4.00001L36 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.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" style={{ fill: `var(--${color})` }}/>
+<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" 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.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" 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.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" 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>
 ;
 };

package/assets/timer/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TimerProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Timer = ({ fill = false, thick = false, size = 24 }: TimerProps) => {
+export const Timer = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TimerProps) => {
   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="M18 5.5H30V2.5H18V5.5Z" fill="currentColor"/>
-<path d="M25.5 26V15H22.5V26H25.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 5.5H30V2.5H18V5.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 26V15H22.5V26H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" 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="M18 5.5H30V2.5H18V5.5Z" fill="currentColor"/>
-<path d="M25.5 26V15H22.5V26H25.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 5.5H30V2.5H18V5.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 26V15H22.5V26H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" 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="M18 6H30V2H18V6Z" fill="currentColor"/>
-<path d="M26 26V15H22V26H26Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.2501 8 32.1561 9.47298 35.2355 11.9363L37.5858 9.58594L40.4142 12.4144L38.0639 14.7647C40.5271 17.8441 42 21.75 42 26ZM38 26C38 33.732 31.732 40 24 40C16.268 40 10 33.732 10 26C10 18.268 16.268 12 24 12C31.732 12 38 18.268 38 26Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6H30V2H18V6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 26V15H22V26H26Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.2501 8 32.1561 9.47298 35.2355 11.9363L37.5858 9.58594L40.4142 12.4144L38.0639 14.7647C40.5271 17.8441 42 21.75 42 26ZM38 26C38 33.732 31.732 40 24 40C16.268 40 10 33.732 10 26C10 18.268 16.268 12 24 12C31.732 12 38 18.268 38 26Z" 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="M18 5.5H30V2.5H18V5.5Z" fill="currentColor"/>
-<path d="M25.5 26V15H22.5V26H25.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 5.5H30V2.5H18V5.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 26V15H22.5V26H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/translate/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TranslateProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Translate = ({ fill = false, thick = false, size = 24 }: TranslateProps) => {
+export const Translate = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TranslateProps) => {
   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="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" 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="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" 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="M21 4V8H34V12H28.4209C28.1211 12.7497 27.668 13.7535 27.0024 14.9637C25.9052 16.9586 24.2342 19.5075 21.7277 22.3983C21.7895 22.4606 21.8516 22.5231 21.9142 22.5857C23.2558 23.9272 24.7334 25.1681 26.1843 26.2687L24.723 30.1654C22.8651 28.8154 20.881 27.2093 19.0858 25.4141L19 25.3281L18.9142 25.4141C16.1178 28.2105 12.863 30.5481 10.341 32.1734C9.0733 32.9903 7.97565 33.6369 7.19168 34.081C6.79942 34.3032 6.4849 34.4751 6.26598 34.5928C6.15649 34.6516 6.07085 34.6969 6.01128 34.7282L5.94172 34.7645L5.92211 34.7746L5.91421 34.7787C5.91421 34.7787 5.91289 34.7794 4.99998 32.9999C4.08708 31.2204 4.08667 31.2206 4.08667 31.2206L4.08832 31.2197L4.09981 31.2138L4.15271 31.1862C4.20101 31.1608 4.27497 31.1217 4.37238 31.0694C4.56725 30.9646 4.85573 30.807 5.22026 30.6005C5.94989 30.1873 6.98105 29.58 8.17422 28.8111C10.574 27.2646 13.5692 25.1023 16.0858 22.5857C16.1484 22.5231 16.2105 22.4606 16.2723 22.3983C13.781 19.525 12.115 16.9894 11.0175 15H15.6783C16.5212 16.3047 17.6077 17.7994 19 19.4352C21.1546 16.9038 22.5768 14.7101 23.4976 13.036C23.7017 12.6648 23.8814 12.3188 24.0391 12H4V8H17V4H21Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.886 39L27.011 44H22.739L31.6273 20.2979H35.3726L44.2609 44H39.9889L38.1139 39H28.886ZM30.386 35L33.5 26.6961L36.6139 35H30.386Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 4V8H34V12H28.4209C28.1211 12.7497 27.668 13.7535 27.0024 14.9637C25.9052 16.9586 24.2342 19.5075 21.7277 22.3983C21.7895 22.4606 21.8516 22.5231 21.9142 22.5857C23.2558 23.9272 24.7334 25.1681 26.1843 26.2687L24.723 30.1654C22.8651 28.8154 20.881 27.2093 19.0858 25.4141L19 25.3281L18.9142 25.4141C16.1178 28.2105 12.863 30.5481 10.341 32.1734C9.0733 32.9903 7.97565 33.6369 7.19168 34.081C6.79942 34.3032 6.4849 34.4751 6.26598 34.5928C6.15649 34.6516 6.07085 34.6969 6.01128 34.7282L5.94172 34.7645L5.92211 34.7746L5.91421 34.7787C5.91421 34.7787 5.91289 34.7794 4.99998 32.9999C4.08708 31.2204 4.08667 31.2206 4.08667 31.2206L4.08832 31.2197L4.09981 31.2138L4.15271 31.1862C4.20101 31.1608 4.27497 31.1217 4.37238 31.0694C4.56725 30.9646 4.85573 30.807 5.22026 30.6005C5.94989 30.1873 6.98105 29.58 8.17422 28.8111C10.574 27.2646 13.5692 25.1023 16.0858 22.5857C16.1484 22.5231 16.2105 22.4606 16.2723 22.3983C13.781 19.525 12.115 16.9894 11.0175 15H15.6783C16.5212 16.3047 17.6077 17.7994 19 19.4352C21.1546 16.9038 22.5768 14.7101 23.4976 13.036C23.7017 12.6648 23.8814 12.3188 24.0391 12H4V8H17V4H21Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.886 39L27.011 44H22.739L31.6273 20.2979H35.3726L44.2609 44H39.9889L38.1139 39H28.886ZM30.386 35L33.5 26.6961L36.6139 35H30.386Z" 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="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/trash/index.tsx

@@ -1,37 +1,38 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TrashProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Trash = ({ fill = false, thick = false, size = 24 }: TrashProps) => {
+export const Trash = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TrashProps) => {
   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="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" fill="currentColor"/>
-<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" 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 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM21 36.5L21 18.5H18V36.5H21ZM30 36.5V18.5H27V36.5H30Z" 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 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM21 36.5L21 18.5H18V36.5H21ZM30 36.5V18.5H27V36.5H30Z" 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="M22 18V37H18L18 18H22Z" fill="currentColor"/>
-<path d="M30 37V18H26V37H30Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM34.6199 15H13.3801L15.6529 40H32.3471L34.6199 15Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18V37H18L18 18H22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M30 37V18H26V37H30Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM34.6199 15H13.3801L15.6529 40H32.3471L34.6199 15Z" 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="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" fill="currentColor"/>
-<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/tune/index.tsx

@@ -1,51 +1,52 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TuneProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Tune = ({ fill = false, thick = false, size = 24 }: TuneProps) => {
+export const Tune = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TuneProps) => {
   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.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" fill="currentColor"/>
-<path d="M7 9.5H27V12.5H7V9.5Z" fill="currentColor"/>
-<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" fill="currentColor"/>
-<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" fill="currentColor"/>
-<path d="M41 25.5V22.5H22V25.5H41Z" fill="currentColor"/>
-<path d="M18 35.5H7V38.5H18V35.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="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9.5H27V12.5H7V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 25.5V22.5H22V25.5H41Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35.5H7V38.5H18V35.5Z" 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="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" fill="currentColor"/>
-<path d="M7 9.5H27V12.5H7V9.5Z" fill="currentColor"/>
-<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" fill="currentColor"/>
-<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" fill="currentColor"/>
-<path d="M41 25.5V22.5H22V25.5H41Z" fill="currentColor"/>
-<path d="M18 35.5H7V38.5H18V35.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="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9.5H27V12.5H7V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 25.5V22.5H22V25.5H41Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35.5H7V38.5H18V35.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 d="M35 9V5H31V17H35V13H41V9H35Z" fill="currentColor"/>
-<path d="M7 9H27V13H7V9Z" fill="currentColor"/>
-<path d="M18 18L18 30H14V26H7V22H14V18H18Z" fill="currentColor"/>
-<path d="M26 43V39H41V35H26V31H22L22 43H26Z" fill="currentColor"/>
-<path d="M41 22H22V26H41V22Z" fill="currentColor"/>
-<path d="M18 35H7V39H18V35Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35 9V5H31V17H35V13H41V9H35Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9H27V13H7V9Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 18L18 30H14V26H7V22H14V18H18Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 43V39H41V35H26V31H22L22 43H26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 22H22V26H41V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35H7V39H18V35Z" 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="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" fill="currentColor"/>
-<path d="M7 9.5H27V12.5H7V9.5Z" fill="currentColor"/>
-<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" fill="currentColor"/>
-<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" fill="currentColor"/>
-<path d="M41 25.5V22.5H22V25.5H41Z" fill="currentColor"/>
-<path d="M18 35.5H7V38.5H18V35.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="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9.5H27V12.5H7V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 25.5V22.5H22V25.5H41Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35.5H7V38.5H18V35.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/twitter/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TwitterProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Twitter = ({ fill = false, thick = false, size = 24 }: TwitterProps) => {
+export const Twitter = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TwitterProps) => {
   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="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" 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="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" 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="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" 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="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };