@liner-fe/icon 0.0.4 → 0.0.6

package/assets/hide-all/index.tsx

@@ -1,123 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface HideAllProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const HideAll = ({ fill = false, thick = false, size = 24 }: HideAllProps) => {
+export const HideAll = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HideAllProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_699_11423)">
-<g opacity="0.2" clip-path="url(#clip1_699_11423)">
-<rect opacity="0.6" x="6" y="6" width="36" height="36" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="16" y="16" width="16" height="16" rx="8" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="9" width="40" height="30" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="9" y="44" width="40" height="30" rx="2" transform="rotate(-90 9 44)" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="4" width="40" height="40" rx="20" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M48 0L0 48" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M0 0L48 48" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" width="48" height="48" stroke="#FF00FF" stroke-width="0.5"/>
-</g>
-<path d="M6 17L15 17C16.1046 17 17 16.1046 17 15L17 6L14 6L14 14L6 14V17Z" fill="currentColor"/>
-<path d="M42 31L33 31C31.8954 31 31 31.8954 31 33L31 42L34 42L34 34L42 34V31Z" fill="currentColor"/>
-<path d="M17 33L17 42H14V34H6L6 31H15C16.1046 31 17 31.8954 17 33Z" fill="currentColor"/>
-<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17L42 14L34 14L34 6H31Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_699_11423">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-<clipPath id="clip1_699_11423">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 17L15 17C16.1046 17 17 16.1046 17 15L17 6L14 6L14 14L6 14V17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42 31L33 31C31.8954 31 31 31.8954 31 33L31 42L34 42L34 34L42 34V31Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17 33L17 42H14V34H6L6 31H15C16.1046 31 17 31.8954 17 33Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17L42 14L34 14L34 6H31Z" 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">
-<g clip-path="url(#clip0_699_11423)">
-<g opacity="0.2" clip-path="url(#clip1_699_11423)">
-<rect opacity="0.6" x="6" y="6" width="36" height="36" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="16" y="16" width="16" height="16" rx="8" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="9" width="40" height="30" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="9" y="44" width="40" height="30" rx="2" transform="rotate(-90 9 44)" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="4" width="40" height="40" rx="20" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M48 0L0 48" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M0 0L48 48" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" width="48" height="48" stroke="#FF00FF" stroke-width="0.5"/>
-</g>
-<path d="M6 17L15 17C16.1046 17 17 16.1046 17 15L17 6L14 6L14 14L6 14V17Z" fill="currentColor"/>
-<path d="M42 31L33 31C31.8954 31 31 31.8954 31 33L31 42L34 42L34 34L42 34V31Z" fill="currentColor"/>
-<path d="M17 33L17 42H14V34H6L6 31H15C16.1046 31 17 31.8954 17 33Z" fill="currentColor"/>
-<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17L42 14L34 14L34 6H31Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_699_11423">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-<clipPath id="clip1_699_11423">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 17L15 17C16.1046 17 17 16.1046 17 15L17 6L14 6L14 14L6 14V17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42 31L33 31C31.8954 31 31 31.8954 31 33L31 42L34 42L34 34L42 34V31Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17 33L17 42H14V34H6L6 31H15C16.1046 31 17 31.8954 17 33Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17L42 14L34 14L34 6H31Z" 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">
-<g clip-path="url(#clip0_699_11434)">
-<g opacity="0.2" clip-path="url(#clip1_699_11434)">
-<rect opacity="0.6" x="6" y="6" width="36" height="36" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="16" y="16" width="16" height="16" rx="8" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="9" width="40" height="30" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="9" y="44" width="40" height="30" rx="2" transform="rotate(-90 9 44)" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="4" width="40" height="40" rx="20" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M48 0L0 48" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M0 0L48 48" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" width="48" height="48" stroke="#FF00FF" stroke-width="0.5"/>
-</g>
-<path d="M17 6L17 15C17 16.1046 16.1046 17 15 17L6 17L6 13H13V6H17Z" fill="black"/>
-<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17V13H35V6H31Z" fill="black"/>
-<path d="M33 31L42 31V35H35V42H31V33C31 31.8954 31.8954 31 33 31Z" fill="black"/>
-<path d="M6 31L15 31C16.1046 31 17 31.8954 17 33V42H13L13 35H6V31Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0_699_11434">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-<clipPath id="clip1_699_11434">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 6L17 15C17 16.1046 16.1046 17 15 17L6 17L6 13H13V6H17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17V13H35V6H31Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33 31L42 31V35H35V42H31V33C31 31.8954 31.8954 31 33 31Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6 31L15 31C16.1046 31 17 31.8954 17 33V42H13L13 35H6V31Z" 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">
-<g clip-path="url(#clip0_699_11423)">
-<g opacity="0.2" clip-path="url(#clip1_699_11423)">
-<rect opacity="0.6" x="6" y="6" width="36" height="36" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="16" y="16" width="16" height="16" rx="8" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="9" width="40" height="30" rx="2" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="9" y="44" width="40" height="30" rx="2" transform="rotate(-90 9 44)" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" x="4" y="4" width="40" height="40" rx="20" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M48 0L0 48" stroke="#FF00FF" stroke-width="0.2"/>
-<path opacity="0.6" d="M0 0L48 48" stroke="#FF00FF" stroke-width="0.2"/>
-<rect opacity="0.6" width="48" height="48" stroke="#FF00FF" stroke-width="0.5"/>
-</g>
-<path d="M6 17L15 17C16.1046 17 17 16.1046 17 15L17 6L14 6L14 14L6 14V17Z" fill="currentColor"/>
-<path d="M42 31L33 31C31.8954 31 31 31.8954 31 33L31 42L34 42L34 34L42 34V31Z" fill="currentColor"/>
-<path d="M17 33L17 42H14V34H6L6 31H15C16.1046 31 17 31.8954 17 33Z" fill="currentColor"/>
-<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17L42 14L34 14L34 6H31Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_699_11423">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-<clipPath id="clip1_699_11423">
-<rect width="48" height="48" fill="white"/>
-</clipPath>
-</defs>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 17L15 17C16.1046 17 17 16.1046 17 15L17 6L14 6L14 14L6 14V17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42 31L33 31C31.8954 31 31 31.8954 31 33L31 42L34 42L34 34L42 34V31Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17 33L17 42H14V34H6L6 31H15C16.1046 31 17 31.8954 17 33Z" style={{ fill: `var(--${color})` }}/>
+<path d="M31 6L31 15C31 16.1046 31.8954 17 33 17L42 17L42 14L34 14L34 6H31Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/highlight-edit/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface HighlightEditProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const HighlightEdit = ({ fill = false, thick = false, size = 24 }: HighlightEditProps) => {
+export const HighlightEdit = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HighlightEditProps) => {
   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.1894 2.56791C40.9801 1.35858 39.0193 1.35892 37.8103 2.56865L20.9541 19.4241C20.6098 19.7684 20.3515 20.1891 20.2003 20.6519L18.5944 25.5663C17.8147 27.9523 20.0496 30.2256 22.4486 29.4866L27.4483 27.9464C27.9304 27.7979 28.369 27.5338 28.7257 27.1771L45.5741 10.3294C46.7824 9.12028 46.7821 7.16063 45.5734 5.95188L42.1894 2.56791ZM23.0752 21.5457L35.6202 9.00341L39.1397 12.5232L26.6046 25.0555C26.5936 25.0666 26.58 25.0748 26.5651 25.0794L21.5654 26.6196C21.5466 26.6254 21.5351 26.6261 21.5298 26.6262C21.5266 26.6262 21.5237 26.6261 21.5209 26.6256C21.5188 26.6253 21.5167 26.6249 21.5147 26.6243C21.504 26.6214 21.4864 26.6131 21.4688 26.5951C21.4512 26.5772 21.4431 26.5595 21.4404 26.5488C21.4398 26.5463 21.4393 26.5439 21.439 26.5414C21.4388 26.5389 21.4387 26.5363 21.4387 26.5335C21.4389 26.5283 21.4399 26.5168 21.446 26.4981L23.0519 21.5837C23.0566 21.5694 23.0646 21.5564 23.0752 21.5457ZM43.4521 8.20884L41.2608 10.4016L37.7413 6.88184L39.9324 4.68925C39.9698 4.65177 40.0306 4.65176 40.0681 4.68923L43.452 8.0732C43.4895 8.11066 43.4895 8.17137 43.4521 8.20884Z" fill="currentColor"/>
-<path d="M8.5 8.9997C8.5 8.72355 8.72386 8.4997 9 8.4997H24.5V5.4997H9C7.067 5.4997 5.5 7.0667 5.5 8.9997V38.9997C5.5 40.9327 7.067 42.4997 9 42.4997H39C40.933 42.4997 42.5 40.9327 42.5 38.9997V23.9997H39.5V38.9997C39.5 39.2758 39.2761 39.4997 39 39.4997H9C8.72386 39.4997 8.5 39.2758 8.5 38.9997V8.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.1894 2.56693C40.9801 1.35761 39.0193 1.35794 37.8103 2.56767L20.9541 19.4232C20.6098 19.7674 20.3515 20.1881 20.2003 20.6509L18.5944 25.5653C17.8147 27.9514 20.0496 30.2246 22.4486 29.4856L27.4483 27.9455C27.9304 27.7969 28.369 27.5328 28.7257 27.1761L45.5741 10.3285C46.7824 9.11931 46.7821 7.15965 45.5734 5.95091L42.1894 2.56693ZM23.0752 21.5447L35.6202 9.00243L39.1397 12.5222L26.6046 25.0546C26.5936 25.0656 26.58 25.0738 26.5651 25.0784L21.5654 26.6186C21.5466 26.6244 21.5351 26.6252 21.5298 26.6252C21.5266 26.6253 21.5237 26.6251 21.5209 26.6247C21.5188 26.6243 21.5167 26.6239 21.5147 26.6233C21.504 26.6204 21.4864 26.6121 21.4688 26.5942C21.4512 26.5762 21.4431 26.5585 21.4404 26.5478C21.4398 26.5453 21.4393 26.5429 21.439 26.5404C21.4388 26.5379 21.4387 26.5354 21.4387 26.5326C21.4389 26.5273 21.4399 26.5159 21.446 26.4971L23.0519 21.5828C23.0566 21.5684 23.0646 21.5554 23.0752 21.5447ZM43.4521 8.20786L41.2608 10.4007L37.7413 6.88087L39.9324 4.68827C39.9698 4.65079 40.0306 4.65078 40.0681 4.68825L43.452 8.07223C43.4895 8.10968 43.4895 8.1704 43.4521 8.20786Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.5 8.99872C8.5 8.72258 8.72386 8.49872 9 8.49872H24.5V5.49872H9C7.067 5.49872 5.5 7.06572 5.5 8.99872V38.9987C5.5 40.9317 7.067 42.4987 9 42.4987H39C40.933 42.4987 42.5 40.9317 42.5 38.9987V23.9987H39.5V38.9987C39.5 39.2749 39.2761 39.4987 39 39.4987H9C8.72386 39.4987 8.5 39.2749 8.5 38.9987V8.99872Z" 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.1894 2.56791C40.9801 1.35858 39.0193 1.35892 37.8103 2.56865L20.9541 19.4241C20.6098 19.7684 20.3515 20.1891 20.2003 20.6519L18.5944 25.5663C17.8147 27.9523 20.0496 30.2256 22.4486 29.4866L27.4483 27.9464C27.9304 27.7979 28.369 27.5338 28.7257 27.1771L45.5741 10.3294C46.7824 9.12028 46.7821 7.16063 45.5734 5.95188L42.1894 2.56791ZM23.0752 21.5457L35.6202 9.00341L39.1397 12.5232L26.6046 25.0555C26.5936 25.0666 26.58 25.0748 26.5651 25.0794L21.5654 26.6196C21.5466 26.6254 21.5351 26.6261 21.5298 26.6262C21.5266 26.6262 21.5237 26.6261 21.5209 26.6256C21.5188 26.6253 21.5167 26.6249 21.5147 26.6243C21.504 26.6214 21.4864 26.6131 21.4688 26.5951C21.4512 26.5772 21.4431 26.5595 21.4404 26.5488C21.4398 26.5463 21.4393 26.5439 21.439 26.5414C21.4388 26.5389 21.4387 26.5363 21.4387 26.5335C21.4389 26.5283 21.4399 26.5168 21.446 26.4981L23.0519 21.5837C23.0566 21.5694 23.0646 21.5564 23.0752 21.5457ZM43.4521 8.20884L41.2608 10.4016L37.7413 6.88184L39.9324 4.68925C39.9698 4.65177 40.0306 4.65176 40.0681 4.68923L43.452 8.0732C43.4895 8.11066 43.4895 8.17137 43.4521 8.20884Z" fill="currentColor"/>
-<path d="M8.5 8.9997C8.5 8.72355 8.72386 8.4997 9 8.4997H24.5V5.4997H9C7.067 5.4997 5.5 7.0667 5.5 8.9997V38.9997C5.5 40.9327 7.067 42.4997 9 42.4997H39C40.933 42.4997 42.5 40.9327 42.5 38.9997V23.9997H39.5V38.9997C39.5 39.2758 39.2761 39.4997 39 39.4997H9C8.72386 39.4997 8.5 39.2758 8.5 38.9997V8.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.1894 2.56693C40.9801 1.35761 39.0193 1.35794 37.8103 2.56767L20.9541 19.4232C20.6098 19.7674 20.3515 20.1881 20.2003 20.6509L18.5944 25.5653C17.8147 27.9514 20.0496 30.2246 22.4486 29.4856L27.4483 27.9455C27.9304 27.7969 28.369 27.5328 28.7257 27.1761L45.5741 10.3285C46.7824 9.11931 46.7821 7.15965 45.5734 5.95091L42.1894 2.56693ZM23.0752 21.5447L35.6202 9.00243L39.1397 12.5222L26.6046 25.0546C26.5936 25.0656 26.58 25.0738 26.5651 25.0784L21.5654 26.6186C21.5466 26.6244 21.5351 26.6252 21.5298 26.6252C21.5266 26.6253 21.5237 26.6251 21.5209 26.6247C21.5188 26.6243 21.5167 26.6239 21.5147 26.6233C21.504 26.6204 21.4864 26.6121 21.4688 26.5942C21.4512 26.5762 21.4431 26.5585 21.4404 26.5478C21.4398 26.5453 21.4393 26.5429 21.439 26.5404C21.4388 26.5379 21.4387 26.5354 21.4387 26.5326C21.4389 26.5273 21.4399 26.5159 21.446 26.4971L23.0519 21.5828C23.0566 21.5684 23.0646 21.5554 23.0752 21.5447ZM43.4521 8.20786L41.2608 10.4007L37.7413 6.88087L39.9324 4.68827C39.9698 4.65079 40.0306 4.65078 40.0681 4.68825L43.452 8.07223C43.4895 8.10968 43.4895 8.1704 43.4521 8.20786Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.5 8.99872C8.5 8.72258 8.72386 8.49872 9 8.49872H24.5V5.49872H9C7.067 5.49872 5.5 7.06572 5.5 8.99872V38.9987C5.5 40.9317 7.067 42.4987 9 42.4987H39C40.933 42.4987 42.5 40.9317 42.5 38.9987V23.9987H39.5V38.9987C39.5 39.2749 39.2761 39.4987 39 39.4987H9C8.72386 39.4987 8.5 39.2749 8.5 38.9987V8.99872Z" 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.5429 2.21435C41.1383 0.809721 38.8608 0.810109 37.4567 2.21522L20.6006 19.0705C20.2007 19.4704 19.9007 19.959 19.725 20.4966L18.1191 25.411C17.2135 28.1824 19.8094 30.8228 22.5958 29.9644L27.5955 28.4243C28.1555 28.2518 28.6648 27.945 29.0792 27.5307L45.9278 10.6829C47.3313 9.27843 47.3309 7.00229 45.9269 5.59833L42.5429 2.21435ZM23.4971 21.8309L35.6201 9.71049L38.4326 12.5231L26.322 24.6311L22.1635 25.9121L23.4971 21.8309ZM42.8129 8.14113L41.2607 9.69439L38.4482 6.88174L40.0003 5.3286L42.8129 8.14113Z" fill="currentColor"/>
-<path d="M9 4.9997C6.79086 4.9997 5 6.79056 5 8.9997V38.9997C5 41.2088 6.79086 42.9997 9 42.9997H39C41.2091 42.9997 43 41.2088 43 38.9997V23.9997H39V38.9997H9V8.9997H24.5V4.9997H9Z" 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.5429 2.21338C41.1383 0.808745 38.8608 0.809132 37.4567 2.21424L20.6006 19.0696C20.2007 19.4694 19.9007 19.958 19.725 20.4956L18.1191 25.41C17.2135 28.1814 19.8094 30.8218 22.5958 29.9635L27.5955 28.4233C28.1555 28.2508 28.6648 27.944 29.0792 27.5297L45.9278 10.6819C47.3313 9.27746 47.3309 7.00131 45.9269 5.59735L42.5429 2.21338ZM23.4971 21.83L35.6201 9.70952L38.4326 12.5222L26.322 24.6301L22.1635 25.9112L23.4971 21.83ZM42.8129 8.14015L41.2607 9.69341L38.4482 6.88076L40.0003 5.32763L42.8129 8.14015Z" style={{ fill: `var(--${color})` }}/>
+<path d="M9 4.99872C6.79086 4.99872 5 6.78958 5 8.99872V38.9987C5 41.2079 6.79086 42.9987 9 42.9987H39C41.2091 42.9987 43 41.2079 43 38.9987V23.9987H39V38.9987H9V8.99872H24.5V4.99872H9Z" 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.1894 2.56791C40.9801 1.35858 39.0193 1.35892 37.8103 2.56865L20.9541 19.4241C20.6098 19.7684 20.3515 20.1891 20.2003 20.6519L18.5944 25.5663C17.8147 27.9523 20.0496 30.2256 22.4486 29.4866L27.4483 27.9464C27.9304 27.7979 28.369 27.5338 28.7257 27.1771L45.5741 10.3294C46.7824 9.12028 46.7821 7.16063 45.5734 5.95188L42.1894 2.56791ZM23.0752 21.5457L35.6202 9.00341L39.1397 12.5232L26.6046 25.0555C26.5936 25.0666 26.58 25.0748 26.5651 25.0794L21.5654 26.6196C21.5466 26.6254 21.5351 26.6261 21.5298 26.6262C21.5266 26.6262 21.5237 26.6261 21.5209 26.6256C21.5188 26.6253 21.5167 26.6249 21.5147 26.6243C21.504 26.6214 21.4864 26.6131 21.4688 26.5951C21.4512 26.5772 21.4431 26.5595 21.4404 26.5488C21.4398 26.5463 21.4393 26.5439 21.439 26.5414C21.4388 26.5389 21.4387 26.5363 21.4387 26.5335C21.4389 26.5283 21.4399 26.5168 21.446 26.4981L23.0519 21.5837C23.0566 21.5694 23.0646 21.5564 23.0752 21.5457ZM43.4521 8.20884L41.2608 10.4016L37.7413 6.88184L39.9324 4.68925C39.9698 4.65177 40.0306 4.65176 40.0681 4.68923L43.452 8.0732C43.4895 8.11066 43.4895 8.17137 43.4521 8.20884Z" fill="currentColor"/>
-<path d="M8.5 8.9997C8.5 8.72355 8.72386 8.4997 9 8.4997H24.5V5.4997H9C7.067 5.4997 5.5 7.0667 5.5 8.9997V38.9997C5.5 40.9327 7.067 42.4997 9 42.4997H39C40.933 42.4997 42.5 40.9327 42.5 38.9997V23.9997H39.5V38.9997C39.5 39.2758 39.2761 39.4997 39 39.4997H9C8.72386 39.4997 8.5 39.2758 8.5 38.9997V8.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.1894 2.56693C40.9801 1.35761 39.0193 1.35794 37.8103 2.56767L20.9541 19.4232C20.6098 19.7674 20.3515 20.1881 20.2003 20.6509L18.5944 25.5653C17.8147 27.9514 20.0496 30.2246 22.4486 29.4856L27.4483 27.9455C27.9304 27.7969 28.369 27.5328 28.7257 27.1761L45.5741 10.3285C46.7824 9.11931 46.7821 7.15965 45.5734 5.95091L42.1894 2.56693ZM23.0752 21.5447L35.6202 9.00243L39.1397 12.5222L26.6046 25.0546C26.5936 25.0656 26.58 25.0738 26.5651 25.0784L21.5654 26.6186C21.5466 26.6244 21.5351 26.6252 21.5298 26.6252C21.5266 26.6253 21.5237 26.6251 21.5209 26.6247C21.5188 26.6243 21.5167 26.6239 21.5147 26.6233C21.504 26.6204 21.4864 26.6121 21.4688 26.5942C21.4512 26.5762 21.4431 26.5585 21.4404 26.5478C21.4398 26.5453 21.4393 26.5429 21.439 26.5404C21.4388 26.5379 21.4387 26.5354 21.4387 26.5326C21.4389 26.5273 21.4399 26.5159 21.446 26.4971L23.0519 21.5828C23.0566 21.5684 23.0646 21.5554 23.0752 21.5447ZM43.4521 8.20786L41.2608 10.4007L37.7413 6.88087L39.9324 4.68827C39.9698 4.65079 40.0306 4.65078 40.0681 4.68825L43.452 8.07223C43.4895 8.10968 43.4895 8.1704 43.4521 8.20786Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.5 8.99872C8.5 8.72258 8.72386 8.49872 9 8.49872H24.5V5.49872H9C7.067 5.49872 5.5 7.06572 5.5 8.99872V38.9987C5.5 40.9317 7.067 42.4987 9 42.4987H39C40.933 42.4987 42.5 40.9317 42.5 38.9987V23.9987H39.5V38.9987C39.5 39.2749 39.2761 39.4987 39 39.4987H9C8.72386 39.4987 8.5 39.2749 8.5 38.9987V8.99872Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/highlighter/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface HighlighterProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Highlighter = ({ fill = false, thick = false, size = 24 }: HighlighterProps) => {
+export const Highlighter = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HighlighterProps) => {
   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="M31.7208 7.43684C33.1323 6.02408 35.4221 6.02359 36.8342 7.43577L42.2001 12.8016C43.6114 14.213 43.6119 16.501 42.2012 17.913L22.368 37.745C21.8692 38.2436 21.2355 38.5855 20.5448 38.7284L16.9033 39.4821C16.2208 39.6234 15.5239 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6032 41.2441 12.0531 41.2438L6.55125 41.241C5.60937 41.2405 5.138 40.1017 5.80401 39.4357L10.338 34.9017C10.0122 34.1905 9.92074 33.3814 10.0989 32.5959L10.9058 29.038C11.0568 28.3725 11.3929 27.7634 11.8754 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1621 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0924 36.5863 15.8821 36.5234 15.7357 36.377L13.1894 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8315 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4105 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0831 9.31692 33.843 9.55727L31.1751 12.2274L37.4105 18.4632Z" 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.7208 7.43684C33.1324 6.02408 35.4221 6.02359 36.8343 7.43577L42.2001 12.8016C43.6115 14.213 43.612 16.501 42.2012 17.913L22.3681 37.745C21.8693 38.2436 21.2355 38.5855 20.5449 38.7284L16.9033 39.4821C16.2209 39.6234 15.524 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L10.3381 34.9017C10.0122 34.1905 9.92077 33.3814 10.0989 32.5959L10.9059 29.038C11.0568 28.3725 11.3929 27.7634 11.8755 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1622 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0925 36.5863 15.8822 36.5234 15.7357 36.377L13.1895 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8316 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4106 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0832 9.31692 33.843 9.55727L31.1751 12.2274L37.4106 18.4632Z" 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.7208 7.43684C33.1323 6.02408 35.4221 6.02359 36.8342 7.43577L42.2001 12.8016C43.6114 14.213 43.6119 16.501 42.2012 17.913L22.368 37.745C21.8692 38.2436 21.2355 38.5855 20.5448 38.7284L16.9033 39.4821C16.2208 39.6234 15.5239 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6032 41.2441 12.0531 41.2438L6.55125 41.241C5.60937 41.2405 5.138 40.1017 5.80401 39.4357L10.338 34.9017C10.0122 34.1905 9.92074 33.3814 10.0989 32.5959L10.9058 29.038C11.0568 28.3725 11.3929 27.7634 11.8754 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1621 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0924 36.5863 15.8821 36.5234 15.7357 36.377L13.1894 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8315 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4105 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0831 9.31692 33.843 9.55727L31.1751 12.2274L37.4105 18.4632Z" 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.7208 7.43684C33.1324 6.02408 35.4221 6.02359 36.8343 7.43577L42.2001 12.8016C43.6115 14.213 43.612 16.501 42.2012 17.913L22.3681 37.745C21.8693 38.2436 21.2355 38.5855 20.5449 38.7284L16.9033 39.4821C16.2209 39.6234 15.524 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L10.3381 34.9017C10.0122 34.1905 9.92077 33.3814 10.0989 32.5959L10.9059 29.038C11.0568 28.3725 11.3929 27.7634 11.8755 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1622 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0925 36.5863 15.8822 36.5234 15.7357 36.377L13.1895 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8316 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4106 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0832 9.31692 33.843 9.55727L31.1751 12.2274L37.4106 18.4632Z" 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.3671 7.08344C32.9739 5.47527 35.5803 5.47472 37.1878 7.08221L42.5537 12.4481C44.1602 14.0546 44.1608 16.6592 42.5549 18.2664L22.7215 38.0986C22.1538 38.6662 21.4324 39.0553 20.6462 39.2181L17.0046 39.9717C16.1499 40.1486 15.2752 40.0471 14.5 39.7028L13.5268 40.6469C13.1319 41.0299 12.6032 41.2441 12.0531 41.2438L6.55125 41.241C5.60937 41.2405 5.138 40.1017 5.80401 39.4357L9.96398 35.2758C9.52836 34.4275 9.39452 33.441 9.61128 32.4853L10.4182 28.9274C10.59 28.1699 10.9727 27.4765 11.522 26.9274L31.3671 7.08344ZM29.054 15.0561L17.1452 26.9617L22.6737 32.4903L34.5824 20.5848L29.054 15.0561ZM14.3192 29.8121C14.3203 29.807 14.3218 29.8019 14.3237 29.7971L19.829 35.3024L16.1939 36.0547C16.156 36.0626 16.1167 36.0508 16.0893 36.0234L13.543 33.4768C13.5151 33.4489 13.5035 33.4086 13.5122 33.3701L14.3192 29.8121ZM37.4104 17.756L39.7253 15.4391C39.7702 15.3942 39.7702 15.3214 39.7253 15.2765L34.3594 9.91064C34.3144 9.86571 34.2416 9.86573 34.1967 9.91067L31.8821 12.2272L37.4104 17.756Z" 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.3671 7.08344C32.9739 5.47527 35.5803 5.47472 37.1878 7.08221L42.5537 12.4481C44.1602 14.0546 44.1608 16.6592 42.5549 18.2664L22.7216 38.0986C22.1538 38.6662 21.4324 39.0553 20.6462 39.2181L17.0046 39.9717C16.1499 40.1486 15.2752 40.0471 14.5 39.7028L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L9.96401 35.2758C9.52839 34.4275 9.39455 33.441 9.61131 32.4853L10.4183 28.9274C10.5901 28.1699 10.9727 27.4765 11.522 26.9274L31.3671 7.08344ZM29.0541 15.0561L17.1452 26.9617L22.6738 32.4903L34.5824 20.5848L29.0541 15.0561ZM14.3192 29.8121C14.3203 29.807 14.3219 29.8019 14.3237 29.7971L19.8291 35.3024L16.194 36.0547C16.156 36.0626 16.1167 36.0508 16.0893 36.0234L13.5431 33.4768C13.5151 33.4489 13.5035 33.4086 13.5122 33.3701L14.3192 29.8121ZM37.4104 17.756L39.7253 15.4391C39.7702 15.3942 39.7702 15.3214 39.7253 15.2765L34.3594 9.91064C34.3145 9.86571 34.2416 9.86573 34.1967 9.91067L31.8821 12.2272L37.4104 17.756Z" 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.7208 7.43684C33.1323 6.02408 35.4221 6.02359 36.8342 7.43577L42.2001 12.8016C43.6114 14.213 43.6119 16.501 42.2012 17.913L22.368 37.745C21.8692 38.2436 21.2355 38.5855 20.5448 38.7284L16.9033 39.4821C16.2208 39.6234 15.5239 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6032 41.2441 12.0531 41.2438L6.55125 41.241C5.60937 41.2405 5.138 40.1017 5.80401 39.4357L10.338 34.9017C10.0122 34.1905 9.92074 33.3814 10.0989 32.5959L10.9058 29.038C11.0568 28.3725 11.3929 27.7634 11.8754 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1621 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0924 36.5863 15.8821 36.5234 15.7357 36.377L13.1894 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8315 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4105 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0831 9.31692 33.843 9.55727L31.1751 12.2274L37.4105 18.4632Z" 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.7208 7.43684C33.1324 6.02408 35.4221 6.02359 36.8343 7.43577L42.2001 12.8016C43.6115 14.213 43.612 16.501 42.2012 17.913L22.3681 37.745C21.8693 38.2436 21.2355 38.5855 20.5449 38.7284L16.9033 39.4821C16.2209 39.6234 15.524 39.5625 14.8913 39.3232L13.5268 40.6469C13.1319 41.0299 12.6033 41.2441 12.0531 41.2438L6.55128 41.241C5.6094 41.2405 5.13803 40.1017 5.80404 39.4357L10.3381 34.9017C10.0122 34.1905 9.92077 33.3814 10.0989 32.5959L10.9059 29.038C11.0568 28.3725 11.3929 27.7634 11.8755 27.281L31.7208 7.43684ZM29.0541 14.349L16.438 26.9618L22.6736 33.1974L35.2895 20.5849L29.0541 14.349ZM13.9965 29.4026L14.3164 29.0828L20.552 35.3184L20.247 35.6234C20.1622 35.7082 20.0543 35.7664 19.9368 35.7907L16.2953 36.5444C16.0925 36.5863 15.8822 36.5234 15.7357 36.377L13.1895 33.8304C13.0401 33.681 12.9779 33.4655 13.0246 33.2595L13.8316 29.7015C13.8572 29.5883 13.9144 29.4847 13.9965 29.4026ZM37.4106 18.4632L40.079 15.7925C40.319 15.5523 40.3189 15.1631 40.0788 14.923L34.7129 9.55709C34.4727 9.31684 34.0832 9.31692 33.843 9.55727L31.1751 12.2274L37.4106 18.4632Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/history/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface HistoryProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const History = ({ fill = false, thick = false, size = 24 }: HistoryProps) => {
+export const History = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HistoryProps) => {
   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.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" fill="currentColor"/>
-<path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" 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.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" 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.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" fill="currentColor"/>
-<path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" 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.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" 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="M33.8995 14.1005C28.4322 8.63316 19.5678 8.63316 14.1005 14.1005C13.5039 14.6971 12.9731 15.3332 12.5076 16H18V20H9C6.79086 20 5 18.2092 5 16V7.00003H9L9 14.0445C9.65195 13.0642 10.4095 12.1346 11.2721 11.2721C18.3015 4.24264 29.6985 4.24264 36.7279 11.2721C43.7574 18.3015 43.7574 29.6985 36.7279 36.7279C29.6985 43.7574 18.3015 43.7574 11.2721 36.7279C9.51115 34.967 8.18872 32.9277 7.30892 30.7495C6.86587 29.6527 6.53544 28.5215 6.31741 27.3738L10.2471 26.6273C10.4168 27.5204 10.6738 28.3997 11.0178 29.2515C11.7001 30.9406 12.7263 32.5253 14.1005 33.8995C19.5678 39.3668 28.4322 39.3668 33.8995 33.8995C39.3668 28.4322 39.3668 19.5678 33.8995 14.1005Z" fill="currentColor"/>
-<path d="M26 23.672V14.7613H22V23.672C22 24.7328 22.4214 25.7502 23.1715 26.5004L29.0858 32.4147L31.9142 29.5863L26 23.672Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.8995 14.1005C28.4322 8.63316 19.5678 8.63316 14.1005 14.1005C13.5039 14.6971 12.9731 15.3332 12.5076 16H18V20H9C6.79086 20 5 18.2092 5 16V7.00003H9L9 14.0445C9.65195 13.0642 10.4095 12.1346 11.2721 11.2721C18.3015 4.24264 29.6985 4.24264 36.7279 11.2721C43.7574 18.3015 43.7574 29.6985 36.7279 36.7279C29.6985 43.7574 18.3015 43.7574 11.2721 36.7279C9.51115 34.967 8.18872 32.9277 7.30892 30.7495C6.86587 29.6527 6.53544 28.5215 6.31741 27.3738L10.2471 26.6273C10.4168 27.5204 10.6738 28.3997 11.0178 29.2515C11.7001 30.9406 12.7263 32.5253 14.1005 33.8995C19.5678 39.3668 28.4322 39.3668 33.8995 33.8995C39.3668 28.4322 39.3668 19.5678 33.8995 14.1005Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 23.672V14.7613H22V23.672C22 24.7328 22.4214 25.7502 23.1715 26.5004L29.0858 32.4147L31.9142 29.5863L26 23.672Z" 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.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" fill="currentColor"/>
-<path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" 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.253 13.747C28.5904 8.08435 19.4096 8.08435 13.747 13.747C12.899 14.595 12.1789 15.5204 11.5859 16.5H19V19.5H10C8.067 19.5 6.5 17.933 6.5 16V7.00003H9.5L9.5 14.1967C10.1147 13.2896 10.8234 12.4279 11.6256 11.6256C18.4598 4.79146 29.5402 4.79146 36.3744 11.6256C43.2085 18.4598 43.2085 29.5402 36.3744 36.3744C29.5402 43.2085 18.4598 43.2085 11.6256 36.3744C9.91304 34.6618 8.62764 32.6793 7.77253 30.5623C7.34186 29.496 7.02061 28.3964 6.80863 27.2805L9.75592 26.7206C9.93164 27.6456 10.1978 28.5563 10.5542 29.4387C11.2612 31.189 12.3244 32.8305 13.747 34.253C19.4096 39.9157 28.5904 39.9157 34.253 34.253C39.9156 28.5904 39.9157 19.4096 34.253 13.747Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 23.672V14.7613H22.5V23.672C22.5 24.6002 22.8687 25.4905 23.5251 26.1468L29.4393 32.0612L31.5607 29.9399L25.6464 24.0255C25.5527 23.9318 25.5 23.8046 25.5 23.672Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/home/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface HomeProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Home = ({ fill = false, thick = false, size = 24 }: HomeProps) => {
+export const Home = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: HomeProps) => {
   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="M24 3.80743L1.30511 15.6707L2.69488 18.3293L5 17.1244V40.9997C5 42.1042 5.89543 42.9997 7 42.9997H20V31.9997H28V42.9997H41C42.1046 42.9997 43 42.1042 43 40.9997V17.1244L45.3051 18.3293L46.6949 15.6707L24 3.80743ZM8 15.8109L24 7.38982L40 15.8109V39.9997L31 39.9997V28.9997H17V39.9997L8 39.9997V15.8109Z" 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="M24.0001 3.80664L1.30518 15.6699L2.69494 18.3286L5.00006 17.1236V40.9989C5.00006 42.1034 5.89549 42.9989 7.00006 42.9989H20.0001V31.9989H28.0001V42.9989H41.0001C42.1046 42.9989 43.0001 42.1034 43.0001 40.9989V17.1236L45.3052 18.3286L46.6949 15.6699L24.0001 3.80664ZM8.00006 15.8101L24.0001 7.38903L40.0001 15.8101V39.9989L31.0001 39.9989V28.9989H17.0001V39.9989L8.00006 39.9989V15.8101Z" 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="M24 3.80743L1.30511 15.6707L2.69488 18.3293L5 17.1244V40.9997C5 42.1042 5.89543 42.9997 7 42.9997H20V31.9997H28V42.9997H41C42.1046 42.9997 43 42.1042 43 40.9997V17.1244L45.3051 18.3293L46.6949 15.6707L24 3.80743ZM8 15.8109L24 7.38982L40 15.8109V39.9997L31 39.9997V28.9997H17V39.9997L8 39.9997V15.8109Z" 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="M24.0001 3.80664L1.30518 15.6699L2.69494 18.3286L5.00006 17.1236V40.9989C5.00006 42.1034 5.89549 42.9989 7.00006 42.9989H20.0001V31.9989H28.0001V42.9989H41.0001C42.1046 42.9989 43.0001 42.1034 43.0001 40.9989V17.1236L45.3052 18.3286L46.6949 15.6699L24.0001 3.80664ZM8.00006 15.8101L24.0001 7.38903L40.0001 15.8101V39.9989L31.0001 39.9989V28.9989H17.0001V39.9989L8.00006 39.9989V15.8101Z" 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="M24 3.74323L1.07349 15.7275L2.9265 19.2724L4.99999 18.1886V40.9997C4.99999 42.1042 5.89543 42.9997 6.99999 42.9997H21V33L27 32.9997V42.9997H41C42.1046 42.9997 43 42.1042 43 40.9997V18.1886L45.0735 19.2724L46.9265 15.7275L24 3.74323ZM8.99999 16.4146L24 8.51985L39 16.4146V38.9997L31 38.9997V28.9997H17V38.9997L8.99999 38.9997V16.4146Z" 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="M24 3.74414L1.07349 15.7285L2.9265 19.2734L4.99999 18.1895V41.0006C4.99999 42.1051 5.89543 43.0006 6.99999 43.0006H21V33.0009L27 33.0006V43.0006H41C42.1046 43.0006 43 42.1051 43 41.0006V18.1895L45.0735 19.2734L46.9265 15.7285L24 3.74414ZM8.99999 16.4155L24 8.52076L39 16.4155V39.0006L31 39.0006V29.0006H17V39.0006L8.99999 39.0006V16.4155Z" 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="M24 3.80743L1.30511 15.6707L2.69488 18.3293L5 17.1244V40.9997C5 42.1042 5.89543 42.9997 7 42.9997H20V31.9997H28V42.9997H41C42.1046 42.9997 43 42.1042 43 40.9997V17.1244L45.3051 18.3293L46.6949 15.6707L24 3.80743ZM8 15.8109L24 7.38982L40 15.8109V39.9997L31 39.9997V28.9997H17V39.9997L8 39.9997V15.8109Z" 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="M24.0001 3.80664L1.30518 15.6699L2.69494 18.3286L5.00006 17.1236V40.9989C5.00006 42.1034 5.89549 42.9989 7.00006 42.9989H20.0001V31.9989H28.0001V42.9989H41.0001C42.1046 42.9989 43.0001 42.1034 43.0001 40.9989V17.1236L45.3052 18.3286L46.6949 15.6699L24.0001 3.80664ZM8.00006 15.8101L24.0001 7.38903L40.0001 15.8101V39.9989L31.0001 39.9989V28.9989H17.0001V39.9989L8.00006 39.9989V15.8101Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/info/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface InfoProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Info = ({ fill = false, thick = false, size = 24 }: InfoProps) => {
+export const Info = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: InfoProps) => {
   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.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" fill="currentColor"/>
-<path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" fill="currentColor"/>
-<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 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 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="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" style={{ fill: `var(--${color})` }}/>
+<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 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 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="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" fill="currentColor"/>
-<path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" fill="currentColor"/>
-<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 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 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="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" style={{ fill: `var(--${color})` }}/>
+<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 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 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="M24 12.4745C23.3592 12.4745 22.7853 12.7047 22.3313 13.16C21.8774 13.6151 21.6486 14.1895 21.6486 14.83C21.6486 15.4705 21.8774 16.0449 22.3313 16.5C22.7853 16.9552 23.3592 17.1855 24 17.1855C24.6408 17.1855 25.2147 16.9552 25.6687 16.5C26.1226 16.0449 26.3514 15.4705 26.3514 14.83C26.3514 14.1895 26.1226 13.6151 25.6687 13.16C25.2147 12.7047 24.6408 12.4745 24 12.4745Z" fill="currentColor"/>
-<path d="M22 35.5003V20.5003H26V35.5003H22Z" fill="currentColor"/>
-<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 24ZM40 24C40 32.8366 32.8366 40 24 40C15.1634 40 8 32.8366 8 24C8 15.1634 15.1634 8 24 8C32.8366 8 40 15.1634 40 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="M24 12.4745C23.3592 12.4745 22.7853 12.7047 22.3313 13.16C21.8774 13.6151 21.6486 14.1895 21.6486 14.83C21.6486 15.4705 21.8774 16.0449 22.3313 16.5C22.7853 16.9552 23.3592 17.1855 24 17.1855C24.6408 17.1855 25.2147 16.9552 25.6687 16.5C26.1226 16.0449 26.3514 15.4705 26.3514 14.83C26.3514 14.1895 26.1226 13.6151 25.6687 13.16C25.2147 12.7047 24.6408 12.4745 24 12.4745Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22 35.5003V20.5003H26V35.5003H22Z" style={{ fill: `var(--${color})` }}/>
+<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 24ZM40 24C40 32.8366 32.8366 40 24 40C15.1634 40 8 32.8366 8 24C8 15.1634 15.1634 8 24 8C32.8366 8 40 15.1634 40 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="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" fill="currentColor"/>
-<path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" fill="currentColor"/>
-<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 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 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="M24.0001 12.9999C23.4551 12.9999 22.967 13.1954 22.5808 13.5819C22.1947 13.9684 22.0001 14.4561 22.0001 14.9999C22.0001 15.5437 22.1947 16.0314 22.5808 16.4179C22.967 16.8044 23.4551 16.9999 24.0001 16.9999C24.5451 16.9999 25.0332 16.8044 25.4194 16.4179C25.8055 16.0314 26.0001 15.5437 26.0001 14.9999C26.0001 14.4561 25.8055 13.9684 25.4194 13.5819C25.0332 13.1954 24.5451 12.9999 24.0001 12.9999Z" style={{ fill: `var(--${color})` }}/>
+<path d="M22.5 35.5003V20.5003H25.5V35.5003H22.5Z" style={{ fill: `var(--${color})` }}/>
+<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 24ZM41 24C41 33.3888 33.3888 41 24 41C14.6112 41 7 33.3888 7 24C7 14.6112 14.6112 7 24 7C33.3888 7 41 14.6112 41 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/light/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface LightProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Light = ({ fill = false, thick = false, size = 24 }: LightProps) => {
+export const Light = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: LightProps) => {
   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.9621 11.0802C23.9613 8.3066 20.0387 8.3066 19.0379 11.0802L15.8671 19.8671L7.0802 23.0379C4.3066 24.0387 4.3066 27.9613 7.0802 28.9621L15.8671 32.1329L19.0379 40.9198C20.0387 43.6934 23.9613 43.6934 24.9621 40.9198L28.1329 32.1329L36.9198 28.9621C39.6934 27.9613 39.6934 24.0387 36.9198 23.0379L28.1329 19.8671L24.9621 11.0802Z" fill="currentColor"/>
-<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" 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.9621 11.0802C23.9613 8.3066 20.0387 8.3066 19.0379 11.0802L15.8671 19.8671L7.0802 23.0379C4.3066 24.0387 4.3066 27.9613 7.0802 28.9621L15.8671 32.1329L19.0379 40.9198C20.0387 43.6934 23.9613 43.6934 24.9621 40.9198L28.1329 32.1329L36.9198 28.9621C39.6934 27.9613 39.6934 24.0387 36.9198 23.0379L28.1329 19.8671L24.9621 11.0802Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" 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.4918 11.2499C23.6499 8.91669 20.3501 8.9167 19.5082 11.2499L16.2577 20.2577L7.24991 23.5082C4.91669 24.3501 4.9167 27.6499 7.24991 28.4918L16.2577 31.7423L19.5082 40.7501C20.3501 43.0833 23.6499 43.0833 24.4918 40.7501L27.7423 31.7423L36.7501 28.4918C39.0833 27.6499 39.0833 24.3501 36.7501 23.5082L27.7423 20.2577L24.4918 11.2499Z" fill="currentColor"/>
-<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" 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.4918 11.2499C23.6499 8.91669 20.3501 8.9167 19.5082 11.2499L16.2577 20.2577L7.24991 23.5082C4.91669 24.3501 4.9167 27.6499 7.24991 28.4918L16.2577 31.7423L19.5082 40.7501C20.3501 43.0833 23.6499 43.0833 24.4918 40.7501L27.7423 31.7423L36.7501 28.4918C39.0833 27.6499 39.0833 24.3501 36.7501 23.5082L27.7423 20.2577L24.4918 11.2499Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" 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="M19.0379 11.0802C20.0387 8.3066 23.9613 8.3066 24.9621 11.0802L28.1329 19.8671L36.9198 23.0379C39.6934 24.0387 39.6934 27.9613 36.9198 28.9621L28.1329 32.1329L24.9621 40.9198C23.9613 43.6934 20.0387 43.6934 19.0379 40.9198L15.8671 32.1329L7.0802 28.9621C4.3066 27.9613 4.3066 24.0387 7.0802 23.0379L15.8671 19.8671L19.0379 11.0802ZM22 14.656L19.494 21.6007C19.176 22.482 18.482 23.176 17.6007 23.494L10.656 26L17.6007 28.506C18.482 28.824 19.176 29.518 19.494 30.3993L22 37.344L24.506 30.3993C24.824 29.5179 25.518 28.824 26.3993 28.506L33.344 26L26.3993 23.494C25.5179 23.176 24.824 22.482 24.506 21.6007L22 14.656Z" fill="currentColor"/>
-<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" 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="M19.0379 11.0802C20.0387 8.3066 23.9613 8.3066 24.9621 11.0802L28.1329 19.8671L36.9198 23.0379C39.6934 24.0387 39.6934 27.9613 36.9198 28.9621L28.1329 32.1329L24.9621 40.9198C23.9613 43.6934 20.0387 43.6934 19.0379 40.9198L15.8671 32.1329L7.0802 28.9621C4.3066 27.9613 4.3066 24.0387 7.0802 23.0379L15.8671 19.8671L19.0379 11.0802ZM22 14.656L19.494 21.6007C19.176 22.482 18.482 23.176 17.6007 23.494L10.656 26L17.6007 28.506C18.482 28.824 19.176 29.518 19.494 30.3993L22 37.344L24.506 30.3993C24.824 29.5179 25.518 28.824 26.3993 28.506L33.344 26L26.3993 23.494C25.5179 23.176 24.824 22.482 24.506 21.6007L22 14.656Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" 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="M19.5082 11.2499C20.3501 8.9167 23.6499 8.91669 24.4918 11.2499L27.7423 20.2577L36.7501 23.5082C39.0833 24.3501 39.0833 27.6499 36.7501 28.4918L27.7423 31.7423L24.4918 40.7501C23.6499 43.0833 20.3501 43.0833 19.5082 40.7501L16.2577 31.7423L7.24991 28.4918C4.9167 27.6499 4.91669 24.3501 7.24991 23.5082L16.2577 20.2577L19.5082 11.2499ZM22 13.1829L19.0237 21.431C18.7562 22.1724 18.1724 22.7562 17.431 23.0237L9.18293 26L17.431 28.9763C18.1724 29.2439 18.7562 29.8276 19.0237 30.569L22 38.8171L24.9763 30.569C25.2439 29.8276 25.8276 29.2439 26.569 28.9763L34.8171 26L26.569 23.0237C25.8276 22.7561 25.2439 22.1724 24.9763 21.431L22 13.1829Z" fill="currentColor"/>
-<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" 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="M19.5082 11.2499C20.3501 8.9167 23.6499 8.91669 24.4918 11.2499L27.7423 20.2577L36.7501 23.5082C39.0833 24.3501 39.0833 27.6499 36.7501 28.4918L27.7423 31.7423L24.4918 40.7501C23.6499 43.0833 20.3501 43.0833 19.5082 40.7501L16.2577 31.7423L7.24991 28.4918C4.9167 27.6499 4.91669 24.3501 7.24991 23.5082L16.2577 20.2577L19.5082 11.2499ZM22 13.1829L19.0237 21.431C18.7562 22.1724 18.1724 22.7562 17.431 23.0237L9.18293 26L17.431 28.9763C18.1724 29.2439 18.7562 29.8276 19.0237 30.569L22 38.8171L24.9763 30.569C25.2439 29.8276 25.8276 29.2439 26.569 28.9763L34.8171 26L26.569 23.0237C25.8276 22.7561 25.2439 22.1724 24.9763 21.431L22 13.1829Z" style={{ fill: `var(--${color})` }}/>
+<path d="M36.6852 5.48117C36.4537 4.83961 35.5463 4.83961 35.3148 5.48117L33.8177 9.63003C33.7862 9.7174 33.7174 9.78619 33.63 9.81771L29.4812 11.3148C28.8396 11.5463 28.8396 12.4537 29.4812 12.6852L33.63 14.1823C33.7174 14.2138 33.7862 14.2826 33.8177 14.37L35.3148 18.5188C35.5463 19.1604 36.4537 19.1604 36.6852 18.5188L38.1823 14.37C38.2138 14.2826 38.2826 14.2138 38.37 14.1823L42.5188 12.6852C43.1604 12.4537 43.1604 11.5463 42.5188 11.3148L38.37 9.81771C38.2826 9.78619 38.2138 9.7174 38.1823 9.63003L36.6852 5.48117Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };