@liner-fe/icon 0.0.4 → 0.0.5

package/assets/chrome/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ChromeProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Chrome = ({ fill = false, thick = false, size = 24 }: ChromeProps) => {
+export const Chrome = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ChromeProps) => {
   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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" fill="currentColor"/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" fill="currentColor"/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" fill="currentColor"/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" 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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" fill="currentColor"/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" fill="currentColor"/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" fill="currentColor"/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" 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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" fill="currentColor"/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" fill="currentColor"/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" fill="currentColor"/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" 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="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" fill="currentColor"/>
-<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" fill="currentColor"/>
-<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" fill="currentColor"/>
-<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${color})` }}/>
+<path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${color})` }}/>
+<path d="M24 4C31.4028 4 37.8661 8.02202 41.3242 14H24C19.3602 14 15.4592 17.1601 14.3301 21.4453L8.46973 11.3984C12.1367 6.88471 17.7312 4 24 4Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/clock/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ClockProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Clock = ({ fill = false, thick = false, size = 24 }: ClockProps) => {
+export const Clock = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ClockProps) => {
   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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 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="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 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="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 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="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/close/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CloseProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Close = ({ fill = false, thick = false, size = 24 }: CloseProps) => {
+export const Close = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CloseProps) => {
   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 24ZM24.0304 21.2242L29.6689 15.5858L32.4973 18.4142L26.8588 24.0527L32.4504 29.6443L29.622 32.4727L24.0304 26.8811L18.4859 32.4256L15.6574 29.5972L21.202 24.0527L15.6106 18.4613L18.439 15.6329L24.0304 21.2242Z" 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.0304 21.2242L29.6689 15.5858L32.4973 18.4142L26.8588 24.0527L32.4504 29.6443L29.622 32.4727L24.0304 26.8811L18.4859 32.4256L15.6574 29.5972L21.202 24.0527L15.6106 18.4613L18.439 15.6329L24.0304 21.2242Z" 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.0304 21.9314L30.0224 15.9393L32.1437 18.0607L26.1517 24.0527L32.0969 29.9978L29.9756 32.1192L24.0304 26.174L18.1323 32.0721L16.011 29.9508L21.9091 24.0527L15.9641 18.1077L18.0855 15.9864L24.0304 21.9314Z" 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.0304 21.9314L30.0224 15.9393L32.1437 18.0607L26.1517 24.0527L32.0969 29.9978L29.9756 32.1192L24.0304 26.174L18.1323 32.0721L16.011 29.9508L21.9091 24.0527L15.9641 18.1077L18.0855 15.9864L24.0304 21.9314Z" 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.0005 21.1712L12.4152 9.58594L9.58679 12.4144L21.1721 23.9997L9.58679 35.585L12.4152 38.4134L24.0005 26.8281L35.5858 38.4134L38.4142 35.585L26.8289 23.9997L38.4142 12.4144L35.5858 9.58594L24.0005 21.1712Z" 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.0005 21.1712L12.4152 9.58594L9.58679 12.4144L21.1721 23.9997L9.58679 35.585L12.4152 38.4134L24.0005 26.8281L35.5858 38.4134L38.4142 35.585L26.8289 23.9997L38.4142 12.4144L35.5858 9.58594L24.0005 21.1712Z" 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.0005 21.8783L12.0617 9.93945L9.94034 12.0608L21.8792 23.9996L9.94034 35.9385L12.0617 38.0598L24.0005 26.1209L35.9394 38.0598L38.0607 35.9385L26.1218 23.9996L38.0607 12.0608L35.9394 9.93946L24.0005 21.8783Z" 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.0005 21.8783L12.0617 9.93945L9.94034 12.0608L21.8792 23.9996L9.94034 35.9385L12.0617 38.0598L24.0005 26.1209L35.9394 38.0598L38.0607 35.9385L26.1218 23.9996L38.0607 12.0608L35.9394 9.93946L24.0005 21.8783Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/close-fill/index.tsx

@@ -1,34 +1,35 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CloseFillProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const CloseFill = ({ fill = false, thick = false, size = 24 }: CloseFillProps) => {
+export const CloseFill = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CloseFillProps) => {
   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 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="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6574 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" 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="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6574 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" 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="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6574 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" 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="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6574 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </svg>
 ;

package/assets/copy/index.tsx

@@ -1,32 +1,33 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CopyProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Copy = ({ fill = false, thick = false, size = 24 }: CopyProps) => {
+export const Copy = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CopyProps) => {
   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="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM15 8V12H34C35.1046 12 36 12.8954 36 14V33H40V8H15ZM8 40V15H33V40H8Z" 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="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM15 8V12H34C35.1046 12 36 12.8954 36 14V33H40V8H15ZM8 40V15H33V40H8Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 12C5.89543 12 5 12.8954 5 14V41C5 42.1046 5.89543 43 7 43H34C35.1046 43 36 42.1046 36 41V14C36 12.8954 35.1046 12 34 12H7Z" fill="currentColor"/>
-<path d="M11 9L39 9V37H40C41.1046 37 42 36.1046 42 35V8C42 6.89543 41.1046 6 40 6H13C11.8954 6 11 6.89543 11 8V9Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 12C5.89543 12 5 12.8954 5 14V41C5 42.1046 5.89543 43 7 43H34C35.1046 43 36 42.1046 36 41V14C36 12.8954 35.1046 12 34 12H7Z" style={{ fill: `var(--${color})` }}/>
+<path d="M11 9L39 9V37H40C41.1046 37 42 36.1046 42 35V8C42 6.89543 41.1046 6 40 6H13C11.8954 6 11 6.89543 11 8V9Z" 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="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM16 9V12H34C35.1046 12 36 12.8954 36 14V32H39V9H16ZM9 39V16H32V39H9Z" 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="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM16 9V12H34C35.1046 12 36 12.8954 36 14V32H39V9H16ZM9 39V16H32V39H9Z" 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="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM15 8V12H34C35.1046 12 36 12.8954 36 14V33H40V8H15ZM8 40V15H33V40H8Z" 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="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM15 8V12H34C35.1046 12 36 12.8954 36 14V33H40V8H15ZM8 40V15H33V40H8Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/credit/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CreditProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Credit = ({ fill = false, thick = false, size = 24 }: CreditProps) => {
+export const Credit = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CreditProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.249 12.25V18.4996H39.249V12.25H45.5V9.25H39.249V3H36.249V9.25H30.0004V12.25H36.249Z" fill="currentColor"/>
-<path d="M42.9695 19.4647C43.3165 20.9211 43.5 22.4399 43.5 24C43.5 34.7696 34.7696 43.5 24 43.5C13.2304 43.5 4.5 34.7696 4.5 24C4.5 21.7236 4.89071 19.5351 5.60997 17.5001C8.2862 9.9284 15.5072 4.5 24 4.5C25.5616 4.5 27.0802 4.68354 28.5355 5.03018C28.0084 5.89216 27.6022 6.83606 27.3403 7.83832C26.2615 7.61651 25.1443 7.5 24 7.5C16.8181 7.5 10.7043 12.0893 8.43849 18.4999C7.83114 20.2182 7.5 22.0688 7.5 24C7.5 33.1127 14.8873 40.5 24 40.5C33.1127 40.5 40.5 33.1127 40.5 24C40.5 22.8546 40.3835 21.7375 40.162 20.6596C41.164 20.3978 42.1077 19.9916 42.9695 19.4647Z" fill="currentColor"/>
-<path d="M25.2301 15.1661C25.9932 15.3168 26.7208 15.5646 27.4116 15.9098C28.2307 16.3116 28.8917 16.8065 29.3712 17.4058L29.6147 17.7102L27.6907 20.2426L27.2862 19.8019C26.9265 19.4099 26.4961 19.0807 25.9906 18.8156C25.8581 18.7462 25.7205 18.6811 25.5777 18.6205L25.572 18.6181C24.8923 18.3199 24.201 18.1728 23.4946 18.1728C22.7125 18.1728 22.118 18.3572 21.6723 18.6869C21.2379 19.0082 21.0474 19.3889 21.0474 19.8605C21.0474 20.1892 21.1266 20.4592 21.2726 20.6873C21.4314 20.9277 21.6447 21.1317 21.9215 21.2988C22.2386 21.4775 22.6021 21.6423 23.0139 21.7917C23.4497 21.9393 23.9084 22.0836 24.39 22.2244C24.8947 22.3621 25.3956 22.5113 25.8926 22.6719C26.2307 22.7811 26.5576 22.9075 26.8733 23.0513C27.0412 23.1277 27.2059 23.2091 27.3673 23.2953C27.847 23.5475 28.2752 23.847 28.649 24.1952C29.0578 24.5608 29.3728 25.0248 29.6007 25.573C29.8348 26.1286 29.9455 26.7516 29.9455 27.4323C29.9455 28.768 29.4612 29.9379 28.5129 30.9195C27.659 31.8037 26.555 32.3545 25.2301 32.5899V35.2888H22.1671V32.5858C21.2732 32.4233 20.417 32.1394 19.5999 31.7342L19.5954 31.732C18.6611 31.2569 17.8595 30.6818 17.1972 30.0033L16.8789 29.6772L18.9312 27.2638L19.3141 27.6232C20.7202 28.9432 22.2045 29.5734 23.778 29.5734C24.6847 29.5734 25.3772 29.3532 25.8969 28.9532C26.4068 28.5533 26.6445 28.0656 26.6445 27.455C26.6445 27.144 26.5668 26.8921 26.424 26.6806L26.4192 26.6733C26.2737 26.4495 26.0692 26.2638 25.791 26.1187L25.7795 26.1125C25.473 25.9422 25.111 25.7881 24.6902 25.6526L24.6805 25.6493C24.2552 25.5027 23.8028 25.3665 23.3227 25.241L23.3139 25.2386C22.8262 25.1014 22.3349 24.9567 21.84 24.8044L21.8311 24.8016C21.3214 24.6343 20.8309 24.427 20.3602 24.1797L20.3571 24.1781C19.8862 23.9264 19.4603 23.6321 19.0813 23.2942L19.0772 23.2906C18.6751 22.9242 18.3638 22.4596 18.1361 21.9113L18.1326 21.9027C17.9093 21.3359 17.8031 20.7054 17.8031 20.0192C17.8031 18.7456 18.26 17.644 19.1616 16.742C19.9627 15.9337 20.9718 15.4128 22.1671 15.1674V12.4688H25.2301V15.1661Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.249 12.25V18.4996H39.249V12.25H45.5V9.25H39.249V3H36.249V9.25H30.0004V12.25H36.249Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42.9695 19.4647C43.3165 20.9211 43.5 22.4399 43.5 24C43.5 34.7696 34.7696 43.5 24 43.5C13.2304 43.5 4.5 34.7696 4.5 24C4.5 21.7236 4.89071 19.5351 5.60997 17.5001C8.2862 9.9284 15.5072 4.5 24 4.5C25.5616 4.5 27.0802 4.68354 28.5355 5.03018C28.0084 5.89216 27.6022 6.83606 27.3403 7.83832C26.2615 7.61651 25.1443 7.5 24 7.5C16.8181 7.5 10.7043 12.0893 8.43849 18.4999C7.83114 20.2182 7.5 22.0688 7.5 24C7.5 33.1127 14.8873 40.5 24 40.5C33.1127 40.5 40.5 33.1127 40.5 24C40.5 22.8546 40.3835 21.7375 40.162 20.6596C41.164 20.3978 42.1077 19.9916 42.9695 19.4647Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.2301 15.1661C25.9932 15.3168 26.7208 15.5646 27.4116 15.9098C28.2307 16.3116 28.8917 16.8065 29.3712 17.4058L29.6147 17.7102L27.6907 20.2426L27.2862 19.8019C26.9265 19.4099 26.4961 19.0807 25.9906 18.8156C25.8581 18.7462 25.7205 18.6811 25.5777 18.6205L25.572 18.6181C24.8923 18.3199 24.201 18.1728 23.4946 18.1728C22.7125 18.1728 22.118 18.3572 21.6723 18.6869C21.2379 19.0082 21.0474 19.3889 21.0474 19.8605C21.0474 20.1892 21.1266 20.4592 21.2726 20.6873C21.4314 20.9277 21.6447 21.1317 21.9215 21.2988C22.2386 21.4775 22.6021 21.6423 23.0139 21.7917C23.4497 21.9393 23.9084 22.0836 24.39 22.2244C24.8947 22.3621 25.3956 22.5113 25.8926 22.6719C26.2307 22.7811 26.5576 22.9075 26.8733 23.0513C27.0412 23.1277 27.2059 23.2091 27.3673 23.2953C27.847 23.5475 28.2752 23.847 28.649 24.1952C29.0578 24.5608 29.3728 25.0248 29.6007 25.573C29.8348 26.1286 29.9455 26.7516 29.9455 27.4323C29.9455 28.768 29.4612 29.9379 28.5129 30.9195C27.659 31.8037 26.555 32.3545 25.2301 32.5899V35.2888H22.1671V32.5858C21.2732 32.4233 20.417 32.1394 19.5999 31.7342L19.5954 31.732C18.6611 31.2569 17.8595 30.6818 17.1972 30.0033L16.8789 29.6772L18.9312 27.2638L19.3141 27.6232C20.7202 28.9432 22.2045 29.5734 23.778 29.5734C24.6847 29.5734 25.3772 29.3532 25.8969 28.9532C26.4068 28.5533 26.6445 28.0656 26.6445 27.455C26.6445 27.144 26.5668 26.8921 26.424 26.6806L26.4192 26.6733C26.2737 26.4495 26.0692 26.2638 25.791 26.1187L25.7795 26.1125C25.473 25.9422 25.111 25.7881 24.6902 25.6526L24.6805 25.6493C24.2552 25.5027 23.8028 25.3665 23.3227 25.241L23.3139 25.2386C22.8262 25.1014 22.3349 24.9567 21.84 24.8044L21.8311 24.8016C21.3214 24.6343 20.8309 24.427 20.3602 24.1797L20.3571 24.1781C19.8862 23.9264 19.4603 23.6321 19.0813 23.2942L19.0772 23.2906C18.6751 22.9242 18.3638 22.4596 18.1361 21.9113L18.1326 21.9027C17.9093 21.3359 17.8031 20.7054 17.8031 20.0192C17.8031 18.7456 18.26 17.644 19.1616 16.742C19.9627 15.9337 20.9718 15.4128 22.1671 15.1674V12.4688H25.2301V15.1661Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.249 12.25V18.4996H39.249V12.25H45.5V9.25H39.249V3H36.249V9.25H30.0004V12.25H36.249Z" fill="currentColor"/>
-<path d="M42.9695 19.4647C43.3165 20.9211 43.5 22.4399 43.5 24C43.5 34.7696 34.7696 43.5 24 43.5C13.2304 43.5 4.5 34.7696 4.5 24C4.5 21.7236 4.89071 19.5351 5.60997 17.5001C8.2862 9.9284 15.5072 4.5 24 4.5C25.5616 4.5 27.0802 4.68354 28.5355 5.03018C28.0084 5.89216 27.6022 6.83606 27.3403 7.83832C26.2615 7.61651 25.1443 7.5 24 7.5C16.8181 7.5 10.7043 12.0893 8.43849 18.4999C7.83114 20.2182 7.5 22.0688 7.5 24C7.5 33.1127 14.8873 40.5 24 40.5C33.1127 40.5 40.5 33.1127 40.5 24C40.5 22.8546 40.3835 21.7375 40.162 20.6596C41.164 20.3978 42.1077 19.9916 42.9695 19.4647Z" fill="currentColor"/>
-<path d="M25.2301 15.1661C25.9932 15.3168 26.7208 15.5646 27.4116 15.9098C28.2307 16.3116 28.8917 16.8065 29.3712 17.4058L29.6147 17.7102L27.6907 20.2426L27.2862 19.8019C26.9265 19.4099 26.4961 19.0807 25.9906 18.8156C25.8581 18.7462 25.7205 18.6811 25.5777 18.6205L25.572 18.6181C24.8923 18.3199 24.201 18.1728 23.4946 18.1728C22.7125 18.1728 22.118 18.3572 21.6723 18.6869C21.2379 19.0082 21.0474 19.3889 21.0474 19.8605C21.0474 20.1892 21.1266 20.4592 21.2726 20.6873C21.4314 20.9277 21.6447 21.1317 21.9215 21.2988C22.2386 21.4775 22.6021 21.6423 23.0139 21.7917C23.4497 21.9393 23.9084 22.0836 24.39 22.2244C24.8947 22.3621 25.3956 22.5113 25.8926 22.6719C26.2307 22.7811 26.5576 22.9075 26.8733 23.0513C27.0412 23.1277 27.2059 23.2091 27.3673 23.2953C27.847 23.5475 28.2752 23.847 28.649 24.1952C29.0578 24.5608 29.3728 25.0248 29.6007 25.573C29.8348 26.1286 29.9455 26.7516 29.9455 27.4323C29.9455 28.768 29.4612 29.9379 28.5129 30.9195C27.659 31.8037 26.555 32.3545 25.2301 32.5899V35.2888H22.1671V32.5858C21.2732 32.4233 20.417 32.1394 19.5999 31.7342L19.5954 31.732C18.6611 31.2569 17.8595 30.6818 17.1972 30.0033L16.8789 29.6772L18.9312 27.2638L19.3141 27.6232C20.7202 28.9432 22.2045 29.5734 23.778 29.5734C24.6847 29.5734 25.3772 29.3532 25.8969 28.9532C26.4068 28.5533 26.6445 28.0656 26.6445 27.455C26.6445 27.144 26.5668 26.8921 26.424 26.6806L26.4192 26.6733C26.2737 26.4495 26.0692 26.2638 25.791 26.1187L25.7795 26.1125C25.473 25.9422 25.111 25.7881 24.6902 25.6526L24.6805 25.6493C24.2552 25.5027 23.8028 25.3665 23.3227 25.241L23.3139 25.2386C22.8262 25.1014 22.3349 24.9567 21.84 24.8044L21.8311 24.8016C21.3214 24.6343 20.8309 24.427 20.3602 24.1797L20.3571 24.1781C19.8862 23.9264 19.4603 23.6321 19.0813 23.2942L19.0772 23.2906C18.6751 22.9242 18.3638 22.4596 18.1361 21.9113L18.1326 21.9027C17.9093 21.3359 17.8031 20.7054 17.8031 20.0192C17.8031 18.7456 18.26 17.644 19.1616 16.742C19.9627 15.9337 20.9718 15.4128 22.1671 15.1674V12.4688H25.2301V15.1661Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.249 12.25V18.4996H39.249V12.25H45.5V9.25H39.249V3H36.249V9.25H30.0004V12.25H36.249Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42.9695 19.4647C43.3165 20.9211 43.5 22.4399 43.5 24C43.5 34.7696 34.7696 43.5 24 43.5C13.2304 43.5 4.5 34.7696 4.5 24C4.5 21.7236 4.89071 19.5351 5.60997 17.5001C8.2862 9.9284 15.5072 4.5 24 4.5C25.5616 4.5 27.0802 4.68354 28.5355 5.03018C28.0084 5.89216 27.6022 6.83606 27.3403 7.83832C26.2615 7.61651 25.1443 7.5 24 7.5C16.8181 7.5 10.7043 12.0893 8.43849 18.4999C7.83114 20.2182 7.5 22.0688 7.5 24C7.5 33.1127 14.8873 40.5 24 40.5C33.1127 40.5 40.5 33.1127 40.5 24C40.5 22.8546 40.3835 21.7375 40.162 20.6596C41.164 20.3978 42.1077 19.9916 42.9695 19.4647Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.2301 15.1661C25.9932 15.3168 26.7208 15.5646 27.4116 15.9098C28.2307 16.3116 28.8917 16.8065 29.3712 17.4058L29.6147 17.7102L27.6907 20.2426L27.2862 19.8019C26.9265 19.4099 26.4961 19.0807 25.9906 18.8156C25.8581 18.7462 25.7205 18.6811 25.5777 18.6205L25.572 18.6181C24.8923 18.3199 24.201 18.1728 23.4946 18.1728C22.7125 18.1728 22.118 18.3572 21.6723 18.6869C21.2379 19.0082 21.0474 19.3889 21.0474 19.8605C21.0474 20.1892 21.1266 20.4592 21.2726 20.6873C21.4314 20.9277 21.6447 21.1317 21.9215 21.2988C22.2386 21.4775 22.6021 21.6423 23.0139 21.7917C23.4497 21.9393 23.9084 22.0836 24.39 22.2244C24.8947 22.3621 25.3956 22.5113 25.8926 22.6719C26.2307 22.7811 26.5576 22.9075 26.8733 23.0513C27.0412 23.1277 27.2059 23.2091 27.3673 23.2953C27.847 23.5475 28.2752 23.847 28.649 24.1952C29.0578 24.5608 29.3728 25.0248 29.6007 25.573C29.8348 26.1286 29.9455 26.7516 29.9455 27.4323C29.9455 28.768 29.4612 29.9379 28.5129 30.9195C27.659 31.8037 26.555 32.3545 25.2301 32.5899V35.2888H22.1671V32.5858C21.2732 32.4233 20.417 32.1394 19.5999 31.7342L19.5954 31.732C18.6611 31.2569 17.8595 30.6818 17.1972 30.0033L16.8789 29.6772L18.9312 27.2638L19.3141 27.6232C20.7202 28.9432 22.2045 29.5734 23.778 29.5734C24.6847 29.5734 25.3772 29.3532 25.8969 28.9532C26.4068 28.5533 26.6445 28.0656 26.6445 27.455C26.6445 27.144 26.5668 26.8921 26.424 26.6806L26.4192 26.6733C26.2737 26.4495 26.0692 26.2638 25.791 26.1187L25.7795 26.1125C25.473 25.9422 25.111 25.7881 24.6902 25.6526L24.6805 25.6493C24.2552 25.5027 23.8028 25.3665 23.3227 25.241L23.3139 25.2386C22.8262 25.1014 22.3349 24.9567 21.84 24.8044L21.8311 24.8016C21.3214 24.6343 20.8309 24.427 20.3602 24.1797L20.3571 24.1781C19.8862 23.9264 19.4603 23.6321 19.0813 23.2942L19.0772 23.2906C18.6751 22.9242 18.3638 22.4596 18.1361 21.9113L18.1326 21.9027C17.9093 21.3359 17.8031 20.7054 17.8031 20.0192C17.8031 18.7456 18.26 17.644 19.1616 16.742C19.9627 15.9337 20.9718 15.4128 22.1671 15.1674V12.4688H25.2301V15.1661Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M35.7487 12.75V18.4996H39.7486V12.75H45.4996V8.75H39.7486V3H35.7487V8.75H30V12.75H35.7487Z" fill="currentColor"/>
-<path d="M43.4142 19.1772C43.7971 20.7233 44 22.3391 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.666 4.40064 19.4213 5.13855 17.3335C7.88318 9.56825 15.2888 4 24 4C25.6631 4 27.2786 4.20295 28.8231 4.58538C28.0637 5.69726 27.5125 6.9626 27.2255 8.32529C26.1835 8.112 25.1048 8 24 8C17.0366 8 11.1073 12.4494 8.90991 18.6665C8.32121 20.3321 8 22.1264 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 22.8938 39.888 21.8152 39.6751 20.7744C41.0375 20.4874 42.3025 19.9364 43.4142 19.1772Z" fill="currentColor"/>
-<path d="M28.1062 15.5895C27.4742 15.2738 26.8127 15.0364 26.1234 14.8771V12.1113H22.3461V14.8817C21.2125 15.1613 20.2355 15.692 19.4446 16.4898C18.4766 17.4584 17.9821 18.6506 17.9821 20.0189C17.9821 20.7418 18.094 21.4179 18.3364 22.0333L18.3393 22.0407L18.3424 22.048C18.5871 22.6372 18.9264 23.1475 19.3728 23.5543L19.3798 23.5606C19.7813 23.9184 20.2308 24.2287 20.7249 24.4928L20.7302 24.4956C21.2187 24.7523 21.7275 24.9673 22.2559 25.1407L22.2635 25.1431L22.2711 25.1455C22.7687 25.2986 23.2628 25.4442 23.7533 25.5821L23.7609 25.5842L23.7685 25.5862C24.2406 25.7097 24.6843 25.8433 25.1002 25.9867L25.1085 25.9896L25.1168 25.9923C25.5198 26.122 25.8597 26.2675 26.1422 26.4244L26.152 26.4299L26.1619 26.435C26.3905 26.5543 26.5468 26.6998 26.6559 26.8677L26.66 26.8739L26.6641 26.8801C26.7632 27.0269 26.8235 27.2076 26.8235 27.4547C26.8235 27.9509 26.6399 28.3362 26.2139 28.6708C25.771 29.0113 25.1613 29.216 24.3141 29.216C22.8474 29.216 21.4472 28.6323 20.0947 27.3626L19.4383 26.7463L16.9321 29.6935L17.4778 30.2525C18.1706 30.9622 19.005 31.5595 19.9696 32.05L19.9774 32.0539C20.7348 32.4295 21.5249 32.7046 22.3461 32.8791V35.6457H26.1234V32.8831C27.3833 32.6096 28.4574 32.0459 29.306 31.1673C30.3163 30.1215 30.8388 28.8635 30.8388 27.4321C30.8388 26.7131 30.7219 26.0416 30.4662 25.4347C30.2212 24.8457 29.8783 24.3365 29.426 23.9311C29.028 23.5609 28.5745 23.2445 28.0706 22.9794C27.9379 22.9086 27.8033 22.841 27.6667 22.7766C27.3045 22.6059 26.9283 22.4577 26.5386 22.3318C26.0373 22.1698 25.5322 22.0194 25.0233 21.8805C24.5486 21.7416 24.0969 21.5995 23.6682 21.4543C23.2756 21.3117 22.9332 21.1562 22.6377 20.99C22.4063 20.8496 22.2348 20.6833 22.1082 20.4924C22.0034 20.3278 21.9407 20.1267 21.9407 19.8602C21.9407 19.5106 22.0702 19.233 22.4208 18.9737C22.7908 18.7 23.3053 18.5297 24.0307 18.5297C24.6858 18.5297 25.3283 18.6657 25.9646 18.9449L25.9743 18.949C26.3752 19.1191 26.7289 19.3249 27.0393 19.5654C27.2284 19.7119 27.4015 19.8712 27.5592 20.0431L28.2527 20.7987L30.6037 17.7043L30.1862 17.1824C29.6666 16.5329 28.9597 16.0083 28.1062 15.5895Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.7487 12.75V18.4996H39.7486V12.75H45.4996V8.75H39.7486V3H35.7487V8.75H30V12.75H35.7487Z" style={{ fill: `var(--${color})` }}/>
+<path d="M43.4142 19.1772C43.7971 20.7233 44 22.3391 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 21.666 4.40064 19.4213 5.13855 17.3335C7.88318 9.56825 15.2888 4 24 4C25.6631 4 27.2786 4.20295 28.8231 4.58538C28.0637 5.69726 27.5125 6.9626 27.2255 8.32529C26.1835 8.112 25.1048 8 24 8C17.0366 8 11.1073 12.4494 8.90991 18.6665C8.32121 20.3321 8 22.1264 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 22.8938 39.888 21.8152 39.6751 20.7744C41.0375 20.4874 42.3025 19.9364 43.4142 19.1772Z" style={{ fill: `var(--${color})` }}/>
+<path d="M28.1062 15.5895C27.4742 15.2738 26.8127 15.0364 26.1234 14.8771V12.1113H22.3461V14.8817C21.2125 15.1613 20.2355 15.692 19.4446 16.4898C18.4766 17.4584 17.9821 18.6506 17.9821 20.0189C17.9821 20.7418 18.094 21.4179 18.3364 22.0333L18.3393 22.0407L18.3424 22.048C18.5871 22.6372 18.9264 23.1475 19.3728 23.5543L19.3798 23.5606C19.7813 23.9184 20.2308 24.2287 20.7249 24.4928L20.7302 24.4956C21.2187 24.7523 21.7275 24.9673 22.2559 25.1407L22.2635 25.1431L22.2711 25.1455C22.7687 25.2986 23.2628 25.4442 23.7533 25.5821L23.7609 25.5842L23.7685 25.5862C24.2406 25.7097 24.6843 25.8433 25.1002 25.9867L25.1085 25.9896L25.1168 25.9923C25.5198 26.122 25.8597 26.2675 26.1422 26.4244L26.152 26.4299L26.1619 26.435C26.3905 26.5543 26.5468 26.6998 26.6559 26.8677L26.66 26.8739L26.6641 26.8801C26.7632 27.0269 26.8235 27.2076 26.8235 27.4547C26.8235 27.9509 26.6399 28.3362 26.2139 28.6708C25.771 29.0113 25.1613 29.216 24.3141 29.216C22.8474 29.216 21.4472 28.6323 20.0947 27.3626L19.4383 26.7463L16.9321 29.6935L17.4778 30.2525C18.1706 30.9622 19.005 31.5595 19.9696 32.05L19.9774 32.0539C20.7348 32.4295 21.5249 32.7046 22.3461 32.8791V35.6457H26.1234V32.8831C27.3833 32.6096 28.4574 32.0459 29.306 31.1673C30.3163 30.1215 30.8388 28.8635 30.8388 27.4321C30.8388 26.7131 30.7219 26.0416 30.4662 25.4347C30.2212 24.8457 29.8783 24.3365 29.426 23.9311C29.028 23.5609 28.5745 23.2445 28.0706 22.9794C27.9379 22.9086 27.8033 22.841 27.6667 22.7766C27.3045 22.6059 26.9283 22.4577 26.5386 22.3318C26.0373 22.1698 25.5322 22.0194 25.0233 21.8805C24.5486 21.7416 24.0969 21.5995 23.6682 21.4543C23.2756 21.3117 22.9332 21.1562 22.6377 20.99C22.4063 20.8496 22.2348 20.6833 22.1082 20.4924C22.0034 20.3278 21.9407 20.1267 21.9407 19.8602C21.9407 19.5106 22.0702 19.233 22.4208 18.9737C22.7908 18.7 23.3053 18.5297 24.0307 18.5297C24.6858 18.5297 25.3283 18.6657 25.9646 18.9449L25.9743 18.949C26.3752 19.1191 26.7289 19.3249 27.0393 19.5654C27.2284 19.7119 27.4015 19.8712 27.5592 20.0431L28.2527 20.7987L30.6037 17.7043L30.1862 17.1824C29.6666 16.5329 28.9597 16.0083 28.1062 15.5895Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.249 12.25V18.4996H39.249V12.25H45.5V9.25H39.249V3H36.249V9.25H30.0004V12.25H36.249Z" fill="currentColor"/>
-<path d="M42.9695 19.4647C43.3165 20.9211 43.5 22.4399 43.5 24C43.5 34.7696 34.7696 43.5 24 43.5C13.2304 43.5 4.5 34.7696 4.5 24C4.5 21.7236 4.89071 19.5351 5.60997 17.5001C8.2862 9.9284 15.5072 4.5 24 4.5C25.5616 4.5 27.0802 4.68354 28.5355 5.03018C28.0084 5.89216 27.6022 6.83606 27.3403 7.83832C26.2615 7.61651 25.1443 7.5 24 7.5C16.8181 7.5 10.7043 12.0893 8.43849 18.4999C7.83114 20.2182 7.5 22.0688 7.5 24C7.5 33.1127 14.8873 40.5 24 40.5C33.1127 40.5 40.5 33.1127 40.5 24C40.5 22.8546 40.3835 21.7375 40.162 20.6596C41.164 20.3978 42.1077 19.9916 42.9695 19.4647Z" fill="currentColor"/>
-<path d="M25.2301 15.1661C25.9932 15.3168 26.7208 15.5646 27.4116 15.9098C28.2307 16.3116 28.8917 16.8065 29.3712 17.4058L29.6147 17.7102L27.6907 20.2426L27.2862 19.8019C26.9265 19.4099 26.4961 19.0807 25.9906 18.8156C25.8581 18.7462 25.7205 18.6811 25.5777 18.6205L25.572 18.6181C24.8923 18.3199 24.201 18.1728 23.4946 18.1728C22.7125 18.1728 22.118 18.3572 21.6723 18.6869C21.2379 19.0082 21.0474 19.3889 21.0474 19.8605C21.0474 20.1892 21.1266 20.4592 21.2726 20.6873C21.4314 20.9277 21.6447 21.1317 21.9215 21.2988C22.2386 21.4775 22.6021 21.6423 23.0139 21.7917C23.4497 21.9393 23.9084 22.0836 24.39 22.2244C24.8947 22.3621 25.3956 22.5113 25.8926 22.6719C26.2307 22.7811 26.5576 22.9075 26.8733 23.0513C27.0412 23.1277 27.2059 23.2091 27.3673 23.2953C27.847 23.5475 28.2752 23.847 28.649 24.1952C29.0578 24.5608 29.3728 25.0248 29.6007 25.573C29.8348 26.1286 29.9455 26.7516 29.9455 27.4323C29.9455 28.768 29.4612 29.9379 28.5129 30.9195C27.659 31.8037 26.555 32.3545 25.2301 32.5899V35.2888H22.1671V32.5858C21.2732 32.4233 20.417 32.1394 19.5999 31.7342L19.5954 31.732C18.6611 31.2569 17.8595 30.6818 17.1972 30.0033L16.8789 29.6772L18.9312 27.2638L19.3141 27.6232C20.7202 28.9432 22.2045 29.5734 23.778 29.5734C24.6847 29.5734 25.3772 29.3532 25.8969 28.9532C26.4068 28.5533 26.6445 28.0656 26.6445 27.455C26.6445 27.144 26.5668 26.8921 26.424 26.6806L26.4192 26.6733C26.2737 26.4495 26.0692 26.2638 25.791 26.1187L25.7795 26.1125C25.473 25.9422 25.111 25.7881 24.6902 25.6526L24.6805 25.6493C24.2552 25.5027 23.8028 25.3665 23.3227 25.241L23.3139 25.2386C22.8262 25.1014 22.3349 24.9567 21.84 24.8044L21.8311 24.8016C21.3214 24.6343 20.8309 24.427 20.3602 24.1797L20.3571 24.1781C19.8862 23.9264 19.4603 23.6321 19.0813 23.2942L19.0772 23.2906C18.6751 22.9242 18.3638 22.4596 18.1361 21.9113L18.1326 21.9027C17.9093 21.3359 17.8031 20.7054 17.8031 20.0192C17.8031 18.7456 18.26 17.644 19.1616 16.742C19.9627 15.9337 20.9718 15.4128 22.1671 15.1674V12.4688H25.2301V15.1661Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.249 12.25V18.4996H39.249V12.25H45.5V9.25H39.249V3H36.249V9.25H30.0004V12.25H36.249Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42.9695 19.4647C43.3165 20.9211 43.5 22.4399 43.5 24C43.5 34.7696 34.7696 43.5 24 43.5C13.2304 43.5 4.5 34.7696 4.5 24C4.5 21.7236 4.89071 19.5351 5.60997 17.5001C8.2862 9.9284 15.5072 4.5 24 4.5C25.5616 4.5 27.0802 4.68354 28.5355 5.03018C28.0084 5.89216 27.6022 6.83606 27.3403 7.83832C26.2615 7.61651 25.1443 7.5 24 7.5C16.8181 7.5 10.7043 12.0893 8.43849 18.4999C7.83114 20.2182 7.5 22.0688 7.5 24C7.5 33.1127 14.8873 40.5 24 40.5C33.1127 40.5 40.5 33.1127 40.5 24C40.5 22.8546 40.3835 21.7375 40.162 20.6596C41.164 20.3978 42.1077 19.9916 42.9695 19.4647Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.2301 15.1661C25.9932 15.3168 26.7208 15.5646 27.4116 15.9098C28.2307 16.3116 28.8917 16.8065 29.3712 17.4058L29.6147 17.7102L27.6907 20.2426L27.2862 19.8019C26.9265 19.4099 26.4961 19.0807 25.9906 18.8156C25.8581 18.7462 25.7205 18.6811 25.5777 18.6205L25.572 18.6181C24.8923 18.3199 24.201 18.1728 23.4946 18.1728C22.7125 18.1728 22.118 18.3572 21.6723 18.6869C21.2379 19.0082 21.0474 19.3889 21.0474 19.8605C21.0474 20.1892 21.1266 20.4592 21.2726 20.6873C21.4314 20.9277 21.6447 21.1317 21.9215 21.2988C22.2386 21.4775 22.6021 21.6423 23.0139 21.7917C23.4497 21.9393 23.9084 22.0836 24.39 22.2244C24.8947 22.3621 25.3956 22.5113 25.8926 22.6719C26.2307 22.7811 26.5576 22.9075 26.8733 23.0513C27.0412 23.1277 27.2059 23.2091 27.3673 23.2953C27.847 23.5475 28.2752 23.847 28.649 24.1952C29.0578 24.5608 29.3728 25.0248 29.6007 25.573C29.8348 26.1286 29.9455 26.7516 29.9455 27.4323C29.9455 28.768 29.4612 29.9379 28.5129 30.9195C27.659 31.8037 26.555 32.3545 25.2301 32.5899V35.2888H22.1671V32.5858C21.2732 32.4233 20.417 32.1394 19.5999 31.7342L19.5954 31.732C18.6611 31.2569 17.8595 30.6818 17.1972 30.0033L16.8789 29.6772L18.9312 27.2638L19.3141 27.6232C20.7202 28.9432 22.2045 29.5734 23.778 29.5734C24.6847 29.5734 25.3772 29.3532 25.8969 28.9532C26.4068 28.5533 26.6445 28.0656 26.6445 27.455C26.6445 27.144 26.5668 26.8921 26.424 26.6806L26.4192 26.6733C26.2737 26.4495 26.0692 26.2638 25.791 26.1187L25.7795 26.1125C25.473 25.9422 25.111 25.7881 24.6902 25.6526L24.6805 25.6493C24.2552 25.5027 23.8028 25.3665 23.3227 25.241L23.3139 25.2386C22.8262 25.1014 22.3349 24.9567 21.84 24.8044L21.8311 24.8016C21.3214 24.6343 20.8309 24.427 20.3602 24.1797L20.3571 24.1781C19.8862 23.9264 19.4603 23.6321 19.0813 23.2942L19.0772 23.2906C18.6751 22.9242 18.3638 22.4596 18.1361 21.9113L18.1326 21.9027C17.9093 21.3359 17.8031 20.7054 17.8031 20.0192C17.8031 18.7456 18.26 17.644 19.1616 16.742C19.9627 15.9337 20.9718 15.4128 22.1671 15.1674V12.4688H25.2301V15.1661Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/creditcard/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface CreditcardProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Creditcard = ({ fill = false, thick = false, size = 24 }: CreditcardProps) => {
+export const Creditcard = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: CreditcardProps) => {
   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="M6 9C4.89543 9 4 9.89543 4 11V17H44V11C44 9.89543 43.1046 9 42 9H6Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 39C43.1046 39 44 38.1046 44 37V21H4V37C4 38.1046 4.89543 39 6 39H42ZM18 32V27H11V32H18Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9C4.89543 9 4 9.89543 4 11V17H44V11C44 9.89543 43.1046 9 42 9H6Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 39C43.1046 39 44 38.1046 44 37V21H4V37C4 38.1046 4.89543 39 6 39H42ZM18 32V27H11V32H18Z" 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="M6 9C4.89543 9 4 9.89543 4 11V17.5H44V11C44 9.89543 43.1046 9 42 9H6Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 39C43.1046 39 44 38.1046 44 37V20.5H4V37C4 38.1046 4.89543 39 6 39H42ZM18 32V27H11V32H18Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9C4.89543 9 4 9.89543 4 11V17.5H44V11C44 9.89543 43.1046 9 42 9H6Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 39C43.1046 39 44 38.1046 44 37V20.5H4V37C4 38.1046 4.89543 39 6 39H42ZM18 32V27H11V32H18Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 27H11V32H18V27Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M4 9V39H44V9H4ZM40 13H8V16.5H40V13ZM8 35V20.5H40V35H8Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 27H11V32H18V27Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M4 9V39H44V9H4ZM40 13H8V16.5H40V13ZM8 35V20.5H40V35H8Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 27H11V32H18V27Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M4 9V39H44V9H4ZM41 12H7V17H41V12ZM7 36V20H41V36H7Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 27H11V32H18V27Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M4 9V39H44V9H4ZM41 12H7V17H41V12ZM7 36V20H41V36H7Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/dark-mode/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface DarkModeProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const DarkMode = ({ fill = false, thick = false, size = 24 }: DarkModeProps) => {
+export const DarkMode = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: DarkModeProps) => {
   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="M15.7999 9.10393C15.2792 10.8136 14.9998 12.6262 14.9998 14.5C14.9998 24.7173 23.2825 33 33.4998 33C35.3736 33 37.1863 32.7205 38.8961 32.1997C36.0002 37.4492 30.4118 41 23.9999 41C14.6111 41 6.99994 33.3888 6.99994 24C6.99994 17.5882 10.5506 11.9999 15.7999 9.10393ZM19.2269 8.44529C19.9422 6.76131 18.6844 4.6268 16.9715 5.26983C9.39313 8.11493 3.99994 15.4276 3.99994 24C3.99994 35.0457 12.9542 44 23.9999 44C32.5724 44 39.8852 38.6066 42.7302 31.028C43.3732 29.3151 41.2387 28.0574 39.5547 28.7727C37.6946 29.5629 35.6482 30 33.4998 30C24.9393 30 17.9998 23.0604 17.9998 14.5C17.9998 12.3516 18.4368 10.3054 19.2269 8.44529Z" 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="M15.7999 9.10393C15.2792 10.8136 14.9998 12.6262 14.9998 14.5C14.9998 24.7173 23.2825 33 33.4998 33C35.3736 33 37.1863 32.7205 38.8961 32.1997C36.0002 37.4492 30.4118 41 23.9999 41C14.6111 41 6.99994 33.3888 6.99994 24C6.99994 17.5882 10.5506 11.9999 15.7999 9.10393ZM19.2269 8.44529C19.9422 6.76131 18.6844 4.6268 16.9715 5.26983C9.39313 8.11493 3.99994 15.4276 3.99994 24C3.99994 35.0457 12.9542 44 23.9999 44C32.5724 44 39.8852 38.6066 42.7302 31.028C43.3732 29.3151 41.2387 28.0574 39.5547 28.7727C37.6946 29.5629 35.6482 30 33.4998 30C24.9393 30 17.9998 23.0604 17.9998 14.5C17.9998 12.3516 18.4368 10.3054 19.2269 8.44529Z" 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="M15.7999 9.10393C15.2792 10.8136 14.9998 12.6262 14.9998 14.5C14.9998 24.7173 23.2825 33 33.4998 33C35.3736 33 37.1863 32.7205 38.8961 32.1997C36.0002 37.4492 30.4118 41 23.9999 41C14.6111 41 6.99994 33.3888 6.99994 24C6.99994 17.5882 10.5506 11.9999 15.7999 9.10393ZM19.2269 8.44529C19.9422 6.76131 18.6844 4.6268 16.9715 5.26983C9.39313 8.11493 3.99994 15.4276 3.99994 24C3.99994 35.0457 12.9542 44 23.9999 44C32.5724 44 39.8852 38.6066 42.7302 31.028C43.3732 29.3151 41.2387 28.0574 39.5547 28.7727C37.6946 29.5629 35.6482 30 33.4998 30C24.9393 30 17.9998 23.0604 17.9998 14.5C17.9998 12.3516 18.4368 10.3054 19.2269 8.44529Z" 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="M15.7999 9.10393C15.2792 10.8136 14.9998 12.6262 14.9998 14.5C14.9998 24.7173 23.2825 33 33.4998 33C35.3736 33 37.1863 32.7205 38.8961 32.1997C36.0002 37.4492 30.4118 41 23.9999 41C14.6111 41 6.99994 33.3888 6.99994 24C6.99994 17.5882 10.5506 11.9999 15.7999 9.10393ZM19.2269 8.44529C19.9422 6.76131 18.6844 4.6268 16.9715 5.26983C9.39313 8.11493 3.99994 15.4276 3.99994 24C3.99994 35.0457 12.9542 44 23.9999 44C32.5724 44 39.8852 38.6066 42.7302 31.028C43.3732 29.3151 41.2387 28.0574 39.5547 28.7727C37.6946 29.5629 35.6482 30 33.4998 30C24.9393 30 17.9998 23.0604 17.9998 14.5C17.9998 12.3516 18.4368 10.3054 19.2269 8.44529Z" 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="M15.2611 11.1508C15.0891 12.1922 14.9998 13.2603 14.9998 14.3476C14.9998 25.1172 23.7302 33.8476 34.4998 33.8476C35.5872 33.8476 36.6554 33.7583 37.697 33.5862C34.77 37.3959 30.1685 39.8476 24.9999 39.8476C16.1634 39.8476 8.99994 32.6842 8.99994 23.8476C8.99994 18.6792 11.4516 14.0777 15.2611 11.1508ZM20.2269 8.29294C20.9422 6.60897 19.6844 4.47445 17.9715 5.11749C10.3931 7.96258 4.99994 15.2753 4.99994 23.8476C4.99994 34.8933 13.9542 43.8476 24.9999 43.8476C33.5724 43.8476 40.8852 38.4543 43.7302 30.8757C44.3732 29.1628 42.2387 27.9051 40.5547 28.6204C38.6946 29.4105 36.6482 29.8476 34.4998 29.8476C25.9393 29.8476 18.9998 22.9081 18.9998 14.3476C18.9998 12.1993 19.4368 10.153 20.2269 8.29294Z" 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="M15.2611 11.1508C15.0891 12.1922 14.9998 13.2603 14.9998 14.3476C14.9998 25.1172 23.7302 33.8476 34.4998 33.8476C35.5872 33.8476 36.6554 33.7583 37.697 33.5862C34.77 37.3959 30.1685 39.8476 24.9999 39.8476C16.1634 39.8476 8.99994 32.6842 8.99994 23.8476C8.99994 18.6792 11.4516 14.0777 15.2611 11.1508ZM20.2269 8.29294C20.9422 6.60897 19.6844 4.47445 17.9715 5.11749C10.3931 7.96258 4.99994 15.2753 4.99994 23.8476C4.99994 34.8933 13.9542 43.8476 24.9999 43.8476C33.5724 43.8476 40.8852 38.4543 43.7302 30.8757C44.3732 29.1628 42.2387 27.9051 40.5547 28.6204C38.6946 29.4105 36.6482 29.8476 34.4998 29.8476C25.9393 29.8476 18.9998 22.9081 18.9998 14.3476C18.9998 12.1993 19.4368 10.153 20.2269 8.29294Z" 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="M15.7999 9.10393C15.2792 10.8136 14.9998 12.6262 14.9998 14.5C14.9998 24.7173 23.2825 33 33.4998 33C35.3736 33 37.1863 32.7205 38.8961 32.1997C36.0002 37.4492 30.4118 41 23.9999 41C14.6111 41 6.99994 33.3888 6.99994 24C6.99994 17.5882 10.5506 11.9999 15.7999 9.10393ZM19.2269 8.44529C19.9422 6.76131 18.6844 4.6268 16.9715 5.26983C9.39313 8.11493 3.99994 15.4276 3.99994 24C3.99994 35.0457 12.9542 44 23.9999 44C32.5724 44 39.8852 38.6066 42.7302 31.028C43.3732 29.3151 41.2387 28.0574 39.5547 28.7727C37.6946 29.5629 35.6482 30 33.4998 30C24.9393 30 17.9998 23.0604 17.9998 14.5C17.9998 12.3516 18.4368 10.3054 19.2269 8.44529Z" 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="M15.7999 9.10393C15.2792 10.8136 14.9998 12.6262 14.9998 14.5C14.9998 24.7173 23.2825 33 33.4998 33C35.3736 33 37.1863 32.7205 38.8961 32.1997C36.0002 37.4492 30.4118 41 23.9999 41C14.6111 41 6.99994 33.3888 6.99994 24C6.99994 17.5882 10.5506 11.9999 15.7999 9.10393ZM19.2269 8.44529C19.9422 6.76131 18.6844 4.6268 16.9715 5.26983C9.39313 8.11493 3.99994 15.4276 3.99994 24C3.99994 35.0457 12.9542 44 23.9999 44C32.5724 44 39.8852 38.6066 42.7302 31.028C43.3732 29.3151 41.2387 28.0574 39.5547 28.7727C37.6946 29.5629 35.6482 30 33.4998 30C24.9393 30 17.9998 23.0604 17.9998 14.5C17.9998 12.3516 18.4368 10.3054 19.2269 8.44529Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/description/index.tsx

@@ -1,40 +1,41 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface DescriptionProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Description = ({ fill = false, thick = false, size = 24 }: DescriptionProps) => {
+export const Description = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: DescriptionProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 21.5H16V18.5H20V21.5Z" fill="currentColor"/>
-<path d="M32 29H16V26H32V29Z" fill="currentColor"/>
-<path d="M16 36.5H32V33.5H16V36.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V42C39 43.1046 38.1045 44 37 44ZM36 21.5769V41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36ZM25.501 10.0057L33.4976 18.5769H26.001C25.7248 18.5769 25.501 18.3531 25.501 18.0769V10.0057Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21.5H16V18.5H20V21.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M32 29H16V26H32V29Z" style={{ fill: `var(--${color})` }}/>
+<path d="M16 36.5H32V33.5H16V36.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V42C39 43.1046 38.1045 44 37 44ZM36 21.5769V41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36ZM25.501 10.0057L33.4976 18.5769H26.001C25.7248 18.5769 25.501 18.3531 25.501 18.0769V10.0057Z" 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="M11 5.5H21.001V18.0771C21.0011 20.8385 23.2396 23.0771 26.001 23.0771H37.5V42C37.5 42.2761 37.2761 42.5 37 42.5H11C10.7239 42.5 10.5 42.2761 10.5 42V6C10.5 5.72386 10.7239 5.5 11 5.5ZM13.5 38H34.5V32H13.5V38ZM13.5 31H34.5V25H13.5V31ZM13.5 23H21V17H13.5V23ZM34.1494 17.0771H27.001V9.41406L34.1494 17.0771Z" fill="currentColor" stroke="currentColor" stroke-width="3"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 5.5H21.001V18.0771C21.0011 20.8385 23.2396 23.0771 26.001 23.0771H37.5V42C37.5 42.2761 37.2761 42.5 37 42.5H11C10.7239 42.5 10.5 42.2761 10.5 42V6C10.5 5.72386 10.7239 5.5 11 5.5ZM13.5 38H34.5V32H13.5V38ZM13.5 31H34.5V25H13.5V31ZM13.5 23H21V17H13.5V23ZM34.1494 17.0771H27.001V9.41406L34.1494 17.0771Z" style={{ fill: `var(--${color})` }} stroke="#1E1E1F" stroke-width="3"/>
 </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="M20 22H16V18H20V22Z" fill="currentColor"/>
-<path d="M32 29.5H16V25.5H32V29.5Z" fill="currentColor"/>
-<path d="M16 37H32V33H16V37Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V42C39 43.1046 38.1045 44 37 44ZM35 22.0769V40H13V8H22.001V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H35ZM26.001 12.0076L31.6635 18.0769L26.001 18.0769V12.0076Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 22H16V18H20V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M32 29.5H16V25.5H32V29.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M16 37H32V33H16V37Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V42C39 43.1046 38.1045 44 37 44ZM35 22.0769V40H13V8H22.001V18.0769C22.001 20.2861 23.7918 22.0769 26.001 22.0769H35ZM26.001 12.0076L31.6635 18.0769L26.001 18.0769V12.0076Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 21.5H16V18.5H20V21.5Z" fill="currentColor"/>
-<path d="M32 29H16V26H32V29Z" fill="currentColor"/>
-<path d="M16 36.5H32V33.5H16V36.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V42C39 43.1046 38.1045 44 37 44ZM36 21.5769V41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36ZM25.501 10.0057L33.4976 18.5769H26.001C25.7248 18.5769 25.501 18.3531 25.501 18.0769V10.0057Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21.5H16V18.5H20V21.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M32 29H16V26H32V29Z" style={{ fill: `var(--${color})` }}/>
+<path d="M16 36.5H32V33.5H16V36.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M37 44H11C9.89543 44 9 43.1046 9 42V6C9 4.89543 9.89543 4 11 4H23.1314C23.6859 4 24.2155 4.23021 24.5938 4.63565L38.4623 19.5007C38.8078 19.871 39 20.3586 39 20.865V42C39 43.1046 38.1045 44 37 44ZM36 21.5769V41H12V7H22.501V18.0769C22.501 20.0099 24.068 21.5769 26.001 21.5769H36ZM25.501 10.0057L33.4976 18.5769H26.001C25.7248 18.5769 25.501 18.3531 25.501 18.0769V10.0057Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };