@liner-fe/icon 0.0.4 → 0.0.5

package/assets/email/index.tsx

@@ -1,33 +1,34 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface EmailProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Email = ({ fill = false, thick = false, size = 24 }: EmailProps) => {
+export const Email = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: EmailProps) => {
   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="M4.83894 9.37133L24 23.514L43.161 9.3713C42.8337 9.13754 42.4329 9 42 9H6C5.56708 9 5.16629 9.13755 4.83894 9.37133Z" fill="currentColor"/>
-<path d="M4 13.7237V37C4 38.1046 4.89543 39 6 39H42C43.1046 39 44 38.1046 44 37V13.7236L24 28.4856L4 13.7237Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.83894 9.37133L24 23.514L43.161 9.3713C42.8337 9.13754 42.4329 9 42 9H6C5.56708 9 5.16629 9.13755 4.83894 9.37133Z" style={{ fill: `var(--${color})` }}/>
+<path d="M4 13.7237V37C4 38.1046 4.89543 39 6 39H42C43.1046 39 44 38.1046 44 37V13.7236L24 28.4856L4 13.7237Z" 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="M4.46554 9.71718L24 24.1355L43.5345 9.71721C43.1676 9.27882 42.6164 9 42 9H6C5.38365 9 4.83242 9.2788 4.46554 9.71718Z" fill="currentColor"/>
-<path d="M44 13.1023L24 27.8642L4 13.1022V37C4 38.1046 4.89543 39 6 39H42C43.1046 39 44 38.1046 44 37V13.1023Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.46554 9.71718L24 24.1355L43.5345 9.71721C43.1676 9.27882 42.6164 9 42 9H6C5.38365 9 4.83242 9.2788 4.46554 9.71718Z" style={{ fill: `var(--${color})` }}/>
+<path d="M44 13.1023L24 27.8642L4 13.1022V37C4 38.1046 4.89543 39 6 39H42C43.1046 39 44 38.1046 44 37V13.1023Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V37C44 38.1046 43.1046 39 42 39H6C4.89543 39 4 38.1046 4 37V11ZM8 16.9118V35H40V16.9117L24 28.4673L8 16.9118ZM38.5844 13H9.41553L24 23.5332L38.5844 13Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V37C44 38.1046 43.1046 39 42 39H6C4.89543 39 4 38.1046 4 37V11ZM8 16.9118V35H40V16.9117L24 28.4673L8 16.9118ZM38.5844 13H9.41553L24 23.5332L38.5844 13Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V37C44 38.1046 43.1046 39 42 39H6C4.89543 39 4 38.1046 4 37V11ZM7 15.5728V36H41V15.5727L23.9999 27.8505L7 15.5728ZM40.8229 12H7.177L23.9999 24.1499L40.8229 12Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V37C44 38.1046 43.1046 39 42 39H6C4.89543 39 4 38.1046 4 37V11ZM7 15.5728V36H41V15.5727L23.9999 27.8505L7 15.5728ZM40.8229 12H7.177L23.9999 24.1499L40.8229 12Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/end/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface EndProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const End = ({ fill = false, thick = false, size = 24 }: EndProps) => {
+export const End = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: EndProps) => {
   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="M43.043 7.99935L43.043 40L40.043 40L40.043 7.99935L43.043 7.99935Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9.97873 25.5L20.418 35.9392L18.2966 38.0605L6.52512 26.289C5.15828 24.9222 5.15828 22.7061 6.52512 21.3393L18.2966 9.56776L20.418 11.6891L9.60704 22.5L34.543 22.5L34.543 25.5L9.97873 25.5ZM8.54303 23.6109L8.54303 24.0174C8.48564 23.8884 8.48564 23.74 8.54303 23.6109Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.043 7.99935L43.043 40L40.043 40L40.043 7.99935L43.043 7.99935Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.97873 25.5L20.418 35.9392L18.2966 38.0605L6.52512 26.289C5.15828 24.9222 5.15828 22.7061 6.52512 21.3393L18.2966 9.56776L20.418 11.6891L9.60704 22.5L34.543 22.5L34.543 25.5L9.97873 25.5ZM8.54303 23.6109L8.54303 24.0174C8.48564 23.8884 8.48564 23.74 8.54303 23.6109Z" 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="M43.043 7.99935L43.043 40L40.043 40L40.043 7.99935L43.043 7.99935Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9.97873 25.5L20.418 35.9392L18.2966 38.0605L6.52512 26.289C5.15828 24.9222 5.15828 22.7061 6.52512 21.3393L18.2966 9.56776L20.418 11.6891L9.60704 22.5L34.543 22.5L34.543 25.5L9.97873 25.5ZM8.54303 23.6109L8.54303 24.0174C8.48564 23.8884 8.48564 23.74 8.54303 23.6109Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.043 7.99935L43.043 40L40.043 40L40.043 7.99935L43.043 7.99935Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.97873 25.5L20.418 35.9392L18.2966 38.0605L6.52512 26.289C5.15828 24.9222 5.15828 22.7061 6.52512 21.3393L18.2966 9.56776L20.418 11.6891L9.60704 22.5L34.543 22.5L34.543 25.5L9.97873 25.5ZM8.54303 23.6109L8.54303 24.0174C8.48564 23.8884 8.48564 23.74 8.54303 23.6109Z" 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="M43.543 7.99935L43.543 40L39.543 40L39.543 7.99935L43.543 7.99935Z" fill="currentColor"/>
-<path d="M10.8143 22L20.7715 12.0428L17.9431 9.21435L6.17157 20.9859C4.60947 22.548 4.60946 25.0806 6.17156 26.6427L17.9431 38.4142L20.7715 35.5858L11.1857 26L34.543 26L34.543 22L10.8143 22Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.543 7.99935L43.543 40L39.543 40L39.543 7.99935L43.543 7.99935Z" style={{ fill: `var(--${color})` }}/>
+<path d="M10.8143 22L20.7715 12.0428L17.9431 9.21435L6.17157 20.9859C4.60947 22.548 4.60946 25.0806 6.17156 26.6427L17.9431 38.4142L20.7715 35.5858L11.1857 26L34.543 26L34.543 22L10.8143 22Z" 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="M43.043 7.99935L43.043 40L40.043 40L40.043 7.99935L43.043 7.99935Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M9.97873 25.5L20.418 35.9392L18.2966 38.0605L6.52512 26.289C5.15828 24.9222 5.15828 22.7061 6.52512 21.3393L18.2966 9.56776L20.418 11.6891L9.60704 22.5L34.543 22.5L34.543 25.5L9.97873 25.5ZM8.54303 23.6109L8.54303 24.0174C8.48564 23.8884 8.48564 23.74 8.54303 23.6109Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.043 7.99935L43.043 40L40.043 40L40.043 7.99935L43.043 7.99935Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.97873 25.5L20.418 35.9392L18.2966 38.0605L6.52512 26.289C5.15828 24.9222 5.15828 22.7061 6.52512 21.3393L18.2966 9.56776L20.418 11.6891L9.60704 22.5L34.543 22.5L34.543 25.5L9.97873 25.5ZM8.54303 23.6109L8.54303 24.0174C8.48564 23.8884 8.48564 23.74 8.54303 23.6109Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/essay/index.tsx

@@ -1,37 +1,38 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface EssayProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Essay = ({ fill = false, thick = false, size = 24 }: EssayProps) => {
+export const Essay = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: EssayProps) => {
   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="M38.5573 5.9997C36.9949 4.43723 34.4615 4.43766 32.8995 6.00066L30.4343 8.46576L39.6246 17.6569L42.0921 15.1894C43.6533 13.6272 43.6529 11.0953 42.0912 9.53355L38.5573 5.9997Z" fill="currentColor"/>
-<path d="M14.0632 24.8361L28.3129 10.587L37.5032 19.7781L23.2656 34.0151C22.8047 34.4759 22.2381 34.8172 21.6151 35.0091L16.3925 36.6179C13.2929 37.5728 10.4053 34.6356 11.4127 31.5528L13.0892 26.4224C13.2846 25.8244 13.6183 25.2809 14.0632 24.8361Z" fill="currentColor"/>
-<path d="M41 38.9995H7V42.9995H41V38.9995Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.5573 5.9997C36.9949 4.43723 34.4615 4.43766 32.8995 6.00066L30.4343 8.46576L39.6246 17.6569L42.0921 15.1894C43.6533 13.6272 43.6529 11.0953 42.0912 9.53355L38.5573 5.9997Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14.0632 24.8361L28.3129 10.587L37.5032 19.7781L23.2656 34.0151C22.8047 34.4759 22.2381 34.8172 21.6151 35.0091L16.3925 36.6179C13.2929 37.5728 10.4053 34.6356 11.4127 31.5528L13.0892 26.4224C13.2846 25.8244 13.6183 25.2809 14.0632 24.8361Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 38.9995H7V42.9995H41V38.9995Z" 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="M38.2038 6.35423C36.8367 4.98706 34.6199 4.98744 33.2533 6.35507L30.7881 8.82009L39.2713 17.3041L41.7385 14.837C43.1046 13.47 43.1042 11.2546 41.7377 9.88808L38.2038 6.35423Z" fill="currentColor"/>
-<path d="M14.4168 25.1906L28.6667 10.9414L37.15 19.4253L22.9122 33.6625C22.5088 34.0657 22.0131 34.3643 21.468 34.5322L16.2453 36.1411C13.5332 36.9765 11.0066 34.4066 11.888 31.709L13.5645 26.5786C13.7355 26.0554 14.0275 25.5799 14.4168 25.1906Z" fill="currentColor"/>
-<path d="M41 39.5H7V42.5H41V39.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="M38.2038 6.35423C36.8367 4.98706 34.6199 4.98744 33.2533 6.35507L30.7881 8.82009L39.2713 17.3041L41.7385 14.837C43.1046 13.47 43.1042 11.2546 41.7377 9.88808L38.2038 6.35423Z" style={{ fill: `var(--${color})` }}/>
+<path d="M14.4168 25.1906L28.6667 10.9414L37.15 19.4253L22.9122 33.6625C22.5088 34.0657 22.0131 34.3643 21.468 34.5322L16.2453 36.1411C13.5332 36.9765 11.0066 34.4066 11.888 31.709L13.5645 26.5786C13.7355 26.0554 14.0275 25.5799 14.4168 25.1906Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 39.5H7V42.5H41V39.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="M38.5574 6.00043C36.995 4.43796 34.4615 4.43839 32.8996 6.00139L14.0633 24.8368C13.6184 25.2816 13.2847 25.8251 13.0893 26.4231L11.4128 31.5535C10.4054 34.6364 13.293 37.5735 16.3926 36.6187L21.6152 35.0098C22.2382 34.8179 22.8048 34.4767 23.2657 34.0158L42.0922 15.1902C43.6534 13.6279 43.653 11.096 42.0913 9.53428L38.5574 6.00043ZM16.8914 27.6655L30.7888 13.7711L34.3225 17.3052L20.4376 31.1871L15.2149 32.7959L16.8914 27.6655ZM39.2629 12.3627L37.1506 14.4764L33.6169 10.9424L35.729 8.82886L39.2629 12.3627Z" fill="currentColor"/>
-<path d="M41 39H7V43H41V39Z" 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="M38.5574 6.00043C36.995 4.43796 34.4615 4.43839 32.8996 6.00139L14.0633 24.8368C13.6184 25.2816 13.2847 25.8251 13.0893 26.4231L11.4128 31.5535C10.4054 34.6364 13.293 37.5735 16.3926 36.6187L21.6152 35.0098C22.2382 34.8179 22.8048 34.4767 23.2657 34.0158L42.0922 15.1902C43.6534 13.6279 43.653 11.096 42.0913 9.53428L38.5574 6.00043ZM16.8914 27.6655L30.7888 13.7711L34.3225 17.3052L20.4376 31.1871L15.2149 32.7959L16.8914 27.6655ZM39.2629 12.3627L37.1506 14.4764L33.6169 10.9424L35.729 8.82886L39.2629 12.3627Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 39H7V43H41V39Z" 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="M38.2039 6.35398C36.8367 4.98682 34.62 4.9872 33.2533 6.35482L14.4168 25.1904C14.0275 25.5796 13.7355 26.0552 13.5645 26.5784L11.8881 31.7088C11.0066 34.4063 13.5333 36.9763 16.2454 36.1408L21.468 34.532C22.0131 34.364 22.5089 34.0655 22.9122 33.6622L41.7386 14.8367C43.1046 13.4698 43.1042 11.2543 41.7377 9.88784L38.2039 6.35398ZM16.5379 27.3119L30.7888 13.0641L35.0296 17.3052L20.7911 31.5407C20.7335 31.5983 20.6627 31.6409 20.5848 31.6649L15.3622 33.2738C14.9747 33.3931 14.6138 33.026 14.7397 32.6406L16.4162 27.5102C16.4406 27.4355 16.4823 27.3675 16.5379 27.3119ZM39.6165 12.7161L37.1507 15.1836L32.9099 10.9425L35.3753 8.47542C35.5706 8.28005 35.8872 8.27999 36.0826 8.4753L39.6164 12.0092C39.8116 12.2044 39.8117 12.5209 39.6165 12.7161Z" fill="currentColor"/>
-<path d="M41 39.5H7V42.5H41V39.5Z" 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="M38.2039 6.35398C36.8367 4.98682 34.62 4.9872 33.2533 6.35482L14.4168 25.1904C14.0275 25.5796 13.7355 26.0552 13.5645 26.5784L11.8881 31.7088C11.0066 34.4063 13.5333 36.9763 16.2454 36.1408L21.468 34.532C22.0131 34.364 22.5089 34.0655 22.9122 33.6622L41.7386 14.8367C43.1046 13.4698 43.1042 11.2543 41.7377 9.88784L38.2039 6.35398ZM16.5379 27.3119L30.7888 13.0641L35.0296 17.3052L20.7911 31.5407C20.7335 31.5983 20.6627 31.6409 20.5848 31.6649L15.3622 33.2738C14.9747 33.3931 14.6138 33.026 14.7397 32.6406L16.4162 27.5102C16.4406 27.4355 16.4823 27.3675 16.5379 27.3119ZM39.6165 12.7161L37.1507 15.1836L32.9099 10.9425L35.3753 8.47542C35.5706 8.28005 35.8872 8.27999 36.0826 8.4753L39.6164 12.0092C39.8116 12.2044 39.8117 12.5209 39.6165 12.7161Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 39.5H7V42.5H41V39.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/exclamationmark/index.tsx

@@ -1,33 +1,34 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ExclamationmarkProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Exclamationmark = ({ fill = false, thick = false, size = 24 }: ExclamationmarkProps) => {
+export const Exclamationmark = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ExclamationmarkProps) => {
   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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM23.9999 30C23.3591 30 22.7852 30.2302 22.3312 30.6855C21.8772 31.1406 21.6484 31.715 21.6484 32.3555C21.6484 32.996 21.8772 33.5704 22.3312 34.0255C22.7852 34.4808 23.3591 34.711 23.9999 34.711C24.6406 34.711 25.2145 34.4808 25.6686 34.0255C26.1225 33.5704 26.3513 32.996 26.3513 32.3555C26.3513 31.715 26.1225 31.1406 25.6686 30.6855C25.2145 30.2302 24.6406 30 23.9999 30ZM22 14V26H26V14H22Z" 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM23.9999 30C23.3591 30 22.7852 30.2302 22.3312 30.6855C21.8772 31.1406 21.6484 31.715 21.6484 32.3555C21.6484 32.996 21.8772 33.5704 22.3312 34.0255C22.7852 34.4808 23.3591 34.711 23.9999 34.711C24.6406 34.711 25.2145 34.4808 25.6686 34.0255C26.1225 33.5704 26.3513 32.996 26.3513 32.3555C26.3513 31.715 26.1225 31.1406 25.6686 30.6855C25.2145 30.2302 24.6406 30 23.9999 30ZM22 14V26H26V14H22Z" 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24 30C23.455 30 22.9669 30.1955 22.5807 30.582C22.1946 30.9685 22 31.4562 22 32C22 32.5438 22.1946 33.0315 22.5807 33.418C22.9669 33.8045 23.455 34 24 34C24.545 34 25.0331 33.8045 25.4193 33.418C25.8054 33.0315 26 32.5438 26 32C26 31.4562 25.8054 30.9685 25.4193 30.582C25.0331 30.1955 24.545 30 24 30ZM22.5 14V26H25.5V14H22.5Z" 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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24 30C23.455 30 22.9669 30.1955 22.5807 30.582C22.1946 30.9685 22 31.4562 22 32C22 32.5438 22.1946 33.0315 22.5807 33.418C22.9669 33.8045 23.455 34 24 34C24.545 34 25.0331 33.8045 25.4193 33.418C25.8054 33.0315 26 32.5438 26 32C26 31.4562 25.8054 30.9685 25.4193 30.582C25.0331 30.1955 24.545 30 24 30ZM22.5 14V26H25.5V14H22.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="M22 10V29H26V10H22Z" fill="currentColor"/>
-<path d="M22.3312 33.9746C22.7852 33.5193 23.3591 33.2891 23.9999 33.2891C24.6406 33.2891 25.2145 33.5193 25.6686 33.9746C26.1225 34.4297 26.3513 35.0041 26.3513 35.6446C26.3513 36.285 26.1225 36.8594 25.6686 37.3146C25.2145 37.7698 24.6406 38.0001 23.9999 38.0001C23.3591 38.0001 22.7852 37.7698 22.3312 37.3146C21.8772 36.8594 21.6484 36.285 21.6484 35.6446C21.6484 35.0041 21.8772 34.4297 22.3312 33.9746Z" 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 10V29H26V10H22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.3312 33.9746C22.7852 33.5193 23.3591 33.2891 23.9999 33.2891C24.6406 33.2891 25.2145 33.5193 25.6686 33.9746C26.1225 34.4297 26.3513 35.0041 26.3513 35.6446C26.3513 36.285 26.1225 36.8594 25.6686 37.3146C25.2145 37.7698 24.6406 38.0001 23.9999 38.0001C23.3591 38.0001 22.7852 37.7698 22.3312 37.3146C21.8772 36.8594 21.6484 36.285 21.6484 35.6446C21.6484 35.0041 21.8772 34.4297 22.3312 33.9746Z" 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="M22.5 10V29H25.5V10H22.5Z" fill="currentColor"/>
-<path d="M22.5807 34.582C22.9669 34.1955 23.455 34 24 34C24.545 34 25.0331 34.1955 25.4193 34.582C25.8054 34.9685 26 35.4562 26 36C26 36.5438 25.8054 37.0315 25.4193 37.418C25.0331 37.8045 24.545 38 24 38C23.455 38 22.9669 37.8045 22.5807 37.418C22.1946 37.0315 22 36.5438 22 36C22 35.4562 22.1946 34.9685 22.5807 34.582Z" 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.5 10V29H25.5V10H22.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.5807 34.582C22.9669 34.1955 23.455 34 24 34C24.545 34 25.0331 34.1955 25.4193 34.582C25.8054 34.9685 26 35.4562 26 36C26 36.5438 25.8054 37.0315 25.4193 37.418C25.0331 37.8045 24.545 38 24 38C23.455 38 22.9669 37.8045 22.5807 37.418C22.1946 37.0315 22 36.5438 22 36C22 35.4562 22.1946 34.9685 22.5807 34.582Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/exclamationmark-fill/index.tsx

@@ -1,37 +1,38 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ExclamationmarkFillProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ExclamationmarkFill = ({ fill = false, thick = false, size = 24 }: ExclamationmarkFillProps) => {
+export const ExclamationmarkFill = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ExclamationmarkFillProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="24" cy="24" r="20" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24" r="20" style={{ fill: `var(--${color})` }}/>
 <path d="M22 14L22 26H26L26 14H22Z" fill="white"/>
 <path d="M22.3312 30.6855C22.7852 30.2302 23.3591 30 23.9999 30C24.6406 30 25.2145 30.2302 25.6686 30.6855C26.1225 31.1406 26.3513 31.715 26.3513 32.3555C26.3513 32.996 26.1225 33.5704 25.6686 34.0255C25.2145 34.4808 24.6406 34.711 23.9999 34.711C23.3591 34.711 22.7852 34.4808 22.3312 34.0255C21.8772 33.5704 21.6484 32.996 21.6484 32.3555C21.6484 31.715 21.8772 31.1406 22.3312 30.6855Z" fill="white"/>
 </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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22.5 14V26H25.5V14H22.5Z" fill="white"/>
 <path d="M22.5807 30.582C22.9669 30.1955 23.455 30 24 30C24.545 30 25.0331 30.1955 25.4193 30.582C25.8054 30.9685 26 31.4562 26 32C26 32.5438 25.8054 33.0315 25.4193 33.418C25.0331 33.8045 24.545 34 24 34C23.455 34 22.9669 33.8045 22.5807 33.418C22.1946 33.0315 22 32.5438 22 32C22 31.4562 22.1946 30.9685 22.5807 30.582Z" fill="white"/>
 </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="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22.5 14V26H25.5V14H22.5Z" fill="white"/>
 <path d="M22.5807 30.582C22.9669 30.1955 23.455 30 24 30C24.545 30 25.0331 30.1955 25.4193 30.582C25.8054 30.9685 26 31.4562 26 32C26 32.5438 25.8054 33.0315 25.4193 33.418C25.0331 33.8045 24.545 34 24 34C23.455 34 22.9669 33.8045 22.5807 33.418C22.1946 33.0315 22 32.5438 22 32C22 31.4562 22.1946 30.9685 22.5807 30.582Z" fill="white"/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M22.5 14V26H25.5V14H22.5Z" fill="white"/>
 <path d="M22.5807 30.582C22.9669 30.1955 23.455 30 24 30C24.545 30 25.0331 30.1955 25.4193 30.582C25.8054 30.9685 26 31.4562 26 32C26 32.5438 25.8054 33.0315 25.4193 33.418C25.0331 33.8045 24.545 34 24 34C23.455 34 22.9669 33.8045 22.5807 33.418C22.1946 33.0315 22 32.5438 22 32C22 31.4562 22.1946 30.9685 22.5807 30.582Z" fill="white"/>
 </svg>

package/assets/expand/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ExpandProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Expand = ({ fill = false, thick = false, size = 24 }: ExpandProps) => {
+export const Expand = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ExpandProps) => {
   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="M24.9391 20.9395L37.3793 8.5H28V5.5H39.8C41.2912 5.5 42.5 6.70883 42.5 8.2V20H39.5V10.622L27.0603 23.0608L24.9391 20.9395Z" fill="currentColor"/>
-<path d="M10.6219 39.5L23.0604 27.0615L20.9391 24.9402L8.5 37.3793L8.5 28H5.5V39.8C5.5 41.2912 6.70883 42.5 8.2 42.5H20V39.5H10.6219Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.9391 20.9395L37.3793 8.5H28V5.5H39.8C41.2912 5.5 42.5 6.70883 42.5 8.2V20H39.5V10.622L27.0603 23.0608L24.9391 20.9395Z" style={{ fill: `var(--${color})` }}/>
+<path d="M10.6219 39.5L23.0604 27.0615L20.9391 24.9402L8.5 37.3793L8.5 28H5.5V39.8C5.5 41.2912 6.70883 42.5 8.2 42.5H20V39.5H10.6219Z" 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="M24.9391 20.9395L37.3793 8.5H28V5.5H39.8C41.2912 5.5 42.5 6.70883 42.5 8.2V20H39.5V10.622L27.0603 23.0608L24.9391 20.9395Z" fill="currentColor"/>
-<path d="M10.6219 39.5L23.0604 27.0615L20.9391 24.9402L8.5 37.3793L8.5 28H5.5V39.8C5.5 41.2912 6.70883 42.5 8.2 42.5H20V39.5H10.6219Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.9391 20.9395L37.3793 8.5H28V5.5H39.8C41.2912 5.5 42.5 6.70883 42.5 8.2V20H39.5V10.622L27.0603 23.0608L24.9391 20.9395Z" style={{ fill: `var(--${color})` }}/>
+<path d="M10.6219 39.5L23.0604 27.0615L20.9391 24.9402L8.5 37.3793L8.5 28H5.5V39.8C5.5 41.2912 6.70883 42.5 8.2 42.5H20V39.5H10.6219Z" 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="M24.5856 20.5859L36.1723 9H28V5H39.8C41.5673 5 43 6.43269 43 8.2V20H39V11.8291L27.4139 23.4145L24.5856 20.5859Z" fill="currentColor"/>
-<path d="M11.829 39L23.4139 27.415L20.5855 24.5866L9 36.1721L9 28H5V39.8C5 41.5673 6.43269 43 8.2 43H20V39H11.829Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.5856 20.5859L36.1723 9H28V5H39.8C41.5673 5 43 6.43269 43 8.2V20H39V11.8291L27.4139 23.4145L24.5856 20.5859Z" style={{ fill: `var(--${color})` }}/>
+<path d="M11.829 39L23.4139 27.415L20.5855 24.5866L9 36.1721L9 28H5V39.8C5 41.5673 6.43269 43 8.2 43H20V39H11.829Z" 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="M24.9391 20.9395L37.3793 8.5H28V5.5H39.8C41.2912 5.5 42.5 6.70883 42.5 8.2V20H39.5V10.622L27.0603 23.0608L24.9391 20.9395Z" fill="currentColor"/>
-<path d="M10.6219 39.5L23.0604 27.0615L20.9391 24.9402L8.5 37.3793L8.5 28H5.5V39.8C5.5 41.2912 6.70883 42.5 8.2 42.5H20V39.5H10.6219Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.9391 20.9395L37.3793 8.5H28V5.5H39.8C41.2912 5.5 42.5 6.70883 42.5 8.2V20H39.5V10.622L27.0603 23.0608L24.9391 20.9395Z" style={{ fill: `var(--${color})` }}/>
+<path d="M10.6219 39.5L23.0604 27.0615L20.9391 24.9402L8.5 37.3793L8.5 28H5.5V39.8C5.5 41.2912 6.70883 42.5 8.2 42.5H20V39.5H10.6219Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/expand-close/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ExpandCloseProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ExpandClose = ({ fill = false, thick = false, size = 24 }: ExpandCloseProps) => {
+export const ExpandClose = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ExpandCloseProps) => {
   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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM20.5 37H42V11H20.5V37ZM6 37H17.5V11H6V37Z" 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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM20.5 37H42V11H20.5V37ZM6 37H17.5V11H6V37Z" 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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM20.5 37H42V11H20.5V37ZM6 37H17.5V11H6V37Z" 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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM20.5 37H42V11H20.5V37ZM6 37H17.5V11H6V37Z" 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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM21 36H41V12H21V36ZM7 36H17V12H7V36Z" 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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM21 36H41V12H21V36ZM7 36H17V12H7V36Z" 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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM20.5 37H42V11H20.5V37ZM6 37H17.5V11H6V37Z" 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="M43 8C44.1046 8 45 8.89543 45 10V38C45 39.0357 44.2128 39.887 43.2041 39.9893L43 40H5L4.7959 39.9893C3.78722 39.887 3 39.0357 3 38V10C3 8.89543 3.89543 8 5 8H43ZM20.5 37H42V11H20.5V37ZM6 37H17.5V11H6V37Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/extend/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ExtendProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Extend = ({ fill = false, thick = false, size = 24 }: ExtendProps) => {
+export const Extend = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ExtendProps) => {
   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="M8.6212 22.4991L16.0615 15.0588L13.9402 12.9375L4.98103 21.8967C3.81996 23.0577 3.81996 24.9402 4.98103 26.1013L13.9402 35.0604L16.0615 32.9391L8.62153 25.4991L39.3806 25.4991L31.9403 32.9395L34.0616 35.0608L43.0208 26.1016C44.1819 24.9405 44.1819 23.0581 43.0208 21.897L34.0616 12.9378L31.9403 15.0592L39.3803 22.4991L8.6212 22.4991Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.6212 22.4991L16.0615 15.0588L13.9402 12.9375L4.98103 21.8967C3.81996 23.0577 3.81996 24.9402 4.98103 26.1013L13.9402 35.0604L16.0615 32.9391L8.62153 25.4991L39.3806 25.4991L31.9403 32.9395L34.0616 35.0608L43.0208 26.1016C44.1819 24.9405 44.1819 23.0581 43.0208 21.897L34.0616 12.9378L31.9403 15.0592L39.3803 22.4991L8.6212 22.4991Z" 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="M8.6212 22.4991L16.0615 15.0588L13.9402 12.9375L4.98103 21.8967C3.81996 23.0577 3.81996 24.9402 4.98103 26.1013L13.9402 35.0604L16.0615 32.9391L8.62153 25.4991L39.3806 25.4991L31.9403 32.9395L34.0616 35.0608L43.0208 26.1016C44.1819 24.9405 44.1819 23.0581 43.0208 21.897L34.0616 12.9378L31.9403 15.0592L39.3803 22.4991L8.6212 22.4991Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.6212 22.4991L16.0615 15.0588L13.9402 12.9375L4.98103 21.8967C3.81996 23.0577 3.81996 24.9402 4.98103 26.1013L13.9402 35.0604L16.0615 32.9391L8.62153 25.4991L39.3806 25.4991L31.9403 32.9395L34.0616 35.0608L43.0208 26.1016C44.1819 24.9405 44.1819 23.0581 43.0208 21.897L34.0616 12.9378L31.9403 15.0592L39.3803 22.4991L8.6212 22.4991Z" 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="M9.82831 21.9992L16.4151 15.4124L13.5866 12.584L4.62748 21.5431C3.27115 22.8995 3.27114 25.0985 4.62748 26.4549L13.5866 35.414L16.4151 32.5856L9.82864 25.9992L38.1735 25.9992L31.5868 32.5859L34.4152 35.4144L43.3743 26.4552C44.7307 25.0989 44.7307 22.8998 43.3743 21.5435L34.4152 12.5843L31.5868 15.4128L38.1732 21.9992L9.82831 21.9992Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.82831 21.9992L16.4151 15.4124L13.5866 12.584L4.62748 21.5431C3.27115 22.8995 3.27114 25.0985 4.62748 26.4549L13.5866 35.414L16.4151 32.5856L9.82864 25.9992L38.1735 25.9992L31.5868 32.5859L34.4152 35.4144L43.3743 26.4552C44.7307 25.0989 44.7307 22.8998 43.3743 21.5435L34.4152 12.5843L31.5868 15.4128L38.1732 21.9992L9.82831 21.9992Z" 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="M8.6212 22.4991L16.0615 15.0588L13.9402 12.9375L4.98103 21.8967C3.81996 23.0577 3.81996 24.9402 4.98103 26.1013L13.9402 35.0604L16.0615 32.9391L8.62153 25.4991L39.3806 25.4991L31.9403 32.9395L34.0616 35.0608L43.0208 26.1016C44.1819 24.9405 44.1819 23.0581 43.0208 21.897L34.0616 12.9378L31.9403 15.0592L39.3803 22.4991L8.6212 22.4991Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.6212 22.4991L16.0615 15.0588L13.9402 12.9375L4.98103 21.8967C3.81996 23.0577 3.81996 24.9402 4.98103 26.1013L13.9402 35.0604L16.0615 32.9391L8.62153 25.4991L39.3806 25.4991L31.9403 32.9395L34.0616 35.0608L43.0208 26.1016C44.1819 24.9405 44.1819 23.0581 43.0208 21.897L34.0616 12.9378L31.9403 15.0592L39.3803 22.4991L8.6212 22.4991Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/facebook/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface FacebookProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Facebook = ({ fill = false, thick = false, size = 24 }: FacebookProps) => {
+export const Facebook = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: FacebookProps) => {
   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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" 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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" 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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" 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="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/feedback/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface FeedbackProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Feedback = ({ fill = false, thick = false, size = 24 }: FeedbackProps) => {
+export const Feedback = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: FeedbackProps) => {
   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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" fill="currentColor"/>
-<path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" fill="currentColor"/>
-<path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM20.7378 8.30352C19.0369 10.0045 19.0362 12.7619 20.7359 14.4636L20.7378 14.4655L30.3965 24.1007L40.0317 14.4655C41.7333 12.7639 41.7333 10.0051 40.0317 8.30352C38.3302 6.60195 35.5714 6.60195 33.8698 8.30352L30.3848 11.7885L26.8997 8.30352C25.1982 6.60195 22.4394 6.60195 20.7378 8.30352Z" fill="currentColor"/>
-<path d="M12 26.9997H4V22.9997H12C16.8379 22.9997 20.8734 26.4352 21.8 30.9997H24.6C29.2392 30.9997 33 34.7605 33 39.3997C33 41.3879 31.3882 42.9997 29.4 42.9997H4V38.9997H28.9821C28.78 36.7571 26.8952 34.9997 24.6 34.9997H9.41176V30.9997H17.6586C16.8349 28.6693 14.6124 26.9997 12 26.9997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM20.7378 8.30352C19.0369 10.0045 19.0362 12.7619 20.7359 14.4636L20.7378 14.4655L30.3965 24.1007L40.0317 14.4655C41.7333 12.7639 41.7333 10.0051 40.0317 8.30352C38.3302 6.60195 35.5714 6.60195 33.8698 8.30352L30.3848 11.7885L26.8997 8.30352C25.1982 6.60195 22.4394 6.60195 20.7378 8.30352Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12 26.9997H4V22.9997H12C16.8379 22.9997 20.8734 26.4352 21.8 30.9997H24.6C29.2392 30.9997 33 34.7605 33 39.3997C33 41.3879 31.3882 42.9997 29.4 42.9997H4V38.9997H28.9821C28.78 36.7571 26.8952 34.9997 24.6 34.9997H9.41176V30.9997H17.6586C16.8349 28.6693 14.6124 26.9997 12 26.9997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" fill="currentColor"/>
-<path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" 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="M42.8601 5.47509C39.5965 2.21143 34.305 2.21143 31.0414 5.47509L30.3848 6.13169L29.7282 5.47509C26.4645 2.21143 21.173 2.21143 17.9094 5.47509C14.6457 8.73876 14.6457 14.0302 17.9094 17.2939L28.9857 28.3434C29.767 29.1228 31.032 29.122 31.8124 28.3416L42.8601 17.2939C46.1238 14.0302 46.1238 8.73876 42.8601 5.47509ZM27.6068 7.59641L30.3848 10.3743L33.1627 7.59641C35.2548 5.50432 38.6467 5.50432 40.7388 7.59641C42.8309 9.68851 42.8309 13.0805 40.7388 15.1726L30.3973 25.5141L20.0307 15.1726L20.0294 15.1713C17.9386 13.0791 17.939 9.68808 20.0307 7.59641C22.1228 5.50432 25.5148 5.50432 27.6068 7.59641Z" style={{ fill: `var(--${color})` }}/>
+<path d="M12 26.4997H4V23.4997H12C16.7363 23.4997 20.6631 26.9657 21.3822 31.4997H24.6C28.9631 31.4997 32.5 35.0367 32.5 39.3997C32.5 41.1118 31.1121 42.4997 29.4 42.4997H4V39.4997H29.4C29.4552 39.4997 29.5 39.4549 29.5 39.3997C29.5 36.6935 27.3062 34.4997 24.6 34.4997H9.41176V31.4997H18.3261C17.6489 28.633 15.0736 26.4997 12 26.4997Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };